/* ============================================================
   AYCOMER · CONSOLA DE ADMINISTRACIÓN
   Archivo: assets/css/consola.css

   ── POR QUÉ ESTE ARCHIVO EXISTE ──

   El resto del sitio es una tienda: vende. Usa el degradado de
   marca, esquinas de 24px, mucho aire y números grandes. Eso
   está bien para quien compra, y está mal para quien audita.

   Quien administra hace otra cosa: compara filas, busca una
   diferencia, sigue un rastro. Necesita ver MUCHOS datos a la
   vez, alineados, y que el color signifique algo —no que
   decore. Un degradado detrás de una tabla no informa: estorba.

   Por eso la consola no hereda el estilo de la tienda. Redefine
   sus propias variables dentro de `.consola`, y solo ahí. Nada
   de este archivo puede alcanzar la tienda: todos los
   selectores empiezan por `.consola`.

   ── LAS TRES REGLAS ──

   1. DENSIDAD. Radios de 6px, no de 24. Interlínea 1.35, no
      1.7. Cabe el triple de información en la misma pantalla y
      el ojo recorre menos distancia entre un dato y el
      siguiente.

   2. EL COLOR ES DATO. La superficie es gris pizarra sin
      saturación. Así el único color de la pantalla es el que
      marca un estado: pendiente, aprobado, rechazado, riesgo.
      Si todo tuviera color, ninguno destacaría.

   3. NÚMEROS QUE SE PUEDEN COMPARAR. `tabular-nums` en todo
      dato numérico: las cifras quedan en columna y una
      diferencia de magnitud se ve sin leer. Con tipografía
      proporcional un 111 parece más corto que un 999 y la
      comparación visual miente.
   ============================================================ */

.consola{
  /* Superficies de trabajo: gris pizarra frío, sin saturación.
     Se separan por luminosidad, no por color, para que el color
     quede libre y solo signifique estado. */
  --c-fondo:#F1F3F6;
  --c-sup:#FFFFFF;
  --c-sup-2:#F7F8FA;
  --c-sup-3:#ECEFF3;
  --c-linea:#DDE1E8;
  --c-linea-fuerte:#C3C9D4;

  --c-texto:#161A22;      /* 16,4:1 sobre --c-sup */
  --c-texto-2:#4B5462;    /*  7,6:1 */
  /* Medido sobre las TRES superficies, no solo sobre la blanca. El
     valor anterior (#6B7483) daba 4,44:1 sobre --c-sup-2, que es
     justo el fondo de la cabecera de tabla: el rótulo que dice qué
     columna se está leyendo no llegaba al mínimo legible. */
  --c-texto-3:#656D7B;    /*  5,22 · 4,91 · 4,69 · 4,52:1 · cumple sobre las CUATRO superficies */

  /* Estados. Medidos sobre --c-sup para texto pequeño (AA 4,5:1).
     El acento es azul y no morado: el morado de la marca compite
     con el fucsia de "peligro" y en una tabla se confunden. */
  --c-acento:#1D4ED8;      --c-acento-sup:#EAF0FE;   --c-acento-txt:#1E40AF;
  --c-ok:#0F7A4F;          --c-ok-sup:#E7F5EE;
  --c-espera:#8A5A00;      --c-espera-sup:#FDF3E0;
  --c-riesgo:#B3261E;      --c-riesgo-sup:#FDECEA;
  --c-neutro-sup:#EDF0F4;

  /* Forma: casi recta. La esquina redonda grande es un gesto de
     producto de consumo; en una tabla desperdicia píxeles y
     desalinea el borde de una celda con el de la de al lado. */
  --c-r:6px; --c-r-s:4px;
  --c-sombra:0 1px 2px rgba(16,22,34,.06);
  --c-sombra-m:0 6px 16px -8px rgba(16,22,34,.22);

  /* Dos familias y nada más. La monoespaciada NO es decorativa:
     se reserva a identificadores, horas y hashes, donde el ancho
     fijo permite ver de un vistazo que dos valores difieren. */
  --c-fuente:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --c-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  font-family:var(--c-fuente);
  font-size:13px;
  line-height:1.35;
  color:var(--c-texto);
  background:var(--c-fondo);
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}

/* Modo noche de la consola. Igual que en la tienda, el fondo no
   es negro puro: sin luminancia de base las sombras desaparecen
   y se pierde la separación entre capas. */
