/* ==========================================================================
   KIT BASE GJVcorp — marca/base.css
   ==========================================================================
   Proyecto : GJVcorp COTIZADOR (cotIR) — DataRecupera
   Norma    : ESTANDAR GJVcorp v1.2, secciones 7.1 a 7.9
   Version  : v136

   QUE ES ESTE ARCHIVO
   -------------------
   La CAPA BASE del modelo de dos capas de la seccion 7.1: tokens neutros,
   escala tipografica, escala de espaciado, radios, sombras, semantica de color
   y estados. El kit de PRODUCTO (el acento verde de DataRecupera) lo EXTIENDE
   al final del archivo; nunca lo sustituye.

   ESTE ES EL UNICO ORIGEN DE COLOR DEL PROYECTO (seccion 7.1).
   Ninguna otra hoja, ni index.html, ni app.js, declaran un color literal.

   ORDEN DE CARGA
   --------------
       marca/base.css     <- este archivo (capa base + acento del producto)
       styles.css         <- reglas del proyecto, consumen SOLO var(--gjv-*)

   SOBRE LAS FUENTES (seccion 7.8.1)
   ---------------------------------
   Inter se sirve desde assets/fonts/ (copia local), NO desde Google Fonts.
   Asi la pagina no depende de la red para su tipografia de marca. Ver el
   apartado de @font-face mas abajo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FUENTES LOCALES — Inter (SIL Open Font License, ver assets/fonts/OFL-Inter.txt)
   --------------------------------------------------------------------------
   Las cuatro declaraciones cargan los .ttf que YA estaban en el proyecto y que
   hasta la v135 no usaba nadie: el CSS pedia 'Inter' y no habia @font-face, asi
   que el navegador caia a Arial (o, si habia red, a Google Fonts).
   font-display: swap -> el texto se ve de inmediato con la fuente de respaldo y
   cambia a Inter cuando termina de cargar; nunca queda texto invisible.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/Inter-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/Inter-Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/Inter-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/Inter-BoldItalic.ttf') format('truetype');
}

/* ==========================================================================
   TOKENS — seccion 7.2
   ========================================================================== */
:root {
  /* --- COLOR: neutros y semanticos (seccion 7.2) --- */
  --gjv-navy:          #0F172A;   /* Texto principal, barras de marca */
  --gjv-texto-2:       #64748B;   /* Texto secundario */
  --gjv-texto-3:       #94A3B8;   /* Deshabilitado */
  --gjv-borde:         #E2E8F0;   /* Bordes */
  --gjv-borde-fuerte:  #CBD5E1;   /* Bordes de campos y controles */
  --gjv-fondo:         #F8FAFC;   /* Fondo de aplicacion */
  --gjv-superficie:    #FFFFFF;   /* Tarjetas y paneles */
  --gjv-banda:         #F1F5F9;   /* Cabeceras de tabla */

  /* Semantica fija (seccion 7.3): verde correcto, ambar advertencia,
     rojo error, azul informacion. */
  --gjv-exito:         #16A34A;
  --gjv-alerta:        #F59E0B;
  --gjv-peligro:       #DC2626;
  --gjv-info:          #2563EB;

  /* --- TIPOGRAFIA (seccion 7.2) --- */
  --gjv-fuente:        "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gjv-fuente-mono:   "IBM Plex Mono", Consolas, "Courier New", monospace;

  --gjv-t-11: 11px;   /* Rotulos en mayusculas con espaciado */
  --gjv-t-12: 12px;   /* Notas y tablas densas */
  --gjv-t-14: 14px;   /* Cuerpo */
  --gjv-t-16: 16px;   /* Subtitulo */
  --gjv-t-20: 20px;   /* Titulo de seccion */
  --gjv-t-28: 28px;   /* Titulo de pagina */
  --gjv-t-36: 36px;   /* Portada */

  /* --- ESPACIADO (seccion 7.2) --- */
  --gjv-e-1: 4px;
  --gjv-e-2: 8px;
  --gjv-e-3: 12px;
  --gjv-e-4: 16px;
  --gjv-e-5: 24px;
  --gjv-e-6: 32px;
  --gjv-e-7: 48px;
  --gjv-e-8: 64px;

  /* --- FORMA Y PROFUNDIDAD (seccion 7.2) --- */
  --gjv-r-sm: 8px;
  --gjv-r-md: 12px;
  --gjv-r-lg: 16px;

  --gjv-sombra-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --gjv-sombra-md: 0 8px 24px rgba(15, 23, 42, .08);

  --gjv-alto-control: 32px;

  /* --- FOCO (seccion 7.2) --- */
  --gjv-foco: 0 0 0 3px rgba(37, 99, 235, .35);
}

