/* ============================================================
   Centro de ventas · TechLogic Orlando
   El mismo lenguaje que la web pública llevado a una sala de
   control: carbón, rejilla de fondo, Archivo Black en las cifras
   y naranja reservado para lo que se puede accionar. Esquinas
   rectas en todo: es la firma del sitio.
   ============================================================ */

:root{
  --carbon:#f4f7fb;        /* lienzo claro */
  --superficie:#ffffff;    /* tarjetas */
  --superficie-alta:#eef3f9;
  --linea:#dfe6ef;
  --linea-viva:#c3d0e0;
  --tinta:#111113;         /* texto principal, negro */
  --tenue:#4a4a52;
  --apagado:#77777f;
  --marino:#001d59;        /* la barra lateral, azul de la marca */
  --azul:#007fd0;          /* acento */
  --azul-claro:#e8f2fb;
  --naranja:#f36a10;       /* solo para avisos puntuales */
  --verde:#0f9d63;
  --rojo:#d92d20;
  --display:'Archivo Black',sans-serif;
  --interfaz:'Archivo','DM Sans',system-ui,sans-serif;
  --sans:'DM Sans',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--carbon);
  color:var(--tinta);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
/* La rejilla del hero, apenas insinuada, para que el fondo respire */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.55;
  background-image:
    linear-gradient(rgba(0,29,89,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,29,89,.035) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse at 30% 0%,#000 10%,transparent 75%);
}
button,input,select,textarea{font:inherit}
a{color:inherit}

