/* ==========================================================
   Portal de Proveedores — hoja de estilo
   ========================================================== */
:root{
  --tinta:#101828; --tinta-2:#344054; --tinta-3:#667085; --tinta-4:#98a2b3;
  --linea:#e4e7ec; --linea-2:#f2f4f7; --fondo:#f7f8fa; --papel:#fff;
  --marca:#1c3f94; --marca-2:#2b5bd7; --marca-suave:#eef3ff;
  --verde:#067647; --verde-bg:#ecfdf3;
  --ambar:#b54708; --ambar-bg:#fffaeb;
  --rojo:#b42318;  --rojo-bg:#fef3f2;
  --azul:#175cd3;  --azul-bg:#eff8ff;
  --morado:#6941c6;--morado-bg:#f4f3ff;
  --gris:#475467;  --gris-bg:#f2f4f7;
  --r:10px; --sombra:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.06);
  --sombra-lg:0 8px 24px rgba(16,24,40,.10);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--tinta); background:var(--fondo); -webkit-font-smoothing:antialiased;
}
a{color:var(--marca-2); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .5rem; line-height:1.25; font-weight:600; letter-spacing:-.01em}
h1{font-size:1.5rem} h2{font-size:1.15rem} h3{font-size:1rem}
p{margin:0 0 .75rem}
small{font-size:.8125rem}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.875em}

