:root {
  --ink: #241f1a;
  --ink-soft: #5b4f3f;
  --paper: #f1ebdd;
  --surface: #fbf8f0;
  --surface-2: #ece3cd;
  --line: #d9cfb8;
  --guinda: #801934;
  --guinda-deep: #5e1226;
  --marigold: #d98a2b;
  --terracotta: #b1502f;
  --success: #3f7a4e;
  --success-bg: rgba(63, 122, 78, 0.12);
  --success-line: rgba(63, 122, 78, 0.35);
  --focus: #4a1729;
  --cereza: #c0162f;
  --marron: #8b4226;
  --azul: #2f6690;
  --morado: #7a4a9a;
  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --font-ui: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ece4d4;
    --ink-soft: #c3b8a2;
    --paper: #1b1712;
    --surface: #221d16;
    --surface-2: #2b241a;
    --line: #3c3223;
    --guinda: #d98aa6;
    --guinda-deep: #7a3350;
    --marigold: #e8ab53;
    --terracotta: #d9805a;
    --success: #6fbf82;
    --success-bg: rgba(111, 191, 130, 0.14);
    --success-line: rgba(111, 191, 130, 0.4);
    --focus: #d98aa6;
    --cereza: #e0536a;
    --marron: #c08a52;
    --azul: #7fb2dc;
    --morado: #c39be0;
  }
}

* { box-sizing: border-box; }
/* Varias clases (.field, etc.) definen su propio display -- sin esto, un elemento oculto con
   JS (el.hidden = true) se sigue viendo, porque esas reglas empatan en especificidad con [hidden]
   y el navegador prioriza la hoja de estilos del autor sobre la del user-agent. */
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.page { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 0 24px 64px; }

/* Marca de agua de SIPAT -- el mismo carrito del logo del menú, gigante y muy tenue, de fondo
   en el área de contenido (no en el login, que ya tiene su propia marca de agua de flor). */
.contenido { position: relative; }
.contenido::before {
  content: "🛒";
  position: fixed;
  right: -3vw;
  bottom: -8vh;
  font-size: min(30vw, 480px);
  line-height: 1;
  opacity: 0.05;
  color: var(--guinda);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
@media (max-width: 860px) {
  .contenido::before { font-size: min(50vw, 320px); right: -6vw; bottom: -6vh; }
}
@media print {
  .contenido::before { display: none; }
}

/* SIPAT tiene su propia identidad: un listón de rayas (evocando los toldos de un tianguis) debajo
   de la barra superior en vez del look plano heredado de los sistemas hermanos. */

/* ---------- Hero / portada ---------- */

.logo { width: 100%; max-width: 280px; height: auto; grid-column: 1; }

/* ---------- Section shell ---------- */
section.block { margin-bottom: 40px; }
h2.section-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--guinda);
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  margin: 0 0 20px;
}
h2.section-title::before { content: ""; width: 4px; height: 14px; border-radius: 2px; background: var(--guinda); flex-shrink: 0; }
.page-title-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.page-title-row > a.primary { grid-column: 3; justify-self: end; }

h1.page-title {
  grid-column: 2;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  color: var(--guinda);
  text-align: center;
  text-wrap: balance;
  white-space: normal;      /* los nombres de organización largos bajan de línea en vez de cortarse */
  overflow-wrap: anywhere;
  margin: 0 0 20px;
}

p.warning {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #9c3319;
  background: rgba(228, 90, 60, 0.12);
  border: 1px solid rgba(228, 90, 60, 0.4);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 0 0 20px;
}
p.warning::before { content: "⚠"; font-size: 1.1rem; flex-shrink: 0; }
p.warning.warning-ok { color: var(--success); background: var(--success-bg); border-color: var(--success-line); }
p.warning.warning-ok::before { content: "✓"; }
/* Avisos de "ya se guardó": más visibles y se quedan hasta que la persona los cierra (script en nav_lateral). */
p.warning.aviso-temporal { font-size: 1rem; padding: 14px 18px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); align-items: center; }
.aviso-cerrar { margin-left: auto; flex-shrink: 0; min-height: 44px; padding: 8px 18px; border-radius: 8px; border: 1.5px solid currentColor; background: #fff; color: inherit; font: inherit; font-weight: 700; font-size: 0.95rem; cursor: pointer; }
.aviso-cerrar:hover { background: rgba(0,0,0,0.05); }
@media print { .aviso-cerrar { display: none !important; } }

.nota-legal {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--marigold);
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 20px;
}
.nota-legal strong { color: var(--ink); }

/* ---------- Simulación de ley -- gráfica de barras pareadas (pactado vs legal) ---------- */
.grafica-barras-dobles { display: flex; align-items: flex-end; gap: 18px; height: 330px; padding: 20px 10px 0; border-bottom: 2px solid var(--line); overflow-x: auto; }
.grafica-col-doble { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 92px; flex: 1 1 92px; height: 100%; }
.grafica-par { display: flex; align-items: flex-end; gap: 5px; height: 100%; }
.grafica-par .barra { width: 28px; border-radius: 5px 5px 0 0; transition: height 0.4s ease; }
.grafica-par .barra.pactado { background: var(--marigold); }
.grafica-par .barra.legal { background: var(--guinda); }
/* Los dos montos van uno sobre otro (lado a lado no caben en la columna y se enciman). */
.grafica-col-doble .num-par { font-size: 0.66rem; font-weight: 700; margin-bottom: 4px; display: flex; flex-direction: column; align-items: center; line-height: 1.25; white-space: nowrap; }
.grafica-col-doble .num-par .n-pactado { color: var(--marigold); }
.grafica-col-doble .num-par .n-legal { color: var(--guinda); }
.grafica-col-doble .grafica-barra-label { margin-top: 8px; font-size: 0.7rem; color: var(--ink-soft); text-align: center; line-height: 1.2; max-width: 110px; }
.grafica-leyenda { display: flex; gap: 20px; justify-content: center; margin: 2px 0 14px; font-size: 0.8rem; color: var(--ink-soft); flex-wrap: wrap; }
.grafica-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.grafica-leyenda .punto-cuadro { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* ---------- Acordeón (secciones plegables) ---------- */

/* ---------- Requisitos ---------- */

/* ---------- Form ---------- */
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 28px; box-shadow: 0 10px 26px -20px rgba(20,8,14,0.35); }

.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.dato-fijo { padding: 9px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--ink-soft); font-size: 0.95rem; }

