/* ==========================================================================
   Panel de Automatizaciones — Lockton Uruguay
   ==========================================================================
   Sistema de diseño en dos capas:

     1. Tokens (:root): colores, sombras, radios y tipografía. Todo lo visual
        sale de acá; ningún color vive suelto en una regla.
     2. Componentes: cada bloque usa solo tokens, así el modo oscuro es un
        redefinido de variables y no un segundo CSS.

   La paleta parte del azul corporativo de las ventanas de los bots (#1F4E79)
   y lo extiende a una escala completa.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Marca */
  --azul-900: #0B1F33;
  --azul-800: #12324F;
  --azul-700: #1F4E79;
  --azul-600: #2E75B6;
  --azul-500: #3D8BD4;
  --azul-100: #DCEAF7;
  --azul-50:  #EFF6FC;

  /* Neutros */
  --gris-900: #101828;
  --gris-700: #344054;
  --gris-500: #667085;
  --gris-400: #98A2B3;
  --gris-300: #D0D5DD;
  --gris-200: #E4E7EC;
  --gris-100: #F2F4F7;
  --gris-50:  #F8FAFC;

  /* Semánticos */
  --verde-700: #067647;
  --verde-100: #DCFAE6;
  --ambar-700: #B54708;
  --ambar-100: #FEF0C7;
  --rojo-700:  #B42318;
  --rojo-100:  #FEE4E2;

  /* Roles.
     El fondo es claramente mas oscuro que la superficie: asi las tarjetas se
     leen como islas y la pantalla deja de ser un plano blanco. */
  --fondo:         #E8EDF4;
  --superficie:    #FDFEFF;
  --superficie-2:  #EFF3F8;
  --texto:         #0F1A28;
  --texto-suave:   #55647A;
  --texto-tenue:   #8695A9;
  --borde:         #DCE3EC;
  --borde-fuerte:  #C5D2E1;
  --acento:        var(--azul-700);
  --acento-hover:  var(--azul-600);

  /* Barra lateral (siempre oscura, en los dos modos) */
  --barra:         #0B1F33;
  --barra-texto:   #A8BDD3;
  --barra-tenue:   #7B95B4;
  --barra-activo:  var(--azul-700);
  --consola-fondo: #0D1420;
  --consola-texto: #C9D6E5;

  /* Sombras */
  --sombra-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10);
  --sombra-2: 0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
  --sombra-3: 0 12px 24px -6px rgba(16, 24, 40, 0.16), 0 4px 8px -4px rgba(16, 24, 40, 0.08);
  --aro-foco: 0 0 0 4px rgba(46, 117, 182, 0.18);

  /* Geometría y tipografía */
  --radio: 10px;
  --radio-chico: 7px;
  --fuente: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", Consolas, "Courier New", monospace;
  --transicion: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Modo oscuro: mismo sistema, otros valores. */
@media (prefers-color-scheme: dark) {
  :root {
    --fondo:         #0C1220;
    --superficie:    #141C2C;
    --superficie-2:  #1B2537;
    --texto:         #E6EAF2;
    --texto-suave:   #94A3B8;
    --texto-tenue:   #7C8CA1;
    --borde:         #243247;
    --borde-fuerte:  #31435E;
    --acento:        #4D9BE0;
    --acento-hover:  #6FB1EA;
    --barra:         #080F1B;
    --barra-activo:  #1D4470;
    --azul-50:       #16273D;
    --azul-100:      #1D3A58;
    --verde-100:     #123B27;
    --verde-700:     #55D08D;
    --ambar-100:     #3D2C10;
    --ambar-700:     #F2B14E;
    --rojo-100:      #3E1715;
    --rojo-700:      #F97066;
    --consola-fondo: #0A0F1A;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sombra-2: 0 4px 10px -2px rgba(0, 0, 0, 0.5);
    --sombra-3: 0 14px 28px -8px rgba(0, 0, 0, 0.6);
    --aro-foco: 0 0 0 4px rgba(77, 155, 224, 0.25);
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; min-height: 100%; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--fuente);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Con sesion iniciada el cuerpo es barra + columna; en login y error, una
   sola columna. */
body.con-barra { flex-direction: row; }

.columna-principal {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

/* El main empuja el pie al fondo aunque la pagina sea corta. */
main { flex: 1; width: 100%; }

::selection { background: var(--azul-600); color: #fff; }

/* Escala tipografica unica. Todo encabezado tiene tamano base aca: sin esto,
   un h2 sin regla propia cae al default del navegador (~20px) y esa pagina
   se ve distinta a las demas. */
h1 { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 4px; }
h2 { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 12px; }
h3 { font-size: 12.5px; font-weight: 700; margin: 0 0 8px; }

/* Encabezados de sección con una viñeta de acento, para que el ojo encuentre
   cada bloque sin leer. El panel de Estado queda afuera: ya tiene su punto. */
.dos-columnas section > h2::before,
.grid-reportes section > h2::before,
.seccion-reporte > h2::before,
.recientes > h2::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 14px;
  margin-right: 9px;
  border-radius: 2px;
  background: var(--acento);
  vertical-align: -2px;
}

a { color: var(--acento); }

.nota { color: var(--texto-suave); font-size: 13px; }
.subtitulo { color: var(--texto-suave); margin: 0 0 18px; font-size: 13px; }
[hidden] { display: none !important; }
.pista { font-size: 11.5px; color: var(--texto-suave); font-weight: 400; }
.pista-alerta { color: var(--ambar-700); font-weight: 600; }

/* --------------------------------------------------------------------------
   Barra lateral
   -------------------------------------------------------------------------- */
.barra-lateral {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 214px;
  height: 100vh;
  padding: 20px 0 14px;
  background: var(--barra);
  color: #fff;
}

.marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 20px 20px;
  text-decoration: none;
  text-align: center;
}

/* El logo va inline con fill=currentColor: acá es blanco sobre la barra, en
   el login toma el acento. En la barra ancha se ve completo (símbolo +
   LOCKTON); el símbolo solo queda para la barra angosta. */
.marca .logo-lockton { height: 40px; width: auto; color: #fff; }
.marca .logo-lockton-icono { display: none; }

.marca-sub {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--barra-tenue);
}

.menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 12px;
  overflow-y: auto;
}

