/* ==========================================================================
   Portal de Proveedores — hoja de estilos
   Identidad "Consola de operaciones": acero frío, tinta pizarra, señal cian,
   tipografía condensada técnica y datos en monoespaciada (folios, RFC, CLABE).
   ========================================================================== */
:root{
  /* Marca / estructura */
  --tinta:#131a24;          /* pizarra profunda: barra, botón primario */
  --tinta-2:#0d131b;
  --marino:#1a2431;         /* alias histórico = pizarra (botón primario) */
  --marino-osc:#111925;

  /* Señal (acento cian de monitoreo) */
  --acento:#0e7c99;         /* cian profundo: CTA, activo */
  --acento-osc:#0a5f76;
  --acento-luz:#19b6d6;     /* cian brillante: brillos, LED, no texto */
  --brand:#0e7c99;          /* enlaces / foco = misma señal */
  --brand-osc:#0a5f76;

  /* Neutros fríos (elegidos con sesgo azul, no grises muertos) */
  --texto:#1a2331;
  --texto-2:#3b4757;
  --suave:#5e6b7c;
  --linea:#d8dee7;
  --linea-2:#c4cdda;
  --fondo:#e7ebf1;          /* acero claro */
  --fondo-2:#f1f4f8;
  --blanco:#ffffff;         /* superficie de panel */

  /* Semánticos (separados del acento) */
  --rojo:#cf3b2b;
  --verde:#1f8a5b;
  --ambar:#b8770c;
  --azul:#276b86;

  /* Formas: radios chicos y mixtos, geometría de consola */
  --radio:10px;
  --radio-sm:7px;
  --radio-lg:14px;
  --sombra:0 1px 2px rgba(19,26,36,.06), 0 14px 30px -18px rgba(19,26,36,.35);
  --sombra-alta:0 30px 60px -30px rgba(13,19,27,.55);

  /* Tipografía */
  --cond:"Bahnschrift","DIN Alternate","DIN Condensed","Roboto Condensed","Arial Narrow","Segoe UI",system-ui,sans-serif;
  --sans:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"Cascadia Code","Cascadia Mono",Consolas,"SF Mono",Menlo,ui-monospace,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);color:var(--texto);
  font-size:15px;line-height:1.6;
  display:flex;flex-direction:column;min-height:100vh;
  background-color:var(--fondo);
  /* Cuadrícula técnica muy tenue + halo frío superior */
  background-image:
    linear-gradient(rgba(30,44,64,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,44,64,.035) 1px, transparent 1px),
    radial-gradient(120% 70% at 100% 0%, rgba(25,182,214,.06), transparent 60%);
  background-size:34px 34px, 34px 34px, 100% 100%;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:rgba(14,124,153,.24)}

