@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --fondo:#EFF1EB; --sup:#FFFFFF; --sup2:#F7F8F3;
  --linea:#D7DBD0; --linea-suave:#E6E9E0;
  --texto:#151B18; --texto2:#57635C; --texto3:#88958D;
  --acento:#0F5F46; --acento-tinta:#0B4A36; --acento-suave:#DCEDE4;
  --alerta:#A24718; --alerta-suave:#F7E4D8;
  --sombra:0 1px 2px rgba(20,32,26,.06), 0 8px 24px -14px rgba(20,32,26,.28);
  --p-s:34%; --p-l:91%; --p-fs:52%; --p-fl:25%; --p-bs:28%; --p-bl:79%;
  --radio:10px;
}
@media (prefers-color-scheme: dark){
  :root{
    --fondo:#0D1210; --sup:#151C19; --sup2:#1B2420;
    --linea:#2A342F; --linea-suave:#212B27;
    --texto:#E3E9E4; --texto2:#98A69E; --texto3:#6D7A73;
    --acento:#54BC92; --acento-tinta:#8ED8B7; --acento-suave:#163027;
    --alerta:#E28C58; --alerta-suave:#3A2419;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -16px rgba(0,0,0,.8);
    --p-s:30%; --p-l:16%; --p-fs:50%; --p-fl:70%; --p-bs:24%; --p-bl:28%;
  }
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--fondo); color:var(--texto);
  font-family:"IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
.mono{font-family:"IBM Plex Mono", ui-monospace, Menlo, monospace}
a{color:var(--acento-tinta)}
button{font:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--acento); outline-offset:2px; border-radius:4px}
.marco{max-width:1180px; margin:0 auto; padding:28px 22px 90px}

/* ---------- acceso ---------- */
.pantalla-acceso{display:grid; place-items:center; min-height:100vh; padding:24px}
.tarjeta-acceso{
  width:min(420px,100%); background:var(--sup); border:1px solid var(--linea-suave);
  border-radius:14px; box-shadow:var(--sombra); padding:32px 30px;
}
.tarjeta-acceso h1{font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:25px; margin:0 0 6px; letter-spacing:-.015em}
.tarjeta-acceso .sub{margin:0 0 22px; color:var(--texto2); font-size:13.5px}
.tarjeta-acceso label{display:block; margin-bottom:14px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--texto3); font-weight:600}
.tarjeta-acceso input{
  display:block; width:100%; margin-top:6px; padding:10px 12px; border-radius:8px;
  border:1px solid var(--linea); background:var(--sup2); color:var(--texto);
  font:inherit; font-size:14.5px; text-transform:none; letter-spacing:normal;
}
.tarjeta-acceso .boton{width:100%; justify-content:center; margin-top:6px}
.mal{background:var(--alerta-suave); color:var(--alerta); border:1px solid var(--alerta); border-radius:8px; padding:9px 12px; font-size:13.5px; margin:0 0 16px}
.ok{background:var(--acento-suave); color:var(--acento-tinta); border:1px solid var(--acento); border-radius:8px; padding:9px 12px; font-size:13.5px}
.aviso{font-size:13.5px; color:var(--texto2)}
code{font-family:"IBM Plex Mono",monospace; font-size:12.5px; background:var(--sup2); padding:2px 5px; border-radius:4px}

/* ---------- cabecera ---------- */
.cabecera{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:22px}
.marca h1{font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:30px; letter-spacing:-.015em; margin:0; text-wrap:balance}
.fila-etiquetas{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.dato{
  display:inline-flex; align-items:baseline; gap:6px; padding:5px 10px; border-radius:999px;
  background:var(--sup); border:1px solid var(--linea-suave); font-size:12.5px; color:var(--texto2);
}
.dato b{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--texto); font-variant-numeric:tabular-nums}

