/* Las paginas publicas chicas (cuenta.php): una tarjeta en el medio, pensada para el celular, con tema claro y oscuro. Mismo aspecto que informe.php. */
:root{ --marca:#2C3090; --accion:#00A450; --tinta:#1B1E3A; --tinta2:#5B6078; --fondo:#F4F5FB; --hoja:#fff; --linea:#D9DCEC; --mal:#B3261E; --mal-suave:#FBEAE8; --bien:#0B6B3A; --bien-suave:#E3F5EA; }
@media (prefers-color-scheme: dark){ :root{ --tinta:#EEF0FF; --tinta2:#A9AFCC; --fondo:#0F1124; --hoja:#191C36; --linea:#2D3157; --mal:#FFB4AB; --mal-suave:#3A1D1B; --marca:#8F95F0; --bien:#8FE0AE; --bien-suave:#143524; } }
*{ box-sizing:border-box; }
body{ margin:0; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px; background:var(--fondo); color:var(--tinta); font:16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main{ width:100%; max-width:420px; padding:26px 24px; border-radius:18px; background:var(--hoja); border:1px solid var(--linea); box-shadow:0 14px 40px rgba(20,24,70,.10); }
main.ancho{ max-width:880px; }
.lab{ display:flex; align-items:center; gap:10px; margin:0 0 18px; font-weight:700; color:var(--marca); }
.lab i{ width:22px; height:22px; border-radius:50%; border:5px solid var(--accion); display:inline-block; }
h1{ margin:0 0 6px; font-size:22px; line-height:1.25; }
p{ margin:0 0 14px; color:var(--tinta2); }
label{ display:block; font-size:13px; font-weight:600; margin:0 0 6px; color:var(--tinta); }
input, select, textarea{ width:100%; font:inherit; font-size:17px; padding:12px 14px; border-radius:12px; border:1.5px solid var(--linea); background:var(--hoja); color:var(--tinta); }
input[type=checkbox]{ width:18px; height:18px; padding:0; accent-color:var(--accion); }
input:focus, select:focus, textarea:focus{ outline:3px solid color-mix(in srgb, var(--accion) 35%, transparent); border-color:var(--accion); }
button, .boton{ display:block; width:100%; margin-top:14px; font:inherit; font-weight:700; font-size:17px; padding:13px; border:0; border-radius:12px; background:var(--accion); color:#fff; cursor:pointer; text-align:center; text-decoration:none; }
button:active{ transform:scale(.99); }
button.chico, .boton.chico{ display:inline-block; width:auto; margin:0; padding:7px 12px; font-size:14px; }
button.otro, .boton.otro{ background:transparent; color:var(--tinta); border:1.5px solid var(--linea); }
.error{ padding:10px 12px; border-radius:10px; background:var(--mal-suave); color:var(--mal); font-size:14.5px; }
.bien{ padding:10px 12px; border-radius:10px; background:var(--bien-suave); color:var(--bien); font-size:14.5px; }
.pie{ margin:18px 0 0; font-size:12.5px; } a{ color:var(--marca); }