.menu a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 11px;
  border-radius: 8px;
  color: var(--barra-texto);
  font-weight: 500;
  font-size: 13px;
  text-decoration: none;
  transition: background var(--transicion), color var(--transicion);
}

.menu a svg { width: 17px; height: 17px; flex-shrink: 0; }

.menu a:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }

.menu a.activo {
  color: #fff;
  background: var(--barra-activo);
  font-weight: 600;
}

/* Contador de pendientes de AdminSE. La barra es oscura en los dos temas, asi
   que el ambar va fijo y no por variable. */
.menu-badge {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #F2B14E;
  color: #3D2C10;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.menu-separador {
  height: 1px;
  margin: 12px;
  background: rgba(255, 255, 255, 0.09);
}

.sesion {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding: 16px 16px 0;
}

.usuario {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none;
  transition: background var(--transicion);
}

.usuario:hover { background: rgba(255, 255, 255, 0.11); }

.avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--azul-600);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.usuario-textos { display: flex; flex-direction: column; min-width: 0; }

.usuario-nombre {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usuario-rol { font-size: 11px; font-weight: 500; color: var(--barra-tenue); }

.boton-salir {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  padding: 0;
  color: var(--barra-tenue);
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}

.boton-salir svg { width: 17px; height: 17px; }
.boton-salir:hover { color: #fff; background: rgba(255, 255, 255, 0.09); }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.contenedor { max-width: 1320px; margin: 0 auto; padding: 26px 32px 40px; width: 100%; }

.contenedor-centrado {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(1000px 520px at 15% -10%, rgba(46, 117, 182, 0.10), transparent 60%),
    var(--fondo);
}

/* --------------------------------------------------------------------------
   Login
   -------------------------------------------------------------------------- */
.tarjeta-login, .tarjeta-error {
  width: 100%;
  max-width: 380px;
  padding: 32px 30px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 16px;
  box-shadow: var(--sombra-3);
}

.tarjeta-login h1 { font-size: 21px; margin-bottom: 2px; }

.contenedor-centrado .avisos { width: 100%; max-width: 380px; margin-bottom: 14px; }
.contenedor-centrado .aviso { justify-content: center; text-align: center; }

.marca-login { margin-bottom: 22px; text-align: center; }

.marca-login .logo-lockton {
  display: block;
  height: 52px;
  width: auto;
  margin: 0 auto 10px;
  color: var(--acento);
}

.marca-login h1 { margin: 0; font-size: 22px; }
.marca-login .subtitulo { margin: 3px 0 0; }

.tarjeta-error { text-align: center; }

.codigo-error {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--acento);
  margin: 0;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */
label {
  display: block;
  margin: 13px 0 5px;
  font-size: 12.5px;
  font-weight: 600;
}

input[type="text"], input[type="email"], input[type="password"], select {
  width: 100%;
  padding: 7px 11px;
  font-size: 13px;
  font-family: inherit;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

input::placeholder { color: var(--gris-400); }

input:focus, select:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: var(--aro-foco);
}

input[type="file"] {
  width: 100%;
  font-size: 12.5px;
  color: var(--texto-suave);
  margin-bottom: 8px;
}

input[type="file"]::file-selector-button {
  padding: 6px 12px;
  margin-right: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--acento);
  background: var(--azul-50);
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  transition: background var(--transicion);
}

input[type="file"]::file-selector-button:hover { background: var(--azul-100); }

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.boton-primario, .boton-ejecutar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: var(--acento);
  border: none;
  border-radius: var(--radio-chico);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--sombra-1);
  transition: background var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}

.boton-primario { margin-top: 18px; }
.boton-ejecutar { margin-top: 10px; }

.boton-primario:hover:not(:disabled), .boton-ejecutar:hover:not(:disabled) {
  background: var(--acento-hover);
  box-shadow: var(--sombra-2);
}

.boton-primario:active, .boton-ejecutar:active { transform: translateY(1px); }

.boton-ejecutar:disabled {
  background: var(--superficie-2);
  color: var(--texto-suave);
  cursor: default;
  box-shadow: none;
}

.boton-secundario {
  display: inline-block;
  padding: 6px 13px;
  font-size: 12.5px;
  font-family: inherit;
  font-weight: 600;
  color: var(--acento);
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transicion);
}

.boton-secundario:hover { border-color: var(--acento); background: var(--azul-50); }

.boton-peligro {
  padding: 6px 13px;
  font-size: 12.5px;
  font-family: inherit;
  font-weight: 600;
  color: var(--rojo-700);
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  cursor: pointer;
  transition: all var(--transicion);
}

.boton-peligro:hover { border-color: var(--rojo-700); background: var(--rojo-100); }

