/*
 * Portal Operativo EGESTOP — sistema visual.
 * Extraido de PORTAL_OPERATIVO_EGESTOP_CONCEPTO_v0.2_FUENTE.html (no
 * reinventado, ver CLAUDE.md "IDENTIDAD VISUAL"). El concepto esta en
 * mm/pt porque es un documento para imprimir; aqui se traducen sus
 * proporciones relativas a px/rem para web, no sus cifras literales.
 * Cero webfonts externos, cero peticiones a dominios externos (CA-3.3).
 */

/* ============ VARIABLES ============ */
:root {
  /* Paleta de marca EGESTOP — copiada caracter por caracter de CLAUDE.md (CA-3.2) */
  --verde:   #62B132;
  --verde-d: #4A8A24;
  --morado:  #8A2582;
  --oro:     #C89B3C;
  --tinta:   #1A1A1A;
  --gris:    #6B6060;
  --gris2:   #8A8A8A;
  --linea:   #E0E0E0;
  --bg:      #FAFAFA;
  --bg2:     #F5F5F5;
  --rojo:    #C0392B;
  --ambar:   #E8A317;

  /* No son parte de la paleta de marca de CLAUDE.md, pero el brief los pide
     literales para piezas puntuales del layout (ver FASE 3 y las maquetas):
     fondo del area de contenido y colores de los estados de laboratorio /
     gabinete / conformidad recibida que usa el concepto en sus pildoras. */
  --fondo-contenido: #F7F8F7;
  --gabinete:        #1E5A93;
  --gabinete-bg:     #E2ECF7;
  --laboratorio-txt: #8A6210;
  --laboratorio-bg:  #FDF0D8;
  --oferta-bg:       #EDE3F0;
  --aprobado-bg:     #E8F3E0;
  --conformidad-bg:  #FBE4E1;
  --facturado-bg:    #E8E8E8;
  --facturado-txt:   #4A4A4A;
  --neutro-bg:       #F2F2F2;
  --neutro-borde:    #B8B8B8;

  --sidebar-ancho: 248px;
  --sidebar-ancho-colapsado: 60px;
  --radio: 4px;
}

/* ============ BASE ============ */
* { box-sizing: border-box; }

html { font-size: 15px; }

body {
  margin: 0;
  font-family: 'DM Sans', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--tinta);
  background: var(--bg);
  line-height: 1.45;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; }
p { margin: 0 0 0.75rem 0; }
a { color: inherit; }
table { border-collapse: collapse; width: 100%; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }

/* ============ LAYOUT: app (sidebar + main) ============ */
.app {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

/* --- sidebar (identidad visual v2, 2026-09-30) ------------------------
   Claro, con el logo original arriba, franja verde difuminada con marco
   lateral en la pestaña activa y la imagen del login desvanecida abajo.
   Es sticky: ocupa siempre el alto de la ventana, asi el fondo y el lema
   quedan al pie de lo que se ve y no al final de una tabla larga. ---- */
.sidebar {
  width: var(--sidebar-ancho);
  flex: none;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: 1.1rem 0 0;
  color: var(--tinta);
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBF9 55%, #F3F6F0 100%);
  border-right: 1px solid var(--linea);
}

/* La imagen del login, difuminada, sube desde el pie y se pierde hacia arriba. */
.sidebar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 52%;
  z-index: -1;
  pointer-events: none;
  background: url("/assets/img/sidebar_fondo.jpg") center bottom / cover no-repeat;
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 100%);
          mask-image: linear-gradient(to top, #000 10%, transparent 100%);
}

.sidebar__logo {
  display: block;
  padding: 0 1.15rem;
  text-decoration: none;
}

.sidebar__logo img { display: block; width: 100%; height: auto; }

.sidebar__lema {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.5rem 0.6rem 0;
  font-size: 0.56rem;
  color: var(--gris);
  white-space: nowrap;
}

.sidebar__lema i { font-style: normal; color: var(--verde); }

/* solo se ve en movil, cuando el logo completo no cabe */
.sidebar__hoja-mini { display: none; }

