/* La puerta del proveedor. La misma cara que el sistema de ADCO (Mercadotecnia, 15 y 16 de octubre de
   2026): el azul marino y el dorado de ADCO sobre fondo claro, tarjetas blancas de esquina amplia, sombra
   apenas, y un solo botón lleno por paso.

   PESA POCO A PROPOSITO. Quien abre esto es un proveedor, muchas veces desde su telefono y con la senal
   de una obra. Cero bibliotecas, cero tipografias traidas de fuera: se usa la letra propia del telefono
   (system-ui), que ya vive en el aparato y pinta al instante. */
:root {
  --navy: #1a365d;
  --navy-hondo: #12284a;
  --dorado: #d4a012;      /* sólo sobre el azul marino */
  --dorado-texto: #8a6200; /* el dorado que se lee sobre blanco */
  --liga: #24508a;
  --fondo: #f1f5f9;
  --texto: #1e293b;
  --tenue: #5b6b80;
  --linea: #e2e8f0;
  --borde: #cbd5e1;
  --verde: #15803d;
  --rojo: #b91c1c;
  --ambar: #a16207;
  --letra: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 15px/1.5 var(--letra);
  -webkit-text-size-adjust: 100%;
}
a { color: var(--liga); text-underline-offset: 2px; }
.hoja { max-width: 680px; margin: 0 auto; padding: 20px 14px 48px; }
.tarjeta { background: #fff; border-radius: 16px; overflow: hidden;
           border: 1px solid var(--linea); box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.banda { position: relative; background: var(--navy); padding: 14px 20px; min-height: 56px; }
.banda .marca { color: var(--dorado); font-size: 17px; letter-spacing: 3px; font-weight: 700; line-height: 1.3; }
.banda .pie { color: #cbd5e1; font-size: 12.5px; padding-top: 1px; }
.cuerpo { padding: 20px 20px 24px; }
h1 { font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; margin: 0 0 10px; color: #0f1f38; overflow-wrap: anywhere; }
h2 { font-size: 16px; line-height: 1.3; font-weight: 650; margin: 26px 0 10px; color: #0f1f38; }
h3 { font-size: 13.5px; font-weight: 600; color: var(--tenue); margin: 18px 0 8px; }
p { margin: 0 0 12px; }
.tenue { color: var(--tenue); font-size: 13px; }
label { display: block; font-size: 13px; color: var(--tenue); margin-bottom: 5px; }
/* 🔴 LOS DOS CAMPOS, Y JAMAS SOLO EL DEL CORREO: el de la clave se quedaba con
   el tamaño de fabrica del navegador. Medido el 29 de agosto de 2026. */
input[type=email],
input[type=text],
input[type=date] {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 16px; color: var(--texto);
  border: 1px solid var(--borde); border-radius: 10px; background: #fff;
  box-sizing: border-box;
}
input:focus-visible { outline: 2px solid var(--liga); outline-offset: 1px; border-color: var(--liga); }
/* La clave son 64 caracteres seguidos, y en monoespaciado se distingue el cero
   de la o. */
input#clave-campo {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 13px; letter-spacing: .02em; padding: 12px;
}

/* ── Botones ──────────────────────────────────────────────────────────────────
 * El principal va lleno, en píldora azul marino; los demás, blancos con borde. */
button, a.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--navy); color: #fff; border: 1px solid var(--navy); border-radius: 999px;
  padding: 11px 22px; min-height: 44px; font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: none; line-height: 1.2;
}
button:hover, a.boton:hover { background: var(--navy-hondo); }
button:focus-visible, a.boton:focus-visible, .boton-archivo:focus-within { outline: 2px solid var(--dorado); outline-offset: 2px; }
button:disabled { opacity: .55; cursor: default; }
button.tenue, button.tenue-grande { background: #fff; color: var(--navy); border: 1px solid var(--borde); }
button.tenue { padding: 8px 16px; min-height: 38px; font-size: 13.5px; }
button.tenue:hover, button.tenue-grande:hover { background: #f6f8fb; border-color: var(--navy); }
/* Escoger entre varios expedientes. Cada uno ocupa su renglón completo, con la
   razón social grande, porque escoger mal manda al proveedor a llenar el
   expediente equivocado. */
button.cual { display: block; width: 100%; text-align: left; background: #fff;
              color: var(--navy); border: 1px solid var(--borde); border-radius: 14px; padding: 14px 16px;
              font-size: 15px; font-weight: 400; line-height: 1.45; }
button.cual:hover { border-color: var(--navy); background: #f8fafc; }

/* Salir y la navegación entre las dos pantallas del proveedor. */
.salir { position: absolute; top: 12px; right: 14px; background: rgba(255,255,255,.1);
         color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 999px;
         padding: 5px 14px; min-height: 32px; font-size: 12.5px; font-weight: 500; }
.salir:hover { background: rgba(255,255,255,.2); }
.salir.oculto { display: none; }
.navegar { display: flex; gap: 4px; padding: 10px 14px 0; border-bottom: 1px solid var(--linea); }
.navegar a { padding: 8px 10px 9px; font-size: 14px; color: var(--tenue); text-decoration: none;
             border-bottom: 2px solid transparent; margin-bottom: -1px; }
.navegar a:hover { color: var(--navy); }
.navegar a.aqui { color: var(--navy); font-weight: 650; border-bottom-color: var(--dorado); }

/* ── Avisos ───────────────────────────────────────────────────────────────────
 * Una caja de fondo suave con su borde completo; el color dice si es bueno o malo. */
.aviso { padding: 12px 14px; border-radius: 12px; background: #f6f8fb; border: 1px solid var(--linea); margin: 14px 0; }
.aviso.malo { background: #fef2f2; border-color: #fecaca; }
.aviso.bueno { background: #f0fdf4; border-color: #bbf7d0; }
/* Lo que le toca al proveedor, dicho arriba de todo: lo primero que lee. */
.aviso.toca { background: #fffbeb; border-color: #f3dc9a; font-size: 15px; }

.dato { display: flex; gap: 10px; font-size: 13.5px; padding: 2px 0; }
.dato b { min-width: 110px; color: var(--tenue); font-weight: 400; }
.datos-chicos { margin: 0 0 4px; }

/* ── Cada documento, cada contrato ───────────────────────────────────────── */
.req { border: 1px solid var(--linea); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; background: #fff; }
.req .cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.req .nombre { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.req.por-hacer { border-color: #d6dde7; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.req.hecho { padding: 11px 16px; }
.req.hecho .nombre { font-weight: 500; }
.marca-estado {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--linea); color: var(--tenue);
}
.marca-estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.marca-estado.aprobado { background: #dcfce7; color: var(--verde); }
.marca-estado.rechazado { background: #fee2e2; color: var(--rojo); }
.marca-estado.vencido  { background: #fef3c7; color: var(--ambar); }
.marca-estado.pendiente { background: #e0e7ff; color: #3730a3; }
.marca-estado.sin_subir { background: #fef3c7; color: var(--dorado-texto); }
.motivo { margin-top: 10px; font-size: 13.5px; padding: 10px 12px; border-radius: 10px; background: #fef2f2; border: 1px solid #fecaca; }
.archivo { margin-top: 8px; font-size: 13px; color: var(--tenue); overflow-wrap: anywhere; }
.subir { margin-top: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pie-pagina { text-align: center; color: var(--tenue); font-size: 12px; padding-top: 18px; }

/* Lo ya aprobado se pliega: está resuelto, y abajo estorba poco. */
details.plegado { margin-top: 18px; border: 1px solid var(--linea); border-radius: 14px; background: #fafbfc; }
details.plegado > summary { cursor: pointer; padding: 12px 16px; font-weight: 600; font-size: 14px; color: var(--navy);
                            list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
details.plegado > summary::-webkit-details-marker { display: none; }
details.plegado > summary::after { content: "Abrir"; font-weight: 500; font-size: 13px; color: var(--liga); }
details.plegado[open] > summary::after { content: "Cerrar"; }
details.plegado > .dentro { padding: 0 12px 4px; }

/* El selector de archivo va escondido y su etiqueta hace de botón: el nativo
   escribe "Choose File" y "No file chosen" en inglés, y eso lo pone el
   navegador sin forma de traducirlo. */
.oculto { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.boton-archivo {
  display: inline-flex; align-items: center; justify-content: center; margin: 0; cursor: pointer;
  background: #fff; color: var(--navy); border: 1px solid var(--borde);
  border-radius: 999px; padding: 8px 18px; min-height: 40px; font-size: 14px; font-weight: 600;
}
.boton-archivo:hover { background: #f6f8fb; border-color: var(--navy); }
/* Donde el documento le toca al proveedor, subirlo es la acción principal y va llena. */
.por-hacer .boton-archivo { background: var(--navy); color: #fff; border-color: var(--navy); }
.por-hacer .boton-archivo:hover { background: var(--navy-hondo); }
.escogido { max-width: 100%; overflow-wrap: anywhere; }
.archivo a { color: var(--liga); }

@media (max-width: 480px) {
  .hoja { padding: 10px 8px 36px; }
  .cuerpo { padding: 18px 16px 22px; }
  .banda { padding: 12px 16px; }
  .req { padding: 13px 14px; }
  h1 { font-size: 21px; }
  .dato { display: block; } .dato b { display: inline; min-width: 0; margin-right: 6px; }
}

/* ── La etiqueta de ambiente ─────────────────────────────────────────────────
 * Los mismos colores que el tablero. El proveedor también tiene derecho a saber
 * si la pantalla donde está subiendo sus papeles es la de verdad. */
.ambiente-marca {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 4px;
  font-size: 10px; font-weight: 800; letter-spacing: .6px;
  /* Dos renglones, con el salto que pone el guion. La caja se queda angosta y
     el texto centrado, para que se lea como una placa y jamás como una frase
     suelta a media barra. */
  white-space: pre-line; text-align: center; line-height: 1.15;
}
.ambiente-suelto { position: sticky; top: 0; z-index: 90; padding: 6px 16px; text-align: center; }
.ambiente-pruebas    .ambiente-marca { background: #1a2744; color: #ffe9a8; }
.ambiente-pruebas    .ambiente-suelto { background: #d4a012; }
.ambiente-duda       .ambiente-marca { background: #fff; color: #b91c1c; }
.ambiente-duda       .ambiente-suelto { background: #b91c1c; }

/* ── El «?» que explica (/assets/ayuda.js, 15 de octubre de 2026) ──────────
 * Copiado del final de assets/style.css del tablero, con los colores de la
 * puerta: la hoja de estilos del tablero se queda fuera de este dominio, así
 * que el estilo del círculo y del globo tiene que vivir aquí. Trae su propio
 * fondo, relleno y esquinas para ganarle a la regla general de button de
 * arriba, que lo pintaría navy y con el relleno de un botón grande. */
button.ayuda { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; min-height: 0;
  margin: -6px -4px -6px 1px; padding: 0; border: 0; border-radius: 0; background: none; cursor: help;
  vertical-align: middle; font: inherit; font-weight: 400; line-height: 1; color: inherit; }
button.ayuda:hover { background: none; }
button.ayuda::before { content: "?"; display: block; width: 16px; height: 16px; line-height: 16px; border-radius: 50%;
  background: var(--linea); color: var(--tenue); font-size: 11px; font-weight: 700; text-align: center;
  letter-spacing: 0; text-transform: none; font-family: var(--letra); }
button.ayuda:hover::before, button.ayuda:focus-visible::before { background: var(--navy); color: #fff; }
/* Dentro de la etiqueta de color de un estado, el círculo toma el color de la etiqueta. */
.marca-estado button.ayuda { width: 22px; height: 22px; margin: -5px -6px -5px 0; }
.marca-estado button.ayuda::before { background: rgba(255,255,255,.75); color: currentColor; }
#globo-ayuda { position: fixed; z-index: 1000; max-width: min(340px, calc(100vw - 16px)); padding: 10px 13px;
  border-radius: 10px; background: var(--navy); color: #fff; font-size: 14px; line-height: 1.5; font-weight: 400;
  text-align: left; text-transform: none; letter-spacing: 0; white-space: normal;
  box-shadow: 0 4px 14px rgba(0,0,0,.18); pointer-events: none; display: none; }