/* ── Barra lateral ───────────────────────────────────────── */
body>aside{
  position:fixed;
  z-index:20;
  inset:0 auto 0 0;
  width:236px;
  display:flex;
  flex-direction:column;
  padding:24px 20px;
  background:linear-gradient(180deg,#00256e,var(--marino));
  border-right:0;
}
.brand{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.55);font-family:var(--interfaz);font-size:8px;font-weight:600;letter-spacing:.22em;text-decoration:none}
.brand img{width:96px;height:62px;object-fit:contain}
.workspace{margin-top:26px;padding:14px 13px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-left:2px solid var(--azul)}
.workspace small,.workspace strong{display:block}
.workspace small{color:rgba(255,255,255,.5);font-family:var(--interfaz);font-size:8px;letter-spacing:.18em;text-transform:uppercase}
.workspace strong{margin-top:7px;color:#fff;font-family:var(--interfaz);font-size:13px;font-weight:600;letter-spacing:-.01em}

aside nav{display:grid;gap:1px;margin-top:30px}
aside nav a{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 14px;
  color:rgba(255,255,255,.72);
  font-family:var(--interfaz);
  font-size:13.5px;
  font-weight:500;
  letter-spacing:-.005em;
  text-decoration:none;
  transition:background .25s,color .25s,padding-left .25s;
}
aside nav a:hover{padding-left:18px}
aside nav a.active{font-weight:600}
aside nav a::before{
  content:"";
  position:absolute;
  left:0;top:50%;
  width:2px;height:0;
  background:#fff;
  transform:translateY(-50%);
  transition:height .25s;
}
aside nav a:hover{background:rgba(255,255,255,.08);color:#fff}
aside nav a:hover::before{height:18px}
aside nav a.active{background:rgba(255,255,255,.14);color:#fff}
aside nav a.active::before{height:100%}
aside nav a b{padding:2px 8px;background:var(--naranja);color:#fff;font-family:var(--interfaz);font-size:11px;font-weight:600}

.system{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.14)}
.system>i{width:7px;height:7px;border-radius:50%;background:var(--verde);box-shadow:0 0 12px var(--verde)}
.system small,.system b{display:block}
.system small{color:rgba(255,255,255,.5);font-size:7px;letter-spacing:.1em}
.system b{color:#fff;font-size:9px}
aside .salir{margin-top:14px;padding:11px 0;color:rgba(255,255,255,.55);font-family:var(--interfaz);font-size:11px;font-weight:500;letter-spacing:0;text-decoration:none;transition:color .25s}
aside .salir:hover{color:#fff}

/* ── Lienzo ──────────────────────────────────────────────── */
main{position:relative;z-index:1;margin-left:236px;padding:38px clamp(22px,4vw,60px) 100px}
main>*{animation:entrar .5s both}
main>*:nth-child(2){animation-delay:.05s}
main>*:nth-child(3){animation-delay:.1s}
main>*:nth-child(4){animation-delay:.15s}
@keyframes entrar{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px}
em{color:var(--azul);font-family:var(--interfaz);font-size:9px;font-style:normal;font-weight:600;letter-spacing:.2em}
h1,h2{margin:6px 0 0;color:var(--tinta);font-family:var(--display);letter-spacing:-.03em;text-transform:capitalize;line-height:.95}
h1{font-size:clamp(1.5rem,2.5vw,2.2rem)}
h2{font-size:clamp(1.15rem,1.7vw,1.45rem)}

/* El título entra palabra por palabra y se subraya al pasar: pequeño, pero vivo. */
header em{display:block}
header h1{display:inline-block;cursor:default}

/* Los titulos negros llevan un degradado que se va al azul de la marca. Va
   dentro de @supports porque sin background-clip el texto quedaria invisible:
   ahi se queda simplemente negro, que es el fallback correcto. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  /* Solo en los titulos SIN hijos. En el h1 las palabras van en <span> propios
     que no heredan el fondo, solo el relleno transparente, y salen mutilados. */
  .tablero h2{
    /* La caja cubre la altura real de las letras: con line-height .95 el
       degradado se acaba antes que la tipografia y el texto sale decapitado. */
    line-height:1.12;padding-block:.04em;
    background:linear-gradient(96deg,var(--tinta) 0%,#0a2a63 52%,#00539b 100%);
    background-size:180% 100%;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    transition:background-position .6s cubic-bezier(.2,.8,.2,1)}
  .tablero:hover h2{background-position:100% 0}
}

/* El nombre de quien entra se lleva el azul de la marca: el saludo cambia de
   persona, y asi el ojo va directo a lo que cambia. */
header h1 .voz:last-of-type{color:var(--marino)}
header h1 .voz.enlace{text-transform:lowercase}

/* Al pasar, las palabras se levantan una detras de otra. */
header h1:hover .voz{animation:latir .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * .045s)}
@keyframes latir{40%{transform:translateY(-5px)}}
header h1 .voz{display:inline-block;animation:asomar .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * .06s)}
@keyframes asomar{from{opacity:0;transform:translateY(14px) rotate(1.5deg)}}
header h1::after{content:'';display:block;height:3px;margin-top:7px;border-radius:2px;
  background:linear-gradient(90deg,var(--azul),var(--marino));
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
header h1:hover::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  header h1 .voz,header h1:hover .voz{animation:none}
  .tablero h2,.tablero:hover h2{transition:none}
  header h1::after,header h1:hover::after{transition:none}
}
#menu{display:none}
.top-actions,.user{display:flex;align-items:center;gap:12px}

/* Botones: el naranja se reserva para lo que de verdad acciona */
.ghost,.primary,.toolbar button[type=submit],.buscador-img button,.subir button,.acciones-imprimir button{
  padding:12px 18px;
  border:1px solid var(--linea-viva);
  background:transparent;
  color:var(--tinta);
  font-family:var(--interfaz);
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
  cursor:pointer;
  transition:border-color .25s,background .25s,color .25s,transform .2s;
}
.ghost:hover{border-color:var(--azul);color:var(--azul);background:var(--azul-claro)}
.primary,.toolbar button[type=submit]{border-color:var(--azul);background:var(--azul);color:#fff}
.primary:hover,.toolbar button[type=submit]:hover{background:#0a6fb0;border-color:#0a6fb0;transform:translateY(-1px)}

/* ── Métricas ────────────────────────────────────────────── */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.metrics article{
  position:relative;
  padding:22px 22px 24px;
  background:var(--superficie);
  border:1px solid var(--linea);
  box-shadow:0 1px 2px rgba(11,21,36,.04);
  overflow:hidden;
  transition:border-color .3s,transform .3s;
}
.metrics article::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:2px;
  background:var(--azul);transition:width .45s;
}
.metrics article:hover{border-color:var(--azul);transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,29,89,.09)}
.metrics article:hover::after{width:100%}
.metrics span,.metrics small{display:block;color:var(--tenue);font-family:var(--interfaz);font-size:11px;font-weight:500;letter-spacing:0}
.metrics strong{display:block;margin:12px 0 6px;font:clamp(1.7rem,3vw,2.6rem) var(--display);letter-spacing:-.045em;color:var(--tinta)}
.metrics .orange{background:linear-gradient(140deg,#00256e,var(--marino));border-color:var(--marino)}
.metrics .orange span,.metrics .orange small{color:rgba(255,255,255,.75)}
.metrics .orange strong{color:#fff}
.metrics .orange::after{background:#fff}

/* ── Avisos ──────────────────────────────────────────────── */
.aviso{margin:0 0 20px;padding:13px 17px;border-left:2px solid;font-size:12px;line-height:1.5}
.aviso.ok{background:#eafaf2;border-color:var(--verde);color:#0a6b45}
.aviso.mal{background:#fdeceb;border-color:var(--rojo);color:#a01b12}
.nota-web{max-width:780px;margin:0 0 22px;padding:14px 17px;background:var(--azul-claro);border-left:2px solid var(--azul);color:#12496f;font-size:12px;line-height:1.65}
.nota-web strong{color:var(--tinta)}
.vacio-panel,.vacio{padding:44px;background:var(--superficie);border:1px dashed var(--linea-viva);color:var(--apagado);font-size:12px;text-align:center}

/* ── Barras de filtro ────────────────────────────────────── */
.toolbar,.cat-filtros,.buscador-img,.subir,.margen-form{gap:9px}
.toolbar{display:grid;grid-template-columns:minmax(200px,1fr) 150px 140px auto;margin-top:0;margin-bottom:16px;padding:12px;background:var(--superficie);border:1px solid var(--linea)}
.toolbar input,.toolbar select,.cat-filtros input,.cat-filtros select,.buscador-img input,
.campos-web input,.campos-web textarea,.publicacion input,.pedido-acciones select,
.subir input[type=file],.publicacion input[type=file],.enlace-nuevo input,.margen-form input,
.cat-datos input,.form-grid input,.form-grid select,.modal-card input,.modal-card select{
  width:100%;height:42px;padding:0 13px;
  border:1px solid var(--linea);
  background:#fff;
  color:var(--tinta);
  font-size:12px;
  outline:none;
  transition:border-color .25s,background .25s;
}
.campos-web textarea{height:auto;padding:11px 13px;line-height:1.5}
.toolbar input:focus,.cat-filtros input:focus,.campos-web input:focus,.campos-web textarea:focus,
.publicacion input:focus,.form-grid input:focus,.modal-card input:focus,.cat-datos input:focus{
  border-color:var(--azul);box-shadow:0 0 0 3px var(--azul-claro);
}
.search{position:relative;color:var(--azul);font-size:17px}
.search input{padding-left:32px}
.search input{position:absolute;inset:0}
.toolbar select,.cat-filtros select,.form-grid select{appearance:none;padding-right:28px;
  background-image:linear-gradient(45deg,transparent 50%,var(--tenue) 50%),linear-gradient(135deg,var(--tenue) 50%,transparent 50%);
  background-position:calc(100% - 16px) 19px,calc(100% - 11px) 19px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
label{display:grid;gap:7px;color:var(--tenue);font-family:var(--interfaz);font-size:11px;font-weight:500;letter-spacing:0}
label small{color:var(--apagado);font-weight:400;text-transform:none;letter-spacing:0}

/* ── Tablas ──────────────────────────────────────────────── */
.table{margin-top:14px;border-top:1px solid var(--linea)}
.thead{padding:12px 10px;background:var(--superficie);color:var(--tenue);font-family:var(--interfaz);font-size:10px;font-weight:600;letter-spacing:.04em}
.thead,.row{display:grid;grid-template-columns:22px minmax(180px,1.35fr) minmax(125px,1fr) 72px 102px 80px 68px;align-items:center;gap:12px}
.row{min-height:70px;padding:10px;border-bottom:1px solid var(--linea);font-size:11px;transition:background .2s}
.row:hover{background:var(--superficie-alta)}
.pick input{display:none}
.pick i{display:block;width:16px;height:16px;border:1px solid var(--linea-viva);transition:.2s}
.pick input:checked+i{border-color:var(--azul);background:var(--azul);box-shadow:inset 0 0 0 3px #fff}
.product{display:flex;align-items:center;min-width:0;gap:11px}
.product img{width:46px;height:46px;object-fit:contain;background:#fff;border:1px solid var(--linea)}
.product span,.spec{min-width:0}
.product b,.product small,.spec b,.spec small,.row>strong small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.product small,.spec small,.row>strong small{margin-top:4px;color:var(--apagado);font-size:7px;font-weight:500;letter-spacing:.04em}
.row>strong{font-size:13px;letter-spacing:-.01em}
.costo{color:#f0a35c}
.status{color:var(--verde);font-size:8px;font-weight:700;letter-spacing:.08em}
.status i{display:inline-block;width:5px;height:5px;margin-right:5px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.status.low{color:#e8a33d}
.acciones{display:flex;align-items:center;gap:4px}
.edit,.buscar-img{border:0;background:none;color:var(--apagado);cursor:pointer;text-decoration:none;padding:3px;transition:color .2s}
.edit:hover{color:var(--tinta)}
.buscar-img{font-size:14px}
.buscar-img:hover{color:var(--azul)}
.estrella{border:0;background:none;color:#c3d0e0;font-size:16px;line-height:1;cursor:pointer;padding:2px;transition:color .2s,transform .2s}
.estrella:hover{color:var(--naranja);transform:scale(1.15)}
.estrella.on{color:var(--naranja)}
main>footer,.table+footer{display:flex;justify-content:space-between;padding-top:14px;color:var(--apagado);font-size:8px;letter-spacing:.1em;text-transform:uppercase}
.bulk{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px 14px;background:var(--superficie);border-left:2px solid var(--azul);font-size:10px}
.bulk label{flex-direction:row;align-items:center;gap:8px}
.bulk input{width:78px;height:36px;text-align:center}
.bulk .primary{margin-left:auto}

/* ── Ventana modal ───────────────────────────────────────── */
.modal[hidden]{display:none}
.modal{position:fixed;z-index:60;inset:0;display:grid;place-items:center;padding:22px;background:rgba(0,29,89,.42);backdrop-filter:blur(9px)}
.modal-card{position:relative;width:min(760px,100%);max-height:92vh;overflow:auto;padding:32px;background:var(--superficie);border:1px solid var(--linea);box-shadow:0 30px 70px rgba(0,29,89,.22)}
.modal-card.small{width:min(460px,100%)}
.modal-card h2{margin-bottom:20px}
.x{position:absolute;right:18px;top:15px;border:0;background:none;color:var(--apagado);font-size:24px;cursor:pointer;transition:color .2s}
.x:hover{color:var(--azul)}
.form-grid,.split{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wide{grid-column:1/-1}
.actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}
.modal-card form{display:grid;gap:14px}

/* ── Importación ─────────────────────────────────────────── */
.subir{display:grid;max-width:600px;padding:28px;background:var(--superficie);border:1px solid var(--linea)}
.subir p{margin:0;color:var(--tenue);font-size:12px;line-height:1.65}
.subir input[type=file],.publicacion input[type=file]{height:auto;padding:13px;border-style:dashed;cursor:pointer}
.subir button{justify-self:start}
.revision{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px;padding:20px;background:var(--superficie);border:1px solid var(--linea);border-left:2px solid var(--verde)}
.revision.mal{border-left-color:var(--rojo)}
.revision span{display:block;color:var(--apagado);font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.revision strong{display:block;margin-top:8px;font:1.5rem var(--display);letter-spacing:-.03em;color:var(--tinta)}
.resumen{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.resumen span{padding:8px 13px;background:var(--superficie);border:1px solid var(--linea);color:var(--tenue)}
.resumen .nuevo{border-color:#b9e8d3;background:#eafaf2;color:#0a6b45}
.resumen .cambio{border-color:#f7c9a4;background:#fff8f1;color:#8a4a12}
.resumen .problema{border-color:#f5c2be;background:#fdeceb;color:#a01b12}
.bloque{margin:32px 0 12px;font-size:15px}
.row-imp{display:grid;grid-template-columns:minmax(200px,2fr) 1fr 90px 90px;gap:12px;align-items:center;padding:13px 10px;border-bottom:1px solid var(--linea);font-size:11px}
.row-imp:hover{background:var(--superficie-alta)}
.row-imp.tres{grid-template-columns:120px minmax(200px,2fr) 1fr}
.row-imp.dos{grid-template-columns:minmax(200px,2fr) 1fr}
.row-imp b{display:block}
.row-imp small{display:block;margin-top:4px;color:var(--apagado);font-size:9px}
.confirmar{display:flex;justify-content:flex-end;gap:10px;margin-top:28px}
.confirmar .ghost{display:inline-flex;align-items:center;text-decoration:none}

/* ── Catálogos ───────────────────────────────────────────── */
.enlace-nuevo{display:grid;grid-template-columns:1fr auto;gap:11px;align-items:center;margin-bottom:20px;padding:18px 20px;background:#eafaf2;border:1px solid #b9e8d3;border-left:2px solid var(--verde)}
.enlace-nuevo span{grid-column:1/-1;color:var(--verde);font-size:8px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.enlace-nuevo input{font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px}
.enlace-nuevo .ghost{white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center}
.panel-catalogo{padding:24px;background:var(--superficie);border:1px solid var(--linea)}
.cat-datos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.cat-filtros{display:grid;grid-template-columns:minmax(180px,1.5fr) 1fr 1fr 1.2fr auto auto;margin-bottom:12px;padding:12px;background:var(--superficie-alta);border:1px solid var(--linea)}
.cat-filtros .ghost{white-space:nowrap;font-size:8px;padding:0 14px;height:42px}
.cat-lista{max-height:440px;overflow:auto;border:1px solid var(--linea)}
.cat-lista .thead,.row-cat{display:grid;grid-template-columns:30px minmax(200px,2.4fr) 90px 70px 100px;gap:11px;align-items:center;padding:11px 12px}
.row-cat{border-bottom:1px solid var(--linea);font-size:11px;cursor:pointer;transition:background .2s}
.row-cat:hover{background:var(--azul-claro)}
.row-cat[hidden]{display:none}
.row-cat b{display:block}
.row-cat small{display:block;margin-top:3px;color:var(--apagado);font-size:9px}
.row-cat input[type=checkbox]{width:16px;height:16px;accent-color:var(--azul)}
.cat-pie{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px}
.cat-pie span{color:var(--tenue);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
#visibles{margin-left:auto;color:var(--apagado)}
.cat-tabla{grid-template-columns:minmax(200px,2fr) 1fr 80px 80px 90px 110px}

/* ── Pedidos ─────────────────────────────────────────────── */
.filtros-estado{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.filtros-estado a{padding:10px 16px;background:var(--superficie);border:1px solid var(--linea);color:var(--tenue);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:.25s}
.filtros-estado a:hover{border-color:var(--linea-viva);color:var(--tinta)}
.filtros-estado a.activo{background:var(--marino);border-color:var(--marino);color:#fff}
.pedido-card{margin-bottom:14px;padding:22px;background:var(--superficie);border:1px solid var(--linea);border-left:2px solid var(--linea-viva);transition:border-color .3s}
.pedido-card:hover{border-color:var(--linea-viva)}
.pedido-card.estado-new{border-left-color:var(--azul)}
.pedido-card.estado-won{border-left-color:var(--verde)}
.pedido-card.estado-lost{border-left-color:var(--rojo)}
.pedido-cab{display:grid;grid-template-columns:minmax(180px,1.4fr) minmax(160px,1fr) auto;gap:16px;align-items:start}
.pedido-cab b{display:block;font-family:var(--display);font-size:13px;letter-spacing:.02em}
.pedido-cab>div>span{display:block;margin-top:5px;color:var(--tenue);font-size:11px}
.pedido-meta span{display:block;color:var(--apagado);font-size:10px;line-height:1.6}
.pedido-cab strong{font:1.5rem var(--display);letter-spacing:-.03em;text-align:right;color:var(--tinta)}
.pedido-lineas{margin:16px 0;padding:14px 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.pedido-lineas div{display:grid;grid-template-columns:46px minmax(160px,2fr) 90px 80px;gap:11px;align-items:center;padding:5px 0;font-size:11px}
.pedido-lineas span:first-child{color:var(--azul);font-weight:700}
.pedido-lineas small{color:var(--apagado);font-size:9px}
.pedido-lineas em{font-style:normal;text-align:right;color:var(--tenue)}
.pedido-nota{margin:0 0 14px;padding:11px 13px;background:#fff8f1;border-left:2px solid var(--naranja);font-size:11px;color:#8a4a12}
.pedido-acciones{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.pedido-acciones select{width:auto;min-width:150px}
.pedido-acciones .ghost{display:inline-flex;align-items:center;text-decoration:none}
.pedido-acciones .wa{border-color:#b9e8d3;color:var(--verde)}
.pedido-acciones .wa:hover{background:#eafaf2;border-color:var(--verde)}

/* ── La web (textos, colores, publicaciones) ─────────────── */
.campos-web{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:22px;background:var(--superficie);border:1px solid var(--linea)}
.campos-web .ancho{grid-column:1/-1}
.campos-web small{color:var(--apagado);font-size:9px;font-weight:400;letter-spacing:0;text-transform:none}
.campos-web input::placeholder,.campos-web textarea::placeholder{color:#4a5768}
.guardar-web{display:flex;justify-content:flex-end;margin-top:16px}
.colores{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;padding:22px;background:var(--superficie);border:1px solid var(--linea)}
.colores input[type=color]{width:100%;height:50px;padding:4px;border:1px solid var(--linea);background:#fff;cursor:pointer}
.colores small{color:var(--apagado);font-size:9px;font-weight:400;letter-spacing:0;text-transform:none}
.colores .guardar-web{grid-column:1/-1}
.restablecer{margin-top:14px}
.publicaciones{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:22px;background:var(--superficie);border:1px solid var(--linea)}
.publicacion{display:grid;gap:10px;align-content:start;padding:16px;background:var(--superficie-alta);border:1px solid var(--linea)}
.publicacion .numero{color:var(--azul);font-size:8px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.publicacion .vista{aspect-ratio:4/5;background:var(--marino);display:grid;place-items:center;overflow:hidden;border:1px solid var(--linea)}
.publicacion .vista img{width:100%;height:100%;object-fit:cover}
.publicacion .vista em{color:var(--apagado);font-size:10px;letter-spacing:0}
.publicacion .ghost{text-align:center;text-decoration:none;font-size:8px;padding:9px}
.publicaciones .guardar-web{grid-column:1/-1}

/* ── Buscador de imágenes ────────────────────────────────── */
.buscador-img{display:grid;grid-template-columns:1fr auto;max-width:640px;margin-bottom:20px}
.img-actual{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:12px}
.img-actual figure{margin:0;width:158px}
.img-actual img{width:158px;height:158px;object-fit:contain;background:#fff;border:1px solid var(--linea)}
.img-actual figcaption{margin-top:7px;color:var(--apagado);font-size:9px;line-height:1.5}
.candidatas{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:16px}
.candidata{display:grid;gap:9px;align-content:start;padding:14px;background:var(--superficie);border:1px solid var(--linea);transition:border-color .3s,transform .3s}
.candidata:hover{border-color:var(--azul);transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,29,89,.1)}
.candidata img{width:100%;aspect-ratio:1;object-fit:contain;background:#fff}
.candidata b{font-size:11px;line-height:1.45}
.candidata small{color:var(--apagado);font-size:9px}
.candidata .ghost{text-align:center;text-decoration:none;font-size:8px;padding:8px}
.candidata button{width:100%}

/* ── Entrar ──────────────────────────────────────────────── */
.pantalla-login{display:grid;place-items:center;min-height:100vh;background:linear-gradient(160deg,#00256e,var(--marino) 60%,#001238)}
.pantalla-login::after{
  content:"";position:fixed;width:640px;height:640px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 40% 40%,rgba(0,127,208,.35),transparent 65%);
  filter:blur(14px);
}
.tarjeta-login{position:relative;z-index:1;width:min(380px,90vw);display:grid;gap:16px;padding:40px;background:#fff;border:0;box-shadow:0 30px 70px rgba(0,10,40,.45)}
.tarjeta-login img{height:52px;justify-self:center;object-fit:contain}
.tarjeta-login h1{margin:0;font-size:18px;text-align:center;letter-spacing:-.02em}
.tarjeta-login input{width:100%;height:46px;padding:0 14px;border:1px solid var(--linea);background:#fff;color:var(--tinta);font-size:14px;outline:none;transition:border-color .25s,box-shadow .25s}
.tarjeta-login input:focus{border-color:var(--azul);box-shadow:0 0 0 3px var(--azul-claro)}
.tarjeta-login button{padding:14px;border:0;background:var(--azul);color:#fff;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:background .25s}
.tarjeta-login button:hover{background:#0a6fb0}
.tarjeta-login .error{margin:0;padding:11px 13px;background:#fdeceb;border-left:2px solid var(--rojo);color:#a01b12;font-size:12px}

/* ── Pantallas estrechas ─────────────────────────────────── */
@media(max-width:1180px){
  .metrics{grid-template-columns:1fr 1fr}
  .revision{grid-template-columns:1fr 1fr}
  .cat-filtros{grid-template-columns:1fr 1fr}
  .publicaciones{grid-template-columns:1fr}
  .campos-web{grid-template-columns:1fr}
  .toolbar{grid-template-columns:1fr 1fr}
  .search{grid-column:1/-1;height:42px}
  .thead span:nth-child(6),.row>.status{display:none}
  .thead,.row{grid-template-columns:22px minmax(170px,1.5fr) minmax(110px,1fr) 64px 92px 68px}
}
@media(max-width:820px){
  body>aside{transform:translateX(-100%);transition:transform .3s}
  body>aside.open{transform:none}
  #menu{display:block;border:1px solid var(--linea);background:#fff;color:var(--marino);padding:9px 13px;font-size:16px}
  main{margin-left:0;padding:22px 18px 80px}
  header{align-items:flex-start;flex-direction:column;gap:14px}
  .metrics{grid-template-columns:1fr 1fr}
  .thead{display:none}
  .row{grid-template-columns:22px minmax(140px,1fr) 62px 68px}
  .row>.spec,.row>strong:nth-of-type(2){display:none}
  .cat-datos,.cat-filtros,.form-grid,.split,.toolbar{grid-template-columns:1fr}
  .cat-lista .thead,.row-cat{grid-template-columns:26px 1fr 60px}
  .row-cat>span:nth-child(4),.row-cat>span:nth-child(5){display:none}
  .pedido-cab{grid-template-columns:1fr}
  .pedido-cab strong{text-align:left}
  .pedido-lineas div{grid-template-columns:40px 1fr 70px}
  .pedido-lineas em{display:none}
  .row-imp,.row-imp.tres,.row-imp.dos{grid-template-columns:1fr auto}
  .wide{grid-column:auto}
}

/* Chrome pinta de blanco los campos que autorrellena y se carga el diseño
   oscuro. No hay forma de cambiar ese fondo: se tapa con una sombra interior
   del color de la superficie. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--tinta);
  -webkit-box-shadow:0 0 0 60px #fff inset;
  caret-color:var(--tinta);
  transition:background-color 9999s ease-in-out 0s;
}

/* Usuarios */
.usuarios-fila{grid-template-columns:minmax(160px,1.4fr) minmax(180px,1.6fr) 130px 120px 190px}
.activo-si{color:var(--verde);font-weight:600}
.activo-no{color:var(--apagado)}
.acciones-usuario{display:flex;gap:8px;justify-content:flex-end}
.acciones-usuario .ghost{display:inline-flex;align-items:center;text-decoration:none;padding:8px 14px;font-size:10px}
.acciones-usuario .peligro{border-color:#f5c2be;color:var(--rojo)}
.acciones-usuario .peligro:hover{background:#fdeceb;border-color:var(--rojo);color:var(--rojo)}
.form-usuario{padding:24px;background:var(--superficie);border:1px solid var(--linea)}
.campos-usuario{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.campos-usuario .linea-check{grid-column:1/-1;display:flex;align-items:center;gap:9px}
.campos-usuario .linea-check input{width:16px;height:16px;accent-color:var(--azul)}
.campos-usuario .linea-check span{color:var(--tinta);font-size:12px}
.form-usuario .guardar-web{gap:9px}
@media(max-width:900px){.campos-usuario{grid-template-columns:1fr}.usuarios-fila{grid-template-columns:1fr auto}}

/* ── Tableros del resumen ────────────────────────────────── */
.tableros{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:14px}
.tablero{padding:24px;background:var(--superficie);border:1px solid var(--linea);box-shadow:0 1px 2px rgba(11,21,36,.04)}
.tablero.ancho{grid-column:1/-1}
.tablero h2{margin:0;font-size:clamp(1.1rem,1.7vw,1.4rem)}
.tablero-nota{margin:8px 0 20px;color:var(--tenue);font-size:11.5px}
.tablero-vacio{margin:0;padding:26px 0;color:var(--apagado);font-size:12px;text-align:center}

.barras{display:grid;gap:11px}
/* La pista es fina y recesiva; la barra lleva su nombre y su cifra escritos,
   así el color no es nunca la única pista de qué es cada cosa. */
.barra{display:grid;grid-template-columns:minmax(96px,150px) 1fr auto;align-items:center;gap:13px;padding:3px 0;cursor:default;outline:none}
.barra:focus-visible{outline:2px solid var(--azul);outline-offset:3px}
.barra-nombre{color:var(--tinta);font-family:var(--interfaz);font-size:12px;font-weight:500;letter-spacing:-.005em}
.barra-pista{position:relative;height:10px;background:#eef2f7;overflow:hidden}
.barra-pista i{display:block;height:100%;border-radius:0 4px 4px 0;transition:width .7s cubic-bezier(.2,.8,.2,1),filter .2s}
.barra:hover .barra-pista i,.barra:focus .barra-pista i{filter:brightness(1.12)}
.barra-valor{min-width:76px;color:var(--tinta);font-family:var(--display);font-size:13px;letter-spacing:-.02em;text-align:right}

.lector{position:fixed;z-index:80;padding:8px 12px;background:var(--tinta);color:#fff;font-size:11.5px;pointer-events:none;box-shadow:0 8px 20px rgba(0,0,0,.22)}
.lector[hidden]{display:none}

@media(max-width:1180px){.tableros{grid-template-columns:1fr}}
@media(max-width:600px){
  .barra{grid-template-columns:1fr auto;row-gap:6px}
  .barra-pista{grid-column:1/-1;order:3}
}

/* ── Anillos ─────────────────────────────────────────────── */
.anillo-caja{display:grid;place-items:center;padding:6px 0 14px}
.anillo{width:min(220px,100%);height:auto;transform:rotate(-90deg)}
.anillo .arco{
  stroke-linecap:butt;
  transform-origin:100px 100px;
  transition:opacity .3s,stroke-width .3s;
  animation:dibujar .9s cubic-bezier(.2,.8,.2,1) both;
  animation-delay:var(--retraso,0s);
}
@keyframes dibujar{from{stroke-dasharray:0 999}}
.anillo .arco:hover{stroke-width:32}
.anillo .arco.apagado{opacity:.22}
.anillo text{transform:rotate(90deg);transform-origin:100px 100px;text-anchor:middle}
.centro-cifra{fill:var(--tinta);font-family:var(--display);font-size:30px;letter-spacing:-.03em}
.centro-texto{fill:var(--tenue);font-family:var(--interfaz);font-size:11px;font-weight:500}

.leyenda{display:grid;gap:7px;margin-top:4px}
.clave{display:grid;grid-template-columns:11px 1fr auto;align-items:center;gap:10px;padding:5px 2px;cursor:default;transition:opacity .3s}
.clave.apagado{opacity:.3}
.clave i{width:11px;height:11px;border-radius:2px}
.clave b{color:var(--tinta);font-family:var(--interfaz);font-size:12px;font-weight:500}
.clave u{color:var(--tinta);font-family:var(--display);font-size:12px;text-decoration:none;letter-spacing:-.02em}

/* ── Columnas ────────────────────────────────────────────── */
.columnas{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:14px;align-items:end;padding-top:10px;min-height:190px}
.columna{display:grid;grid-template-rows:auto 1fr auto;gap:9px;justify-items:center;height:100%;cursor:default;outline:none}
.columna:focus-visible{outline:2px solid var(--azul);outline-offset:4px}
.columna b{font-family:var(--display);font-size:16px;letter-spacing:-.02em;color:var(--tinta)}
.columna .tallo{display:flex;align-items:flex-end;justify-content:center;width:100%;height:100%;min-height:90px;background:linear-gradient(180deg,transparent,#f2f5f9)}
.columna .tallo i{
  display:block;width:min(60px,70%);border-radius:4px 4px 0 0;
  animation:crecer .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--retraso,0s);
  transition:filter .2s;
}
@keyframes crecer{from{height:0!important}}
.columna:hover .tallo i{filter:brightness(1.12)}
.columna small{color:var(--tenue);font-family:var(--interfaz);font-size:11px;text-align:center}

@media(prefers-reduced-motion:reduce){
  .anillo .arco,.columna .tallo i,.barra-pista i{animation:none;transition:none}
}

/* ── Reportes ────────────────────────────────────────────── */
.filtros-fecha{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:12px;padding:14px;background:var(--superficie);border:1px solid var(--linea)}
.rangos{display:flex;flex-wrap:wrap;gap:7px}
.rangos a{padding:9px 14px;background:var(--superficie-alta);border:1px solid var(--linea);color:var(--tenue);font-family:var(--interfaz);font-size:11px;font-weight:500;text-decoration:none;transition:.25s}
.rangos a:hover{border-color:var(--azul);color:var(--azul)}
.rangos a.activo{background:var(--marino);border-color:var(--marino);color:#fff}
.fechas{display:flex;align-items:flex-end;gap:9px}
.fechas label{gap:5px}
.fechas input{width:auto;min-width:150px}
.periodo{margin:0 0 18px;color:var(--tenue);font-size:12px}
.periodo b{color:var(--tinta)}
.metrics.seis{grid-template-columns:repeat(6,1fr)}
.metrics.seis strong{font-size:clamp(1.3rem,2.1vw,1.9rem)}

.serie{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;align-items:end;min-height:180px;padding-top:8px}
.dia{display:grid;grid-template-rows:1fr auto;gap:7px;justify-items:center;height:100%;cursor:default;outline:none}
.dia:focus-visible{outline:2px solid var(--azul);outline-offset:3px}
.dia .tallo{display:flex;align-items:flex-end;width:100%;height:100%;min-height:120px}
.dia .tallo i{display:block;width:100%;background:var(--azul);border-radius:3px 3px 0 0;transition:background .2s;animation:crecer .7s cubic-bezier(.2,.8,.2,1) both}
.dia:hover .tallo i{background:var(--marino)}
.dia small{color:var(--apagado);font-size:9px;white-space:nowrap}
.dia.sin-fecha small{visibility:hidden}

.tabla-reporte{display:grid;gap:1px}
.tabla-reporte .cabecera,.tabla-reporte .linea{display:grid;grid-template-columns:minmax(150px,1fr) 90px 100px;gap:12px;align-items:center;padding:11px 4px}
.tabla-reporte .cabecera{color:var(--tenue);font-family:var(--interfaz);font-size:10px;font-weight:600;border-bottom:1px solid var(--linea)}
.tabla-reporte .cabecera span:not(:first-child),.tabla-reporte .linea span:not(:first-child){text-align:right}
.tabla-reporte .linea{border-bottom:1px solid var(--linea);font-size:11.5px}
.tabla-reporte .linea:hover{background:var(--superficie-alta)}
.tabla-reporte b{display:block;color:var(--tinta)}
.tabla-reporte small{display:block;margin-top:3px;color:var(--apagado);font-size:9.5px}
.tabla-reporte .linea span:not(:first-child){font-family:var(--display);font-size:12px;letter-spacing:-.02em}

@media(max-width:1180px){.metrics.seis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.metrics.seis{grid-template-columns:1fr 1fr}.filtros-fecha{flex-direction:column;align-items:stretch}.serie small{display:none}}
@media print{
  body>aside,.filtros-fecha,.top-actions,#menu{display:none!important}
  main{margin-left:0;padding:0}
  body::before{display:none}
  .tablero,.metrics article{break-inside:avoid;border:1px solid #ccc}
}


/* ── Tableros con Chart.js ───────────────────────────────── */
.tablero-cabeza{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.tablero-cabeza h2{margin:0}
.tablero-cabeza .tablero-nota{margin:4px 0 0}
.conmutador{display:flex;gap:0;padding:3px;background:var(--superficie-alta);border:1px solid var(--linea);border-radius:8px}
.conmutador button{padding:7px 13px;background:none;border:0;border-radius:6px;color:var(--tenue);font-family:var(--interfaz);font-size:11px;font-weight:500;cursor:pointer;transition:.2s}
.conmutador button:hover{color:var(--tinta)}
.conmutador button.activo{background:var(--marino);color:#fff;box-shadow:0 1px 3px rgba(0,29,89,.28)}
.lienzo{position:relative;height:280px}
.tablero.ancho .lienzo{height:320px}
.tablero.bajo .lienzo{height:150px}
.tablero .lienzo:has(canvas[data-alto]){height:430px}
/* Los dos paneles de la tendencia: mismo ancho, pegados, sin repetir fechas. */
.tablero .lienzo.par{display:grid;grid-template-rows:1fr 1fr;gap:2px;height:380px;overflow:hidden}
.tablero .lienzo.par .panel{position:relative;min-height:0}
.tendencia-claves{display:flex;gap:20px;margin:0 0 10px}
.tendencia-claves span{display:inline-flex;align-items:center;gap:7px;color:var(--tinta);font-family:var(--interfaz);font-size:11px;font-weight:500}
.tendencia-claves i{width:9px;height:9px;border-radius:50%}
@media(max-width:820px){
  .lienzo,.tablero.ancho .lienzo{height:240px}
  .tablero-cabeza{flex-direction:column}
  .conmutador{align-self:stretch}
  .conmutador button{flex:1}
}