.sidebar__grupo {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: #6E7480;
  padding: 1.15rem 1.15rem 0.35rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.sidebar__nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.62rem 1.15rem;
  font-size: 0.93rem;
  color: #2A2A2A;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}

.sidebar__nav:hover { background: rgba(98, 177, 50, 0.08); }

/* Pestaña activa: franja verde difuminada + marco (barras) a los dos lados. */
.sidebar__nav--activo {
  color: var(--verde-d);
  font-weight: 700;
  background:
    radial-gradient(ellipse 70px 22px at 78% 55%, rgba(98, 177, 50, 0.30), transparent 72%),
    radial-gradient(ellipse 110px 16px at 42% 0%, rgba(98, 177, 50, 0.20), transparent 75%),
    linear-gradient(90deg, rgba(98, 177, 50, 0.10), rgba(98, 177, 50, 0.16) 60%, rgba(98, 177, 50, 0.10));
}

.sidebar__nav--activo::before,
.sidebar__nav--activo::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 4px;
  background: var(--verde);
}
.sidebar__nav--activo::before { left: 0; }
.sidebar__nav--activo::after  { right: 0; }

.sidebar__ico {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: #6E7480;
}

.sidebar__nav--activo .sidebar__ico { color: var(--verde); }

/* Pie: usuario, hoja y lema, sobre la imagen desvanecida. */
.sidebar__pie {
  margin-top: auto;
  padding: 0 1rem 1rem;
  text-align: center;
}

.sidebar__usuario {
  text-align: left;
  border-top: 1px solid var(--linea);
  padding: 0.7rem 0.25rem 0.55rem;
  font-size: 0.75rem;
  color: var(--gris);
}

.sidebar__usuario b {
  display: block;
  color: var(--tinta);
  font-size: 0.82rem;
  font-weight: 700;
}

.sidebar__hoja { width: 2.4rem; height: 2.4rem; margin: 0.35rem auto 0.35rem; display: block; }

.sidebar__frase {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.3;
  color: #2A2A2A;
}

/* --- main / topbar --- */
.contenido {
  flex: 1;
  min-width: 0;
  padding: 1.1rem 1.3rem;
  /* La imagen del login, casi invisible: identidad sin restar lectura. */
  background:
    linear-gradient(rgba(247, 248, 247, 0.92), rgba(247, 248, 247, 0.95)),
    url("/assets/img/fondo_tablero.jpg") center / cover no-repeat fixed;
}