/* ==========================================================================
   KIT DE PRODUCTO — DataRecupera (seccion 7.1)
   ==========================================================================
   El acento del producto EXTIENDE la base. El verde es la identidad de
   DataRecupera y viene del ecosistema GJVcorp.

   CONTRASTE MEDIDO (seccion 7.3 exige 4,5:1 en texto), sobre --gjv-fondo:
       --gjv-acento          #16A34A  ->  3,15:1   SOLO elementos graficos
       --gjv-acento-oscuro   #15803D  ->  4,79:1   APTO para texto
       --gjv-acento-profundo #14532D  ->  8,71:1   APTO, alta legibilidad
       blanco sobre #16A34A           ->  3,30:1   NO apto para texto
       blanco sobre #15803D           ->  5,02:1   APTO

   REGLA QUE SE DERIVA DE LA MEDICION, y es la trampa mas facil de pisar:
   #16A34A NO se usa nunca como color de TEXTO sobre fondo claro. Para texto
   de acento se usa --gjv-acento-oscuro (#15803D). #16A34A se reserva a
   rellenos, barras, bordes, iconos y trazos.
   ========================================================================== */
:root {
  --gjv-acento:          #16A34A;   /* Accion principal, pestana activa, foco */
  --gjv-acento-oscuro:   #15803D;   /* Hover y TEXTO de acento */
  --gjv-acento-tenue:    #DCFCE7;   /* Fondos de seleccion */
  --gjv-acento-profundo: #14532D;   /* Cabeceras del PDF y canto de boton */
}

/* Texto blanco sobre acento: se usa el tono oscuro para alcanzar 5,02:1.
   (Sobre #16A34A el blanco solo da 3,30:1 y no cumple para texto.) */
:root {
  --gjv-sobre-acento: #FFFFFF;
}

/* ==========================================================================
   COMPONENTES BASE
   ==========================================================================
   Solo lo minimo y compartido: tipografia, foco visible y estados
   (secciones 7.5 y 7.7). Las reglas concretas del cotizador viven en
   styles.css y consumen estos tokens.
   ========================================================================== */

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

body {
  margin: 0;
  font-family: var(--gjv-fuente);
  font-size: var(--gjv-t-14);
  line-height: 1.5;
  color: var(--gjv-navy);
  background-color: var(--gjv-fondo);
  -webkit-font-smoothing: antialiased;
}

/* --- Foco visible en todo lo interactivo (seccion 7.7) ---
   :focus-visible y no :focus, para no dibujar el anillo al hacer clic con el
   raton. El recorrido por teclado queda siempre visible. */
:focus-visible {
  outline: 2px solid var(--gjv-info);
  outline-offset: 2px;
  box-shadow: var(--gjv-foco);
}

/* --- Estados de control (seccion 7.5) --- */
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: var(--gjv-t-14);
}

button {
  min-height: var(--gjv-alto-control);
  cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: .55;
}

/* --- Accesibilidad: solo para lectores de pantalla (seccion 7.7) --- */
.gjv-solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Tabla ancha con desplazamiento horizontal (seccion 7.8.1) --- */
.gjv-tabla-desplazable {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- Estado vacio con texto util (seccion 7.5) --- */
.gjv-vacio {
  padding: var(--gjv-e-6) var(--gjv-e-4);
  text-align: center;
  color: var(--gjv-texto-2);
  font-size: var(--gjv-t-14);
}

/* ==========================================================================
   HOJA DE IMPRESION (seccion 7.8.2)
   ==========================================================================
   El PDF es la salida comercial del producto. Estas reglas NO son un adorno:
   sin print-color-adjust el navegador elimina los fondos y la propuesta
   perderia su banner, su tabla de totales y sus alertas.
   Excepcion de la seccion 7.3: la hoja de impresion puede usar colores
   literales; aqui se mantienen en tokens porque tambien se imprimen bien.
   ========================================================================== */
@media print {
  body {
    background: var(--gjv-superficie);
    color: var(--gjv-navy);
  }

  /* Preservar los colores de marca al imprimir */
  *,
  *::before,
  *::after {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    color-adjust: exact;
  }

  /* Margenes de pagina explicitos (seccion 7.8.5: 12 mm / 10 mm) */
  @page {
    size: Letter portrait;
    margin: 12mm 10mm;
  }

  /* La cabecera de tabla se repite en cada pagina y las filas no se parten */
  thead {
    display: table-header-group;
  }
  tfoot {
    display: table-footer-group;
  }
  tr,
  thead,
  tfoot {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .gjv-no-imprimir {
    display: none !important;
  }
}