/* ──────────────────────────────────────────────────────────────
   CircuitManager — hoja de estilo
   Réplica del aspecto de la app SwiftUI: listas agrupadas,
   NavigationSplitView de tres columnas, hojas modales y
   controles segmentados.
   ────────────────────────────────────────────────────────────── */

:root {
  --azul:      #007aff;
  --naranja:   #ff9500;
  --verde:     #34c759;
  --rojo:      #ff3b30;
  --morado:    #af52de;
  --indigo:    #5856d6;
  --rosa:      #ff2d55;
  --turquesa:  #30b0c7;
  --marron:    #a2845e;
  --amarillo:  #ffcc00;

  --fondo:        #f2f2f7;
  --fondo-barra:  rgba(249,249,249,.86);
  --fondo-lateral:#f2f2f7;
  --tarjeta:      #ffffff;
  --tarjeta-alt:  #fafafa;
  --texto:        #000000;
  --texto-2:      rgba(60,60,67,.62);
  --texto-3:      rgba(60,60,67,.36);
  --separador:    rgba(60,60,67,.20);
  --separador-op: rgba(60,60,67,.29);
  --relleno:      rgba(118,118,128,.12);
  --relleno-2:    rgba(118,118,128,.20);
  --seleccion:    rgba(0,122,255,.14);
  --sombra:       0 1px 3px rgba(0,0,0,.06), 0 6px 22px rgba(0,0,0,.07);

  --r-tarjeta: 10px;
  --r-control: 8px;
  --alto-barra: 52px;
  --col1: 258px;
  --col2: 340px;

  --tipo: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text",
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tipo-num: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo:        #000000;
    --fondo-barra:  rgba(28,28,30,.82);
    --fondo-lateral:#1c1c1e;
    --tarjeta:      #1c1c1e;
    --tarjeta-alt:  #232325;
    --texto:        #ffffff;
    --texto-2:      rgba(235,235,245,.62);
    --texto-3:      rgba(235,235,245,.32);
    --separador:    rgba(84,84,88,.55);
    --separador-op: rgba(84,84,88,.65);
    --relleno:      rgba(118,118,128,.24);
    --relleno-2:    rgba(118,118,128,.32);
    --seleccion:    rgba(10,132,255,.26);
    --azul:         #0a84ff;
    --naranja:      #ff9f0a;
    --verde:        #30d158;
    --rojo:         #ff453a;
    --morado:       #bf5af2;
    --indigo:       #5e5ce6;
    --rosa:         #ff375f;
    --turquesa:     #40c8e0;
    --marron:       #ac8e68;
    --sombra:       0 1px 3px rgba(0,0,0,.5), 0 8px 30px rgba(0,0,0,.55);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: var(--tipo);
  font-size: 15px; line-height: 1.35;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

body { overflow: hidden; }
.oculto { display: none !important; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--azul); text-decoration: none; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--relleno-2); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* ─────────────────────────── Arranque ────────────────────────── */
.arranque {
  position: fixed; inset: 0; z-index: 900;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; background: var(--fondo);
}
.arranque img { border-radius: 22px; box-shadow: var(--sombra); }
.arranque-barra { width: 140px; height: 3px; background: var(--relleno); border-radius: 3px; overflow: hidden; }
.arranque-barra i { display: block; height: 100%; width: 40%; background: var(--azul); border-radius: 3px;
  animation: correr 1.1s ease-in-out infinite; }
@keyframes correr { 0% { transform: translateX(-110%);} 100% { transform: translateX(310%);} }