.topbar {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.topbar__migaja {
  font-size: 0.72rem;
  color: var(--gris2);
  margin-bottom: 0.15rem;
}

.topbar__titulo { font-size: 1.25rem; }

.topbar__acciones {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ============ COMPONENTES ============ */

/* --- boton --- */
.boton {
  display: inline-block;
  border: none;
  border-radius: var(--radio);
  padding: 0.5rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.1;
}

.boton--primario { background: var(--verde); color: #fff; }
.boton--primario:hover { background: var(--verde-d); }
.boton--alterno { background: #fff; color: var(--tinta); border: 1px solid #C8C8C8; font-weight: 600; }
.boton--morado { background: var(--morado); color: #fff; }

/* --- kpi --- */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.7rem;
  margin-bottom: 1rem;
}

.kpi {
  background: rgba(255, 255, 255, 0.93);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 0.7rem 0.85rem;
}

.kpi__etiqueta {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--gris2);
  font-weight: 600;
  text-transform: uppercase;
}

.kpi__valor { font-size: 1.7rem; font-weight: 800; line-height: 1.15; margin-top: 0.15rem; }
.kpi__detalle { font-size: 0.7rem; color: var(--gris2); margin-top: 0.1rem; }

.kpi--al .kpi__valor { color: var(--rojo); }
.kpi--ok .kpi__valor { color: var(--verde-d); }
.kpi--wr .kpi__valor { color: var(--ambar); }

/* --- panel --- */
.panel {
  background: rgba(255, 255, 255, 0.93);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.panel__cabecera {
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--linea);
  background: #FCFCFC;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.panel__nota { margin-left: auto; font-weight: 400; color: var(--gris2); font-size: 0.72rem; }

.panel__cuerpo { padding: 0; }
.panel__cuerpo--relleno { padding: 0.85rem; }

/* Contenedor de scroll propio: ninguna tabla desborda la pagina (CA-3.4) */
.panel__tabla-scroll { overflow-x: auto; }

.tabla-densa { font-size: 0.82rem; }

.tabla-densa th {
  background: #F2F3F2;
  color: #5A5A5A;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  padding: 0.45rem 0.6rem;
  text-transform: uppercase;
  border-bottom: 1px solid var(--linea);
  text-align: left;
  white-space: nowrap;
}

.tabla-densa td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid #EFEFEF;
  color: #333;
}

.tabla-densa tr:nth-child(even) td { background: #FCFCFC; }

/* columnas numericas y texto secundario (usados en /clientes) */
.tabla-densa td.num,
.tabla-densa th.num { text-align: right; white-space: nowrap; }
.tabla-densa .tenue { color: #8A8A8A; }

/* --- hito del calendario: enlace a la ficha del proyecto --- */
.hito {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  border-radius: 2px;
  padding: 0.15rem 0.3rem;
  margin-top: 0.25rem;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.1s ease, transform 0.1s ease;
}
.hito:hover { filter: brightness(0.93); transform: translateX(1px); }
.hito:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; }

/* --- bitacora del proyecto ---------------------------------------
   Dos flujos en una sola linea de tiempo, deliberadamente distintos:
   la NOTA de una persona se lee; el registro de CAMBIO se audita.
   Si los dos pesaran igual, ninguno se leeria. ------------------- */

/* 2026-09-10: la caja de nota y el boton estaban en la MISMA fila flex y
   la caja quedaba del ancho intrinseco del <textarea> (unos 20 caracteres),
   con el boton encima. Una nota operativa es un parrafo, no un campo de
   busqueda: ahora ocupa el ancho del panel y el boton baja a su propia
   linea. width:100% + box-sizing evita que el padding la desborde. */
.bit-form { display: block; margin-bottom: 0.9rem; }
.bit-form textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.45;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  resize: vertical;
  overflow-y: auto;
  min-height: 4.4rem;
}
.bit-form__acciones { display: flex; justify-content: flex-end; margin-top: 0.5rem; }
.bit-form textarea:focus { outline: 2px solid var(--verde); outline-offset: -1px; border-color: transparent; }

.bit-filtros { display: flex; gap: 0.3rem; margin-bottom: 0.7rem; flex-wrap: wrap; }
.bit-filtros button {
  font: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--gris);
  background: #F4F4F4;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  cursor: pointer;
}
.bit-filtros button:hover { background: #EAEAEA; }
.bit-filtros button.activo { background: #fff; border-color: var(--linea); color: #333; }

.bit-lista { list-style: none; margin: 0; padding: 0; }

.bit { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.4rem 0; }
/* El atributo hidden pierde contra display:flex (CSS de autor > hoja del navegador): sin esta linea los tres filtros de la bitacora mostraban lo mismo. */
.bit[hidden] { display: none; }
.bit__cuerpo { flex: 1; min-width: 0; }

/* NOTA: lo que escribio una persona. Es lo que hay que leer. */
.bit--nota {
  background: #FBFBF9;
  border-left: 3px solid var(--verde);
  border-radius: 0 var(--radio) var(--radio) 0;
  padding: 0.55rem 0.7rem;
  margin-bottom: 0.4rem;
}
.bit__badge {
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--verde);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
}
.bit--nota .bit__meta { font-size: 0.68rem; color: var(--gris2); margin-bottom: 0.15rem; }
.bit--nota .bit__meta b { color: #333; font-weight: 700; }
.bit__texto { font-size: 0.82rem; color: #333; line-height: 1.45; overflow-wrap: anywhere; }

/* SISTEMA: el registro automatico. Presente, pero en segundo plano. */
.bit--sistema {
  border-left: 3px solid #E4E4E4;
  padding: 0.2rem 0.7rem;
  margin-bottom: 0.1rem;
}
.bit__punto {
  flex: 0 0 auto;
  width: 1.7rem;
  display: flex;
  justify-content: center;
  padding-top: 0.35rem;
}
.bit__punto::before {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: #C9C9C9;
}
.bit--sistema .bit__cuerpo { font-size: 0.72rem; color: #8A8A8A; line-height: 1.5; }
.bit__accion { font-weight: 700; color: #6E6E6E; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.66rem; }
.bit__detalle { font-family: "Courier New", monospace; font-size: 0.68rem; color: #7A7A7A; }
.bit--sistema .bit__meta { color: #ADADAD; }

@media (max-width: 900px) {
  .bit-form { flex-direction: column; }
  .bit-form .boton { width: 100%; text-align: center; }
}
.tabla-densa a { color: inherit; text-decoration: none; border-bottom: 1px dotted #B9B9B9; }
.tabla-densa a:hover { border-bottom-color: #333; }

.tabla-densa td.tabla-densa__codigo {
  font-weight: 700;
  font-family: "Courier New", monospace;
  font-size: 0.78rem;
  white-space: nowrap;
}

/* --- pill_estado --- */
.pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.pill--oferta       { background: var(--oferta-bg);      color: var(--morado); }
.pill--perdida      { background: var(--conformidad-bg); color: var(--rojo); }
.pill--aprobado     { background: var(--aprobado-bg);    color: var(--verde-d); }
.pill--laboratorio  { background: var(--laboratorio-bg); color: var(--laboratorio-txt); }
.pill--gabinete     { background: var(--gabinete-bg);    color: var(--gabinete); }
.pill--esperando    { background: var(--conformidad-bg); color: var(--rojo); }
.pill--conformidad  { background: var(--aprobado-bg);    color: var(--verde-d); }
.pill--facturado    { background: var(--facturado-bg);   color: var(--facturado-txt); }
.pill--cerrado      { background: var(--tinta);          color: var(--verde); }
.pill--neutro       { background: var(--neutro-bg);      color: var(--tinta); border: 1px solid var(--neutro-borde); }

/* --- semaforo --- */
.sem {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
}

.sem--verde { background: var(--verde); }
.sem--ambar { background: var(--ambar); }
.sem--rojo  { background: var(--rojo); }
.sem--gris  { background: var(--neutro-borde); }

/* --- barra_avance --- */
.barra-avance {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--gris);
}

.barra-avance__pista {
  background: #EAEAEA;
  border-radius: 6px;
  height: 0.4rem;
  width: 3.6rem;
  overflow: hidden;
}

.barra-avance__relleno { background: var(--verde); height: 100%; border-radius: 6px; display: block; }

/* --- campo_form --- */
.campo-form { margin-bottom: 0.75rem; }

.campo-form__etiqueta {
  display: block;
  font-size: 0.68rem;
  color: var(--gris2);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.campo-form__requerido { color: var(--morado); }

.campo-form__control {
  display: block;
  width: 100%;
  border: 1px solid #C8C8C8;
  border-radius: 2px;
  padding: 0.5rem 0.6rem;
  font-size: 0.85rem;
  background: #fff;
  color: var(--tinta);
}

.campo-form__control:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 2px rgba(98, 177, 50, 0.2);
}

.campo-form__ayuda { font-size: 0.68rem; color: var(--gris2); margin-top: 0.3rem; }
.campo-form__error { font-size: 0.7rem; color: var(--rojo); margin-top: 0.3rem; font-weight: 600; }

/* --- mensaje_flash --- */
.mensaje-flash {
  border-radius: var(--radio);
  border-left: 3px solid var(--gris2);
  padding: 0.6rem 0.85rem;
  margin-bottom: 0.85rem;
  font-size: 0.85rem;
}

.mensaje-flash--exito { background: var(--aprobado-bg); border-left-color: var(--verde); color: var(--verde-d); }
.mensaje-flash--error { background: var(--conformidad-bg); border-left-color: var(--rojo); color: var(--rojo); }
.mensaje-flash--info  { background: var(--bg2); border-left-color: var(--gris2); color: var(--tinta); }

/* --- estado_vacio --- */
.estado-vacio {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--gris2);
}

.estado-vacio__titulo { font-size: 0.95rem; font-weight: 700; color: var(--gris); margin-bottom: 0.3rem; }
.estado-vacio__subtitulo { font-size: 0.8rem; }

/* --- banda de estado (cabecera de ficha de proyecto, ej. EN LABORATORIO) --- */
.banda-estado {
  border-radius: var(--radio);
  padding: 0.55rem 0.85rem;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
}

.banda-estado--laboratorio {
  background: var(--laboratorio-bg);
  border: 1px solid var(--ambar);
  border-left: 3px solid var(--ambar);
  color: var(--laboratorio-txt);
}

.banda-estado--conformidad {
  background: var(--conformidad-bg);
  border: 1px solid var(--rojo);
  border-left: 3px solid var(--rojo);
  color: var(--rojo);
}

.banda-estado__titulo { font-size: 0.95rem; font-weight: 800; }
.banda-estado__alerta { margin-left: auto; font-weight: 800; color: var(--rojo); }

/* --- pantalla de login (sin sidebar: el usuario aun no tiene sesion) ---
   Fondo: la imagen de marca SIN la tarjeta ni el logo pintados (se
   limpiaron a proposito): el formulario y el logo son reales, no pixeles. */
.pantalla-login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr minmax(380px, 520px);
  align-items: center;
  gap: 3rem;
  /* Mas margen a la derecha: la tarjeta queda un poco a la izquierda del borde. */
  padding: 2rem clamp(2rem, 10vw, 11rem) 2rem clamp(1.25rem, 7vw, 6.5rem);
  /* La frase "Comprometidos con un entorno..." viene pintada en la imagen,
     abajo a la izquierda: se ancla ahi para que no se corte al angostar. */
  background: #F7F9F6 url("/assets/img/login_bg.jpg") left bottom / cover no-repeat;
}

.pantalla-login__marca { max-width: 780px; }
.pantalla-login__marca img { display: block; width: min(100%, 650px); height: auto; }

.pantalla-login__pilares {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-top: 1.4rem;
  font-size: 1.2rem;
  color: #4A4A4A;
}
.pantalla-login__pilares i { width: 2px; height: 1.3rem; background: var(--verde); }

.pantalla-login__tarjeta {
  background: #fff;
  border-radius: 14px;
  padding: 2.9rem 2.7rem 2.6rem;
  width: 100%;
  box-shadow: 0 18px 50px rgba(20, 40, 20, 0.16), 0 2px 8px rgba(20, 40, 20, 0.06);
}

.pantalla-login__tarjeta::before {
  content: "";
  display: block;
  width: 3.2rem;
  height: 4px;
  background: var(--verde);
  border-radius: 2px;
  margin-bottom: 1.4rem;
}

.pantalla-login__titulo { font-size: 2.1rem; font-weight: 700; margin: 0 0 0.35rem; }
.pantalla-login__sub { color: var(--gris); margin: 0 0 1.7rem; font-size: 1.08rem; }
.pantalla-login .campo-form__etiqueta { font-size: 0.78rem; }

.pantalla-login .campo-form__control { padding: 0.95rem 1.05rem; border-radius: 10px; font-size: 1.08rem; }
.pantalla-login .boton {
  width: 100%;
  text-align: center;
  margin-top: 0.75rem;
  padding: 1.05rem 1rem;
  border-radius: 10px;
  font-size: 1.15rem;
}

@media (max-width: 900px) {
  .pantalla-login {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 1.6rem;
    padding: 1.5rem 1rem;
    background-position: 30% bottom;
  }
  .pantalla-login__marca { text-align: center; }
  .pantalla-login__marca img { margin: 0 auto; width: min(80%, 320px); }
  .pantalla-login__pilares { justify-content: center; font-size: 0.85rem; margin-top: 0.9rem; }
  .pantalla-login__tarjeta { max-width: 420px; }
}

/* ============ RESPONSIVE ============ */
/* Tablet: el layout ya funciona sin cambios estructurales — solo se
   angosta el padding del contenido. Las .kpis ya reflowan solas con
   auto-fit, no hace falta una regla aparte. */
@media (max-width: 1024px) {
  .contenido { padding: 1rem; }
}

/* Movil: el sidebar "colapsa" a una franja de solo iconos (no hay JS en
   esta fase para un menu deslizante), y se oculta el texto de navegacion,
   los grupos y el detalle del usuario. Sigue siendo una sola fila flex,
   sin cambiar la estructura del layout. */
@media (max-width: 768px) {
  .sidebar { width: var(--sidebar-ancho-colapsado); padding: 0.75rem 0 0; align-items: center; }
  .sidebar::after { display: none; }
  .sidebar__logo { display: none; }
  .sidebar__lema { display: none; }
  .sidebar__hoja-mini { display: block; width: 1.9rem; height: 1.9rem; margin-bottom: 0.5rem; }
  .sidebar__grupo { display: none; }
  .sidebar__nav { padding: 0.65rem; justify-content: center; }
  .sidebar__nav__texto { display: none; }
  .sidebar__pie { padding: 0 0.25rem 0.75rem; }
  .sidebar__usuario { padding: 0.75rem 0.2rem 0; text-align: center; }
  .sidebar__usuario span:not(b) { display: none; }
  .sidebar__hoja, .sidebar__frase { display: none; }

  .topbar__acciones { width: 100%; }
  .topbar__acciones .boton { flex: 1; text-align: center; }
}

/* --- VER COMO y capa de visibilidad por rol (Fase B, 2026-09-10) ------
   La barra tiene que ser IMPOSIBLE de confundir con parte del portal:
   quien la lleva puesta esta viendo datos filtrados a proposito, y
   olvidarse de eso lleva a reportar como error lo que es una regla. De
   ahi el ambar y el borde grueso a la izquierda. --------------------- */

.ver-como {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: #FAFAFA;
  font-size: 0.74rem;
  color: var(--gris);
}
.ver-como form { display: flex; gap: 0.35rem; flex-wrap: wrap; margin: 0; }
.ver-como button {
  font: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: #FFF;
  cursor: pointer;
}
.ver-como button:hover { border-color: var(--verde); color: var(--verde-d); }

.ver-como--activo {
  background: #FFF4E0;
  border-color: #E0A030;
  border-left: 4px solid #E0A030;
  color: #6A4A10;
}
.ver-como--activo b { color: #8A5A10; letter-spacing: 0.03em; }
.ver-como--activo span { flex: 1; min-width: 12rem; }
.ver-como--activo button { border-color: #E0A030; color: #8A5A10; }

/* Marca de importe oculto por rol. Tres puntos, no un guion: el guion ya
   significa "no hay dato" en View::dinero() y confundir "no existe" con
   "no te toca" hace que alguien lo reporte como error de datos. */
.oculto-rol { color: var(--gris2); letter-spacing: 0.12em; cursor: help; }

/* Boton chico reutilizable (lista de usuarios). Mismo peso visual que los
   filtros de la bitacora: son acciones secundarias, no llamadas a la
   accion. */
.bit-filtros__boton {
  font: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: #FFF;
  cursor: pointer;
}
.bit-filtros__boton:hover { border-color: var(--verde); color: var(--verde-d); }

/* Fase I (2026-11-03) — tablas ordenables, paginador, servicio truncado, KPI clicable */
.tabla-densa th.ordenable { cursor: pointer; user-select: none; white-space: nowrap; }
.tabla-densa th.ordenable::after { content: ' \2195'; color: #B9B9B9; font-weight: 400; }
.tabla-densa th.ordenable[data-dir="asc"]::after { content: ' \2191'; color: var(--verde-d, #4A8A24); }
.tabla-densa th.ordenable[data-dir="desc"]::after { content: ' \2193'; color: var(--verde-d, #4A8A24); }
.tabla-densa td.servicio { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paginador { display: flex; gap: .35rem; align-items: center; padding: .5rem .9rem; font-size: .8rem; color: #6B6060; flex-wrap: wrap; }
.paginador span { margin-right: .5rem; }
.paginador button { border: 1px solid #E0E0E0; background: #fff; border-radius: 4px; padding: .15rem .55rem; cursor: pointer; font: inherit; }
.paginador button.activo { background: #62B132; border-color: #62B132; color: #fff; font-weight: 700; }
a.kpi-enlace { color: inherit; text-decoration: none; display: block; }
a.kpi-enlace .kpi { cursor: pointer; }
a.kpi-enlace:hover .kpi { box-shadow: 0 0 0 2px #E8A317 inset; }
details.detalle-panel > summary { cursor: pointer; padding: .55rem .9rem; font-weight: 700; font-size: .85rem; list-style: none; }
details.detalle-panel > summary::-webkit-details-marker { display: none; }