.boton-plano-claro {
  padding: 5px 12px;
  font-size: 12.5px;
  font-family: inherit;
  font-weight: 500;
  color: var(--texto-suave);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 7px;
  cursor: pointer;
  transition: all var(--transicion);
}

.boton-plano-claro:hover { color: var(--texto); border-color: var(--borde-fuerte); }

/* --------------------------------------------------------------------------
   Avisos
   -------------------------------------------------------------------------- */
.avisos { list-style: none; margin: 0 0 22px; padding: 0; }

.aviso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 8px;
  border-radius: var(--radio-chico);
  border: 1px solid transparent;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: var(--sombra-1);
  animation: aparecer 240ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

.aviso-error   { background: var(--rojo-100);  color: var(--rojo-700);  border-color: rgba(180, 35, 24, 0.25); }
.aviso-info    { background: var(--azul-50);   color: var(--acento-hover); border-color: rgba(46, 117, 182, 0.25); }
.aviso-ok      { background: var(--verde-100); color: var(--verde-700); border-color: rgba(6, 118, 71, 0.25); }
.aviso-warning { background: var(--ambar-100); color: var(--ambar-700); border-color: rgba(181, 71, 8, 0.25); }

@keyframes aparecer {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* Cierre con la X o solo, a los segundos (avisos.js). */
.aviso-texto { flex: 1; min-width: 0; }

.aviso-cerrar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: -1px -4px 0 0;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity var(--transicion), background var(--transicion);
}

.aviso-cerrar:hover,
.aviso-cerrar:focus-visible { opacity: 1; background: rgba(0, 0, 0, 0.07); }
.aviso-cerrar svg { width: 13px; height: 13px; }

.aviso-saliendo { animation: desaparecer 200ms ease-in forwards; }

@keyframes desaparecer {
  to { opacity: 0; transform: translateY(-6px); }
}

/* --------------------------------------------------------------------------
   Panel de estado
   -------------------------------------------------------------------------- */
.panel-estado {
  padding: 16px 20px;
  margin-bottom: 20px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-1);
  transition: border-color var(--transicion);
}

.panel-estado.desconectado { border-color: var(--rojo-700); }

.estado-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.estado-cabecera h2 { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 9px; }

.estado-cabecera h2::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--verde-700);
  animation: latido 2.4s ease-in-out infinite;
}

.desconectado .estado-cabecera h2::before {
  background: var(--rojo-700);
  animation: none;
}

@keyframes latido {
  0%, 100% { box-shadow: 0 0 0 3px rgba(6, 118, 71, 0.20); }
  50%      { box-shadow: 0 0 0 7px rgba(6, 118, 71, 0.06); }
}

/* Indicador de carriles: vive en el encabezado de la pagina, no en el panel. */
.carriles {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texto);
  white-space: nowrap;
}

.carriles::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--verde-700);
  box-shadow: 0 0 0 3px rgba(6, 118, 71, 0.14);
}

.desconectado-carriles::before { background: var(--rojo-700); box-shadow: none; }

/* Sin actividad, el panel se pliega a una sola linea. */
.estado-resumen-vacio {
  flex: 1;
  margin: 0 16px;
  font-size: 13px;
  color: var(--texto-suave);
}

.panel-estado:not(.sin-actividad) .estado-resumen-vacio { display: none; }
.panel-estado.sin-actividad { padding: 11px 20px; margin-bottom: 18px; }
.panel-estado.sin-actividad .estado-cabecera { margin-bottom: 0; }
.panel-estado.sin-actividad .estado-columnas { display: none; }

.estado-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }

.estado-columnas h3 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--texto-suave);
}

/* --------------------------------------------------------------------------
   Listas de corridas
   -------------------------------------------------------------------------- */
.lista-corridas, .lista-recientes, .lista-archivos, .lista-errores {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lista-corridas li, .lista-recientes li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 9px;
  margin: 0 -10px;
  border-radius: var(--radio-chico);
  font-size: 12.5px;
  transition: background var(--transicion);
}

.lista-corridas li:hover, .lista-recientes li:hover { background: var(--superficie-2); }

.lista-corridas .nombre, .lista-recientes .nombre {
  color: var(--texto);
  text-decoration: none;
  font-weight: 600;
}

.lista-corridas .nombre:hover, .lista-recientes .nombre:hover { color: var(--acento); }

.meta { font-size: 12px; color: var(--texto-suave); margin-left: auto; white-space: nowrap; }

.vacio {
  color: var(--texto-suave);
  font-size: 13px;
  padding: 14px 0 !important;
  justify-content: center;
}

.vacio:hover { background: transparent !important; }

/* Corrida en curso: barra animada al costado. */
.lista-corridas li.corriendo {
  position: relative;
  padding-left: 16px;
}

.lista-corridas li.corriendo::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: 3px;
  background: var(--acento);
  animation: respirar 1.6s ease-in-out infinite;
}

