/* Tema neutro del panel. El color de marca llega como --acento desde MARCA_COLOR. */

:root {
  --acento: #1f6feb;
  --acento-texto: #fff;

  --papel: #f6f7f9;
  --papel-2: #eceef2;
  --papel-3: #ffffff;
  --papel-4: #f9fafb;
  --tinta: #1f2328;
  --tinta-2: #3d444d;
  --suave: #4b535d;
  --tenue: #6b737d;
  --linea: #d8dce2;
  --linea-suave: #e8eaee;
  --linea-fuerte: #b9bfc8;

  --verde: #1a7f37;
  --verde-ink: #116329;
  --verde-claro: #7ee2a8;
  --verde-fondo: #e6f4ea;
  --ambar-ink: #8a5a00;
  --ambar-fondo: #fff4d6;
  --rojo-ink: #b42318;
  --rojo-fondo: #fdeceb;
  --rojo-linea: #f0a39c;

  --texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: var(--texto);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --r-sm: 6px;
  --r-md: 10px;
  --aire-sm: 12px;
  --aire-md: 20px;
  --aire-lg: 32px;
  --cabecera: 56px;
  --lateral: 232px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--texto); font-size: 15px; line-height: 1.5; }
a { color: var(--acento); }
h1, h2, h3 { line-height: 1.2; }
table { border-collapse: collapse; }

.saltar { position: absolute; left: -9999px; top: 8px; z-index: 50; padding: 8px 12px; background: var(--tinta); color: #fff; }
.saltar:focus { left: 8px; }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.icono { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: middle; }
.icono--chico { width: 14px; height: 14px; }
.icono--grande { width: 24px; height: 24px; }

/* ---------------------------------------------------------------- cabecera */

.tras-cabecera { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; height: var(--cabecera); padding: 0 16px; background: var(--papel-3); border-bottom: 1px solid var(--linea); }
.tras-cabecera__menu { display: inline-flex; padding: 6px; background: none; border: 0; color: var(--tinta); cursor: pointer; }
.tras-cabecera__marca { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--tinta); text-decoration: none; }
.tras-cabecera__nombre { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marca__cuadro { width: 22px; height: 22px; border-radius: 6px; background: var(--acento); flex: none; }
.marca__logo { width: 32px; height: 32px; object-fit: contain; border-radius: 6px; }
.tras-cabecera__cuenta { display: flex; align-items: center; gap: 10px; }
.tras-cuenta__usuario { display: none; font-size: 13px; color: var(--tenue); }
.tras-cuenta__salir { margin: 0; }
.tras-cuenta__boton { padding: 6px 12px; background: none; border: 1px solid var(--linea); border-radius: var(--r-sm); font: inherit; font-size: 13px; color: var(--tinta); cursor: pointer; }
.tras-cuenta__boton:hover { background: var(--papel-2); }
@media (min-width: 700px) { .tras-cuenta__usuario { display: inline; } }

/* ---------------------------------------------------------------- estructura */

.tras-cuerpo { display: block; }
.tras-lateral { position: fixed; top: var(--cabecera); bottom: 0; left: 0; z-index: 15; width: var(--lateral); padding: 16px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--papel-3); border-right: 1px solid var(--linea); transform: translateX(-100%); transition: transform 0.2s ease; overflow-y: auto; }
.tras-lateral--abierta { transform: none; box-shadow: 0 8px 24px rgb(0 0 0 / 0.12); }
.tras-lateral__rotulo { padding: 0 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tenue); }
.tras-lateral__lista { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 2px; }
.tras-lateral__enlace { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-sm); color: var(--tinta-2); text-decoration: none; font-weight: 500; }
.tras-lateral__enlace:hover { background: var(--papel-2); }
.tras-lateral__enlace--activo { background: color-mix(in srgb, var(--acento) 12%, transparent); color: var(--tinta); box-shadow: inset 3px 0 0 var(--acento); }
.tras-lateral__pie { margin-top: auto; display: grid; gap: 6px; }
.tras-lateral__pie .enlace-mono { padding: 0 10px; }
.tras-principal { min-width: 0; padding: var(--aire-md) 16px var(--aire-lg); }
.tras-principal:focus { outline: none; }
@media (min-width: 1000px) {
  .tras-cabecera__menu { display: none; }
  .tras-cuerpo { display: grid; grid-template-columns: var(--lateral) 1fr; }
  .tras-lateral { position: sticky; height: calc(100vh - var(--cabecera)); transform: none; box-shadow: none; }
  .tras-principal { padding: var(--aire-lg) var(--aire-lg) 48px; }
}