[data-tema="noche"] .consola{
  --c-fondo:#0D1117;
  --c-sup:#161B22;
  --c-sup-2:#1C222B;
  --c-sup-3:#222933;
  --c-linea:#2A313C;
  --c-linea-fuerte:#3B4350;
  --c-texto:#E6EAF0;
  --c-texto-2:#A7B0BE;
  --c-texto-3:#87919F;    /*  5,42 · 5,01 · 4,59:1 · cumple sobre las cuatro superficies */
  --c-acento:#60A5FA;      --c-acento-sup:#132039;   --c-acento-txt:#93C0FB;
  --c-ok:#3FB983;          --c-ok-sup:#10251C;
  --c-espera:#E0A643;      --c-espera-sup:#2A1F0C;
  --c-riesgo:#F07167;      --c-riesgo-sup:#2C1512;
  --c-neutro-sup:#20262F;
  --c-sombra:0 1px 2px rgba(0,0,0,.5);
  --c-sombra-m:0 6px 16px -8px rgba(0,0,0,.75);
}

/* ============================================================
   1. ARMAZÓN · barra lateral persistente + área de trabajo

   La consola ocupa una vista completa del sitio: el contenido
   crece con la página y no queda encerrado en un modal.

   La navegación queda SIEMPRE visible a la izquierda y
   cambia solo el área de trabajo. El administrador siempre sabe
   dónde está y cuántos pendientes le quedan en las otras
   secciones, porque los contadores viven en el menú.
   ============================================================ */
.consola{display:grid;grid-template-columns:232px minmax(0,1fr);
  align-items:start;min-height:calc(100dvh - var(--cabecera-alto-actual,var(--hdr)) - 38px)}

.consola-lateral{
  grid-column:1;background:var(--c-sup-2);border-right:1px solid var(--c-linea);
  /* 48 px corresponden a la barra universal Volver/Inicio, que también es
     sticky debajo de la cabecera. */
  position:sticky;top:calc(var(--cabecera-alto-actual,var(--hdr)) + 56px);
  height:calc(100dvh - var(--cabecera-alto-actual,var(--hdr)) - 72px);
  display:flex;flex-direction:column;min-height:0;
}
.consola-marca{
  display:flex;align-items:center;gap:9px;padding:13px 14px;
  border-bottom:1px solid var(--c-linea);flex:none;
}
.consola-marca img{width:22px;height:22px;border-radius:var(--c-r-s);flex:none}
.consola-marca b{font-size:12.5px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
/* El entorno se rotula SIEMPRE. Operar creyendo que se está en
   pruebas cuando se está en producción es el error caro. */
.consola-entorno{
  display:block;font-size:9.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--c-riesgo);
}
.consola-entorno.pruebas{color:var(--c-espera)}
.consola-rol{display:block;font-size:10px;color:var(--c-texto-3);margin-top:1px}

.consola-nav{overflow-y:auto;padding:8px;flex:1;min-height:0}
.consola-nav .consola-grupo{
  display:block;
  font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--c-texto-3);margin:12px 0 5px;padding:0 8px;
}
.consola-nav .consola-grupo:first-child{margin-top:2px}
.consola-nav button{
  display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;
  background:none;border:0;border-radius:var(--c-r-s);text-align:left;
  font:inherit;font-size:12.5px;color:var(--c-texto-2);cursor:pointer;
}
.consola-nav button:hover{background:var(--c-sup-3);color:var(--c-texto)}
.consola-nav button:focus-visible{outline:2px solid var(--c-acento);outline-offset:-2px}
/* El activo se marca con una barra a la izquierda y no solo con
   fondo: en pantallas con poco contraste el fondo solo se pierde. */
.consola-nav button.on{
  background:var(--c-acento-sup);color:var(--c-acento-txt);font-weight:600;
  box-shadow:inset 2px 0 0 var(--c-acento);
}
.consola-nav button svg{width:15px;height:15px;flex:none;opacity:.75}
.consola-nav button.on svg{opacity:1}
.consola-nav button span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Contador de pendientes: el dato que decide a dónde ir primero. */
.consola-nav button i{
  font-style:normal;font-size:10.5px;font-weight:700;padding:1px 6px;
  border-radius:99px;background:var(--c-neutro-sup);color:var(--c-texto-2);
}
.consola-nav button i.urge{background:var(--c-riesgo-sup);color:var(--c-riesgo)}