/* ---------- Estructura ---------- */
.app{display:flex;min-height:100vh}
.lateral{
  width:250px;flex:0 0 250px;background:var(--tinta);color:#d0d5dd;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto
}
.lateral .marca{
  padding:16px 16px 14px;border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;gap:11px
}
.lateral .marca b{display:block;color:#fff;font-size:.9375rem;letter-spacing:-.02em;line-height:1.2}
.lateral .marca span{font-size:.75rem;color:var(--tinta-4)}
/* El logotipo es trazo negro: sobre la barra oscura necesita fondo claro. */
.lateral .marca .logo{
  width:40px;height:40px;flex:none;object-fit:contain;
  background:#fff;border-radius:9px;padding:4px
}

/* Logotipo de la pantalla de acceso */
.acceso .logo-acceso{
  width:132px;height:auto;display:block;margin:0 auto 14px
}
.nav{padding:12px 10px;flex:1}
.nav .grupo{font-size:.6875rem;text-transform:uppercase;letter-spacing:.06em;color:#667085;padding:14px 10px 6px;font-weight:600}
.nav a{
  display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;
  color:#d0d5dd;font-size:.875rem;margin-bottom:1px
}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.nav a.on{background:var(--marca);color:#fff;font-weight:500}
.nav a .ic{width:17px;text-align:center;opacity:.85;font-size:.9rem}
.nav a .pill{margin-left:auto;background:rgba(255,255,255,.14);border-radius:20px;padding:1px 7px;font-size:.6875rem}
.nav a.on .pill{background:rgba(255,255,255,.25)}
.usuario{padding:12px 14px;border-top:1px solid rgba(255,255,255,.08);font-size:.8125rem}
.usuario b{color:#fff;display:block}
.usuario span{color:var(--tinta-4);font-size:.75rem}
.usuario a{color:#98a2b3;font-size:.75rem}

.principal{flex:1;min-width:0;display:flex;flex-direction:column}
.barra{
  background:var(--papel);border-bottom:1px solid var(--linea);padding:14px 26px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap
}
.barra h1{margin:0}
.barra .acciones{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.lienzo{padding:22px 26px 60px;flex:1}
.migas{font-size:.8125rem;color:var(--tinta-3);margin-bottom:2px}
.migas a{color:var(--tinta-3)}

/* ---------- Tarjetas ---------- */
.tarjeta{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);box-shadow:var(--sombra);margin-bottom:18px}
.tarjeta > h2,.tarjeta > .cab{
  padding:14px 18px;border-bottom:1px solid var(--linea);margin:0;font-size:.9375rem;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap
}
.tarjeta > .cab .der{margin-left:auto;display:flex;gap:8px;align-items:center}
.cuerpo{padding:18px}
.cuerpo.compacto{padding:0}

/* ---------- Rejilla ---------- */
.rejilla{display:grid;gap:16px}
/* Sin esto, los hijos de una rejilla no encogen por debajo de su contenido
   (min-width:auto) y una tabla ancha desborda la página en pantallas chicas. */
.rejilla > *{min-width:0}
.rejilla.c2{grid-template-columns:repeat(2,1fr)}
.rejilla.c3{grid-template-columns:repeat(3,1fr)}
.rejilla.c4{grid-template-columns:repeat(4,1fr)}
.rejilla.c5{grid-template-columns:repeat(5,1fr)}
.rejilla.lado{grid-template-columns:2fr 1fr;align-items:start}
@media(max-width:1100px){.rejilla.c4,.rejilla.c5{grid-template-columns:repeat(2,1fr)}.rejilla.lado{grid-template-columns:1fr}}
@media(max-width:760px){.rejilla.c2,.rejilla.c3,.rejilla.c4,.rejilla.c5{grid-template-columns:1fr}}

/* ---------- Indicadores ---------- */
.kpi{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);padding:16px;box-shadow:var(--sombra)}
.kpi .etq{font-size:.75rem;color:var(--tinta-3);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.kpi .val{font-size:1.6rem;font-weight:650;letter-spacing:-.02em;margin-top:6px;line-height:1.1}
.kpi .pie{font-size:.8125rem;color:var(--tinta-3);margin-top:4px}
.kpi.rojo .val{color:var(--rojo)} .kpi.verde .val{color:var(--verde)}
.kpi.ambar .val{color:var(--ambar)} .kpi.azul .val{color:var(--azul)}

/* ---------- Tablas ---------- */
.tabla-scroll{overflow-x:auto}
table.datos{width:100%;border-collapse:collapse;font-size:.875rem}
table.datos th{
  text-align:left;font-weight:600;color:var(--tinta-2);background:var(--linea-2);
  padding:9px 14px;border-bottom:1px solid var(--linea);white-space:nowrap;font-size:.8125rem
}
table.datos td{padding:10px 14px;border-bottom:1px solid var(--linea-2);vertical-align:middle}
table.datos tr:last-child td{border-bottom:0}
table.datos tbody tr:hover{background:#fbfcfd}
table.datos td.num,table.datos th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.datos td.cen,table.datos th.cen{text-align:center}
table.datos .sec{color:var(--tinta-3);font-size:.8125rem}
.vacio{padding:38px 20px;text-align:center;color:var(--tinta-3)}
.vacio .ic{font-size:2rem;display:block;margin-bottom:8px;opacity:.4}

/* ---------- Etiquetas de estatus ---------- */
.etiqueta{
  display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:20px;
  font-size:.75rem;font-weight:550;white-space:nowrap;border:1px solid transparent
}
.etiqueta.verde{background:var(--verde-bg);color:var(--verde);border-color:#abefc6}
.etiqueta.ambar{background:var(--ambar-bg);color:var(--ambar);border-color:#fedf89}
.etiqueta.rojo{background:var(--rojo-bg);color:var(--rojo);border-color:#fecdca}
.etiqueta.azul{background:var(--azul-bg);color:var(--azul);border-color:#b2ddff}
.etiqueta.morado{background:var(--morado-bg);color:var(--morado);border-color:#d9d6fe}
.etiqueta.gris{background:var(--gris-bg);color:var(--gris);border-color:var(--linea)}
.punto{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;
  border:1px solid var(--linea);background:var(--papel);color:var(--tinta-2);
  font-size:.875rem;font-weight:550;cursor:pointer;line-height:1.2;white-space:nowrap;
  font-family:inherit;transition:background .12s,border-color .12s
}
.btn:hover{background:var(--linea-2);text-decoration:none;color:var(--tinta)}
.btn.primario{background:var(--marca);border-color:var(--marca);color:#fff}
.btn.primario:hover{background:#16337a;color:#fff}
.btn.peligro{background:var(--rojo);border-color:var(--rojo);color:#fff}
.btn.peligro:hover{background:#912018;color:#fff}
.btn.exito{background:var(--verde);border-color:var(--verde);color:#fff}
.btn.exito:hover{background:#05603a;color:#fff}
.btn.chico{padding:5px 10px;font-size:.8125rem}
.btn:disabled,.btn.inhabil{opacity:.5;pointer-events:none}
.btn-grupo{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Formularios ---------- */
.campo{margin-bottom:14px}
.campo label{display:block;font-size:.8125rem;font-weight:600;color:var(--tinta-2);margin-bottom:5px}
.campo label .req{color:var(--rojo)}
.campo .ayuda{font-size:.75rem;color:var(--tinta-3);margin-top:4px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],
input[type=tel],input[type=url],input[type=search],select,textarea{
  width:100%;padding:8px 11px;border:1px solid #d0d5dd;border-radius:8px;font:inherit;
  font-size:.875rem;color:var(--tinta);background:#fff;transition:border-color .12s,box-shadow .12s
}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--marca-2);box-shadow:0 0 0 3px rgba(43,91,215,.12)}
input[readonly],input:disabled,select:disabled{background:var(--linea-2);color:var(--tinta-3)}
textarea{min-height:82px;resize:vertical}
input[type=file]{width:100%;padding:8px;border:1px dashed #d0d5dd;border-radius:8px;font-size:.8125rem;background:#fcfcfd}
.linea{display:flex;gap:14px;flex-wrap:wrap}
.linea > .campo{flex:1;min-width:180px}
.check{display:flex;align-items:flex-start;gap:8px;font-size:.875rem;margin-bottom:10px}
.check input{margin-top:3px;flex:none}
fieldset{border:0;padding:0;margin:0 0 22px}
fieldset legend{
  font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--tinta-3);padding:0 0 10px;width:100%;border-bottom:1px solid var(--linea);margin-bottom:14px
}

/* ---------- Avisos ---------- */
.aviso{
  padding:11px 14px;border-radius:8px;margin-bottom:14px;font-size:.875rem;
  border:1px solid;display:flex;gap:9px;align-items:flex-start
}
.aviso .ic{flex:none;font-size:1rem;line-height:1.3}
.aviso.exito{background:var(--verde-bg);border-color:#abefc6;color:#05603a}
.aviso.error{background:var(--rojo-bg);border-color:#fecdca;color:#912018}
.aviso.alerta{background:var(--ambar-bg);border-color:#fedf89;color:#93370d}
.aviso.info{background:var(--azul-bg);border-color:#b2ddff;color:#175cd3}
.aviso ul{margin:6px 0 0;padding-left:18px}
.aviso li{margin-bottom:3px}

/* ---------- Detalle ---------- */
.dl{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:.875rem;align-items:baseline}
.dl dt{color:var(--tinta-3);white-space:nowrap}
.dl dd{margin:0;font-weight:500;word-break:break-word}
@media(max-width:600px){.dl{grid-template-columns:1fr;gap:2px 0}.dl dd{margin-bottom:9px}}

/* ---------- Barra de progreso ---------- */
.progreso{height:7px;background:var(--linea);border-radius:20px;overflow:hidden}
.progreso i{display:block;height:100%;background:var(--verde);border-radius:20px;transition:width .3s}
.progreso.parcial i{background:var(--ambar)}
.progreso.bajo i{background:var(--rojo)}

/* ---------- Filtros ---------- */
.filtros{
  display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;
  padding:14px 18px;border-bottom:1px solid var(--linea);background:#fcfcfd
}
.filtros .campo{margin:0;min-width:150px}
.filtros .campo.ancho{flex:1;min-width:220px}

/* ---------- Pestañas ---------- */
.pestanas{display:flex;gap:2px;border-bottom:1px solid var(--linea);margin-bottom:18px;overflow-x:auto}
.pestanas a{
  padding:9px 15px;font-size:.875rem;font-weight:550;color:var(--tinta-3);
  border-bottom:2px solid transparent;white-space:nowrap
}
.pestanas a:hover{color:var(--tinta);text-decoration:none}
.pestanas a.on{color:var(--marca);border-bottom-color:var(--marca)}

/* ---------- Paginación ---------- */
.paginacion{display:flex;gap:5px;padding:14px 18px;align-items:center;font-size:.875rem;flex-wrap:wrap}
.paginacion a,.paginacion span{padding:5px 10px;border:1px solid var(--linea);border-radius:7px;color:var(--tinta-2)}
.paginacion a:hover{background:var(--linea-2);text-decoration:none}
.paginacion .on{background:var(--marca);border-color:var(--marca);color:#fff}
.paginacion .info{border:0;color:var(--tinta-3);margin-left:auto}

/* ---------- Acceso ---------- */
.acceso{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:22px;
  background:linear-gradient(150deg,#101828 0%,#1c3f94 100%)}
.acceso .caja{width:100%;max-width:400px;background:#fff;border-radius:14px;padding:32px;box-shadow:var(--sombra-lg)}
.acceso .logo{text-align:center;margin-bottom:24px}
.acceso .logo b{display:block;font-size:1.25rem;letter-spacing:-.02em}
.acceso .logo span{font-size:.8125rem;color:var(--tinta-3)}
.acceso .btn{width:100%;justify-content:center;padding:10px}
.acceso .pie{text-align:center;margin-top:18px;font-size:.8125rem;color:var(--tinta-3)}

/* ---------- Utilidades ---------- */
.txt-der{text-align:right} .txt-cen{text-align:center}
.sec{color:var(--tinta-3)} .neg{font-weight:600}
.mono-uuid{font-family:ui-monospace,monospace;font-size:.75rem;color:var(--tinta-3);letter-spacing:-.02em}
.nada{color:var(--tinta-4)}
.mb0{margin-bottom:0} .mt16{margin-top:16px} .mt8{margin-top:8px}
.oculto{display:none}
hr{border:0;border-top:1px solid var(--linea);margin:18px 0}
.chip{display:inline-block;background:var(--linea-2);border:1px solid var(--linea);border-radius:6px;padding:1px 7px;font-size:.75rem;color:var(--tinta-2)}
.rojo-txt{color:var(--rojo)} .verde-txt{color:var(--verde)} .ambar-txt{color:var(--ambar)}

/* ---------- Iconos ---------- */
/* Heredan color y se alinean con la línea de texto. */
.ic{flex:none;vertical-align:-0.18em}
.nav a .ic{width:17px;height:17px;opacity:.9}
.nav a.on .ic{opacity:1}
.btn .ic{width:15px;height:15px;margin-right:-1px}
.aviso .ic{width:17px;height:17px;margin-top:1px}
.aviso.exito .ic,.aviso.error .ic,.aviso.alerta .ic,.aviso.info .ic{stroke-width:2}
.cab .ic,.tarjeta > h2 .ic{width:16px;height:16px;color:var(--tinta-3)}
.vacio .ic{
  display:block;margin:0 auto 10px;width:34px;height:34px;
  color:var(--tinta-4);stroke-width:1.4
}
.kpi .ic{width:15px;height:15px}
.etiqueta .ic{width:12px;height:12px;stroke-width:2.2}
.ic-hueco{flex:none}
/* En los encabezados de tarjeta el icono va pegado al texto */
.cab > span:first-child,.tarjeta > h2{display:inline-flex;align-items:center;gap:8px}

/* ---------- Adaptación a tablet y celular ---------- */
/* Cualquier tabla ancha se desplaza dentro de su tarjeta, nunca en la página. */
.cuerpo.compacto{overflow-x:auto}

@media(max-width:900px){
  .app{flex-direction:column}
  .lateral{
    width:100%;flex:none;height:auto;position:static;
    display:block;overflow:visible;border-bottom:1px solid rgba(255,255,255,.08)
  }
  .lateral .marca{padding:11px 14px}
  .lateral .marca .logo{width:34px;height:34px}
  .lateral .marca b{font-size:.9375rem}
  /* El menú pasa a ser una tira horizontal deslizable */
  .nav{
    display:flex;gap:4px;padding:8px 12px;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none
  }
  .nav::-webkit-scrollbar{display:none}
  .nav .grupo{display:none}
  .nav a{white-space:nowrap;margin-bottom:0;padding:7px 12px;flex:none}
  .usuario{
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    padding:9px 16px;border-top:1px solid rgba(255,255,255,.08)
  }
  .usuario b{display:inline}
  .usuario > div{margin-top:0!important;margin-left:auto}
  .barra{padding:13px 16px;position:sticky;top:0;z-index:20}
  .barra h1{font-size:1.25rem}
  .barra .acciones{margin-left:0;width:100%}
  .lienzo{padding:16px 14px 40px}
  .cuerpo{padding:14px}
  .tarjeta > h2,.tarjeta > .cab{padding:12px 14px}
  .filtros{padding:12px 14px}
  .filtros .campo,.filtros .campo.ancho{min-width:100%}
  .linea > .campo{min-width:100%}
  table.datos th,table.datos td{padding:9px 10px}
}

@media(max-width:480px){
  .kpi .val{font-size:1.35rem}
  .btn{padding:8px 12px}
  .btn-grupo{flex-direction:column;align-items:stretch}
  .btn-grupo .btn,.btn-grupo form,.btn-grupo button{width:100%;justify-content:center}
}

/* ---------- Impresión ---------- */
@media print{
  .lateral,.barra .acciones,.btn,.filtros,.pestanas{display:none!important}
  body{background:#fff}
  .app{display:block}
  .tarjeta{border:0;box-shadow:none;page-break-inside:avoid}
  .lienzo{padding:0}
}