@keyframes respirar {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.lista-corridas li.corriendo .nombre { color: var(--acento); }

.punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.punto-ok          { background: var(--verde-700); }
.punto-advertencia { background: var(--ambar-700); }
.punto-error       { background: var(--rojo-700); }
.punto-curso       { background: var(--acento); }
.punto-espera      { background: var(--gris-400); }
.punto-neutro      { background: var(--gris-400); }

/* --------------------------------------------------------------------------
   Encabezado de página: título a la izquierda, acciones a la derecha
   -------------------------------------------------------------------------- */
.encabezado-pagina {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.encabezado-pagina .subtitulo { margin-bottom: 12px; }

/* --------------------------------------------------------------------------
   Grupos y filas de automatizaciones (dashboard)
   -------------------------------------------------------------------------- */
.grupo-bots { margin: 0 0 14px; }

.grupo-bots > details {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-1);
}

.grupo-bots > details > summary {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  border-radius: var(--radio);
}

.grupo-bots > details > summary::-webkit-details-marker { display: none; }
.grupo-bots > details[open] > summary { border-bottom: 1px solid var(--borde); border-radius: var(--radio) var(--radio) 0 0; }

.grupo-bots summary h2 { margin: 0; font-size: 14px; }

.chevron {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-right: 2px solid var(--texto-suave);
  border-bottom: 2px solid var(--texto-suave);
  transform: rotate(-45deg);
  transition: transform var(--transicion);
}

details[open] > summary .chevron { transform: rotate(45deg); }

.contador-grupo {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--superficie-2);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--texto-suave);
}

.acciones-grupo {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.acciones-grupo .pista { color: var(--texto-tenue); }

/* "Ejecutar todas" es la accion importante del grupo: gradiente de marca y
   sombra, para que no se pierda entre las filas. */
.boton-tanda {
  width: auto;
  margin-top: 0;
  padding: 6px 14px;
  gap: 7px;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.boton-tanda svg { width: 11px; height: 11px; flex-shrink: 0; }

.boton-tanda:hover:not(:disabled) {
  background: var(--acento-hover);
  box-shadow: var(--sombra-2);
}

.filas-bots { padding: 4px 8px 7px; }

.fila-bot {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) 104px minmax(0, 1fr) auto 118px;
  align-items: center;
  gap: 16px;
  padding: 8px 10px;
  border-radius: var(--radio-chico);
  transition: background var(--transicion);
}

.fila-bot:hover { background: var(--superficie-2); }
.fila-bot + .fila-bot { box-shadow: inset 0 1px 0 var(--borde); }
.fila-bot.inhabilitada { opacity: 0.6; }

.bot-identidad { display: flex; align-items: center; gap: 13px; min-width: 0; }
.bot-textos { min-width: 0; }

.bot-nombre {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: -0.01em;
}

.bot-detalle { display: block; font-size: 11px; color: var(--texto-tenue); }

.etiqueta-entrada {
  padding: 1px 7px;
  border-radius: 5px;
  background: var(--superficie-2);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.bot-portal {
  justify-self: start;
  padding: 2px 9px;
  border-radius: 6px;
  background: var(--azul-50);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.bot-ultima {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font-size: 12px;
}

.bot-ultima a { text-decoration: none; }
.bot-ultima .meta { margin-left: 0; color: var(--texto-tenue); }

.estado-bot {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--acento);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.estado-bot:not(:empty)::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--acento);
  animation: respirar 1.6s ease-in-out infinite;
}

.bot-accion {
  display: flex;
  justify-content: flex-end;
  position: relative;
}

/* El boton por fila es la accion repetida: va en tono calmo (outline) para que
   el "Ejecutar todas" del grupo sea el unico que grita. */
.fila-bot .boton-ejecutar {
  width: 100%;
  margin-top: 0;
  padding: 6px 12px;
  font-size: 12.5px;
  white-space: nowrap;
  color: var(--acento);
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  box-shadow: none;
}

.fila-bot .boton-ejecutar:hover:not(:disabled) {
  border-color: var(--acento);
  background: var(--azul-50);
  transform: none;
  filter: none;
  box-shadow: none;
}

.fila-bot .boton-ejecutar:disabled {
  color: var(--texto-suave);
  background: var(--superficie-2);
  border-color: var(--borde);
}

.fila-bot .pista-alerta { font-size: 12px; text-align: right; }

/* Subida de archivo (Berkley): un desplegable anclado al botón. */
.despliegue-archivo { position: relative; width: 100%; }

.despliegue-archivo > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.despliegue-archivo > summary::-webkit-details-marker { display: none; }

.despliegue-archivo .cuerpo-archivo {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  width: 320px;
  padding: 16px 18px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-3);
}

.despliegue-archivo .cuerpo-archivo .boton-ejecutar { width: 100%; margin-top: 12px; }

.etiqueta-archivo { margin-top: 4px; }

/* --------------------------------------------------------------------------
   Recientes
   -------------------------------------------------------------------------- */
.recientes {
  padding: 16px 20px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-1);
}

.recientes h2 { font-size: 14px; margin: 0 0 9px; }

.enlace-mas {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--acento);
  text-decoration: none;
}

.enlace-mas:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Tablas
   -------------------------------------------------------------------------- */
.tabla-envoltorio {
  overflow-x: auto;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-1);
}

.tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }

.tabla th {
  padding: 9px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-suave);
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}

.tabla td { padding: 9px 14px; border-bottom: 1px solid var(--borde); }
.tabla tbody tr { transition: background var(--transicion); }
.tabla tbody tr:hover { background: var(--superficie-2); }
.tabla tr:last-child td { border-bottom: none; }
.tabla a { color: var(--acento); font-weight: 600; text-decoration: none; }
.tabla a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Pastillas de estado
   -------------------------------------------------------------------------- */