.consola-pie{
  flex:none;border-top:1px solid var(--c-linea);padding:9px 10px;
  display:flex;align-items:center;gap:8px;
}
.consola-pie-quien{flex:1;min-width:0}
.consola-pie-quien b{display:block;font-size:11.5px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.consola-pie-quien span{display:block;font-size:10px;color:var(--c-texto-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.consola-pie button{
  background:none;border:1px solid var(--c-linea-fuerte);border-radius:var(--c-r-s);
  padding:4px 8px;font:inherit;font-size:11px;color:var(--c-texto-2);cursor:pointer;
}
.consola-pie button:hover{border-color:var(--c-riesgo);color:var(--c-riesgo)}

/* ---- Área de trabajo ---- */
.consola-obra{grid-column:2;display:flex;flex-direction:column;min-width:0;
  min-height:calc(100dvh - var(--cabecera-alto-actual,var(--hdr)) - 38px);
  background:var(--c-fondo)}
.consola-cab{
  flex:none;display:flex;align-items:center;gap:12px;padding:11px 16px;
  background:var(--c-sup);border-bottom:1px solid var(--c-linea);
}
.consola-cab h2,.consola-cab h3{font-size:14.5px;font-weight:650;margin:0;letter-spacing:-.01em}
.consola-cab p{margin:1px 0 0;font-size:11.5px;color:var(--c-texto-3)}
.consola-cab-fin{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
/* Reloj del servidor, en monoespaciada. Una auditoría se lee en
   la hora del servidor; la del equipo local puede ir desfasada y
   entonces el rastro no cuadra con los registros. */
.consola-reloj{font-family:var(--c-mono);font-size:11px;color:var(--c-texto-3)}
.consola-cuerpo{padding:16px;flex:1;min-width:0}

/* ============================================================
   2. INDICADORES · la fila de cifras de arriba

   Sin degradado y sin tarjeta destacada. En la tienda una
   tarjeta con degradado dice "mira esto"; en un tablero de
   trabajo todas las cifras son igual de reales y destacar una
   por diseño sesga la lectura. Lo que destaca es el ESTADO: si
   un número exige acción, se colorea el número, no la caja.
   ============================================================ */
.consola .c-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));
  gap:1px;background:var(--c-linea);border:1px solid var(--c-linea);
  border-radius:var(--c-r);overflow:hidden;margin-bottom:16px}
.consola .c-cifra{background:var(--c-sup);padding:11px 13px}
.consola .c-cifra span{display:block;font-size:10.5px;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;color:var(--c-texto-3);margin-bottom:4px}
.consola .c-cifra strong{display:block;font-size:21px;font-weight:680;letter-spacing:-.02em;
  line-height:1.1;font-variant-numeric:tabular-nums}
.consola .c-cifra em{font-style:normal;display:block;font-size:11px;color:var(--c-texto-3);margin-top:3px}
.consola .c-cifra.ok strong{color:var(--c-ok)}
.consola .c-cifra.espera strong{color:var(--c-espera)}
.consola .c-cifra.riesgo strong{color:var(--c-riesgo)}

/* ============================================================
   3. TABLAS · donde de verdad se audita

   Reglas que no son estéticas:
   · La cabecera se queda pegada arriba (`sticky`). En una lista
     larga, sin eso se pierde qué columna se está mirando y hay
     que subir a comprobarlo.
   · Los números van a la derecha. Alineados por la unidad, una
     diferencia de magnitud se ve sin leer las cifras.
   · Separadores de un pixel, sin franjas de color alternas: las
     franjas compiten con el color de estado, que es el que
     tiene que llamar la atención.
   ============================================================ */
.consola .c-tabla-caja{border:1px solid var(--c-linea);border-radius:var(--c-r);
  background:var(--c-sup);overflow:auto;max-height:none}
.consola .c-tabla{width:100%;border-collapse:collapse;font-size:12.5px}
.consola .c-tabla thead th{
  position:sticky;top:0;z-index:2;background:var(--c-sup-2);
  padding:8px 11px;text-align:left;font-size:10.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--c-texto-3);
  border-bottom:1px solid var(--c-linea);white-space:nowrap;
}
.consola .c-tabla tbody td{padding:8px 11px;border-bottom:1px solid var(--c-linea);
  vertical-align:middle;color:var(--c-texto)}
