:root {
  --fondo: #F7F5F1;
  --tarjeta: #FFFFFF;
  --tinta: #16181A;
  --tenue: #5E646A;
  --linea: #E0DCD5;
  --linea-suave: #F0EDE8;
  --lateral: #1C1F22;
  --acento: #B8650F;
  --acento-claro: #F0A54A;
  --acento-suave: #FBEBD6;
  --rojo: #C62828;
  --rojo-suave: #FDE3E3;
  --amarillo: #B88400;
  --amarillo-texto: #7A5800;
  --amarillo-suave: #FFF3CC;
  --verde: #2E7D32;
  --verde-suave: #E0F2E1;
  --azul: #1F5FA8;
  --azul-suave: #E1ECF8;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: var(--fondo); color: var(--tinta); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--acento); }
[hidden] { display: none !important; }

.marca { color: #fff; font-weight: 800; font-size: 18px; letter-spacing: .04em; line-height: 1; padding: 0 10px 18px; }
.marca small { display: block; font-size: 10.5px; letter-spacing: .42em; color: var(--acento-claro); margin-top: 4px; }
.marca.grande { color: var(--tinta); font-size: 28px; padding: 0; text-align: center; }
.marca.grande small { font-size: 12px; color: var(--acento); }

.ingreso { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; }
.ingreso-caja { width: 100%; max-width: 360px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 16px; padding: 32px 28px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.ingreso-sub { text-align: center; color: var(--tenue); margin: -4px 0 6px; }
.ingreso-caja label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }

input[type=text], input[type=email], input[type=password], input[type=search], input:not([type]), select {
  height: 38px; border: 1px solid var(--linea); border-radius: 9px; background: var(--tarjeta); padding: 0 10px; width: 100%; font-weight: 400;
}
input:focus, select:focus, button:focus-visible, td.editable:focus { outline: 2px solid var(--acento); outline-offset: 1px; }

.app { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.lateral { background: var(--lateral); color: #C9CDD1; padding: 20px 12px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; }
.grupo { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: #7D848A; padding: 14px 10px 4px; }
.item { padding: 8px 10px; border-radius: 8px; color: #C9CDD1; text-decoration: none; }
.item:hover { background: #262A2E; }
.item.activo { background: #2C3135; color: #fff; font-weight: 600; }
.usuario { margin-top: auto; padding: 12px 10px 0; border-top: 1px solid #33383C; font-size: 12px; display: flex; flex-direction: column; gap: 2px; }
.usuario b { color: #fff; font-size: 13px; }
.usuario .enlace { color: var(--acento-claro); margin-top: 6px; text-align: left; }

.principal { padding: 22px 26px 40px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cabecera { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cabecera h1 { font-size: 22px; flex: 1; }
.sub-cabecera { color: var(--tenue); font-size: 12.5px; }

.boton { height: 36px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--linea); background: var(--tarjeta); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; color: var(--tinta); white-space: nowrap; }
.boton:hover { border-color: #C9C3B9; }
.boton.primario { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.boton.primario:hover { background: #2B2F33; }
.boton.ancho { width: 100%; height: 42px; }
.boton.pequeno { height: 30px; padding: 0 10px; font-size: 12px; }
.boton:disabled { opacity: .55; cursor: default; }
.enlace { background: none; border: 0; color: var(--acento); cursor: pointer; font-weight: 600; padding: 0; }
.enlace.peligro { color: var(--rojo); }
.enlace-fila { background: none; border: 0; text-align: left; cursor: pointer; font-weight: 500; padding: 0; }
.enlace-fila:hover { color: var(--acento); text-decoration: underline; }

.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.kpi { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; }
.kpi span { font-size: 11.5px; color: var(--tenue); display: block; }
.kpi b { font-size: 24px; display: block; margin: 4px 0 2px; }
.kpi small { font-size: 11.5px; color: var(--tenue); }
.rojo-t { color: var(--rojo); }
.amarillo-t { color: var(--amarillo-texto); }
.verde-t { color: var(--verde); }
.tenue { color: var(--tenue); }

.rejilla { display: grid; gap: 14px; }
.rejilla.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 12px; padding: 16px 18px; min-width: 0; }
.panel.sin-relleno { padding: 0; overflow: hidden; }
.panel h3 { font-size: 14.5px; margin-bottom: 10px; }

.tabla-contenedor { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); font-weight: 700; padding: 9px 10px; border-bottom: 1px solid var(--linea); white-space: nowrap; background: #FCFBF9; position: sticky; top: 0; }
.tabla th[data-orden] { cursor: pointer; }
.tabla th.ordenado::after { content: " ▲"; }
.tabla th.ordenado[data-direccion=desc]::after { content: " ▼"; }
.tabla td { padding: 8px 10px; border-bottom: 1px solid var(--linea-suave); vertical-align: middle; }
.tabla tr:hover td { background: #FCFBF8; }
.tabla .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla.compacta td, .tabla.compacta th { padding: 6px 8px; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--tenue); }
td.editable { cursor: text; }
td.editable:hover { box-shadow: inset 0 0 0 1px var(--acento); }
td.falta { background: var(--amarillo-suave); color: var(--amarillo-texto); font-weight: 600; font-size: 12px; }
.entrada-celda { height: 30px; width: 110px; text-align: right; }
.pie-tabla { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; color: var(--tenue); font-size: 12.5px; border-top: 1px solid var(--linea-suave); }

.barra-filtros { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.buscador { max-width: 320px; }
.filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.filtro { height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--linea); background: var(--tarjeta); font-size: 12.5px; cursor: pointer; }
.filtro span { color: var(--tenue); margin-left: 2px; }
.filtro.activo { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.filtro.activo span { color: #C9CDD1; }

.etiqueta { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.etiqueta.provisional { background: var(--azul-suave); color: var(--azul); }
.etiqueta.clase-a { background: var(--rojo-suave); color: var(--rojo); }
.etiqueta.clase-b { background: var(--amarillo-suave); color: var(--amarillo-texto); }
.etiqueta.clase-c { background: #EEE; color: #555; }
.punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; }
.punto.rojo { background: var(--rojo); }
.punto.amarillo { background: var(--amarillo); }
.punto.verde { background: var(--verde); }

.lista-calidad { display: flex; flex-direction: column; gap: 9px; }
.cal { display: grid; grid-template-columns: 200px 1fr 92px; align-items: center; gap: 10px; font-size: 13px; }
.cal a { color: var(--tinta); }
.cal .barra { height: 8px; border-radius: 4px; background: #ECE8E1; overflow: hidden; }
.cal .barra div { height: 100%; background: var(--rojo); }
.cal b { text-align: right; font-variant-numeric: tabular-nums; }

.ayuda { color: var(--tenue); font-size: 12.5px; line-height: 1.5; }
.ayuda.ancho { max-width: 760px; }
.vacio, .cargando { color: var(--tenue); text-align: center; padding: 24px; }
.mensaje-error { color: var(--rojo); background: var(--rojo-suave); border-radius: 9px; padding: 10px 12px; font-size: 13px; }
.exito { color: var(--verde); background: var(--verde-suave); border-radius: 9px; padding: 10px 12px; font-size: 13px; margin-bottom: 10px; }

.resumen-importacion { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 14px 0 10px; }
.resumen-importacion div { background: #FAF8F4; border: 1px solid var(--linea); border-radius: 10px; padding: 10px; text-align: center; }
.resumen-importacion b { font-size: 20px; display: block; }
.resumen-importacion span { font-size: 11.5px; color: var(--tenue); }
.notas { padding-left: 18px; font-size: 12.5px; color: var(--tenue); display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.casilla { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin: 8px 0; }
.casilla input { margin-top: 3px; }
.acciones { margin: 10px 0; display: flex; gap: 8px; }
.progreso { margin-top: 10px; }
.progreso-texto { font-size: 12.5px; color: var(--tenue); margin-bottom: 4px; }
.medidor { height: 10px; border-radius: 5px; background: #E5E1DA; overflow: hidden; }
.medidor div { height: 100%; background: var(--acento); transition: width .2s; }

.capa-modal { position: fixed; inset: 0; background: rgba(22,24,26,.45); display: grid; place-items: center; padding: 24px 16px; z-index: 20; overflow-y: auto; }
.modal { background: var(--tarjeta); border-radius: 14px; width: 100%; max-width: 960px; box-shadow: 0 20px 50px rgba(0,0,0,.3); display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
.modal-cabecera { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--linea); }
.modal-cabecera h2 { font-size: 17px; flex: 1; }
.cerrar { background: none; border: 0; font-size: 18px; cursor: pointer; color: var(--tenue); }
.modal-cuerpo { padding: 18px 20px; overflow-y: auto; }
.modal-pie { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--linea); }
.confirmar-texto { font-size: 15px; }

.ficha { display: grid; grid-template-columns: 180px 1fr; gap: 20px; }
.ficha-imagen { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.imagen-caja { width: 180px; height: 180px; border-radius: 12px; background: #EEEAE3; display: grid; place-items: center; overflow: hidden; color: var(--tenue); font-size: 12px; }
.imagen-caja img { width: 100%; height: 100%; object-fit: cover; }
.dato-stock { background: #FAF8F4; border: 1px solid var(--linea); border-radius: 10px; padding: 8px 10px; }
.dato-stock span { font-size: 11px; color: var(--tenue); display: block; }
.ficha-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
.ficha-campos label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--tenue); }
.ficha-campos .doble { grid-column: span 3; }
.titulo-seccion { font-size: 14px; margin: 20px 0 8px; }
.titulo-seccion small { font-weight: 400; color: var(--tenue); font-size: 12px; margin-left: 6px; }
.presentaciones input { height: 30px; }
.presentaciones .p-nombre { width: 120px; }
.presentaciones .p-precio { width: 110px; text-align: right; }
.equivalencia { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.equivalencia input { width: 80px; text-align: right; }

.nota-panel { background: var(--azul-suave); color: #163E6E; border-radius: 10px; padding: 10px 14px; font-size: 13px; line-height: 1.5; }

.avisos { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 40; }
.aviso { background: var(--tinta); color: #fff; padding: 10px 14px; border-radius: 10px; font-size: 13px; box-shadow: 0 6px 18px rgba(0,0,0,.25); max-width: 380px; }
.aviso.error { background: var(--rojo); }

@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rejilla.dos { grid-template-columns: 1fr; }
  .ficha { grid-template-columns: 1fr; }
  .ficha-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha-campos .doble { grid-column: span 2; }
}