:root {
  --acento: #c3002f;
  --acento-oscuro: #9d0026;
  --acento-suave: #fdf1f3;

  --tinta: #101418;
  --tinta-media: #4a5460;
  --tinta-suave: #7b8592;

  --linea: #e4e7ec;
  --linea-fuerte: #cdd3da;
  --fondo: #f3f4f6;
  --panel: #ffffff;
  --panel-alt: #fafbfc;

  --ok: #12703a;
  --ok-fondo: #f0faf3;
  --alerta: #8a5a00;
  --alerta-fondo: #fdf8ec;
  --error: #b02a25;
  --error-fondo: #fdf3f2;

  --sombra: 0 1px 2px rgba(16, 20, 24, .05), 0 1px 3px rgba(16, 20, 24, .04);
  --radio: 6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 14px/1.55 "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Encabezado ---------- */

.barra-marca { height: 3px; background: var(--acento); }

header {
  background: var(--panel);
  border-bottom: 1px solid var(--linea);
  padding: 0 32px;
}

.header-interno {
  max-width: 1500px;
  margin: 0 auto;
  height: 62px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.marca {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
  flex: 0 0 auto;
}

.titulos h1 {
  font-size: 15px;
  font-weight: 650;
  margin: 0;
  letter-spacing: -.15px;
}

.titulos p {
  margin: 0;
  font-size: 12.5px;
  color: var(--tinta-suave);
}

.pill {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 5px 13px 5px 11px;
  font-size: 12.5px;
  color: var(--tinta-media);
  background: var(--panel-alt);
  max-width: 460px;
}

.pill .punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  flex: 0 0 auto;
}

.pill.mal { border-color: #f0c9c6; background: var(--error-fondo); color: var(--error); }
.pill.mal .punto { background: var(--error); }
.pill code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 11.5px;
  color: var(--tinta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Estructura ---------- */

main { max-width: 1500px; margin: 0 auto; padding: 24px 32px 48px; }

/* Contenido a la izquierda, contexto fijo a la derecha: llena el ancho en
   monitores grandes en vez de dejar una columna flaca al centro. */
.trabajo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: start;
}

.columna { min-width: 0; }

.rail { position: sticky; top: 20px; }
.rail .panel:last-child { margin-bottom: 0; }

@media (max-width: 1180px) {
  .trabajo { grid-template-columns: 1fr; }
  .rail { position: static; }
}

.panel {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  margin-bottom: 18px;
  overflow: hidden;
}

.panel-cabecera {
  padding: 16px 22px;
  border-bottom: 1px solid var(--linea);
  display: flex;
  align-items: center;
  gap: 12px;
}

.paso {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tinta);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11.5px;
  font-weight: 650;
  flex: 0 0 auto;
}

.panel-cabecera h2 {
  font-size: 13.5px;
  font-weight: 650;
  margin: 0;
  letter-spacing: -.1px;
}

.panel-cabecera .sub {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--tinta-suave);
}

.panel-cuerpo { padding: 22px; }

.rotulo {
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--tinta-suave);
  margin: 0 0 11px;
}

/* ---------- Zona de carga ---------- */

#zona {
  border: 1px dashed var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--panel-alt);
  padding: 38px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

#zona:hover, #zona.encima {
  border-color: var(--acento);
  background: var(--acento-suave);
}

#zona .icono {
  width: 38px;
  height: 38px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--linea);
  display: grid;
  place-items: center;
  color: var(--acento);
}

#zona strong { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 4px; }
#zona small { color: var(--tinta-suave); font-size: 12.5px; }

/* ---------- Indicadores ---------- */

.indicadores {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  margin-bottom: 20px;
}

.indicador {
  padding: 14px 16px;
  border-right: 1px solid var(--linea);
  background: var(--panel-alt);
}

.indicador:last-child { border-right: 0; }

.indicador b {
  display: block;
  font-size: 24px;
  font-weight: 620;
  line-height: 1.2;
  letter-spacing: -.6px;
  font-variant-numeric: tabular-nums;
}

.indicador span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--tinta-suave);
}

.indicador.marcada b { color: var(--alerta); }

/* ---------- Avisos y estados ---------- */

.aviso, .fallo, .exito {
  border: 1px solid;
  border-radius: var(--radio);
  padding: 10px 14px;
  margin-bottom: 8px;
  font-size: 13.5px;
}