.consola .c-tabla tbody tr:last-child td{border-bottom:0}
.consola .c-tabla tbody tr:hover td{background:var(--c-sup-2)}
.consola .c-tabla .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.consola .c-tabla .ident{font-family:var(--c-mono);font-size:11.5px;color:var(--c-texto-2);white-space:nowrap}
.consola .c-tabla .menor{color:var(--c-texto-3);font-size:11.5px}
.consola .c-tabla .acciones{text-align:right;white-space:nowrap}
.consola .c-tabla caption{caption-side:top;text-align:left;padding:0 0 7px;
  font-size:11.5px;color:var(--c-texto-3)}

/* ============================================================
   4. ESTADOS · el único color de la pantalla

   Fondo tenue + texto saturado, no al revés: una fila entera de
   pastillas de color plano vibra y cansa. Todas comparten forma
   y tamaño, así que lo que distingue es el color y el texto,
   nunca solo el color —quien no distingue rojo de verde sigue
   leyendo la palabra.
   ============================================================ */
.consola .c-marca{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;
  border-radius:99px;font-size:11px;font-weight:650;white-space:nowrap;
  background:var(--c-neutro-sup);color:var(--c-texto-2)}
.consola .c-marca::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.consola .c-marca.ok{background:var(--c-ok-sup);color:var(--c-ok)}
.consola .c-marca.espera{background:var(--c-espera-sup);color:var(--c-espera)}
.consola .c-marca.riesgo{background:var(--c-riesgo-sup);color:var(--c-riesgo)}
.consola .c-marca.info{background:var(--c-acento-sup);color:var(--c-acento-txt)}

/* ============================================================
   5. BARRA DE HERRAMIENTAS · buscar y filtrar
   ============================================================ */
.consola .c-barra{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.consola .c-barra .crece{flex:1;min-width:150px}
/* Dentro de la barra los controles miden lo suyo, no el 100%: si
   cada uno ocupa el ancho completo la barra se convierte en una
   columna y se pierde la lectura de un vistazo de qué filtros hay
   aplicados. Solo `.crece` (la búsqueda) se estira con el sobrante. */
.consola .c-barra>input,.consola .c-barra>select{width:auto;min-width:130px}
.consola .c-barra .crece input,.consola .c-barra .crece select{width:100%}
.consola input[type=text],
.consola input[type=search],
.consola input[type=number],
.consola input[type=email],
.consola select,
.consola textarea{
  width:100%;background:var(--c-sup);border:1px solid var(--c-linea-fuerte);
  border-radius:var(--c-r-s);padding:6px 9px;font:inherit;font-size:12.5px;
  color:var(--c-texto);
}
.consola input:focus,
.consola select:focus,
.consola textarea:focus{
  outline:2px solid var(--c-acento);outline-offset:-1px;border-color:var(--c-acento);
}
.consola label{display:block;font-size:11px;font-weight:600;color:var(--c-texto-2);margin-bottom:10px}
.consola label>input,
.consola label>select,
.consola label>textarea{margin-top:3px}

/* Botones. Uno solo es sólido por pantalla: el que confirma.
   Cuando todos pesan igual, ninguno guía. */
.consola .c-btn{
  display:inline-flex;align-items:center;gap:6px;padding:6px 11px;
  background:var(--c-sup);border:1px solid var(--c-linea-fuerte);border-radius:var(--c-r-s);
  font:inherit;font-size:12px;font-weight:600;color:var(--c-texto);cursor:pointer;white-space:nowrap;
}
.consola .c-btn:hover{background:var(--c-sup-3);border-color:var(--c-texto-3)}
.consola .c-btn:focus-visible{outline:2px solid var(--c-acento);outline-offset:1px}
.consola .c-btn[disabled]{opacity:.45;cursor:not-allowed}
.consola .c-btn.primario{background:var(--c-acento);border-color:var(--c-acento);color:#fff}
.consola .c-btn.primario:hover{filter:brightness(1.08)}
.consola .c-btn.peligro{color:var(--c-riesgo);border-color:var(--c-riesgo)}
.consola .c-btn.peligro:hover{background:var(--c-riesgo-sup)}
.consola .c-btn.menudo{padding:3px 8px;font-size:11px}

/* ============================================================
   6. SECCIONES, AVISOS Y VACÍOS
   ============================================================ */
.consola .c-bloque{background:var(--c-sup);border:1px solid var(--c-linea);
  border-radius:var(--c-r);padding:14px;margin-bottom:14px}
.consola .c-bloque>h4{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--c-texto-3);margin:0 0 10px}
.consola .c-rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}