.field label { font-size: 0.8rem; font-weight: 700; color: var(--guinda-deep); }
input[type="text"], input[type="date"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="number"], input[type="file"], textarea {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 11px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
textarea { resize: vertical; min-height: 76px; }
input:hover, textarea:hover { border-color: #c9b89a; }
input:not(:placeholder-shown):not(.field-error), textarea:not(:placeholder-shown):not(.field-error) { border-color: var(--marigold); }
input:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(128, 25, 52, 0.14);
}
input.field-error, textarea.field-error, select.field-error { border-color: var(--terracotta); border-width: 2px; background: rgba(177, 80, 47, 0.08); box-shadow: 0 0 0 4px rgba(177, 80, 47, 0.22); }
.field:has(.field-error) > label { color: var(--terracotta); font-weight: 700; }

select.dropdown {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--ink);
  background-color: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 32px 9px 11px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%235b4f3f'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 16px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
select.dropdown:hover { border-color: #c9b89a; }
select.dropdown:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(128, 25, 52, 0.14); }
select.dropdown option { color: var(--ink); background: var(--surface); }
select.dropdown.field-error { border-color: var(--terracotta); border-width: 2px; background: rgba(177, 80, 47, 0.08); box-shadow: 0 0 0 4px rgba(177, 80, 47, 0.22); }

fieldset { border: none; padding: 0; margin: 0; }
fieldset legend { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--terracotta); font-weight: 700; padding: 0; margin: 28px 0 14px; }
fieldset legend::before { content: ""; width: 4px; height: 14px; border-radius: 2px; background: var(--terracotta); }

/* ---------- Asistente por pasos (wizard) ---------- */

.paso fieldset legend { margin-top: 0; font-size: 0.92rem; }
.paso .field label { font-size: 1rem; }
.paso input[type="text"], .paso input[type="date"], .paso input[type="email"], .paso input[type="tel"], .paso textarea, .paso select.dropdown {
  font-size: 1.1rem;
  padding: 13px 14px;
}

/* ---------- Preview / letter ---------- */

button.primary, a.primary, span.primary, summary.primary {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.92rem;
  color: #fbf8f0;
  background: linear-gradient(135deg, var(--guinda), var(--guinda-deep));
  border: none;
  border-radius: 9px;
  padding: 12px 22px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 6px 16px -8px rgba(74, 12, 27, 0.55);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}
button.primary:hover, a.primary:hover, summary.primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(74, 12, 27, 0.6); background: linear-gradient(135deg, var(--terracotta), var(--guinda)); }
button.primary:active, a.primary:active { transform: translateY(0); filter: brightness(0.95); }
button.primary:focus-visible, a.primary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