.aviso { background: var(--alerta-fondo); border-color: #edddb8; color: var(--alerta); }

/* Los avisos del preview van juntos en un solo bloque, no en cinco cajas. */
.avisos-caja {
  border: 1px solid #edddb8;
  background: var(--alerta-fondo);
  border-radius: var(--radio);
  overflow: hidden;
}

.aviso-fila {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 14px;
  font-size: 13px;
  color: var(--alerta);
  border-bottom: 1px solid #f2e6c9;
}

.aviso-fila:last-child { border-bottom: 0; }
.aviso-fila svg { flex: 0 0 auto; margin-top: 2px; opacity: .8; }
.fallo { background: var(--error-fondo); border-color: #f0c9c6; color: var(--error); }
.exito { background: var(--ok-fondo); border-color: #bfe3cb; color: var(--ok); font-weight: 600; }

/* ---------- Rejilla fechas / agencias ---------- */

.rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 22px;
  margin-top: 22px;
}

@media (max-width: 860px) {
  .rejilla { grid-template-columns: 1fr; }
  .indicadores { grid-template-columns: repeat(2, 1fr); }
  .indicador:nth-child(2n) { border-right: 0; }
}

.lista { border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }

.fecha {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--linea);
  cursor: pointer;
  background: var(--panel);
}

.fecha:last-child { border-bottom: 0; }
.fecha:hover { background: var(--panel-alt); }
.fecha input { width: 15px; height: 15px; accent-color: var(--acento); cursor: pointer; }
.fecha .dia { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 96px; }
.fecha .conteo { color: var(--tinta-media); font-size: 13px; }
.fecha .dup {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--alerta);
  background: var(--alerta-fondo);
  border: 1px solid #edddb8;
  border-radius: 4px;
  padding: 1px 7px;
}

.agencia {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--linea);
  background: var(--panel);
}

.agencia:last-child { border-bottom: 0; }
.agencia .nombre { font-weight: 550; min-width: 108px; }
.agencia .barra { flex: 1; height: 6px; background: #eef0f3; border-radius: 3px; overflow: hidden; }
.agencia .barra i { display: block; height: 100%; background: var(--acento); border-radius: 3px; }
.agencia .num { font-variant-numeric: tabular-nums; color: var(--tinta-media); min-width: 26px; text-align: right; }

/* ---------- Tablas ---------- */

.tabla-scroll {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: auto;
  max-height: 420px;
}

table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }

th {
  background: var(--panel-alt);
  font-weight: 620;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--tinta-suave);
  text-align: left;
  padding: 9px 13px;
  border-bottom: 1px solid var(--linea);
  position: sticky;
  top: 0;
  white-space: nowrap;
  z-index: 1;
}

td {
  padding: 8px 13px;
  border-bottom: 1px solid #f0f2f4;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--panel-alt); }
td.vacio { color: #c3c9d0; }

/* ---------- Barra de accion ---------- */

.barra-accion {
  border-top: 1px solid var(--linea);
  background: var(--panel-alt);
  padding: 15px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.opcion {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--tinta-media);
  cursor: pointer;
}

.opcion input { width: 15px; height: 15px; accent-color: var(--acento); cursor: pointer; }

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

button {
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 9px 18px;
  background: var(--acento);
  color: #fff;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

button:hover:not(:disabled) { background: var(--acento-oscuro); }
button:disabled { background: #e8eaed; color: #a3aab3; cursor: not-allowed; }

button.secundario {
  background: var(--panel);
  color: var(--tinta-media);
  border-color: var(--linea-fuerte);
}

button.secundario:hover:not(:disabled) { background: var(--panel-alt); color: var(--tinta); }

.nota { color: var(--tinta-suave); font-size: 12.5px; }
/* Gana sobre reglas por id como #cargando { display: flex } */
.oculto { display: none !important; }

.vacio-estado {
  padding: 22px;
  text-align: center;
  color: var(--tinta-suave);
  font-size: 13px;
}

#cargando { display: flex; align-items: center; gap: 9px; margin: 14px 0 0; }

.spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--linea-fuerte);
  border-top-color: var(--acento);
  border-radius: 50%;
  animation: girar .7s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

.pie {
  text-align: center;
  color: var(--tinta-suave);
  font-size: 12px;
  margin-top: 26px;
}

.pie code, .notas code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 11.5px;
}

/* ---------- Pantalla de acceso ---------- */

.acceso {
  max-width: 420px;
  margin: 0 auto;
  padding: 72px 20px;
}

.tarjeta-acceso { text-align: center; margin-bottom: 0; }
.tarjeta-acceso .panel-cuerpo { padding: 34px 30px 28px; }

.logo-acceso {
  width: 148px;
  height: auto;
  display: block;
  margin: 0 auto 18px;
}

.tarjeta-acceso h1 { font-size: 19px; margin: 0 0 4px; letter-spacing: -.2px; }
.tarjeta-acceso .lead { margin: 0 0 22px; color: var(--tinta-suave); font-size: 13px; }
.tarjeta-acceso .fallo { text-align: left; margin-bottom: 18px; }

.boton-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 18px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 6px;
  background: var(--panel);
  color: var(--tinta);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}

.boton-google:hover { background: var(--panel-alt); border-color: var(--tinta-suave); }
.pie-acceso { margin: 18px 0 0; line-height: 1.5; }

/* ---------- Usuario en sesion ---------- */

.usuario-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid var(--linea);
}