/* ─────────────────────────── Acceso ──────────────────────────── */
.acceso {
  position: fixed; inset: 0; z-index: 800;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--fondo);
}
.acceso-caja {
  width: 100%; max-width: 350px;
  display: flex; flex-direction: column; align-items: stretch; gap: 12px;
  text-align: center;
}
.acceso-icono { align-self: center; border-radius: 20px; box-shadow: var(--sombra); }
.acceso h1 { font-size: 25px; font-weight: 700; letter-spacing: -.4px; margin: 6px 0 0; }
.acceso-sub { color: var(--texto-2); font-size: 14px; margin: 0 0 14px; }
.acceso .campo {
  display: flex; align-items: center; gap: 10px; text-align: left;
  background: var(--tarjeta); border-radius: var(--r-tarjeta);
  padding: 11px 14px; border: 1px solid var(--separador);
}
.acceso .campo span { font-size: 13px; color: var(--texto-2); min-width: 78px; }
.acceso .campo input { flex: 1; border: 0; background: transparent; outline: none; font-size: 16px; min-width: 0; }
.acceso-error { color: var(--rojo); font-size: 13px; min-height: 18px; margin: 2px 0; }
.acceso-pie { color: var(--texto-3); font-size: 12px; margin-top: 10px; }

.boton-principal {
  background: var(--azul); color: #fff; border: 0; border-radius: var(--r-tarjeta);
  padding: 13px 16px; font-size: 16px; font-weight: 600;
  transition: opacity .15s;
}
.boton-principal:disabled { opacity: .5; }
.boton-principal:active { opacity: .75; }

/* ─────────────────── Estructura de tres columnas ─────────────── */
.app {
  display: grid;
  grid-template-columns: var(--col1) var(--col2) 1fr;
  height: 100dvh; width: 100%;
}
.col { min-width: 0; height: 100dvh; display: flex; flex-direction: column; position: relative; }
.col1 { background: var(--fondo-lateral); border-right: 1px solid var(--separador); }
.col2 { background: var(--fondo-lateral); border-right: 1px solid var(--separador); }
.col3 { background: var(--fondo); }