.pastilla {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.pastilla::before { content: ""; width: 5px; height: 5px; border-radius: 50%; }

.pastilla-ok          { background: var(--verde-100); color: var(--verde-700); }
.pastilla-ok::before  { background: var(--verde-700); }
.pastilla-advertencia { background: var(--ambar-100); color: var(--ambar-700); }
.pastilla-advertencia::before { background: var(--ambar-700); }
.pastilla-error       { background: var(--rojo-100);  color: var(--rojo-700); }
.pastilla-error::before { background: var(--rojo-700); }
.pastilla-curso       { background: var(--azul-50);   color: var(--acento); }
.pastilla-curso::before { background: var(--acento); animation: respirar 1.6s infinite; }
.pastilla-espera      { background: var(--superficie-2); color: var(--texto-suave); }
.pastilla-espera::before { background: var(--gris-400); }
.pastilla-neutro      { background: var(--superficie-2); color: var(--texto-suave); }
.pastilla-neutro::before { background: var(--gris-400); }

/* --------------------------------------------------------------------------
   Filtros y paginación
   -------------------------------------------------------------------------- */
.filtros {
  display: flex;
  align-items: flex-end;
  gap: 11px 15px;
  flex-wrap: wrap;
  margin: 16px 0;
  padding: 12px 16px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-1);
}

/* Cada filtro es una columna: etiqueta chica arriba, control abajo. Asi los
   controles quedan alineados por la base aunque el form haga wrap. */
.grupo-filtro { display: flex; flex-direction: column; gap: 5px; }
/* Un filtro de una sola casilla: alineado abajo, a la altura de los inputs. */
.grupo-filtro-check { justify-content: flex-end; }
.grupo-filtro-check label { display: flex; align-items: center; gap: 6px; padding-bottom: 8px; }

.grupo-filtro label {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-suave);
}

.acciones-filtros { display: flex; align-items: center; gap: 14px; padding-bottom: 1px; }

/* Conteo de resultados con la descarga al lado: el boton pertenece a la
   seleccion que describe el texto, no a la barra de filtros. */
.nota-con-accion { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* .enlace-mas trae un margen pensado para cerrar secciones; dentro de la
   barra de filtros desalineaba "Limpiar" respecto del boton. */
.acciones-filtros .enlace-mas { margin-top: 0; }

.filtros select { width: auto; min-width: 160px; padding: 8px 12px; font-size: 13.5px; }

.filtros input[type="date"], .filtros .filtro-texto {
  width: auto;
  min-width: 0;
  max-width: 165px;
  padding: 8px 12px;
  font-size: 13.5px;
}

input[type="date"] {
  font-family: inherit;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

input[type="date"]:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: var(--aro-foco);
}

.paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 24px;
  font-size: 13.5px;
  color: var(--texto-suave);
}

.paginacion a { color: var(--acento); font-weight: 600; text-decoration: none; }
.paginacion a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Detalle de corrida
   -------------------------------------------------------------------------- */
.migas { margin-bottom: 14px; font-size: 13px; color: var(--texto-suave); }
.migas a { color: var(--acento); text-decoration: none; font-weight: 500; }
.migas a:hover { text-decoration: underline; }

.cabecera-corrida {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.cabecera-corrida h1 { margin-bottom: 8px; }

.dos-columnas {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
  align-items: start;
  margin-bottom: 24px;
}

.dos-columnas section, .contenedor > section, .grid-reportes section {
  padding: 16px 19px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-1);
}

.dos-columnas h2, .contenedor > section > h2 { font-size: 14px; margin: 0 0 14px; }

.ficha {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 20px;
  margin: 0 0 20px;
  font-size: 13.5px;
}

.ficha:last-child { margin-bottom: 0; }
.ficha dt { color: var(--texto-suave); font-weight: 500; }
.ficha dd { margin: 0; font-weight: 500; }
.ficha dd.ruta { font-family: var(--mono); font-size: 11.5px; word-break: break-all; font-weight: 400; }

.lista-archivos li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--borde);
  font-size: 13.5px;
}

.lista-archivos li:last-child { border-bottom: none; }
.lista-archivos a { color: var(--acento); font-weight: 600; text-decoration: none; }
.lista-archivos a:hover { text-decoration: underline; }

.lista-errores { padding-left: 18px; font-size: 13.5px; color: var(--rojo-700); list-style: disc; }
.lista-errores li { margin-bottom: 6px; }

/* Avisos de una corrida: no son errores, pero nadie deberia pasarlos por alto. */
.lista-avisos { padding-left: 18px; font-size: 13.5px; color: var(--ambar-700); list-style: disc; }
.lista-avisos li { margin-bottom: 6px; }

.consola {
  max-height: 420px;
  overflow: auto;
  padding: 18px 20px;
  background: var(--consola-fondo);
  color: var(--consola-texto);
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   Configuración
   -------------------------------------------------------------------------- */
.sub-menu {
  display: flex;
  gap: 4px;
  margin: 16px 0 20px;
  padding: 4px;
  background: var(--superficie-2);
  border-radius: 10px;
  width: fit-content;
}

.sub-menu a {
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--texto-suave);
  text-decoration: none;
  border-radius: 7px;
  transition: all var(--transicion);
  border-bottom: none;
  margin-bottom: 0;
}

.sub-menu a:hover { color: var(--texto); }

/* Pestañas de un pack (cobranzas_base.html): van arriba del encabezado. */
.sub-menu-seccion { margin-top: 0; flex-wrap: wrap; }
.sub-menu .menu-badge {
  display: inline-block;
  margin-left: 5px;
  background: var(--ambar-100);
  color: var(--ambar-700);
}

.sub-menu a.activo {
  color: var(--texto);
  background: var(--superficie);
  font-weight: 600;
  box-shadow: var(--sombra-1);
}