button.secondary, a.secondary, span.secondary, label.secondary {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--guinda-deep);
  background: linear-gradient(180deg, #fffdfa, rgba(128, 25, 52, 0.06));
  border: 1px solid rgba(128, 25, 52, 0.3);
  border-radius: 999px;
  padding: 7px 16px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 3px 8px -4px rgba(74, 12, 27, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
button.secondary:hover, a.secondary:hover, label.secondary:hover {
  background: linear-gradient(135deg, var(--guinda), var(--guinda-deep));
  color: #fbf8f0;
  border-color: var(--guinda-deep);
  transform: translateY(-2px);
  box-shadow: 0 14px 24px -12px rgba(74, 12, 27, 0.6);
}
button.secondary:active, a.secondary:active, label.secondary:active { transform: translateY(0); box-shadow: 0 2px 6px -3px rgba(74, 12, 27, 0.4); }
button.secondary:focus-visible, a.secondary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
button.secondary:disabled, a.secondary[disabled] { opacity: 0.5; cursor: default; box-shadow: none; transform: none; }

/* ---------- Historial ---------- */
.stats-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.stat-tile {
  flex: 1;
  min-width: 150px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: 8px;
  padding: 16px 18px;
  box-shadow: 0 8px 20px -18px rgba(20,8,14,0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.stat-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(20,8,14,0.35); }
.stat-tile .icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stat-tile .icon svg { width: 20px; height: 20px; }
.stat-tile > div:last-child { min-width: 0; }
.stat-tile .num { font-family: var(--font-ui); font-weight: 800; font-size: 1.9rem; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--ink); }
.stat-tile .label { font-size: 0.74rem; font-weight: 700; color: var(--guinda-deep); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }
.stat-tile.total { border-left-color: var(--guinda); }
.stat-tile.total .icon { background: rgba(128,25,52,0.12); color: var(--guinda); }
.stat-tile.aut { border-left-color: var(--marigold); }
.stat-tile.aut .icon { background: rgba(217,138,43,0.15); color: var(--marigold); }
.stat-tile.que { border-left-color: var(--terracotta); }
.stat-tile.que .icon { background: rgba(177,80,47,0.15); color: var(--terracotta); }
.stat-tile.ok { border-left-color: #2f7a52; }
.stat-tile.ok .num { color: #2f7a52; }

.tabla-wrap {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-x: auto;
  box-shadow: 0 10px 26px -20px rgba(20,8,14,0.35);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.tabla-wrap::-webkit-scrollbar { height: 6px; }
.tabla-wrap::-webkit-scrollbar-track { background: transparent; }
.tabla-wrap::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.tabla-wrap::-webkit-scrollbar-thumb:hover { background: var(--marigold); }

.tabla-wrap::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 28px;
  background: linear-gradient(to right, transparent, rgba(0,0,0,0.08));
  pointer-events: none;
  border-radius: 0 6px 6px 0;
}
table.historial { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
table.historial th, table.historial td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.historial th { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--guinda-deep); background: var(--surface-2); }
table.historial td { font-variant-numeric: tabular-nums; }
table.historial tr:last-child td { border-bottom: none; }
table.historial tbody tr { transition: background 0.12s ease; }
table.historial tbody tr:nth-child(even) { background: rgba(128,25,52,0.03); }
table.historial tbody tr:hover { background: var(--surface-2); }
table.historial td.folio { font-weight: 700; color: var(--guinda); font-variant-numeric: tabular-nums; }
/* La columna de nombre de actividad (bitácora de cambios) puede ser larga -- se deja ajustar en
   varias líneas para que la tabla no se estire de más y obligue a hacer scroll horizontal. */
table.historial td.texto-izq { white-space: normal; min-width: 200px; max-width: 340px; }
table.historial td.col-compacto { min-width: 150px; max-width: 190px; }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

.persona { display: flex; align-items: center; gap: 10px; }
.avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--guinda), var(--guinda-deep));
  color: #fbf8f0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
}
.avatar.estado-verde { background: linear-gradient(135deg, #6fbf82, var(--success)); }
.avatar.estado-ambar { background: linear-gradient(135deg, #f0b856, var(--marigold)); }
.avatar.estado-rojo { background: linear-gradient(135deg, #d9805a, var(--terracotta)); }

.nombre-org { color: var(--guinda-deep); font-weight: 700; text-decoration: none; }
.nombre-org:hover { text-decoration: underline; color: var(--guinda); }

.folio-chip { display: inline-block; padding: 3px 9px; border-radius: 6px; background: var(--surface-2); font-weight: 700; font-size: 0.82rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.dato-vacio { color: var(--ink-soft); opacity: 0.75; font-style: italic; font-size: 0.82rem; }

.icon-link { display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; }
.icon-link svg { width: 15px; height: 15px; flex-shrink: 0; }
table.historial .icon-link { padding: 8px 14px; font-size: 0.85rem; }
table.historial .icon-link svg { width: 14px; height: 14px; }
.vacio { padding: 40px; text-align: center; color: var(--ink-soft); }

footer.credit { text-align: center; font-size: 0.78rem; color: var(--ink-soft); margin-top: 40px; }

@media (max-width: 720px) {
  .field-grid { grid-template-columns: 1fr; }
  
  
  
  
  .logo { width: 100px; height: auto; grid-column: 1; }
  
  
  
  
  .page-title-row { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .page-title-row > a.primary { justify-self: stretch; text-align: center; }
  
  
  h1.page-title { white-space: normal; text-align: center; }
  
  
  
  
  
}

.print-only { display: none; }

/* ---------- SIPAT -- Sistema de Pagos de Tianguis ---------- */
.page-ancha { max-width: 1400px; }
.tabla-wrap { overflow-x: auto; max-width: 100%; }

/* Pestañas Tianguis / Bazares Navideños -- reutiliza el mismo look de .switch pero como enlaces. */
.tabs-seccion { display: flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px; max-width: fit-content; margin: 0 auto 24px; }
.tabs-seccion a { padding: 9px 22px; border-radius: 999px; font-size: 0.88rem; font-weight: 700; color: var(--ink-soft); text-decoration: none; transition: background 0.15s ease, color 0.15s ease; }
.tabs-seccion a.activa { background: var(--guinda); color: #fbf8f0; box-shadow: 0 4px 12px -4px rgba(74, 12, 27, 0.5); }

/* Pills de estado de pago -- mismos 3 colores en toda la app (panel, ficha, mapa). */
.estado-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 700; padding: 5px 13px; border-radius: 999px; white-space: nowrap; }
.estado-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.estado-verde { background: var(--success-bg); color: var(--success); }
.estado-ambar { background: rgba(217, 138, 43, 0.16); color: var(--marigold); }
.estado-rojo { background: rgba(177, 80, 47, 0.16); color: var(--terracotta); }
.estado-marron { background: rgba(139, 66, 38, 0.16); color: var(--marron); }
.estado-guinda { background: rgba(192, 22, 47, 0.26); color: var(--cereza); font-weight: 800; }
.estado-guinda::before { border-radius: 2px; }
.estado-gris { background: rgba(91, 79, 63, 0.14); color: var(--ink-soft); }
.estado-azul { background: rgba(47, 102, 144, 0.15); color: var(--azul); }     /* temporada por iniciar (bazares) */
.estado-morado { background: rgba(122, 74, 154, 0.15); color: var(--morado); } /* cobro por boletaje */

.badge-permiso { display: inline-flex; align-items: center; font-size: 0.76rem; font-weight: 700; padding: 5px 13px; border-radius: 999px; white-space: nowrap; }
.badge-permiso.permiso-si { background: var(--success-bg); color: var(--success); }
.badge-permiso.permiso-no { background: rgba(177, 80, 47, 0.16); color: var(--terracotta); }

.stat-tile.ambar { border-left-color: var(--marigold); }
.stat-tile.ambar .num { color: var(--marigold); }
.stat-tile.ambar .icon { background: rgba(217,138,43,0.15); }
.stat-tile.rojo { border-left-color: var(--terracotta); }
.stat-tile.rojo .num { color: var(--terracotta); }
.stat-tile.rojo .icon { background: rgba(177,80,47,0.15); }
.stat-tile.marron { border-left-color: var(--marron); }
.stat-tile.marron .num { color: var(--marron); }
.stat-tile.marron .icon { background: rgba(194,84,31,0.15); }
/* Hay atrasados: la tarjeta resalta para que no pase desapercibida. */
.stat-tile.stat-tile-alerta { background: rgba(194,84,31,0.09); border-left-width: 7px; box-shadow: 0 0 0 2px rgba(194,84,31,0.35); }
.stat-tile.guinda.stat-tile-alerta { background: rgba(192,22,47,0.07); box-shadow: 0 0 0 2px rgba(192,22,47,0.30); }

/* Franja del color de la alerta en cada renglón del Panel. */
table.tabla-panel tr.fila-atrasado td:first-child { box-shadow: inset 5px 0 0 var(--marron); }
table.tabla-panel tr.fila-por_vencer td:first-child { box-shadow: inset 5px 0 0 var(--marigold); }
table.tabla-panel tr.fila-sin_pagos td:first-child { box-shadow: inset 5px 0 0 var(--cereza); }
table.tabla-panel tr.fila-al_corriente td:first-child { box-shadow: inset 5px 0 0 #2f7a52; }
@media (max-width: 720px) {
  table.tabla-panel tr td:first-child { box-shadow: none !important; }
  table.tabla-panel tbody tr.fila-atrasado { box-shadow: inset 5px 0 0 var(--marron); }
  table.tabla-panel tbody tr.fila-por_vencer { box-shadow: inset 5px 0 0 var(--marigold); }
  table.tabla-panel tbody tr.fila-sin_pagos { box-shadow: inset 5px 0 0 var(--cereza); }
  table.tabla-panel tbody tr.fila-al_corriente { box-shadow: inset 5px 0 0 #2f7a52; }
}
.stat-tile.guinda { border-left-color: var(--cereza); border-left-width: 6px; }
.stat-tile.guinda .num { color: var(--cereza); }
.stat-tile.guinda .icon { background: rgba(192,22,47,0.18); }
.stat-tile.ok .icon { background: var(--success-bg); }
.stat-tile.total .icon { font-size: 1.3rem; }
.stat-tile .icon { font-size: 1.3rem; }

.filtro-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.filtro-barra input[type="search"] { flex: 1 1 220px; }

table.historial td.estado-celda { white-space: nowrap; }

/* Ficha de un tianguis: datos del padrón en 2 columnas + historial de pagos debajo. */
.ficha-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 28px; margin-bottom: 8px; }
.ficha-dato label { display: block; font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--guinda-deep); margin-bottom: 4px; }
.ficha-dato .valor { font-size: 0.95rem; color: var(--ink); }

/* Contenedor del mapa (Leaflet necesita una altura explícita para renderizar). */
#mapa-tianguis, #mapa-picker { width: 100%; height: 480px; border-radius: 8px; border: 1px solid var(--line); }
#mapa-picker { height: 320px; }
.mapa-leyenda { display: flex; flex-wrap: wrap; gap: 16px; margin: 12px 0; font-size: 0.82rem; color: var(--ink-soft); }
.mapa-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.mapa-leyenda .punto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.mapa-leyenda .punto-aproximado { opacity: 0.5; border: 1px dashed var(--ink-soft); }
.mapa-contador { text-align: center; color: var(--ink-soft); font-size: 0.85rem; margin-top: 8px; }
.celda-acciones { white-space: nowrap !important; vertical-align: middle; } /* sin display:flex: un <td> flex se sale de la fila */
.celda-acciones > a, .celda-acciones > form { display: inline-block; vertical-align: middle; margin-right: 6px; }
.celda-acciones > :last-child { margin-right: 0; }
.celda-acciones .secondary { padding: 5px 11px; font-size: 0.74rem; box-shadow: none; }
.celda-acciones .secondary:hover { transform: none; }

.stat-tile-link { text-decoration: none; cursor: pointer; color: inherit; }
.stat-tile-link:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -14px rgba(20,8,14,0.45); }
.stat-tile-activa { outline: 2px solid currentColor; outline-offset: -1px; }

.paginacion { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
.paginacion-info { font-size: 0.85rem; color: var(--ink-soft); }

/* ---------- Menú lateral (identidad propia de SIPAT) ---------- */
.app-shell { display: flex; align-items: stretch; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; align-self: flex-start;
  width: 232px; flex-shrink: 0; height: 100vh; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  background: var(--surface); padding: 22px 14px;
  border-right: 1px solid var(--line);
}
.sidebar::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 4px;
  background: repeating-linear-gradient(180deg, var(--guinda) 0 14px, var(--marigold) 14px 28px, var(--terracotta) 28px 42px);
}
.sidebar-marca { display: flex; align-items: center; gap: 11px; padding: 0 6px; margin-bottom: 22px; }
.sidebar-colapsar {
  margin-left: auto; flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1rem; line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}
.sidebar-colapsar:hover { background: var(--guinda); color: #fff; border-color: var(--guinda); }
.sidebar-mostrar {
  display: none; position: fixed; top: 18px; left: 16px; z-index: 60;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--line); color: var(--guinda-deep);
  align-items: center; justify-content: center; font-size: 1.15rem; cursor: pointer;
  box-shadow: 0 6px 16px -8px rgba(20,8,14,0.35);
  transition: background 0.15s ease;
}
.sidebar-mostrar:hover { background: var(--surface-2); }
.app-shell.sidebar-oculto .sidebar-mostrar { display: flex; }
.app-shell.sidebar-oculto .sidebar { display: none; }
.sidebar-menu-movil { display: none; }
.sidebar-logo {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, #fffaf0, #f1ebdd 55%, #e2d6b8 100%);
  border: 2px solid rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 16px -8px rgba(74,12,27,0.45);
  overflow: hidden;
}
.sidebar-logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.sidebar-marca-nombre { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--guinda-deep); line-height: 1; }
.sidebar-marca-sub { font-size: 0.66rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }

.sidebar-nav { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.sidebar-link {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 8px;
  color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: 0.87rem;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.sidebar-link-icono { font-size: 1.05rem; width: 20px; text-align: center; flex-shrink: 0; }
/* Usuarios y Auditoría: abajo del menú, separadas, solo administración. */
.sidebar-admin { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; }
.sidebar-admin-titulo { font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); padding: 0 12px 4px; }
.sidebar-link:hover { background: var(--surface-2); color: var(--guinda-deep); transform: translateX(3px); }
.sidebar-link-activo, .sidebar-link-activo:hover {
  background: linear-gradient(135deg, var(--guinda), var(--guinda-deep)); color: #fbf8f0;
  box-shadow: 0 8px 16px -10px rgba(74,12,27,0.55); transform: none;
}

.contenido { flex: 1; min-width: 0; }

/* Barra superior de cada pantalla: usuario conectado + Cerrar sesión, alineados a la derecha. */
.barra-usuario { display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 36px 0; }
.barra-usuario + .page, .barra-usuario + .page-ancha { padding-top: 14px; }
.barra-usuario-quien {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 14px 4px 4px;
}
.barra-usuario-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--guinda); color: #fbf8f0; font-weight: 700; font-family: var(--font-display);
  display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
}
.barra-usuario-nombre { font-weight: 700; font-size: 0.84rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-usuario-rol { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.barra-usuario-rol.admin { background: linear-gradient(135deg, var(--marigold), var(--terracotta)); color: #fff; }
.barra-usuario-rol.captura { background: #eadfc4; color: #8a5a12; }
.barra-usuario-salir {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
  color: var(--terracotta); text-decoration: none; font-weight: 700; font-size: 0.82rem;
  border: 1.5px solid rgba(177,80,47,0.35); transition: background 0.15s ease, color 0.15s ease;
}
.barra-usuario-salir:hover { background: var(--terracotta); color: #fff; }
@media print { .barra-usuario { display: none !important; } }
.contenido .page, .contenido .page-ancha { margin: 0 auto; max-width: 100%; padding: 32px 36px 64px; }

@media (max-width: 860px) {
  .app-shell { flex-direction: column; }
  .sidebar {
    position: static; width: 100%; height: auto; flex-direction: row; flex-wrap: wrap;
    align-items: center; padding: 12px 16px;
  }
  .sidebar::after { top: auto; right: 0; left: 0; bottom: -4px; width: auto; height: 4px; background: repeating-linear-gradient(-45deg, var(--guinda) 0 14px, var(--marigold) 14px 28px, var(--terracotta) 28px 42px); }
  .sidebar-marca { margin-bottom: 0; }
  
  .sidebar-nav { flex-direction: row; flex-wrap: wrap; flex: 1 1 100%; order: 3; margin-top: 10px; }
  
  .sidebar-admin { flex-direction: row; flex-wrap: wrap; flex: 1 1 100%; margin-top: 6px; padding-top: 6px; }
  .sidebar-admin-titulo { flex: 1 1 100%; padding-bottom: 0; }
  .barra-usuario { padding: 12px 16px 0; }
  .barra-usuario-nombre { max-width: 45vw; }
  .contenido .page, .contenido .page-ancha { padding: 24px 16px 48px; }
  /* Menú en celular: cerrado hasta que se toca "☰ Menú" (así no ocupa toda la pantalla). */
  .app-shell.sidebar-oculto .sidebar { display: flex; }
  .sidebar-colapsar, .app-shell.sidebar-oculto .sidebar-mostrar { display: none; }
  .sidebar-menu-movil { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--guinda-deep); font-weight: 700; font-size: 0.95rem; cursor: pointer; }
  .app-shell:not(.menu-movil-abierto) .sidebar-nav { display: none; }
}

/* Celular: formularios en una sola columna, botones más grandes para el dedo y en el Panel
   solo lo necesario (expediente, organización, estado y "+ Pago") para que todo quepa. */
@media (max-width: 720px) {
  .field-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .field-grid input[type=file] { max-width: 100%; }
  /* Panel en celular: cada renglón es una tarjeta (expediente y nombre arriba; estado y "+ Pago" abajo). */
  table.tabla-panel thead { display: none; }
  table.tabla-panel, table.tabla-panel tbody { display: block; }
  table.tabla-panel tbody tr { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 14px 12px; border-bottom: 1px solid var(--line); }
  table.tabla-panel td { padding: 0; border: 0; min-width: 0; max-width: none; }
  table.tabla-panel td.texto-izq { grid-column: 2 / -1; min-width: 0; max-width: none; }
  table.tabla-panel td.estado-celda { grid-column: 1 / 3; }
  table.tabla-panel td.celda-acciones { grid-column: 3; }
  table.tabla-panel td.vacio { grid-column: 1 / -1; }
  table.tabla-panel .celda-acciones .secondary { padding: 10px 18px; font-size: 0.88rem; }
  .tabla-wrap:has(.tabla-panel)::after { display: none; }
  .contenido button, .contenido a.secondary, .contenido a.primary { min-height: 44px; }
  .contenido a.secondary, .contenido a.primary { display: inline-flex; align-items: center; justify-content: center; }
  .contenido input, .contenido select, .contenido textarea { font-size: 16px; min-height: 44px; }
  .solo-escritorio { display: none; }
}

/* Pagos anulados: se siguen mostrando (evidencia) pero tachados y tenues; no cuentan en nada. */
tr.pago-anulado td { color: var(--ink-soft); background: rgba(91, 79, 63, 0.05); }
tr.pago-anulado .tachable, tr.pago-anulado td.texto-izq:first-child { text-decoration: line-through; }

/* Leyenda de colores del panel: escondida, se abre solo si alguien la quiere ver. */
.leyenda-colores { margin: -6px 0 12px; font-size: 0.82rem; color: var(--ink-soft); }
.leyenda-colores summary { cursor: pointer; width: fit-content; color: var(--guinda-deep); font-weight: 600; }
.leyenda-colores summary:hover { text-decoration: underline; }
.leyenda-colores .mapa-leyenda { margin: 8px 0 0; }

/* Enlaces a fichas dentro de tablas: color del sistema, sin azul subrayado del navegador. */
.org-link { color: var(--guinda-deep); text-decoration: none; }
.org-link:hover { text-decoration: underline; }

/* Estadísticas: una sola gráfica de "Recaudado" con selector Día / Semana / Mes. */
.grafica-encabezado { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.selector-vista { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.selector-vista button { border: 0; background: transparent; padding: 6px 16px; border-radius: 999px; font-weight: 700; font-size: 0.82rem; color: var(--ink-soft); cursor: pointer; }
.selector-vista button.activa { background: var(--guinda); color: #fff; }

/* Usuarios: el alta queda escondida detrás del botón "+ Nuevo usuario". */
.nuevo-usuario > summary { list-style: none; display: inline-block; cursor: pointer; margin-bottom: 18px; }
.nuevo-usuario > summary::-webkit-details-marker { display: none; }
.nuevo-usuario[open] > summary { display: none; }

/* Celular: tablas de Organizaciones y del historial de pagos de la ficha como tarjetas
   (cada dato en su renglón con su nombre), para que nada quede fuera de la pantalla.
   En computadora se ven igual que siempre. */
@media (max-width: 720px) {
  table.tabla-tarjetas thead { display: none; }
  table.tabla-tarjetas, table.tabla-tarjetas tbody { display: block; width: 100%; }
  table.tabla-tarjetas tbody tr { display: block; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  table.tabla-tarjetas td { display: flex; justify-content: flex-end; align-items: flex-start; gap: 12px; padding: 4px 0; border: 0; text-align: right; min-width: 0; max-width: none; white-space: normal !important; }
  table.tabla-tarjetas td[data-label]::before { content: attr(data-label); flex: 0 0 auto; margin-right: auto; max-width: 45%; text-align: left; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--guinda-deep); padding-top: 2px; }
  table.tabla-tarjetas td.tarjeta-titulo { display: block; text-align: left; font-size: 1rem; padding-bottom: 6px; }
  table.tabla-tarjetas td.tarjeta-titulo[data-label]::before { display: block; max-width: none; margin-bottom: 2px; }
  table.tabla-tarjetas td.tarjeta-estado .mini-estados { justify-content: flex-end; }
  table.tabla-tarjetas td.tarjeta-accion { justify-content: flex-end; padding-top: 8px; }
  .tabla-wrap:has(.tabla-tarjetas)::after { display: none; }
}

/* Estadísticas: lo que casi no se consulta queda tras "Ver más". */

/* Panel: Exportar / Nuevo / Dados de baja van en la esquina superior izquierda (el usuario queda en la derecha)
   en botones chicos. En pantallas medianas bajan a su renglón; en celular, centrados. */
.barra-usuario-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-right: auto; }
.barra-usuario-acciones a.secondary { padding: 7px 14px; font-size: 0.8rem; }
@media (max-width: 1100px) {
  .barra-usuario-acciones { order: 3; flex: 1 1 100%; justify-content: flex-start; }
}
@media (max-width: 720px) {
  .barra-usuario-acciones { justify-content: center; }
}
@media print { .barra-usuario-acciones { display: none !important; } }

/* Folios con varios recibos (0027845-0027846-...) se parten en los guiones en vez de ensanchar la tabla. */
table.historial td.celda-folio { white-space: normal; min-width: 90px; max-width: 160px; }

/* Tarjetas de resumen con montos o fechas largas: una por renglón en celular para que no se corten. */
@media (max-width: 720px) {
  .stats-anchas .stat-tile { flex: 1 1 100%; }
  /* Tarjetas del Panel: un poco más compactas para que "ATRASADOS" o "AL CORRIENTE" quepan. */
  .stat-tile { gap: 10px; padding: 14px 12px; }
  .stat-tile .label { letter-spacing: 0.02em; font-size: 0.7rem; }
  table.tabla-tarjetas td.tarjeta-texto { display: block; text-align: left; }
  table.tabla-tarjetas td.tarjeta-texto[data-label]::before { display: block; max-width: none; margin-bottom: 2px; }
}

/* Impresión: las tablas salen completas (sin barra para deslizar ni columnas cortadas),
   los montos caben en sus tarjetas y la gráfica de la simulación muestra los 20 casos. */
@media print {
  .tabla-wrap { overflow: visible !important; box-shadow: none !important; max-width: 100% !important; }
  .tabla-wrap::after { display: none !important; }
  table.historial { width: 100% !important; font-size: 8.5pt; }
  table.historial th, table.historial td { white-space: normal !important; padding: 5px 6px !important; min-width: 0 !important; max-width: none !important; }
  table.historial tr { break-inside: avoid; }
  .stat-tile .num { font-size: 1.25rem !important; }
  
  h2.section-title { break-after: avoid; }
  .grafica-barras-dobles { overflow: visible !important; gap: 4px; }
  .grafica-col-doble { min-width: 0 !important; flex: 1 1 0 !important; }
  .grafica-par { gap: 2px; }
  .grafica-par .barra { width: 9px; }
  .grafica-col-doble .num-par { font-size: 0.4rem; letter-spacing: -0.02em; }
  .grafica-col-doble .grafica-barra-label { font-size: 0.45rem; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: clip; }
  .filtro-barra, .leyenda-colores { display: none !important; }
}

/* Laptops (1280–1400 px): los títulos de columna pueden ir en dos renglones ("PAGADO / HASTA")
   para que las tablas quepan sin tener que deslizar. Solo se parten si de verdad no caben. */
table.historial th { white-space: normal; }
@media (max-width: 1400px) {
  table.historial th, table.historial td { padding: 9px 9px; }
  table.historial td { white-space: normal; }
  table.historial td.texto-izq { min-width: 150px; }
  table.historial td.col-compacto { min-width: 130px; }
}
@media (max-width: 1300px) {
  table.historial th, table.historial td { padding: 8px 6px; }
  table.historial { font-size: 0.86rem; }
}
@media (max-width: 720px) {
  table.tabla-tarjetas td.celda-folio { max-width: none; min-width: 0; }
}

/* ---------- Agenda de cobro ---------- */
.estado-azul { background: rgba(43, 108, 176, 0.14); color: #2b6cb0; }
.stat-tile.azul { border-left-color: #2b6cb0; }
.stat-tile.azul .num { color: #2b6cb0; }
.stat-tile.rojo.stat-tile-alerta { background: rgba(177,80,47,0.07); box-shadow: 0 0 0 2px rgba(177,80,47,0.30); }
.agenda-seguimiento { font-size: 0.82rem; line-height: 1.35; min-width: 210px; }
.agenda-seguimiento .quien { color: var(--ink-soft); font-size: 0.74rem; }
.agenda-seguimiento .obs { font-style: italic; }
.agenda-atraso { font-weight: 800; color: var(--marron); white-space: nowrap; }
.agenda-acciones { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.llamada-resultados { display: flex; flex-wrap: wrap; gap: 8px; }
.llamada-resultados label { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-weight: 700; background: var(--paper); }
.llamada-resultados label:has(input:checked) { background: var(--guinda); color: #fff; border-color: var(--guinda); }
.llamada-resultados input { width: auto; margin: 0; }
.agenda-acciones { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
.agenda-acciones a { padding: 7px 12px !important; font-size: 0.8rem !important; white-space: nowrap; text-align: center; }
.agenda-seguimiento { min-width: 170px; }
.agenda-dirigente { font-size: 0.78rem; color: var(--ink-soft); margin-top: 3px; }
/* 🔔 Alertas de la agenda */
.menu-alerta { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--cereza); color: #fff; font-size: 0.72rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px rgba(255,255,255,0.7); }
.toast-alerta { position: fixed; right: 20px; bottom: 20px; z-index: 9999; max-width: 360px; padding: 14px 18px; border-radius: 14px; background: var(--guinda); color: #fff !important; font-weight: 700; text-decoration: none; box-shadow: 0 12px 30px -10px rgba(20,8,14,0.6); animation: toast-entra 0.3s ease; }
.toast-agenda { display: flex; align-items: center; gap: 12px; }
.toast-agenda a { color: #fff; text-decoration: none; }
.toast-agenda .aviso-cerrar { background: transparent; color: #fff; }
/* "¿Sigues aquí?": ventana al centro, 2 minutos antes de que se cierre la sesión. */
.aviso-sesion { position: fixed; inset: 0; z-index: 10000; background: rgba(20,8,14,0.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.aviso-sesion-caja { background: var(--surface); color: var(--ink); border-radius: 16px; padding: 28px 30px; max-width: 460px; width: 100%; text-align: center; box-shadow: 0 20px 50px -12px rgba(20,8,14,0.6); }
.aviso-sesion-caja h2 { margin: 0 0 10px; font-size: 1.6rem; color: var(--guinda-deep); }
.aviso-sesion-caja p { margin: 0 0 22px; font-size: 1.1rem; line-height: 1.5; }
.aviso-sesion-boton { min-height: 52px; width: 100%; font-size: 1.15rem !important; justify-content: center; }
@media print { .aviso-sesion { display: none !important; } }
/* Pestañas dentro de Pagos y Reportes */
.subpestanas { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 2px solid var(--line); margin: 0 0 22px; }
.subpestanas a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; margin-bottom: -2px; border-bottom: 3px solid transparent; color: var(--ink-soft); font-weight: 700; font-size: 1rem; text-decoration: none; }
.subpestanas a:hover { color: var(--guinda-deep); }
.subpestanas a.activa { color: var(--guinda-deep); border-bottom-color: var(--guinda); }
@keyframes toast-entra { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.aviso-llamar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; padding: 14px 18px; margin: 0 0 18px; border-radius: 14px; background: rgba(192,22,47,0.08); border: 2px solid rgba(192,22,47,0.30); color: var(--ink); }
.aviso-llamar b { color: var(--cereza); }
.aviso-promesa { background: rgba(43,108,176,0.08); border-color: rgba(43,108,176,0.35); }
.aviso-promesa b { color: #2b6cb0; }
.inicio-promesas { margin: 0 0 22px; }
.inicio-promesas ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.inicio-promesas li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; padding: 8px 12px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); }
.inicio-promesas li .chico { color: var(--ink-soft); font-size: 0.78rem; }
.pill-llamar { display: inline-flex; margin-top: 5px; font-size: 0.72rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: var(--cereza); color: #fff; white-space: nowrap; }
.motivo-alerta { font-size: 0.74rem; color: var(--ink-soft); margin-top: 3px; max-width: 200px; white-space: normal; }
@media print { .menu-alerta, .toast-alerta, .aviso-llamar .secondary { display: none !important; } }
/* Agenda: las 7 tarjetas en una sola fila en PC (más compactas) */
.stats-agenda { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.stats-agenda .stat-tile { padding: 12px 10px; gap: 8px; min-width: 0; }
.stats-agenda .stat-tile .icon { width: 32px; height: 32px; font-size: 1rem; flex: 0 0 32px; }
.stats-agenda .stat-tile .num { font-size: 1.5rem; }
.stats-agenda .stat-tile .label { font-size: 0.66rem; letter-spacing: 0.03em; }
@media (max-width: 1250px) { .stats-agenda { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px) { .stats-agenda { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* "Falta capturar la cuota": dato pendiente del padrón, no deudor */
.stat-tile.gris { border-left-color: #a59a88; }
.stat-tile.gris .num { color: var(--ink-soft); }
.stat-tile.azul { border-left-color: var(--azul); }
.stat-tile.azul .num { color: var(--azul); }
.stat-tile.azul .icon { background: rgba(47, 102, 144, 0.15); }
.stat-tile.morado { border-left-color: var(--morado); }
.stat-tile.morado .num { color: var(--morado); }
.stat-tile.morado .icon { background: rgba(122, 74, 154, 0.15); }
.stat-tile.verde-claro { border-left-color: #6fa37e; }
.stat-tile.verde-claro .num { color: #4e8a5e; }
.stat-tile.verde-claro .icon { background: var(--success-bg); }
/* Registrar pago fácil */
.campo-error { color: var(--cereza); font-size: 0.8rem; font-weight: 700; min-height: 0; }
.campo-error:empty { display: none; }
.recibo-conservado { margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: var(--success-bg); color: var(--success); font-size: 0.85rem; }
.recibo-conservado span { color: var(--ink-soft); font-size: 0.78rem; }
.boton-camara { margin-top: 8px; width: fit-content; cursor: pointer; }
.field label.boton-camara { color: var(--guinda-deep); font-size: 0.9rem; padding: 10px 18px; min-height: 44px; }
.field label.boton-camara:hover { color: #fbf8f0; }
@media (min-width: 900px) { .boton-camara { display: none !important; } }
.resumen-pago { margin: 14px 0 4px; padding: 10px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font-size: 0.92rem; }
.resumen-pago:empty { display: none; }
.boton-guardar-pago { font-size: 1.05rem; padding: 12px 26px; }
/* Pantalla de inicio (Captura) */
.inicio-acciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.inicio-boton { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 22px 16px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); text-decoration: none; color: var(--ink); box-shadow: 0 6px 18px -12px rgba(20,8,14,0.45); transition: transform .15s, box-shadow .15s; }
.inicio-boton:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -12px rgba(20,8,14,0.5); }
.inicio-boton b { font-size: 1.15rem; color: var(--guinda); }
.inicio-boton span:last-child { font-size: 0.82rem; color: var(--ink-soft); }
.inicio-boton.alerta { border: 2px solid rgba(192,22,47,0.4); background: rgba(192,22,47,0.06); }
.inicio-boton.alerta b { color: var(--cereza); }
.inicio-ico { font-size: 2.2rem; }
.inicio-buscar label { display: block; font-weight: 800; font-size: 1.05rem; color: var(--guinda); margin-bottom: 8px; }
.inicio-buscar-fila { display: flex; gap: 10px; }
.inicio-buscar-fila input { flex: 1; font-size: 1.05rem; padding: 12px 14px; }
.inicio-resultados { display: flex; flex-direction: column; gap: 8px; }
.inicio-resultado { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.inicio-resultado-datos { flex: 1; min-width: 0; }
.inicio-resultado .chico, .inicio-hoy .chico { color: var(--ink-soft); font-size: 0.78rem; }
.inicio-resultado .primary { white-space: nowrap; }
.inicio-hoy { margin: 0; padding-left: 18px; }
.inicio-hoy li { margin-bottom: 4px; }
@media (max-width: 720px) {
  .inicio-acciones { grid-template-columns: 1fr; }
  .inicio-resultado { flex-wrap: wrap; }
  .inicio-resultado-datos { flex: 1 1 100%; }
  .inicio-resultado .primary { flex: 1; }
  .inicio-buscar-fila { flex-direction: column; }
}

/* Botón que todavía no se puede usar (ej. Permiso de un pago de otra temporada o sin recibo). */
.boton-desactivado { opacity: 0.45; cursor: not-allowed; filter: grayscale(1); box-shadow: none !important; }
.boton-desactivado:hover { transform: none !important; }

/* Menú de antes (acordeón): lo usan el administrador y Susy, que siguen con el sistema como estaba. */
.sidebar-acordeon { display: flex; flex-direction: column; }
.sidebar-acordeon + .sidebar-acordeon { margin-top: 8px; }
.sidebar-grupo {
  display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none;
  list-style: none; font-size: 0.66rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase;
  letter-spacing: 0.08em; padding: 8px 12px; border-radius: 8px; opacity: 0.8; transition: background 0.15s ease, opacity 0.15s ease;
}
.sidebar-grupo::-webkit-details-marker { display: none; }
.sidebar-grupo:hover { background: var(--surface-2); opacity: 1; }
.sidebar-grupo-flecha { font-size: 0.8rem; transition: transform 0.2s ease; }
.sidebar-acordeon:not([open]) .sidebar-grupo-flecha { transform: rotate(-90deg); }
.sidebar-acordeon-links { display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }
@media (max-width: 860px) {
  .sidebar-grupo { display: none; }
  .sidebar-acordeon, .sidebar-acordeon-links { display: contents; }
}


/* =====================================================================================================
   Acomodo de las pantallas de la propuesta de mejora (nov-2026): Padrón, Ficha, Registrar pago en 3 pasos,
   Pagos y selector "Estás viendo". Usan la letra, tamaños y colores de siempre del sistema (pedido del usuario:
   regresar el estilo anterior).
   ===================================================================================================== */
.solo-lector { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dato-chico { font-size: 0.82rem; color: var(--ink-soft); margin-top: 2px; }
.ayuda { font-size: 0.82rem; color: var(--ink-soft); margin: 4px 0 0; line-height: 1.45; }
.link-volver { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.9rem; color: var(--guinda-deep); text-decoration: none; margin-bottom: 10px; }
.link-volver:hover { text-decoration: underline; }
.link-fuerte { display: inline-flex; align-items: center; margin-top: 10px; font-weight: 700; font-size: 0.9rem; color: var(--guinda-deep); }
.boton-ancho { width: 100%; justify-content: center; }
summary.secondary { list-style: none; font-family: var(--font-ui); font-weight: 700; font-size: 0.85rem; color: var(--guinda-deep); background: linear-gradient(180deg, #fffdfa, rgba(128, 25, 52, 0.06)); border: 1px solid rgba(128, 25, 52, 0.3); border-radius: 999px; padding: 7px 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 3px 8px -4px rgba(74, 12, 27, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
summary.secondary:hover { background: linear-gradient(135deg, var(--guinda), var(--guinda-deep)); color: #fbf8f0; border-color: var(--guinda-deep); }
summary.secondary::-webkit-details-marker { display: none; }
summary.secondary::after { content: "▾"; margin-left: 6px; }
p.warning .primary { margin-left: auto; }

/* Encabezado de pantalla (título a la izquierda, botones a la derecha) */
.encabezado-pantalla { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.titulo-pantalla { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--guinda); margin: 0; line-height: 1.2; }
.subtitulo-pantalla { margin: 4px 0 0; color: var(--ink-soft); font-size: 0.95rem; }
.encabezado-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.titulo-seccion { font-family: var(--font-display); font-size: 1.25rem; margin: 28px 0 12px; color: var(--guinda); }

/* Selector fijo "Estás viendo: Tianguis | Bazares" (barra de arriba) */
.selector-seccion { display: flex; align-items: center; gap: 10px; margin-right: auto; flex-wrap: wrap; }
.selector-seccion-titulo { font-size: 0.85rem; color: var(--ink-soft); }
.selector-seccion-botones { display: inline-flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.selector-seccion-botones a { padding: 7px 18px; border-radius: 999px; font-size: 0.88rem; font-weight: 700; color: var(--ink-soft); text-decoration: none; }
.selector-seccion-botones a.activa { background: var(--guinda); color: #fbf8f0; box-shadow: 0 4px 12px -4px rgba(74, 12, 27, 0.5); }


/* Padrón: 4 tarjetas de estado + "Más filtros" */
.filtros-grandes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.filtro-grande { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 12px; background: var(--surface); text-decoration: none; color: var(--ink); box-shadow: 0 6px 16px -12px rgba(20, 8, 14, 0.35); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.filtro-grande:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -14px rgba(20, 8, 14, 0.45); }
.filtro-grande.activo { border-color: var(--guinda-deep); box-shadow: 0 0 0 2px var(--guinda-deep) inset; }
.filtro-grande-titulo { display: inline-flex; align-items: center; gap: 8px; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: none !important; padding: 0 !important; }
.filtro-grande-titulo .forma { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }
.filtro-grande-titulo.estado-guinda .forma { border-radius: 2px; }
.filtro-grande-num { font-weight: 800; font-size: 1.9rem; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.mas-opciones { position: relative; display: inline-block; }
.mas-opciones-menu { position: absolute; z-index: 50; top: calc(100% + 6px); right: 0; min-width: 260px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 34px -14px rgba(20, 8, 14, 0.45); padding: 6px; display: flex; flex-direction: column; }
.mas-filtros .mas-opciones-menu { left: 0; right: auto; }
.mas-opciones-menu a, .mas-opciones-menu button { display: flex; align-items: center; padding: 10px 14px; border-radius: 8px; border: 0; background: none; font: inherit; font-size: 0.92rem; color: var(--ink); text-decoration: none; text-align: left; cursor: pointer; width: 100%; box-shadow: none; }
.mas-opciones-menu a:hover, .mas-opciones-menu button:hover, .mas-opciones-menu a[aria-current] { background: var(--surface-2); }
.mas-opciones-peligro { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.mas-opciones-peligro button { color: var(--terracotta); font-weight: 700; }
.leyenda-estados { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; font-size: 0.88rem; }
.leyenda-estados > span { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.paginacion-botones { display: flex; gap: 8px; }

/* Pagos: Hoy / Esta semana / Todos / Elegir fechas */
.botones-periodo { display: inline-flex; gap: 2px; flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px; margin-bottom: 16px; }
.botones-periodo a { padding: 8px 20px; border-radius: 999px; font-size: 0.88rem; font-weight: 700; color: var(--ink-soft); text-decoration: none; }
.botones-periodo a.activo { background: var(--guinda); color: #fbf8f0; box-shadow: 0 4px 12px -4px rgba(74, 12, 27, 0.5); }
.campo-fecha { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--ink-soft); }
.resumen-pagos { font-size: 1rem; margin: 0 0 4px; }

/* Ficha */
.ficha-cabeza { margin-bottom: 20px; }
.ficha-tipo { font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.ficha-nombre { font-family: var(--font-display); font-size: clamp(1.35rem, 2.6vw, 1.8rem); margin: 4px 0 14px; color: var(--guinda); line-height: 1.2; }
.ficha-estado { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.ficha-estado-titulo { display: flex; gap: 8px; flex-wrap: wrap; }
.ficha-estado-texto { margin: 10px 0 12px; }
.ficha-acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.ficha-bloques { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 8px; }
.ficha-bloque h2 { font-family: var(--font-ui); font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--guinda); margin: 0 0 12px; }
.ficha-lista { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ficha-lista dt { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--guinda-deep); }
.ficha-lista dd { margin: 3px 0 0; font-size: 0.95rem; overflow-wrap: anywhere; }

/* Registrar pago en 3 pasos */
.pagina-pago { max-width: 1120px; }
.pago-pasos { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; margin-top: 18px; }
.pago-columna { display: flex; flex-direction: column; gap: 16px; }
.paso-titulo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 14px; color: var(--guinda); }
.paso-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--guinda); color: #fbf8f0; font-family: var(--font-ui); font-size: 0.95rem; font-weight: 700; flex-shrink: 0; }
.campo-monto { max-width: 260px; font-weight: 700; }
.cubre-caja { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--success-line); background: var(--success-bg); border-radius: 10px; }
.cubre-titulo { font-size: 0.85rem; font-weight: 700; color: var(--success); }
.cubre-fechas { font-size: 1.1rem; font-weight: 700; margin-top: 2px; }
.fechas-a-mano { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.fecha-pago-fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; font-size: 0.92rem; }
.paso-dos-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.zona-recibo { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 20px 16px; border: 2px dashed #c9b89a; border-radius: 12px; background: var(--surface-2); color: var(--guinda-deep); cursor: pointer; }
.zona-recibo:hover, .zona-recibo:focus-within { border-color: var(--guinda); }
.zona-recibo span { font-size: 0.85rem; color: var(--ink-soft); }
.zona-recibo-archivo { font-weight: 700; color: var(--success) !important; }
.pago-resumen { position: sticky; top: 16px; border-top: 4px solid var(--guinda); }
.pago-resumen h2 { font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 10px; color: var(--guinda); }
.pago-resumen dl { margin: 0 0 16px; }
.pago-resumen dt { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--guinda-deep); margin-top: 10px; }
.pago-resumen dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.pago-resumen .resumen-monto { font-size: 1.35rem; font-weight: 800; }
.pago-resumen .falta { color: var(--terracotta); font-weight: 700; }
.pago-resumen .boton-guardar-pago { width: 100%; justify-content: center; }
.pago-resumen .boton-ancho { margin-top: 10px; }
.campo-error { font-size: 0.8rem; font-weight: 700; color: var(--terracotta); }

@media (max-width: 900px) {
  .pago-pasos { grid-template-columns: minmax(0, 1fr); }
  .pago-resumen { position: static; }
  .ficha-bloques { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .filtros-grandes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paso-dos-campos, .fechas-a-mano { grid-template-columns: minmax(0, 1fr); }
  .selector-seccion { width: 100%; }
  .barra-usuario { justify-content: flex-start; }
  .mas-opciones-menu { right: auto; left: 0; min-width: min(260px, calc(100vw - 48px)); }
}