@media (prefers-color-scheme: dark) {
  .col1 { background: #0d0d0f; }
  .col2 { background: #121214; }
}

@media (max-width: 1180px) {
  .app { grid-template-columns: var(--col2) 1fr; }
  .app .col1 { display: none; }
  .app[data-nivel="1"] .col1 { display: flex; }
  .app[data-nivel="1"] .col3 { display: none; }
}

@media (max-width: 800px) {
  .app { grid-template-columns: 1fr; }
  .app .col { display: none; }
  .app[data-nivel="1"] .col1 { display: flex; }
  .app[data-nivel="2"] .col2 { display: flex; }
  .app[data-nivel="3"] .col3 { display: flex; }
}

/* ─────────────────────────── Barra superior ───────────────────── */
.barra {
  position: sticky; top: 0; z-index: 20;
  min-height: var(--alto-barra);
  padding: 8px 14px; padding-top: max(8px, env(safe-area-inset-top));
  display: flex; align-items: center; gap: 8px;
  background: var(--fondo-barra);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: .5px solid var(--separador);
}
.barra-tit { flex: 1; min-width: 0; }
.barra-tit h2 {
  margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.barra-tit h2.grande { font-size: 26px; letter-spacing: -.7px; }
.barra-tit p { margin: 1px 0 0; font-size: 12.5px; color: var(--texto-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.barra-btn {
  background: transparent; border: 0; padding: 6px; border-radius: var(--r-control);
  color: var(--azul); display: inline-flex; align-items: center; gap: 5px;
  font-size: 15px; line-height: 1;
}
.barra-btn:hover { background: var(--relleno); }
.barra-btn:active { opacity: .6; }
.barra-btn.destacado { font-weight: 600; }
.barra-btn.peligro { color: var(--rojo); }
.barra-btn.atras { margin-left: -6px; }

/* ─────────────────────────── Desplazable ─────────────────────── */
.desliza {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: max(28px, env(safe-area-inset-bottom));
  scrollbar-gutter: stable;
}

/* ─────────────────────────── Buscador ────────────────────────── */
.buscador { padding: 8px 14px 4px; }
.buscador-caja {
  display: flex; align-items: center; gap: 7px;
  background: var(--relleno); border-radius: 10px; padding: 7px 10px;
}
.buscador-caja svg { color: var(--texto-2); flex: none; }
.buscador-caja input {
  border: 0; background: transparent; outline: none; flex: 1; min-width: 0; font-size: 16px;
}

/* ─────────────────────── Listas agrupadas ────────────────────── */
.grupo { margin: 18px 14px 0; }
.grupo:first-child { margin-top: 12px; }
.grupo-tit {
  font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
  color: var(--texto-2); padding: 0 6px 7px; display: flex; align-items: center; gap: 6px;
}
.grupo-tit .cuenta { color: var(--texto-3); font-weight: 500; letter-spacing: 0; text-transform: none; }
.grupo-pie { font-size: 12.5px; color: var(--texto-2); padding: 7px 6px 0; }
.tarjeta {
  background: var(--tarjeta); border-radius: var(--r-tarjeta); overflow: hidden;
  box-shadow: 0 0 0 .5px var(--separador);
}
.tarjeta.plana { box-shadow: none; background: transparent; }

.fila {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 13px; min-height: 44px;
  background: var(--tarjeta); position: relative; width: 100%;
  border: 0; text-align: left; color: inherit; font-size: 15px;
}
.fila + .fila::before {
  content: ''; position: absolute; left: 13px; right: 0; top: 0; height: .5px;
  background: var(--separador);
}
.fila.pulsable { cursor: pointer; }
.fila.pulsable:hover { background: var(--tarjeta-alt); }
.fila.pulsable:active { background: var(--relleno); }
.fila.activa { background: var(--seleccion); }
.fila.activa::before, .fila.activa + .fila::before { background: transparent; }
.fila-icono { flex: none; width: 26px; display: flex; align-items: center; justify-content: center; }
.fila-medio { flex: 1; min-width: 0; }
.fila-tit { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-tit.fuerte { font-weight: 600; }
.fila-sub { font-size: 12.5px; color: var(--texto-2); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-sub.dos { white-space: normal; }
.fila-der { flex: none; display: flex; align-items: center; gap: 7px;
  color: var(--texto-2); font-size: 14px; }
.fila-der .valor { font-variant-numeric: tabular-nums; }
.chevron { color: var(--texto-3); flex: none; }

.fila-vacia { padding: 30px 16px; text-align: center; color: var(--texto-2); font-size: 14px; }

/* Etiquetas y distintivos */
.etiqueta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 600; padding: 2.5px 8px; border-radius: 20px;
  background: var(--relleno); color: var(--texto-2); white-space: nowrap;
}
.etiqueta.azul     { background: rgba(0,122,255,.14);  color: var(--azul); }
.etiqueta.naranja  { background: rgba(255,149,0,.16);  color: #c26a00; }
.etiqueta.verde    { background: rgba(52,199,89,.16);  color: #1a7f37; }
.etiqueta.rojo     { background: rgba(255,59,48,.14);  color: var(--rojo); }
.etiqueta.morado   { background: rgba(175,82,222,.14); color: var(--morado); }
.etiqueta.turquesa { background: rgba(48,176,199,.16); color: #17798c; }
.etiqueta.indigo   { background: rgba(88,86,214,.14);  color: var(--indigo); }
@media (prefers-color-scheme: dark) {
  .etiqueta.naranja { color: var(--naranja); }
  .etiqueta.verde   { color: var(--verde); }
  .etiqueta.turquesa{ color: var(--turquesa); }
}

.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); flex: none; }

/* ─────────────────────── Filtros y segmentos ─────────────────── */
.chips { display: flex; gap: 7px; padding: 10px 14px 4px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  border: 0; background: var(--relleno); color: var(--texto);
  padding: 6px 13px; border-radius: 18px; font-size: 13.5px; white-space: nowrap; flex: none;
}
.chip.activo { background: var(--azul); color: #fff; font-weight: 600; }

.segmentos {
  display: flex; gap: 2px; margin: 10px 14px 2px; padding: 2px;
  background: var(--relleno); border-radius: 9px; overflow-x: auto; scrollbar-width: none;
}
.segmentos::-webkit-scrollbar { display: none; }
.segmento {
  flex: 1; border: 0; background: transparent; color: var(--texto);
  padding: 6px 11px; border-radius: 7px; font-size: 13.5px; font-weight: 500;
  white-space: nowrap; min-width: max-content;
}
.segmento.activo { background: var(--tarjeta); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* Pestañas inferiores (detalle de congregación / visita) */
.pestanas {
  display: flex; border-top: .5px solid var(--separador);
  background: var(--fondo-barra);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  padding-bottom: env(safe-area-inset-bottom);
}
.pestana {
  flex: 1; border: 0; background: transparent; color: var(--texto-2);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 2px 6px; font-size: 10.5px; font-weight: 500;
}
.pestana.activa { color: var(--azul); }

/* ────────────────────── Tarjetas de estadística ──────────────── */
.rejilla { display: grid; gap: 10px; margin: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.metrica {
  background: var(--tarjeta); border-radius: var(--r-tarjeta); padding: 13px 14px;
  box-shadow: 0 0 0 .5px var(--separador);
}
.metrica .m-tit { font-size: 12.5px; color: var(--texto-2); display: flex; align-items: center; gap: 6px; }
.metrica .m-val { font-size: 27px; font-weight: 700; letter-spacing: -.6px; margin-top: 5px;
  font-variant-numeric: tabular-nums; }
.metrica .m-pie { font-size: 12px; color: var(--texto-3); margin-top: 2px; }

/* Círculos de progreso de visitas */
.visitas-progreso { display: flex; align-items: center; gap: 9px; padding: 12px 13px; flex-wrap: wrap; }
.visita-punto {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  background: var(--relleno); color: var(--texto-2); border: 0;
}
.visita-punto.hecha { background: var(--azul); color: #fff; }

/* ─────────────────────────── Tablas ──────────────────────────── */
.tabla-caja { overflow-x: auto; background: var(--tarjeta); border-radius: var(--r-tarjeta);
  box-shadow: 0 0 0 .5px var(--separador); }
table.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tabla th, table.tabla td {
  padding: 7px 9px; text-align: right; border-bottom: .5px solid var(--separador);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
table.tabla th {
  font-size: 11.5px; font-weight: 600; color: var(--texto-2); text-transform: uppercase;
  letter-spacing: .3px; position: sticky; top: 0; background: var(--tarjeta); z-index: 1;
}
table.tabla th:first-child, table.tabla td:first-child { text-align: left; white-space: normal; min-width: 108px; }
table.tabla tr:last-child td { border-bottom: 0; }
table.tabla tr.total td { font-weight: 700; background: var(--relleno); }
table.tabla tr.media td { color: var(--texto-2); background: var(--tarjeta-alt); }
table.tabla td input {
  width: 68px; border: 0; background: var(--relleno); border-radius: 6px;
  padding: 5px 7px; text-align: right; outline: none; font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
table.tabla td input:focus { box-shadow: inset 0 0 0 2px var(--azul); background: var(--tarjeta); }
table.tabla td input.ancho { width: 100%; min-width: 120px; text-align: left; }

/* ───────────────────────── Formularios ───────────────────────── */
.form-fila {
  display: flex; align-items: center; gap: 10px; padding: 8px 13px; min-height: 44px;
  background: var(--tarjeta); position: relative;
}
.form-fila + .form-fila::before {
  content: ''; position: absolute; left: 13px; right: 0; top: 0; height: .5px; background: var(--separador);
}
.form-fila > label, .form-fila .etq { font-size: 15px; flex: none; min-width: 122px; color: var(--texto); }
.form-fila.vertical { flex-direction: column; align-items: stretch; gap: 6px; padding: 11px 13px; }
.form-fila.vertical > label { min-width: 0; font-size: 12.5px; color: var(--texto-2); font-weight: 600;
  text-transform: uppercase; letter-spacing: .3px; }

.entrada, select.entrada, textarea.entrada {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font-size: 16px; text-align: right; color: var(--texto); padding: 2px 0;
}
.form-fila.vertical .entrada { text-align: left; background: var(--relleno);
  border-radius: var(--r-control); padding: 9px 11px; font-size: 15px; }
textarea.entrada { resize: vertical; min-height: 76px; line-height: 1.45; font-family: var(--tipo); }
select.entrada { -webkit-appearance: none; appearance: none; text-align: right;
  text-align-last: right; color: var(--azul); padding-right: 16px;
  background-image: linear-gradient(45deg, transparent 50%, var(--texto-3) 50%),
                    linear-gradient(135deg, var(--texto-3) 50%, transparent 50%);
  background-position: right 6px center, right 1px center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.form-fila.vertical select.entrada { text-align: left; text-align-last: left; color: var(--texto); }
input[type=date].entrada, input[type=time].entrada { color: var(--azul); }
.entrada::placeholder { color: var(--texto-3); }

.interruptor { position: relative; width: 50px; height: 30px; flex: none; margin-left: auto; }
.interruptor input { opacity: 0; width: 100%; height: 100%; margin: 0; position: absolute; z-index: 2; }
.interruptor i {
  position: absolute; inset: 0; background: var(--relleno-2); border-radius: 16px; transition: background .2s;
}
.interruptor i::after {
  content: ''; position: absolute; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; top: 2px; left: 2px; transition: transform .2s;
  box-shadow: 0 2px 5px rgba(0,0,0,.2);
}
.interruptor input:checked + i { background: var(--verde); }
.interruptor input:checked + i::after { transform: translateX(20px); }

.paso { display: flex; align-items: center; gap: 1px; background: var(--relleno); border-radius: 8px; }
.paso button { border: 0; background: transparent; color: var(--azul); width: 36px; height: 30px;
  font-size: 18px; line-height: 1; }
.paso span { min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }

.marca { width: 26px; height: 26px; border-radius: 7px; border: 1.5px solid var(--separador-op);
  background: transparent; display: inline-flex; align-items: center; justify-content: center;
  color: transparent; flex: none; }
.marca.si { background: var(--azul); border-color: var(--azul); color: #fff; }

/* ────────────────────────── Hojas modales ────────────────────── */
.fondo-hoja {
  position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.34);
  display: flex; align-items: center; justify-content: center; padding: 22px;
  animation: aparecer .18s ease;
}
@keyframes aparecer { from { opacity: 0; } }
.hoja {
  background: var(--fondo); border-radius: 14px; box-shadow: var(--sombra);
  width: 100%; max-width: 560px; max-height: min(88dvh, 860px);
  display: flex; flex-direction: column; overflow: hidden;
  animation: subir .22s cubic-bezier(.2,.8,.3,1);
}
.hoja.ancha { max-width: 880px; }
@keyframes subir { from { transform: translateY(14px) scale(.99); opacity: .4; } }
.hoja > .barra { border-radius: 14px 14px 0 0; }
.hoja > .desliza { padding-bottom: 18px; }

@media (max-width: 700px) {
  .fondo-hoja { padding: 0; align-items: flex-end; }
  .hoja, .hoja.ancha {
    max-width: none; max-height: 94dvh; border-radius: 14px 14px 0 0;
    animation: subirMovil .26s cubic-bezier(.2,.8,.3,1);
  }
  @keyframes subirMovil { from { transform: translateY(100%); } }
}

/* ─────────────────── Diálogo de confirmación ─────────────────── */
.dialogo {
  background: var(--tarjeta); border-radius: 14px; width: 100%; max-width: 300px;
  text-align: center; overflow: hidden; box-shadow: var(--sombra);
  animation: subir .2s cubic-bezier(.2,.8,.3,1);
}
.dialogo-cuerpo { padding: 19px 18px 15px; }
.dialogo h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.dialogo p { margin: 0; font-size: 13px; color: var(--texto-2); line-height: 1.4; }
.dialogo-botones { display: flex; border-top: .5px solid var(--separador-op); }
.dialogo-botones button {
  flex: 1; border: 0; background: transparent; padding: 12px 8px; font-size: 16px; color: var(--azul);
}
.dialogo-botones button + button { border-left: .5px solid var(--separador-op); }
.dialogo-botones button.peligro { color: var(--rojo); font-weight: 600; }
.dialogo-botones button:active { background: var(--relleno); }

/* ─────────────────── Menú contextual (···) ───────────────────── */
.menu {
  position: fixed; z-index: 150; min-width: 210px; padding: 5px;
  background: var(--tarjeta); border-radius: 12px; box-shadow: var(--sombra);
  border: .5px solid var(--separador);
}
.menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent;
  padding: 9px 11px; border-radius: 8px; font-size: 14.5px; text-align: left; color: var(--texto);
}
.menu button:hover { background: var(--relleno); }
.menu button.peligro { color: var(--rojo); }
.menu hr { border: 0; border-top: .5px solid var(--separador); margin: 4px 6px; }

/* ─────────────────────────── Avisos ──────────────────────────── */
.avisos {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: max(22px, env(safe-area-inset-bottom)); z-index: 300;
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none;
}
.aviso {
  background: rgba(28,28,30,.94); color: #fff; padding: 10px 17px; border-radius: 22px;
  font-size: 14px; box-shadow: var(--sombra); animation: subir .2s ease;
  max-width: 84vw; text-align: center;
}
.aviso.error { background: var(--rojo); }
.aviso.ok { background: var(--verde); }

/* ────────────────────── Estado de sincronía ──────────────────── */
.sinc-barra {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px;
  padding-bottom: max(9px, env(safe-area-inset-bottom));
  border-top: .5px solid var(--separador); font-size: 12.5px; color: var(--texto-2);
  background: var(--fondo-lateral);
}
.sinc-barra .punto { background: var(--verde); }
.sinc-barra.trabajando .punto { background: var(--naranja); animation: latir 1s infinite; }
.sinc-barra.sinred .punto { background: var(--texto-3); }
.sinc-barra.error .punto { background: var(--rojo); }
@keyframes latir { 50% { opacity: .3; } }
.sinc-barra button { margin-left: auto; background: transparent; border: 0; color: var(--azul); padding: 3px; }

/* ─────────────────────── Estado vacío ────────────────────────── */
.vacio {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; padding: 40px 26px; text-align: center; color: var(--texto-2);
}
.vacio svg { color: var(--texto-3); }
.vacio h3 { margin: 4px 0 0; font-size: 18px; font-weight: 600; color: var(--texto); }
.vacio p { margin: 0; font-size: 14px; max-width: 320px; }

/* ───────────────── Ruta anual (calendario) ───────────────────── */
.semana {
  background: var(--tarjeta); border-radius: var(--r-tarjeta); margin: 10px 14px;
  box-shadow: 0 0 0 .5px var(--separador); overflow: hidden;
}
.semana.actual { box-shadow: 0 0 0 2px var(--azul); }
.semana-cab {
  display: flex; align-items: center; gap: 9px; padding: 9px 13px;
  background: var(--tarjeta-alt); border-bottom: .5px solid var(--separador);
}
.semana-cab b { font-size: 14px; }
.semana-cab .etiqueta { margin-left: auto; }
.entrada-ruta { display: flex; align-items: center; gap: 10px; padding: 9px 13px; width: 100%;
  border: 0; background: transparent; text-align: left; color: inherit; position: relative; }
.entrada-ruta + .entrada-ruta::before {
  content: ''; position: absolute; left: 13px; right: 0; top: 0; height: .5px; background: var(--separador); }
.entrada-ruta:hover { background: var(--tarjeta-alt); }
.barra-color { width: 4px; align-self: stretch; border-radius: 3px; flex: none; min-height: 32px; }

/* ─────────────────── Organigrama de eventos ──────────────────── */
.org-dep {
  background: var(--tarjeta); border-radius: var(--r-tarjeta); margin: 10px 14px;
  box-shadow: 0 0 0 .5px var(--separador); overflow: hidden;
}
.org-dep-cab { display: flex; align-items: center; gap: 9px; padding: 10px 13px;
  background: var(--tarjeta-alt); border-bottom: .5px solid var(--separador); }
.org-dep-cab b { flex: 1; font-size: 14.5px; }

/* ───────────────────────── Utilidades ────────────────────────── */
.sep { height: 1px; background: var(--separador); margin: 14px; }
.centro { display: flex; align-items: center; justify-content: center; }
.crece { flex: 1; }
.txt2 { color: var(--texto-2); }
.txt3 { color: var(--texto-3); }
.peq { font-size: 12.5px; }
.num { font-variant-numeric: tabular-nums; }
.arrastrable { cursor: grab; }
.arrastrando { opacity: .45; }
.nota-pie { padding: 12px 20px 26px; font-size: 12px; color: var(--texto-3); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}