.tarjeta-config {
  padding: 16px 19px;
  margin-bottom: 13px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-1);
}

/* Portales como filas colapsables dentro de una tarjeta. */
.lista-portales {
  margin-bottom: 16px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-1);
}

.portal-item + .portal-item { border-top: 1px solid var(--borde); }

/* Fila-resumen en grilla: las columnas quedan alineadas entre portales. */
.portal-item > summary {
  display: grid;
  grid-template-columns: 14px minmax(110px, 170px) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background var(--transicion);
}

.portal-item > summary::-webkit-details-marker { display: none; }
.portal-item > summary:hover { background: var(--superficie-2); }
.portal-item[open] > summary { border-bottom: 1px solid var(--borde); }
.portal-item:first-child > summary { border-radius: var(--radio) var(--radio) 0 0; }
.portal-item:last-child:not([open]) > summary { border-radius: 0 0 var(--radio) var(--radio); }

.portal-nombre { font-weight: 600; font-size: 14px; }

.portal-usuario {
  font-size: 12.5px;
  color: var(--texto-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-pastillas { display: flex; gap: 8px; }
.portal-cuando { white-space: nowrap; }

.portal-cuerpo { padding: 4px 20px 18px; }

/* Pista debajo del input, para que las etiquetas queden en una sola linea y
   los campos alineados. */
.pista-campo { margin: 6px 0 0; }

.acciones-derecha { display: flex; align-items: center; gap: 16px; }

/* Formulario sin contenido visible, disparado por un boton con `form=`. */
.form-oculto { display: none; }

@media (max-width: 720px) {
  .portal-item > summary { grid-template-columns: 14px 1fr auto; }
  .portal-usuario, .portal-cuando { display: none; }
}

.tarjeta-config.nueva { border-style: dashed; background: transparent; box-shadow: none; }
.tarjeta-config h2 { margin: 0 0 12px; }

.cabecera-config {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.cabecera-config h2 { margin: 0; }

.campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 4px 20px;
}

.campos label, .campo-ancho label { margin-top: 10px; }
.campo-ancho { margin-bottom: 6px; }

.acciones-config {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--borde);
}

.linea {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 500;
  font-size: 13.5px;
}

.linea input[type="checkbox"] { margin: 0; accent-color: var(--acento); width: 15px; height: 15px; }

.acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.acciones .boton-secundario { font-size: 12.5px; padding: 6px 13px; }

/* --------------------------------------------------------------------------
   Reportes
   -------------------------------------------------------------------------- */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 2px 0 18px;
}

.kpi {
  display: flex;
  flex-direction: column;
  padding: 14px 17px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-1);
}

.kpi-etiqueta { font-size: 11.5px; font-weight: 600; color: var(--texto-suave); }

.kpi-valor {
  margin-top: 2px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.kpi-detalle { margin-top: 2px; font-size: 11.5px; color: var(--texto-tenue); }

/* Hallazgo destacado: una sola frase accionable debajo de una lista. */
.destacado {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  padding: 13px 15px;
  border-radius: var(--radio-chico);
  background: var(--ambar-100);
}

.destacado svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--ambar-700); }
.destacado p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ambar-700); }
.destacado a { color: var(--ambar-700); font-weight: 600; text-decoration: none; }
.destacado a:hover { text-decoration: underline; }

/* El mismo hallazgo, pero al tope de la pagina (dashboard). */
.destacado-arriba { margin-top: 0; margin-bottom: 20px; }
.destacado-arriba p { flex: 1; }
.destacado .aviso-cerrar { color: var(--ambar-700); }
.destacado .aviso-cerrar svg { width: 13px; height: 13px; margin-top: 0; }

.grid-reportes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
}

.grid-reportes h2, .seccion-reporte h2 { font-size: 14px; margin: 0 0 14px; }
.seccion-reporte { margin-bottom: 18px; }

/* --------------------------------------------------------------------------
   Manual de uso: texto largo para leer, con indice de anclas arriba
   -------------------------------------------------------------------------- */
.manual { max-width: 820px; }
.manual-indice {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 26px;
  padding: 14px 16px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
}
.manual-indice a { font-size: 13px; text-decoration: none; }
.manual-indice a:hover { text-decoration: underline; }
.manual-seccion { margin-bottom: 30px; scroll-margin-top: 20px; }
.manual-seccion h2 { margin: 0 0 10px; font-size: 18px; }
.manual-seccion h3 { margin: 16px 0 6px; font-size: 14.5px; }
.manual-seccion p, .manual-seccion li { font-size: 14px; line-height: 1.55; }
.manual-seccion ul { padding-left: 20px; margin: 6px 0 12px; }
.manual-seccion li + li { margin-top: 4px; }
.manual-seccion code {
  padding: 1px 5px;
  font-size: 12.5px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 5px;
}
.manual-tabla { margin: 6px 0 12px; }
.manual-tabla td { vertical-align: top; font-size: 13.5px; }
.manual-faq dt { margin-top: 12px; font-weight: 600; font-size: 14px; }
.manual-faq dd { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--texto-suave); }
.seccion-reporte .nota { font-size: 12.5px; margin: -6px 0 14px; }

/* Barras horizontales de un solo tono: la magnitud la lleva el largo. */
.lista-barras { display: flex; flex-direction: column; gap: 10px; }

.fila-barra {
  display: grid;
  grid-template-columns: minmax(100px, 150px) 1fr auto;
  gap: 12px;
  align-items: center;
  font-size: 13px;
}

