/* frontend/css/styles.css */

html {
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: #f8fafc; /* Color base: Slate-50 */
    /* Creamos una malla de puntos muy sutil (estilo futurista) */
    background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
    background-size: 32px 32px;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* Si quieres un toque de color, que sea un resplandor gigante en una esquina, no manchas */
body::before {
    content: "";
    position: fixed;
    top: -10%;
    right: -10%;
    width: 50%;
    height: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.03) 0%, transparent 70%);
    z-index: -1;
}

/* Responsive: páginas que usan styles.css (login, register, etc.) */
@media (max-width: 640px) {
    body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}