.tras-encabezado { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: var(--aire-md); }
.tras-encabezado__texto { min-width: 0; }
.tras-encabezado__titulo { margin: 0; font-size: 26px; font-weight: 700; }
.tras-encabezado__acciones { display: flex; gap: 8px; }

/* ---------------------------------------------------------------- piezas */

.isla { background: var(--papel-3); border: 1px solid var(--linea); border-radius: var(--r-md); min-width: 0; }

.tras-cifras { padding: 0; overflow: hidden; }
.tras-cifras__rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .tras-cifras__rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tras-cifras--3 .tras-cifras__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tras-cifras__celda { display: grid; gap: 4px; align-content: start; padding: 16px 18px; border-right: 1px solid var(--linea-suave); border-bottom: 1px solid var(--linea-suave); }
.tras-cifras__numero { font-size: clamp(22px, calc(40px - var(--largo, 1) * 1.5px), 34px); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tras-cifras__pie { font-size: 13px; color: var(--tenue); }
.rotulo { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tenue); }
.rotulo--chico { font-size: 11px; }
.tras-tono--verde { color: var(--verde-ink); }
.tras-tono--ambar { color: var(--ambar-ink); }
.tras-tono--rojo { color: var(--rojo-ink); }

.pildora { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--papel-2); color: var(--tinta-2); font-size: 13px; font-weight: 500; white-space: nowrap; }
.pildora--chica { padding: 2px 8px; font-size: 12px; }
.pildora__punto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.7; }
.pildora--verde { background: var(--verde-fondo); color: var(--verde-ink); }
.pildora--ambar { background: var(--ambar-fondo); color: var(--ambar-ink); }
.pildora--rojo { background: var(--rojo-fondo); color: var(--rojo-ink); }
.pildora--apagada { background: var(--papel-2); color: var(--tenue); }

.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px; border: 1px solid transparent; border-radius: var(--r-sm); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.boton--primario { background: var(--acento); color: var(--acento-texto); }
.boton--primario:hover { filter: brightness(0.93); }
.boton--fantasma { background: var(--papel-3); border-color: var(--linea); color: var(--tinta); }
.boton--fantasma:hover { background: var(--papel-2); }
.boton--bloque { width: 100%; }

.enlace-mono { font-family: var(--mono); font-size: 12px; color: var(--acento); text-decoration: none; }
.enlace-mono:hover { text-decoration: underline; }

.aviso { margin: 0; padding: 10px 14px; border-radius: var(--r-sm); background: var(--papel-2); }
.aviso--rojo { background: var(--rojo-fondo); color: var(--rojo-ink); }

.campo { display: grid; gap: 6px; }
.campo__etiqueta { font-size: 13px; font-weight: 600; }
.campo__entrada { min-height: 44px; padding: 8px 12px; border: 1px solid var(--linea-fuerte); border-radius: var(--r-sm); background: var(--papel-3); font: inherit; font-size: 16px; color: var(--tinta); }
.campo__entrada:focus { outline: 2px solid var(--acento); outline-offset: 1px; }

.tras-entrada-pagina { min-height: 100vh; display: grid; place-items: center; padding: 16px; }

.tras-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tras-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--linea); border-radius: 999px; background: var(--papel-3); font: inherit; font-size: 13px; color: var(--tinta); cursor: pointer; }
.tras-chip--activo { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.tras-chip__cuenta { font-family: var(--mono); font-size: 12px; opacity: 0.75; }

.tras-tabla { overflow-x: auto; }
.tras-tabla__tabla { width: 100%; font-size: 14px; }
.tras-tabla__tabla th { padding: 10px 14px; text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tenue); border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tras-tabla__tabla td { padding: 12px 14px; vertical-align: top; border-bottom: 1px solid var(--linea-suave); }
.tras-tabla__tabla tr:last-child td { border-bottom: 0; }
.tras-tabla__tabla a { color: var(--tinta); }

.tras-vacio { padding: 28px 16px; text-align: center; }
.tras-vacio__titulo { margin: 0; font-weight: 600; }
.tras-vacio__detalle { margin: 4px 0 0; color: var(--tenue); font-size: 14px; }

.tras-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: grid; gap: 8px; max-width: min(360px, calc(100vw - 32px)); }
.tras-toast { padding: 12px 16px; border-radius: var(--r-sm); background: var(--tinta); color: #fff; font-size: 14px; box-shadow: 0 8px 24px rgb(0 0 0 / 0.2); }

.avance { height: 10px; margin-bottom: 10px; border-radius: 999px; background: var(--papel-2); overflow: hidden; }
.avance__relleno { display: block; height: 100%; background: var(--acento); }