.nombre-barra { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pista-barra {
  position: relative;
  display: block;
  height: 12px;
  background: var(--azul-50);
  border-radius: 0 4px 4px 0;
}

.relleno-barra {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: var(--acento);
  border-radius: 0 4px 4px 0;
}

.valor-barra {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 12.5px;
  white-space: nowrap;
}

/* Columnas por dia: crecen desde la base, punta redondeada. */
.cabecera-grafico {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.cabecera-grafico h2 { margin-bottom: 10px; }
.cabecera-grafico .pista { color: var(--texto-tenue); }

.grafico-dias { display: flex; gap: 10px; }

/* Eje vertical: sin el maximo, una barra sola no dice cuanto vale. */
.eje-y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 120px;
  padding-bottom: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--texto-tenue);
  text-align: right;
  min-width: 20px;
}

.columnas-dias {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  flex: 1;
  height: 120px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--borde-fuerte);
}

.columna-dia-envoltorio {
  position: relative;
  flex: 1;
  max-width: 24px;
  height: 100%;
  display: flex;
  align-items: flex-end;
  border-radius: 4px 4px 0 0;
  transition: background var(--transicion);
}

.columna-dia-envoltorio:hover { background: var(--superficie-2); }

/* Un dia sin polizas no dibuja barra: solo una marca en la linea de base,
   para que "cero" no se confunda con "poco". */
.columna-dia-envoltorio.vacio-dia::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--borde-fuerte);
}

.columna-dia {
  display: block;
  width: 100%;
  background: var(--acento);
  border-radius: 4px 4px 0 0;
}

/* Globo con el dato exacto: reemplaza al title del navegador, que tarda
   un segundo en aparecer y no se puede estilar. */
.globo {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  padding: 5px 9px;
  border-radius: var(--radio-chico);
  background: var(--azul-900);
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transicion);
}

.columna-dia-envoltorio:hover .globo { opacity: 1; }

/* Los globos de los extremos no deben salirse de la tarjeta. */
.columna-dia-envoltorio:first-child .globo { left: 0; transform: none; }
.columna-dia-envoltorio:last-child .globo { left: auto; right: 0; transform: none; }

.eje-dias {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  padding-left: 30px;
  font-size: 11px;
  color: var(--texto-suave);
}

.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Un valor que es solo un indicio (Pendientes: "En la ultima corrida: No"). */
.tabla .dato-tenue { color: var(--texto-suave); }

@media (max-width: 860px) {
  .grid-reportes { grid-template-columns: 1fr; }
}

/* Config > Carpetas: una fila por ruta, con su estado al lado del campo. */
.fila-ruta {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
  gap: 8px 24px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--borde);
}

.fila-ruta:first-child { padding-top: 4px; }
.fila-ruta:last-child { border-bottom: none; }

.ruta-info label { margin: 0 0 2px; }

.ruta-clave {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--texto-suave);
  word-break: break-all;
}

.ruta-valor { display: flex; align-items: center; gap: 10px; }
.ruta-valor input { flex: 1; font-family: var(--mono); font-size: 12.5px; }
.ruta-valor .pastilla { flex-shrink: 0; }

@media (max-width: 720px) {
  .fila-ruta { grid-template-columns: 1fr; }
}

/* Reset de contrasena inline en la tabla de usuarios. */
.form-reset { display: flex; align-items: center; gap: 6px; }
.form-reset input[type="password"] { width: 170px; padding: 5px 10px; font-size: 12.5px; }

/* Token de AdminSE revelado a pedido. */
.secreto-revelado {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--superficie-2);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
}

.secreto-revelado code {
  display: block;
  font-family: var(--mono);
  font-size: 12.5px;
  word-break: break-all;
  user-select: all;
}

.secreto-revelado .pista { margin: 8px 0 0; }

/* Visor de archivos: estado de las dos carpetas arriba de la tabla. */
.tarjetas-carpeta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 6px;
}

.tarjeta-carpeta {
  padding: 14px 18px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-1);
}

.tarjeta-carpeta-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tarjeta-carpeta h2 { margin: 0; font-size: 14px; }
.tarjeta-carpeta .nota { margin: 8px 0 0; font-size: 12.5px; }

.ruta-carpeta {
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--texto-suave);
  word-break: break-all;
}

/* Tabla anidada dentro de una seccion (exclusiones del detalle). */
.tabla-compacta { box-shadow: none; border-radius: var(--radio-chico); }
.tabla-compacta .tabla { font-size: 12.5px; }
.tabla-compacta .tabla th, .tabla-compacta .tabla td { padding: 8px 12px; }

/* --------------------------------------------------------------------------
   Pie de la aplicacion
   -------------------------------------------------------------------------- */
.pie-app {
  padding: 14px 28px;
  border-top: 1px solid var(--borde);
  text-align: center;
  font-size: 12px;
  color: var(--texto-tenue);
  background: transparent;
}

.pie-app a {
  color: var(--acento);
  font-weight: 600;
  text-decoration: none;
}

