/* Login page custom styles */
html, body { height: 100%; }
body{ font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans'; }

/* Panel derecho con patrón de cuadrícula sutil */
.grid-pattern{
    background-image:
        radial-gradient(transparent 0, transparent 1px, rgba(255,255,255,0.04) 1px, rgba(255,255,255,0.04) 2px),
        linear-gradient(to bottom right, rgba(255,255,255,0.06), rgba(255,255,255,0));
    background-size: 24px 24px, 100% 100%;
    background-position: -2px -2px, center;
}
.dark .grid-pattern{
    background-image:
        radial-gradient(transparent 0, transparent 1px, rgba(255,255,255,0.04) 1px, rgba(255,255,255,0.04) 2px),
        linear-gradient(to bottom right, rgba(255,255,255,0.04), rgba(255,255,255,0));
}

/* Botón social */
.btn-social{
    display:flex; align-items:center; gap:0.5rem; width:100%; justify-content:center;
    border:1px solid #e2e8f0; border-radius:0.75rem; padding:0.625rem 0.75rem;
    font-size:14px; color:#475569; background:#ffffff; transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-social:hover{ background:#f8fafc; }
.dark .btn-social{ border-color:#334155; color:#cbd5e1; background:#0f172a; }
.dark .btn-social:hover{ background:#111827; }

/* Inputs en tema oscuro: fondo más profundo, borde y placeholder similares a la maqueta */
.dark input[type="email"],
.dark input[type="password"],
.dark input:not([type]),
.dark .form-control{
    background-color:#0f1a2b; /* navy profundo */
    border-color:#334155;     /* slate-700 aprox */
    color:#e2e8f0;            /* slate-200 */
}
.dark input::placeholder{ color:#94a3b8; opacity:1; }
.dark input:focus{
    border-color:#60a5fa; /* azul claro */
    box-shadow:0 0 0 3px rgba(96,165,250,.25);
}

/* Divisores en dark un poco más sutiles */
.dark .h-px{ background-color:#1f2a44; }

/* Panel derecho: ajustar colores en dark para igualar la referencia */
.right-panel{
    background-color:#1e2a4a; /* base para tema claro del panel (se ve azul indigo) */
    color:#ffffff;
}
.dark .right-panel{
    background-color:#111826; /* más cercano a slate-900 azulado */
}
/* Grid pattern ya existe; solo ajustar su visibilidad en dark */
.dark .right-panel.grid-pattern{
    background-image:
        radial-gradient(transparent 0, transparent 1px, rgba(255,255,255,0.05) 1px, rgba(255,255,255,0.05) 2px),
        linear-gradient(to bottom right, rgba(255,255,255,0.03), rgba(255,255,255,0));
}

/* Textos secundarios del panel derecho */
.right-panel p{ color: rgba(255,255,255,0.8); }
.right-panel p + p{ color: rgba(255,255,255,0.7); }

/* Botón flotante de tema: mantener buen contraste en dark */
.right-panel #btn-theme{ box-shadow: 0 10px 20px rgba(0,0,0,.25); }
.dark .right-panel #btn-theme{ background-color:#3b82f6; }