/* Nova Gestion Clientes — paleta y tipografias de Novaminer.
   Desktop primero. En celular se ve bien; optimizarlo no es prioridad.
   Ninguna referencia externa: el CSP declara default-src 'none'. */

:root {
  --navy:    #0d1b2a;
  --naranja: #f7931a;
  --azul:    #2a5f9e;
  --cream:   #f8f9fb;
  --muted:   #5a6a7a;
  --borde:   #c0c8d0;
  --superficie: #f5f6f8;
}

/* Las fuentes se sirven desde acá, no desde Google. Ademas de sacar una
   dependencia externa y una fuga de privacidad, aprieta el CSP: style-src y
   font-src quedan en 'self' a secas.
   Si los .woff2 no estan, la cadena de respaldo del sistema toma el lugar y la
   pagina sigue legible — degrada, no se rompe. */
@font-face { font-family: 'Space Grotesk'; src: url('fuentes/space-grotesk-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Manrope';       src: url('fuentes/manrope-400.woff2')       format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Manrope';       src: url('fuentes/manrope-600.woff2')       format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Inter';         src: url('fuentes/inter-600.woff2')         format('woff2'); font-weight: 600; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

h1 { font-family: 'Space Grotesk', Georgia, serif; font-weight: 600; font-size: 26px; margin: 0 0 4px; }

.sub  { color: var(--muted); margin: 0 0 24px; max-width: 62ch; }
.nota { color: var(--muted); font-size: 13px; margin-top: 32px; }

/* --- barra superior ------------------------------------------------------ */
.barra {
  display: flex; align-items: center; gap: 28px;
  background: var(--navy); color: #fff;
  padding: 0 24px; height: 56px;
}
.marca { display: flex; align-items: center; gap: 9px; color: var(--naranja); text-decoration: none;
         font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: .09em; font-size: 13px; }
.nav { display: flex; gap: 18px; flex: 1; }
.nav a { color: rgba(255,255,255,.85); text-decoration: none; font-family: 'Inter', sans-serif;
         font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.nav a.activo { color: #fff; border-bottom: 2px solid var(--naranja); padding-bottom: 2px; }
.sesion { display: flex; align-items: center; gap: 16px; }
.quien { color: rgba(255,255,255,.8); font-size: 13px; }
.salir { color: var(--naranja); text-decoration: none; font-family: 'Inter', sans-serif;
         font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }

.contenido { max-width: 1080px; margin: 40px auto; padding: 0 24px; }
.pie { color: var(--muted); font-size: 12px; text-align: center; padding: 32px 0 48px; }

/* --- tarjetas de la pantalla de inicio ----------------------------------- */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; padding: 20px; }
.cifra  { display: block; font-family: 'Space Grotesk', Georgia, serif; font-weight: 600;
          font-size: 38px; line-height: 1.1; color: var(--naranja); }
.rotulo { display: block; color: var(--muted); font-size: 12px; letter-spacing: .06em;
          text-transform: uppercase; font-family: 'Inter', sans-serif; margin-top: 6px; }

/* --- login --------------------------------------------------------------- */
.tarjeta-login {
  max-width: 380px; margin: 12vh auto 0; background: #fff;
  border: 1px solid var(--borde); border-radius: 12px; padding: 36px 32px 32px;
}
.tarjeta-login h1 { font-size: 30px; }
.tarjeta-login .sub { margin-bottom: 26px; font-size: 14px; }

label { display: block; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600;
        letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 16px 0 6px; }

input[type="email"], input[type="password"] {
  width: 100%; padding: 10px 12px; font: inherit; color: var(--navy);
  background: var(--cream); border: 1px solid var(--borde); border-radius: 7px;
}
input:focus { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }

button {
  width: 100%; margin-top: 26px; padding: 12px 16px; cursor: pointer;
  background: var(--naranja); color: var(--navy); border: 0; border-radius: 7px;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
}
button:hover { filter: brightness(1.06); }

/* El error se marca con borde y fondo, no con naranja: el naranja es de lo
   accionable y nunca color de parrafo. */
.error {
  background: #fdecec; border: 1px solid #e6b3b3; border-radius: 7px;
  padding: 10px 12px; margin: 0 0 4px; font-size: 14px; color: #7a2020;
}