/* ---------- barra ---------- */
.barra{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:10px;
  background:var(--sup); border:1px solid var(--linea-suave); border-radius:var(--radio);
  box-shadow:var(--sombra); margin-bottom:14px;
}
.boton{
  display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:8px;
  border:1px solid var(--linea); background:var(--sup2); font-size:13.5px; font-weight:500;
  text-decoration:none; color:var(--texto); transition:background .14s, border-color .14s;
}
.boton:hover{background:var(--fondo); border-color:var(--texto3)}
.boton.principal{background:var(--acento); border-color:var(--acento); color:#fff}
@media (prefers-color-scheme: dark){.boton.principal{color:#08120E}}
.boton.principal:hover{filter:brightness(1.06)}
.boton.fantasma{background:transparent; border-color:transparent; color:var(--texto2); padding:8px 10px}
.boton.fantasma:hover{background:var(--sup2); color:var(--texto)}
.boton.peligro{border-color:var(--alerta); color:var(--alerta); background:transparent}
.boton.peligro:hover{background:var(--alerta-suave)}
.boton.peligro-lleno{background:var(--alerta); border-color:var(--alerta); color:#fff}
.boton[disabled]{opacity:.45; pointer-events:none}
.crece{flex:1 1 180px; min-width:150px}
.hueco{flex:1}
.campo{
  width:100%; padding:8px 11px; border-radius:8px; border:1px solid var(--linea);
  background:var(--sup2); color:var(--texto); font:inherit; font-size:13.5px;
}
.campo::placeholder{color:var(--texto3)}
.pista{margin:0 0 10px 2px; font-size:12.5px; color:var(--texto3)}

/* ---------- tabla ---------- */
.panel{background:var(--sup); border:1px solid var(--linea-suave); border-radius:var(--radio); box-shadow:var(--sombra); overflow:hidden}
.desplaza{overflow-x:auto}
table{border-collapse:collapse; width:100%; min-width:700px}
thead th{
  position:sticky; top:0; z-index:2; background:var(--sup2); text-align:left;
  font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--texto3); padding:11px 12px; border-bottom:1px solid var(--linea);
}
tbody td{padding:6px 12px; border-bottom:1px solid var(--linea-suave); vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--sup2)}
.c-cod{width:92px} .c-nom{min-width:340px} .c-pre{width:116px}
.c-est{width:158px} .c-org{width:74px} .c-acc{width:76px}
.celda{
  width:100%; border:1px solid transparent; background:transparent; color:inherit;
  font:inherit; font-size:14px; padding:7px 8px; border-radius:7px;
}
.celda:hover{border-color:var(--linea-suave)}
.celda:focus{border-color:var(--acento); background:var(--sup); outline:none}
.celda:disabled{opacity:1; color:inherit; cursor:default}
.celda:disabled:hover{border-color:transparent}
.celda.cod{font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--texto2)}
.celda.pre{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; text-align:right}
textarea.celda{display:block; resize:none; overflow:hidden; line-height:1.36; min-height:2.72em; font-family:inherit; padding:6px 8px}
.fila-url{margin:1px 0 3px 8px}
.chip-url{
  display:inline-flex; align-items:center; gap:6px; max-width:100%;
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--texto2);
  text-decoration:none; padding:5px 9px; border:1px solid var(--linea-suave);
  border-radius:999px; background:var(--sup2);
}
.chip-url span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chip-url::after{content:"↗"; flex:0 0 auto; font-size:10px; opacity:.65}
.chip-url:hover{color:var(--acento-tinta); border-color:var(--acento); background:var(--sup)}
.sin-url{font-size:12px; color:var(--texto3); padding-left:4px}
.pastilla{
  --h:150; width:100%; appearance:none; -webkit-appearance:none;
  padding:6px 26px 6px 11px; border-radius:999px; font-size:12.5px; font-weight:500;
  background-color:hsl(var(--h) var(--p-s) var(--p-l));
  color:hsl(var(--h) var(--p-fs) var(--p-fl));
  border:1px solid hsl(var(--h) var(--p-bs) var(--p-bl));
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 14px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px);
  background-size:4px 4px, 4px 4px; background-repeat:no-repeat;
}
.origen{display:flex; gap:4px}
.origen i{
  width:25px; height:25px; border-radius:7px; display:grid; place-items:center;
  font-style:normal; font-size:11px; font-weight:600; font-family:"IBM Plex Mono",monospace;
  border:1px solid hsl(var(--h) var(--p-bs) var(--p-bl));
  background:hsl(var(--h) var(--p-s) var(--p-l)); color:hsl(var(--h) var(--p-fs) var(--p-fl));
  cursor:default;
}
.acciones{display:flex; gap:5px; justify-content:flex-end}
.mini-boton{
  width:28px; height:28px; border-radius:7px; border:1px solid var(--linea-suave);
  background:transparent; color:var(--texto3); font-size:13px; display:grid; place-items:center;
}
.mini-boton:hover{color:var(--acento-tinta); border-color:var(--acento); background:var(--sup)}
.mini-boton.peligro:hover{color:var(--alerta); border-color:var(--alerta)}