.consola .c-aviso{display:flex;gap:9px;padding:10px 12px;border-radius:var(--c-r);
  font-size:12.5px;line-height:1.5;margin-bottom:14px;
  background:var(--c-acento-sup);color:var(--c-texto);
  border:1px solid transparent;border-left:3px solid var(--c-acento)}
.consola .c-aviso.espera{background:var(--c-espera-sup);border-left-color:var(--c-espera)}
.consola .c-aviso.riesgo{background:var(--c-riesgo-sup);border-left-color:var(--c-riesgo)}
.consola .c-aviso.ok{background:var(--c-ok-sup);border-left-color:var(--c-ok)}
.consola .c-aviso b{font-weight:700}

.consola .c-vacio{padding:34px 18px;text-align:center;color:var(--c-texto-3);font-size:12.5px}
.consola .c-vacio strong{display:block;font-size:14px;color:var(--c-texto-2);margin-bottom:5px;font-weight:600}
.consola .c-cargando{padding:34px 18px;text-align:center;color:var(--c-texto-3);font-size:12.5px}

/* Rastro de auditoría: el JSON se lee en monoespaciada o no se
   lee. Ancho fijo = las claves de dos objetos quedan alineadas y
   la diferencia entre "antes" y "después" salta a la vista. */
.consola .c-json{margin:0;padding:9px 10px;background:var(--c-sup-2);border:1px solid var(--c-linea);
  border-radius:var(--c-r-s);font-family:var(--c-mono);font-size:11px;line-height:1.5;
  color:var(--c-texto-2);max-height:260px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.consola .c-par{display:grid;grid-template-columns:1fr 1fr;gap:9px}

/* ============================================================
   7. PANTALLAS ESTRECHAS

   Por debajo de 860px la barra lateral pasa a ser una fila de
   pestañas que se desplaza. No se colapsa en un menú oculto: en
   trabajo de auditoría el cambio de sección es constante y
   esconderlo tras un botón añade un clic a cada salto.
   ============================================================ */
@media (max-width:860px){
  .consola{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .consola-lateral{
    grid-column:1;grid-row:1;position:sticky;
    top:calc(var(--cabecera-alto-actual,var(--hdr)) + 48px);z-index:5;height:auto;
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    border-right:0;border-bottom:1px solid var(--c-linea);
  }
  .consola-marca{display:none}
  .consola-nav{display:flex;gap:4px;overflow-x:auto;overflow-y:hidden;padding:7px 8px}
  .consola-nav .consola-grupo{display:none}
  .consola-nav button{width:auto;white-space:nowrap;padding:6px 10px}
  .consola-nav button.on{box-shadow:inset 0 -2px 0 var(--c-acento)}
  .consola-pie{border-top:0;border-left:1px solid var(--c-linea);padding:7px 8px}
  .consola-pie-quien{display:none}
  .consola-obra{grid-column:1;grid-row:2}
  .consola .c-par{grid-template-columns:1fr}
}

@media (max-width:480px){
  .consola-nav{padding-inline:5px}
  .consola-nav button{gap:6px;padding:6px 8px;font-size:12px}
  .consola-nav button svg{width:14px;height:14px}
  .consola-pie{padding-inline:5px}
  .consola-cab{align-items:flex-start;padding:10px 12px}
  .consola-cab-fin{gap:5px}
  .consola-reloj{display:none}
  .consola-cuerpo{padding:12px 9px}
  .consola .c-cifras{grid-template-columns:repeat(auto-fit,minmax(126px,1fr))}
  .consola .c-rejilla{grid-template-columns:minmax(0,1fr)}
}

/* Quien pidió menos movimiento en su sistema no recibe ninguno. */
@media (prefers-reduced-motion:reduce){
  .consola *{animation:none !important;transition:none !important}
}

/* ============================================================
   8. ENCAJE EN LA VISTA COMPLETA DE CUENTA

   La variante administrativa usa el marco más ancho y elimina el
   relleno exterior. Solo las tablas y la navegación estrecha tienen
   desplazamiento propio; la superficie principal crece con la página.
   ============================================================ */
.espacio-cuenta-marco.marco-consola{width:min(100% - 32px,1500px);border-radius:var(--r-m)}
.espacio-cuenta-cuerpo.cuerpo-consola{padding:0;display:flex;flex-direction:column}
.espacio-cuenta-cuerpo.cuerpo-consola>.consola{flex:1;width:100%}