.pie-app a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .estado-columnas, .dos-columnas { grid-template-columns: 1fr; }
  .dos-columnas section + section { margin-top: 24px; }
  .contenedor { padding: 24px 20px 44px; }

  /* La barra pasa a ser una franja de iconos: se gana el ancho del contenido
     sin perder la navegacion. */
  .barra-lateral { width: 68px; padding: 20px 0 16px; }
  .barra-lateral .marca { align-items: center; padding: 0 0 20px; }
  .barra-lateral .marca .logo-lockton { display: none; }
  .barra-lateral .marca .logo-lockton-icono { display: block; height: 30px; }
  .barra-lateral .marca-sub { display: none; }
  .menu { padding: 0 10px; }
  .menu a { justify-content: center; padding: 11px 0; }
  .menu a span:not(.menu-separador) { display: none; }
  /* Sin lugar para el numero: queda un punto sobre el icono. */
  .menu a { position: relative; }
  .menu .menu-badge {
    position: absolute;
    top: 7px;
    right: 12px;
    min-width: 0;
    width: 8px;
    height: 8px;
    padding: 0;
    font-size: 0;
  }
  .sesion { flex-direction: column; gap: 8px; padding: 12px 10px 0; }
  .usuario { justify-content: center; padding: 8px; }
  .usuario-textos { display: none; }
}

/* Las filas del dashboard colapsan a dos líneas en pantallas angostas. */
@media (max-width: 980px) {
  .fila-bot { grid-template-columns: minmax(0, 1fr) auto 138px; row-gap: 7px; }
  .bot-portal { display: none; }
  .bot-ultima { grid-column: 1 / -1; }
  .despliegue-archivo .cuerpo-archivo { width: min(320px, 86vw); }
  .acciones-grupo .pista { display: none; }
}

/* Accesibilidad: sin animaciones para quien las desactiva. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --------------------------------------------------------------------------
   Agendas
   -------------------------------------------------------------------------- */
.opciones-dias {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin: 6px 0 12px;
}

.casillas-dias {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--superficie-2);
  border-radius: var(--radio-chico);
  transition: opacity var(--transicion);
}

/* Con un atajo marcado, las casillas siguen visibles pero apagadas: se ve que
   existen sin invitar a tocarlas. */
.casillas-dias.inhabilitada { opacity: 0.45; }

.opciones-dias input[type="radio"],
.casillas-dias input[type="checkbox"] {
  margin: 0;
  accent-color: var(--acento);
  width: 15px;
  height: 15px;
}

/* --------------------------------------------------------------------------
   Dialogo de confirmacion
   --------------------------------------------------------------------------
   Reemplaza al `confirm()` del navegador, que ignora por completo la tipografia
   y los colores de la aplicacion. Se usa <dialog> nativo: trae foco atrapado,
   cierre con Escape y fondo inerte sin escribir nada de eso a mano. */
.dialogo {
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto);
  box-shadow: var(--sombra-3);
  max-width: 420px;
  width: calc(100% - 32px);
}

.dialogo::backdrop {
  background: rgba(11, 31, 51, 0.45);
  backdrop-filter: blur(2px);
}

.dialogo-cuerpo { padding: 22px 24px 18px; }

.dialogo-cuerpo h2 {
  margin: 0 0 8px;
  font-size: 15px;
}

.dialogo-texto {
  margin: 0;
  font-size: 13.5px;
  color: var(--texto-suave);
  line-height: 1.55;
}

.dialogo-acciones {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px;
  background: var(--superficie-2);
  border-top: 1px solid var(--borde);
  border-radius: 0 0 var(--radio) var(--radio);
}

/* Aparece con una entrada corta: sin esto salta de golpe y se siente brusco. */
.dialogo[open] { animation: dialogo-entra 140ms cubic-bezier(0.2, 0.8, 0.3, 1); }

@keyframes dialogo-entra {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Selector de horario
   --------------------------------------------------------------------------
   Dos desplegables en lugar de <input type="time">: ese control se dibuja con
   la tipografia del sistema y no hay forma de alinearlo con la del panel. */
.selector-hora {
  display: flex;
  align-items: center;
  gap: 6px;
}

.selector-hora select {
  width: auto;
  min-width: 74px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.selector-hora .separador-hora {
  font-weight: 700;
  color: var(--texto-suave);
}

/* --------------------------------------------------------------------------
   Perfil
   --------------------------------------------------------------------------
   La columna ancha es la del formulario: los datos de la cuenta son cuatro
   lineas y no necesitan el espacio que si necesitan tres campos de password. */
.dos-columnas.invertida { grid-template-columns: 1fr 1.25fr; }
@media (max-width: 900px) {
  .dos-columnas.invertida { grid-template-columns: 1fr; }
}

.tarjeta-identidad {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--borde);
}
.avatar-grande {
  width: 46px;
  height: 46px;
  font-size: 16px;
  letter-spacing: 0.5px;
}
.identidad-textos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}
.identidad-textos strong { font-size: 15px; }
.identidad-email {
  font-size: 12.5px;
  color: var(--texto-suave);
  word-break: break-all;
}
.identidad-textos .pastilla { margin-top: 3px; }

.titulo-intermedio { margin-top: 22px !important; }

.metricas-perfil {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.metrica {
  padding: 12px 14px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
}
.metrica-numero {
  display: block;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.metrica-etiqueta {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--texto-suave);
}

/* Los campos del formulario van uno abajo del otro: son tres passwords y
   ponerlos en dos columnas invita a confundir "nueva" con "repetir". */
.form-perfil .campo-ancho { margin-bottom: 14px; }
.form-perfil .campo-ancho label { display: block; margin-bottom: 5px; }
.form-perfil .pista { display: block; margin-top: 5px; }
.form-perfil .aviso-coincidencia { color: var(--rojo-700); font-weight: 600; }
.form-perfil .acciones-config { margin-top: 20px; }

.enlace-sin-margen { margin: 0; }