/* ---------- vacío ---------- */
.vacio{padding:44px 24px; text-align:center}
.vacio h2{font-family:"Fraunces",Georgia,serif; font-weight:500; font-size:21px; margin:0 0 6px}
.vacio p{margin:0 auto 18px; color:var(--texto2); font-size:14px; max-width:46ch}
.centro{text-align:center; padding:34px 10px; color:var(--texto2)}

/* ---------- bandeja ---------- */
.barra-bandeja{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:13px 16px; margin-bottom:14px; border-radius:var(--radio);
  border:1px solid var(--alerta); background:var(--alerta-suave); color:var(--alerta);
}
.barra-bandeja strong{font-size:14.5px}
.barra-bandeja .sub{font-size:12.5px; opacity:.85; margin-top:2px}
.barra-bandeja.enviado{border-color:var(--acento); background:var(--acento-suave); color:var(--acento-tinta)}

/* ---------- modales ---------- */
.velo{position:fixed; inset:0; background:rgba(12,20,16,.5); display:grid; place-items:center; padding:20px; z-index:40}
.modal{
  width:min(880px,100%); max-height:88vh; display:flex; flex-direction:column;
  background:var(--sup); border:1px solid var(--linea); border-radius:14px;
  box-shadow:0 24px 70px -20px rgba(0,0,0,.5); overflow:hidden;
}
.modal > header{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 20px; border-bottom:1px solid var(--linea-suave)}
.modal > header h2{font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:19px; margin:0}
.modal .cuerpo{padding:18px 20px; overflow-y:auto}
.modal > footer{display:flex; align-items:center; gap:10px; padding:14px 20px; border-top:1px solid var(--linea-suave); background:var(--sup2); flex-wrap:wrap}
.cerrar{border:none; background:transparent; color:var(--texto3); font-size:20px; padding:4px 8px; border-radius:6px}
.cerrar:hover{color:var(--texto); background:var(--sup2)}
.soltar{border:1.5px dashed var(--linea); border-radius:12px; padding:38px 20px; text-align:center; background:var(--sup2); transition:border-color .15s, background .15s}
.soltar.encima{border-color:var(--acento); background:var(--acento-suave)}
.soltar h3{margin:0 0 6px; font-size:16px}
.soltar p{margin:0 0 16px; color:var(--texto2); font-size:13.5px}
.recuento{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; align-items:center}
.recuento .dato b{font-size:14px}
.recuento .dato.caliente{border-color:var(--alerta); color:var(--alerta)}
.recuento .dato.caliente b{color:var(--alerta)}
.bloque{border:1px solid var(--linea-suave); border-radius:10px; margin-bottom:12px; overflow:hidden; background:var(--sup)}
.bloque > summary{list-style:none; cursor:pointer; padding:11px 14px; background:var(--sup2); font-size:13px; font-weight:600; display:flex; align-items:center; gap:8px}
.bloque > summary::-webkit-details-marker{display:none}
.bloque > summary::before{content:"▸"; color:var(--texto3); font-size:11px; transition:transform .15s}
.bloque[open] > summary::before{transform:rotate(90deg)}
.bloque.nuevo > summary, .bloque.decide > summary{background:var(--alerta-suave); color:var(--alerta)}
.linea-nueva{display:grid; grid-template-columns:26px 1fr 108px; gap:8px; align-items:center; padding:8px 14px; border-bottom:1px solid var(--linea-suave)}
.linea-nueva:last-child{border-bottom:none}
.linea-nueva .abajo{grid-column:2 / -1; display:flex; gap:8px; align-items:center}
.linea-nueva input[type=checkbox]{width:16px; height:16px; accent-color:var(--acento)}
.mini{width:100%; border:1px solid var(--linea-suave); background:var(--sup2); color:inherit; font:inherit; font-size:13.5px; padding:6px 9px; border-radius:7px}
.mini:focus{border-color:var(--acento); outline:none; background:var(--sup)}
.mini.url{font-size:12px; color:var(--texto2); font-family:"IBM Plex Mono",monospace}
.mini.pre{font-family:"IBM Plex Mono",monospace; text-align:right; font-variant-numeric:tabular-nums}
/* ficha de catálogo: recortes del PDF junto a los campos */
.linea-nueva.ficha{grid-template-columns:26px 1fr; align-items:start; padding:14px}
.linea-nueva.ficha.falta{background:var(--sup2)}
.linea-nueva.ficha.vinculada{background:var(--acento-suave); opacity:.9}
.linea-nueva.ficha.vinculada .ficha-campos{display:none}
.ficha-cuerpo{display:flex; flex-direction:column; gap:9px; min-width:0}
.rec{display:block; border:1px solid var(--linea-suave); border-radius:8px; background:#fff; max-width:100%}
.rec-tit{width:100%; max-width:460px}
.rec-pre{height:46px; width:auto}
.rec-cod{height:34px; width:auto}
.ficha-campos{display:grid; grid-template-columns:1fr 110px; gap:8px}
.ficha-pruebas{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.mini.vinc{width:auto; max-width:100%; font-size:12px; padding:5px 8px}
.cerca{grid-column:2 / -1; font-size:11.5px; color:var(--alerta); margin-top:2px}
.cod-prov{flex:0 0 auto; font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--texto3); border:1px solid var(--linea-suave); border-radius:6px; padding:4px 8px; background:var(--sup2)}
.linea-dup{padding:10px 14px; border-bottom:1px solid var(--linea-suave); font-size:13px; display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.linea-dup:last-child{border-bottom:none}
.info-dup{flex:1 1 260px; min-width:0}
.info-dup .vs{color:var(--texto3); font-size:12px; margin-top:2px}
.botones-dup{display:flex; gap:6px}
.botones-dup .boton{padding:5px 11px; font-size:12.5px}
.por-que{color:var(--texto3); font-size:12px; font-family:"IBM Plex Mono",monospace}
.linea-cruda{padding:5px 14px; font-size:12.5px; font-family:"IBM Plex Mono",monospace; color:var(--texto2); display:flex; gap:10px; align-items:center; border-bottom:1px solid var(--linea-suave)}
.linea-cruda span{flex:1; overflow-wrap:anywhere}
.mas{flex:0 0 auto; border:1px solid var(--linea); background:var(--sup2); border-radius:6px; width:24px; height:24px; font-size:14px}
.mas:hover{border-color:var(--acento); color:var(--acento-tinta)}
.etiqueta{display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--texto3); margin-bottom:5px; font-weight:600}
.rejilla{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px}
.rejilla .ancho{grid-column:1 / -1}
.zona-peligro{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:20px; padding:13px 15px; border:1px solid var(--linea); border-radius:10px; background:var(--sup2)}
.zona-peligro p{margin:0; font-size:13px; color:var(--texto2)}
.fino{font-size:12.5px; color:var(--texto3)}
.editar-estado{display:flex; gap:8px; align-items:center; margin-bottom:8px}
.muestra{width:14px; height:14px; border-radius:4px; flex:0 0 auto; border:1px solid hsl(var(--h) var(--p-bs) var(--p-bl)); background:hsl(var(--h) var(--p-s) var(--p-l))}
.barra-progreso{height:4px; background:var(--linea-suave); border-radius:99px; overflow:hidden; margin-top:14px}
.barra-progreso i{display:block; height:100%; background:var(--acento); width:0%; transition:width .25s}
table.usuarios{min-width:auto; width:100%}
table.usuarios td, table.usuarios th{padding:9px 10px; font-size:13.5px}

#aviso{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:var(--texto); color:var(--fondo); padding:10px 16px; border-radius:9px;
  font-size:13.5px; box-shadow:var(--sombra); z-index:60; opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s; max-width:90vw; text-align:center;
}
#aviso.visible{opacity:1; transform:translateX(-50%) translateY(-4px)}

@media (prefers-reduced-motion: reduce){*{transition:none !important; animation:none !important}}
@media (max-width:640px){
  .marco{padding:20px 14px 80px}
  .marca h1{font-size:25px}
  .linea-nueva{grid-template-columns:26px 1fr}
  .linea-nueva .abajo{grid-column:1 / -1}
  .rejilla{grid-template-columns:1fr}
}