.usuario-chip .quien { text-align: right; line-height: 1.25; }
.usuario-chip .correo { font-size: 12.5px; font-weight: 600; }
.usuario-chip .rol { font-size: 11px; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .5px; }

.etiqueta-rol {
  display: inline-block;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.etiqueta-rol.admin { background: var(--acento-suave); color: var(--acento); border: 1px solid #f2ccd5; }
.etiqueta-rol.usuario { background: var(--panel-alt); color: var(--tinta-media); border: 1px solid var(--linea); }
.etiqueta-rol.inactivo { background: #f3f4f6; color: var(--tinta-suave); border: 1px solid var(--linea); }

button.chico {
  padding: 5px 11px;
  font-size: 12.5px;
  border-radius: 5px;
}

button.peligro {
  background: var(--panel);
  color: var(--error);
  border: 1px solid #f0c9c6;
}

button.peligro:hover:not(:disabled) { background: var(--error-fondo); }

/* ---------- Alta de usuarios ---------- */

.forma-alta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 16px 22px;
  border-bottom: 1px solid var(--linea);
  background: var(--panel-alt);
}

.forma-alta input[type="email"] {
  flex: 1;
  min-width: 220px;
  font: inherit;
  font-size: 13.5px;
  padding: 9px 12px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 5px;
  background: var(--panel);
  color: var(--tinta);
}

.forma-alta input[type="email"]:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
}

.forma-alta select {
  font: inherit;
  font-size: 13.5px;
  padding: 9px 12px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 5px;
  background: var(--panel);
  color: var(--tinta);
}

td .acciones-fila { display: flex; gap: 6px; justify-content: flex-end; }
td.derecha { text-align: right; }

/* ---------- Flujo del proceso ---------- */

.flujo {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--linea);
}

.flujo-paso {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.flujo-paso .num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--linea-fuerte);
  color: var(--tinta-media);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 650;
  flex: 0 0 auto;
  margin-top: 1px;
}

.flujo-paso b { display: block; font-size: 13px; font-weight: 600; }
.flujo-paso small { color: var(--tinta-suave); font-size: 12px; }
.flujo-flecha { color: var(--linea-fuerte); font-size: 20px; line-height: 1; align-self: center; }

@media (max-width: 720px) {
  .flujo { flex-direction: column; }
  .flujo-flecha { display: none; }
}

/* ---------- Rail: fichas de datos ---------- */

.panel-cuerpo.apretado { padding: 16px 18px; }

.datos { margin: 0; }

.datos div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid #f0f2f4;
  font-size: 13px;
}

.datos div:last-child { border-bottom: 0; }
.datos dt { color: var(--tinta-suave); flex: 0 0 92px; }
.datos dd {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-weight: 550;
  overflow-wrap: anywhere;
}

.datos dd.mono {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--tinta-media);
}

.mini-indicadores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}

.mini-indicadores div { background: var(--panel-alt); padding: 10px 12px; }

.mini-indicadores b {
  display: block;
  font-size: 19px;
  font-weight: 620;
  letter-spacing: -.4px;
  font-variant-numeric: tabular-nums;
}

.mini-indicadores span {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--tinta-suave);
}

.mini-agencia {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  padding: 5px 0;
}

.mini-agencia .nombre { flex: 0 0 92px; color: var(--tinta-media); }
.mini-agencia .barra { flex: 1; height: 5px; background: #eef0f3; border-radius: 3px; overflow: hidden; }
.mini-agencia .barra i { display: block; height: 100%; background: var(--acento); }
.mini-agencia .num { font-variant-numeric: tabular-nums; color: var(--tinta-media); }

/* ---------- Chips, detalles y notas ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 5px; }

.chip {
  border: 1px solid var(--linea);
  background: var(--panel-alt);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11.5px;
  color: var(--tinta-media);
}

.chip b { color: var(--tinta); font-weight: 600; }
.chips.mono .chip { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 11px; }

.detalle { border-top: 1px solid var(--linea); margin-top: 14px; padding-top: 12px; }

.detalle summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tinta-media);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.detalle summary::-webkit-details-marker { display: none; }
.detalle summary::before { content: "+"; color: var(--acento); font-weight: 700; }
.detalle[open] summary::before { content: "−"; }
.detalle summary:hover { color: var(--tinta); }
.detalle > *:not(summary) { margin-top: 11px; }

.mapeo { display: grid; gap: 3px; }

.mapeo div {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 11px;
  color: var(--tinta-media);
}

.mapeo i { color: var(--linea-fuerte); font-style: normal; }
.mapeo b { color: var(--tinta); font-weight: 500; }

.notas {
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--linea);
  list-style: none;
  font-size: 12.5px;
  color: var(--tinta-media);
}

.notas li { padding-left: 14px; position: relative; margin-bottom: 7px; line-height: 1.45; }
.notas li:last-child { margin-bottom: 0; }
.notas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--linea-fuerte);
}
.notas b { color: var(--tinta); font-weight: 600; }