/* ---------- Barra superior ---------- */
.barra{
  position:relative;overflow:hidden;color:#eaf1f6;
  background:linear-gradient(180deg,#18222f,#111a25);
}
/* Rejilla de monitor + destello cian */
.barra::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    linear-gradient(rgba(120,160,190,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,160,190,.09) 1px, transparent 1px),
    radial-gradient(60% 140% at 85% -20%, rgba(25,182,214,.28), transparent 60%);
  background-size:26px 26px, 26px 26px, 100% 100%;
}
/* Línea de señal inferior */
.barra::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--acento),var(--acento-luz) 55%,transparent);
}
.barra-inner{
  position:relative;z-index:1;
  max-width:1180px;margin:0 auto;padding:13px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.marca{display:flex;align-items:center;gap:14px;color:#fff;text-decoration:none}
/* Placa clara para que el logo (azul/gris) se lea sobre la barra oscura */
.marca-placa{
  display:inline-flex;align-items:center;background:#fff;border-radius:8px;
  padding:7px 11px;box-shadow:0 4px 14px -6px rgba(0,0,0,.5), inset 0 0 0 1px rgba(14,124,153,.12);
}
.marca-placa img{display:block;height:22px;width:auto}
.marca-sep{width:1px;height:26px;background:rgba(180,205,220,.28)}
.marca-app{
  font-family:var(--cond);font-weight:600;font-size:16px;line-height:1.1;
  letter-spacing:.7px;text-transform:uppercase;color:#eef4f8;
}
@media(max-width:560px){.marca-sep,.marca-app{display:none}}

/* Logo grande en las pantallas de acceso */
.logo-auth{display:flex;justify-content:center;margin:0 0 20px}
.logo-auth img{height:38px;width:auto;max-width:100%}
.nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav a{
  color:rgba(224,236,244,.78);text-decoration:none;
  font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;
  font-family:var(--cond);padding:8px 12px;border-radius:7px;
  transition:background .16s,color .16s;
}
.nav a:hover{background:rgba(120,170,200,.16);color:#fff}
.nav .quien{
  color:var(--acento-luz);font-size:11px;padding-right:6px;letter-spacing:1px;
  text-transform:uppercase;font-weight:700;font-family:var(--mono);
}

/* ---------- Contenedores ---------- */
.contenido{flex:1;width:100%;max-width:820px;margin:0 auto;padding:34px 20px 64px}
.contenido-ancho{max-width:1180px}
.pie{
  text-align:center;color:var(--suave);font-size:11px;letter-spacing:.5px;
  text-transform:uppercase;font-family:var(--cond);
  padding:22px;border-top:1px solid var(--linea);background:var(--fondo-2);
}

/* ---------- Paneles (tarjetas) ---------- */
.tarjeta{
  position:relative;
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);
  padding:26px;box-shadow:var(--sombra);margin-bottom:20px;
}
.tarjeta-angosta{
  max-width:452px;margin:44px auto;padding:30px;border-radius:var(--radio-lg);
  box-shadow:var(--sombra-alta);border-color:var(--linea-2);
}
/* Acento centrado en el borde superior de las tarjetas de acceso */
.tarjeta-angosta::before{
  content:"";position:absolute;left:50%;transform:translateX(-50%);top:0;
  width:52px;height:3px;border-radius:0 0 3px 3px;background:var(--acento);
}
/* En las pantallas de acceso, título y textos van centrados con el logo */
.tarjeta-angosta > h1{text-align:center}
.tarjeta-angosta > .sub{text-align:center;margin-left:auto;margin-right:auto}

h1{font-family:var(--cond);font-weight:600;font-size:29px;line-height:1.08;letter-spacing:.2px;margin:0 0 8px}
h2{
  font-family:var(--cond);font-weight:600;font-size:15px;letter-spacing:.9px;text-transform:uppercase;
  margin:0 0 16px;color:var(--texto);
  display:flex;align-items:center;gap:9px;
}
h2::before{content:"";width:9px;height:9px;background:var(--acento);border-radius:2px;flex:none}
h3{font-family:var(--cond);font-weight:600;font-size:13px;letter-spacing:.7px;text-transform:uppercase;margin:0 0 10px;color:var(--texto-2)}
.sub{color:var(--suave);font-size:14px;margin:0 0 22px;max-width:64ch}
hr{border:0;border-top:1px solid var(--linea);margin:24px 0}
a{color:var(--brand)}
a:hover{color:var(--brand-osc)}

/* ---------- Formularios ---------- */
.campo{margin-bottom:16px}
.campo label{
  display:block;font-family:var(--cond);font-size:12px;font-weight:600;margin-bottom:6px;
  letter-spacing:.7px;text-transform:uppercase;color:var(--texto-2);
}
.campo .pista{font-family:var(--sans);font-size:12px;color:var(--suave);font-weight:400;margin-top:5px;text-transform:none;letter-spacing:0}
input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=search],input[type=number],select,textarea{
  width:100%;padding:11px 13px;border:1.5px solid var(--linea-2);border-radius:var(--radio-sm);
  font:inherit;color:var(--texto);background:var(--fondo-2);
  transition:border-color .16s,box-shadow .16s,background .16s;
}
input::placeholder,textarea::placeholder{color:#93a0b0}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--acento);background:var(--blanco);
  box-shadow:0 0 0 4px rgba(14,124,153,.16);
}
input[readonly],input:disabled,select:disabled,textarea:disabled{
  background:#eef1f5;color:var(--suave);border-style:dashed;font-family:var(--mono);font-size:13px;
}
textarea{min-height:82px;resize:vertical}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.fila{grid-template-columns:1fr}}
.req{color:var(--acento);font-weight:700}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:var(--radio-sm);padding:11px 20px;
  font-family:var(--cond);font-size:14px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;
  cursor:pointer;text-decoration:none;text-align:center;
  background:var(--marino);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px -12px rgba(19,26,36,.9);
  transition:transform .13s ease,box-shadow .13s ease,background .16s;
}
.btn:hover{background:var(--marino-osc);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-acento{
  background:var(--acento);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 10px 22px -12px rgba(14,124,153,.9);
}
.btn-acento:hover{background:var(--acento-osc)}
.btn-fantasma{background:transparent;color:var(--marino);border:1.5px solid var(--linea-2);box-shadow:none}
.btn-fantasma:hover{background:var(--fondo-2);border-color:var(--acento);color:var(--acento)}
.btn-rojo{background:var(--rojo);box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 10px 22px -12px rgba(207,59,43,.8)}
.btn-rojo:hover{background:#b12f21}
.btn-chico{padding:7px 12px;font-size:12px;border-radius:6px;box-shadow:none}
.btn[disabled]{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none}
.acciones{display:flex;gap:11px;flex-wrap:wrap;align-items:center;margin-top:8px}

/* ---------- Avisos ---------- */
.aviso{position:relative;padding:13px 16px 13px 40px;border-radius:9px;margin-bottom:18px;font-size:14px;border:1px solid}
.aviso::before{
  content:"";position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:10px;height:10px;border-radius:2px;
}
.aviso-ok    {background:#e7f4ee;border-color:#bfe0cd;color:#155c3b}
.aviso-ok::before    {background:var(--verde);box-shadow:0 0 0 3px rgba(31,138,91,.18)}
.aviso-error {background:#fbeae8;border-color:#f0c6bf;color:#8f2a1d}
.aviso-error::before {background:var(--rojo);box-shadow:0 0 0 3px rgba(207,59,43,.18)}
.aviso-info  {background:#e9f1f5;border-color:#c3d9e2;color:#1f4f61}
.aviso-info::before  {background:var(--azul);box-shadow:0 0 0 3px rgba(39,107,134,.18)}
.aviso-alerta{background:#f9f0dd;border-color:#ecd6a5;color:#6e4c0c}
.aviso-alerta::before{background:var(--ambar);box-shadow:0 0 0 3px rgba(184,119,12,.18)}

/* ---------- Pastillas de estatus (con LED) ---------- */
.pill{
  display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:5px;
  font-family:var(--cond);font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;
  white-space:nowrap;border:1px solid transparent;
}
.pill::before{content:"";width:6px;height:6px;border-radius:1px;background:currentColor}
.pill-gris {background:#e5e9ef;color:#5c6675;border-color:#d3dae3}
.pill-azul {background:#e0edf3;color:#1f5b72;border-color:#c3dbe6}
.pill-verde{background:#dcefe4;color:#1c6d48;border-color:#bfe0cc}
.pill-rojo {background:#f7dcd7;color:#983123;border-color:#eec3ba}
.pill-ambar{background:#f6e7c5;color:#845309;border-color:#e9d4a2}

/* ---------- Lista de documentos ---------- */
.doc{
  position:relative;overflow:hidden;scroll-margin-top:96px;
  border:1px solid var(--linea);border-radius:9px;padding:16px 18px 16px 20px;margin-bottom:12px;
  background:var(--blanco);display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;
  transition:border-color .16s,box-shadow .16s;
}
/* Resalta un instante el documento recién cargado al llegar por ancla (#doc-…). */
.doc:target{border-color:var(--acento,#0e7c99);box-shadow:0 0 0 3px rgba(14,124,153,.18)}
.doc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--linea-2)}
.doc:hover{box-shadow:var(--sombra)}
.doc.rechazado{border-color:#eec3ba;background:#fdf3f1}
.doc.rechazado::before{background:var(--rojo)}
.doc.aprobado{border-color:#bfe0cc;background:#f2faf5}
.doc.aprobado::before{background:var(--verde)}
.doc-info{flex:1;min-width:230px}
.doc-titulo{font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.doc-ayuda{font-size:12.5px;color:var(--suave);margin-top:4px}
.doc-archivo{font-family:var(--mono);font-size:12px;color:var(--suave);margin-top:8px;word-break:break-all}
.doc-archivo a{color:var(--brand);font-weight:600}
.doc-nota{
  font-size:13px;margin-top:9px;background:#fbeae8;border-left:3px solid var(--rojo);
  padding:9px 12px;border-radius:7px;color:#8f2a1d;
}
.doc-carga{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.subir-lbl{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--fondo-2);border:1.5px dashed var(--linea-2);border-radius:var(--radio-sm);
  padding:10px 16px;font-family:var(--cond);font-size:12.5px;font-weight:600;letter-spacing:.4px;
  text-transform:uppercase;cursor:pointer;color:var(--marino);
  transition:border-color .16s,color .16s,background .16s;
}
.subir-lbl:hover{border-color:var(--acento);color:var(--acento);background:var(--blanco)}
.subir-lbl input{display:none}

/* ---------- Progreso ---------- */
.progreso{
  height:10px;background:#dbe1e9;border-radius:3px;overflow:hidden;margin:12px 0 5px;
  box-shadow:inset 0 1px 2px rgba(19,26,36,.14);
}
.progreso i{
  display:block;height:100%;border-radius:3px;transition:width .5s cubic-bezier(.2,.7,.2,1);
  background:linear-gradient(90deg,var(--acento),var(--acento-luz));
}

/* ---------- Tablas ---------- */
.tabla-wrap{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--radio);background:var(--blanco)}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:720px}
th,td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--linea);vertical-align:middle}
th{
  background:var(--fondo-2);font-family:var(--cond);font-size:11px;text-transform:uppercase;
  letter-spacing:.8px;color:var(--suave);font-weight:600;
}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--fondo-2)}
tbody tr:last-child td{border-bottom:0}
td.num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono)}
/* La primera columna (RFC/folio) como código de referencia */
.tabla-wrap tbody td:first-child strong{font-family:var(--mono);font-size:13px;letter-spacing:.3px}

.filtros{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:18px}
.filtros .campo{margin-bottom:0}

/* ---------- Métricas ---------- */
.metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:14px;margin-bottom:22px}
.metrica{
  position:relative;overflow:hidden;
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:16px 18px;
  box-shadow:var(--sombra);
}
.metrica::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;background:var(--acento);border-radius:0 3px 3px 0}
.metrica b{display:block;font-family:var(--mono);font-size:30px;line-height:1.1;color:var(--texto);font-variant-numeric:tabular-nums;letter-spacing:-1px}
.metrica span{font-family:var(--cond);font-size:11px;color:var(--suave);text-transform:uppercase;letter-spacing:.7px;font-weight:600}

/* ---------- Bitácora con scroll ---------- */
.bitacora{
  max-height:236px;overflow-y:auto;border:1px solid var(--linea);
  border-radius:9px;padding:2px 16px;background:var(--fondo-2);
}
.bitacora::-webkit-scrollbar{width:10px}
.bitacora::-webkit-scrollbar-thumb{background:#b6c0cd;border-radius:8px;border:2px solid var(--fondo-2)}
.bitacora::-webkit-scrollbar-track{background:transparent}
.bitacora .datos tr:last-child td,.bitacora .datos tr:last-child th{border-bottom:0}

.datos{width:100%;min-width:0}
.datos th{background:transparent;text-transform:none;letter-spacing:0;font-size:13px;width:210px;color:var(--suave);font-weight:600;font-family:var(--sans)}
.datos td,.datos th{border-bottom:1px solid var(--linea);padding:9px 0}

code{
  font-family:var(--mono);font-size:12.5px;
  background:var(--fondo);border:1px solid var(--linea);border-radius:5px;padding:1px 6px;color:var(--acento-osc);
}
pre{
  background:#0f1620;color:#dbe7ee;padding:15px 17px;border-radius:10px;
  overflow-x:auto;font-size:13px;line-height:1.55;border:1px solid #223243;
}
pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit}

/* ---------- Estados de carga ---------- */
@keyframes girar{to{transform:rotate(360deg)}}
.giro{
  display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-right:2px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  opacity:.9;animation:girar .6s linear infinite;
}
.giro-grande{width:28px;height:28px;border-width:3px;margin:0 0 14px;display:block}
.btn.cargando{cursor:progress;opacity:.9}
.btn[disabled],.btn.cargando{pointer-events:none}
.form-enviando{opacity:.72}
.form-enviando input,.form-enviando select,.form-enviando textarea{pointer-events:none}
.subir-lbl.cargando{cursor:progress;border-style:solid;border-color:var(--acento);color:var(--acento)}

/* Velo de pantalla completa */
.velo{
  position:fixed;inset:0;z-index:900;display:grid;place-items:center;
  background:rgba(13,19,27,.55);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .2s;
}
.velo.visible{opacity:1}
.velo-caja{
  background:var(--blanco);border-radius:var(--radio);padding:28px 36px;text-align:center;
  box-shadow:var(--sombra-alta);color:var(--marino);
  font-family:var(--cond);font-weight:600;letter-spacing:.4px;font-size:14px;text-transform:uppercase;
  max-width:320px;border:1px solid var(--linea);
}
.velo-texto{display:block;font-family:var(--sans);color:var(--texto);font-weight:400;text-transform:none;letter-spacing:0;margin-top:3px}
.velo-caja .giro-grande{color:var(--acento);margin-left:auto;margin-right:auto}

/* ---------- Banner de consentimiento (aviso de privacidad) ---------- */
.consentimiento{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:850;
  max-width:1060px;margin:0 auto;
  background:var(--tinta);color:#e7edf3;
  border:1px solid #29394a;border-radius:var(--radio);
  box-shadow:var(--sombra-alta);
  padding:16px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  animation:aparecer .4s cubic-bezier(.2,.7,.2,1) both;
}
.consentimiento::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:var(--radio) 0 0 var(--radio);
  background:linear-gradient(var(--acento),var(--acento-luz));
}
.consentimiento p{margin:0;font-size:13.5px;line-height:1.55;flex:1;min-width:240px}
.consentimiento a{color:var(--acento-luz);font-weight:600}
.consentimiento-btns{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.consentimiento.oculto{opacity:0;transform:translateY(12px);transition:opacity .28s,transform .28s}
@media(max-width:560px){.consentimiento{left:10px;right:10px;bottom:10px;padding:14px 16px}}

/* ---------- Documento: aviso de privacidad ---------- */
.aviso-doc{max-width:780px;margin-left:auto;margin-right:auto}
.aviso-doc h2{margin-top:26px}
.aviso-doc p{margin:0 0 12px;color:var(--texto-2);font-size:14.5px}
.aviso-doc ul{margin:0 0 14px;padding-left:20px;color:var(--texto-2);font-size:14.5px;line-height:1.75}
.aviso-doc strong{color:var(--texto)}

/* ---------- Movimiento (solo si no está desactivado) ---------- */
@keyframes aparecer{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes barrido{from{background-position:0 0,0 0,0 0}to{background-position:26px 0,0 26px,0 0}}
@media (prefers-reduced-motion:no-preference){
  .contenido>.tarjeta,.contenido>form>.tarjeta{animation:aparecer .46s cubic-bezier(.2,.7,.2,1) both}
  .contenido>.tarjeta:nth-of-type(2){animation-delay:.05s}
  .contenido>.tarjeta:nth-of-type(3){animation-delay:.1s}
  .contenido>.tarjeta:nth-of-type(4){animation-delay:.15s}
  .contenido>.tarjeta:nth-of-type(5){animation-delay:.2s}
  .barra::before{animation:barrido 6s linear infinite}
}
@media (prefers-reduced-motion:reduce){
  .giro{animation-duration:1.8s}
  .velo,.btn,.tarjeta,.doc,tbody tr{transition:none}
}