:root {
  /* Azul de pista de pádel + amarillo de pelota, sobre fondo blanco. */
  --bg: #ffffff;
  --panel: #f7f9fb;
  --border: #dde3ea;
  --text: #10151c;
  --muted: #5b6b7c;
  --accent: #0e7cc4;
  --accent-rgb: 14, 124, 196;
  --accent-dark: #0a5f97;
  --accent-text: #ffffff;
  --highlight: #d9e021;
  --highlight-rgb: 217, 224, 33;
  --highlight-text: #10151c;
  --good: #1c9a5b;
  --bad: #e0393e;
  --bad-rgb: 224, 57, 62;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

header {
  padding: 18px 28px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  border-top: 4px solid var(--highlight);
}

.header-brand { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }

.brand-logo { height: 36px; width: auto; display: block; }
.brand-logo-paquito { height: 30px; }

.brand-divider { width: 1px; height: 28px; background: var(--border); }

.brand-subtitle {
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

h1 { margin: 0 0 12px; font-size: 20px; }
h2 { margin: 0 0 10px; font-size: 21px; font-weight: 700; color: var(--text); }

nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* .bottom-nav es también un <nav>, pero solo debe verse en móvil (la regla
   de arriba la afecta igual que a la de escritorio si no se anula aquí). */
.bottom-nav { display: none; }
.tabs-scroll { display: flex; gap: 8px; flex-wrap: wrap; }
.nav-actions { display: flex; gap: 8px; margin-left: auto; }

.tab-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.tab-btn:hover { border-color: var(--accent); color: var(--text); }

.tab-btn.active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
  box-shadow: inset 0 -3px 0 var(--highlight);
}

.nav-backup-link {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.nav-backup-link:hover { border-color: var(--accent); color: var(--text); }

button.nav-backup-link { font-family: inherit; cursor: pointer; }
.logout-form { margin: 0; }

main { padding: 24px 28px; }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Cuenta de recepción: solo se ve la pestaña Cuotas — el resto de pestañas,
   la barra inferior de móvil, "Más" y la copia de seguridad quedan ocultas.
   Es solo la parte visual: la API rechaza igualmente cualquier otra llamada
   desde esta cuenta, esté oculta o no. */
body.role-recepcion .tab-btn:not([data-tab="cuotas"]),
body.role-recepcion .bottom-nav-btn:not([data-tab="cuotas"]),
body.role-recepcion #more-nav-btn,
body.role-recepcion .nav-backup-link[href="/api/backup"],
body.role-recepcion .tab-panel:not(#tab-cuotas),
body.role-recepcion .impago-ver-ficha {
  display: none !important;
}

.hint { color: var(--muted); font-size: 14px; max-width: 640px; }

input[type="file"], input[type="month"], input[type="text"], select {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 6px;
}

input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

button {
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  padding: 9px 18px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}

button:hover { opacity: 0.9; }

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.table-wrap::-webkit-scrollbar { height: 8px; width: 8px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.table-wrap::-webkit-scrollbar-thumb:hover { background: var(--muted); }

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

th, td { padding: 10px 12px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--border); }

th:first-child, td:first-child, th:nth-child(2), td:nth-child(2), th:nth-child(3), td:nth-child(3), th:nth-child(4), td:nth-child(4) {
  text-align: left;
}

#curso-table th:nth-child(n+2), #curso-table td:nth-child(n+2) { text-align: right; }

/* Detalle mensual: meses en columnas, conceptos en filas. Primera columna
   (concepto) fija al hacer scroll horizontal con muchos meses. */
#summary-table { font-size: 13px; }
#summary-table th, #summary-table td { padding: 7px 10px; }

#summary-table td:nth-child(n+2), #summary-table th:nth-child(n+2) { text-align: right; }

#summary-table th:first-child, #summary-table td:first-child {
  position: sticky;
  left: 0;
  text-align: left;
  white-space: normal;
}
#summary-table th:first-child { background: var(--panel); z-index: 2; }
#summary-table td:first-child { background: var(--bg); z-index: 1; }

/* Ingresos en azul, gastos en rojo suave y la Diferencia en amarillo de acento,
   para que el límite entre ingresos y gastos se vea sin tener que leer las
   etiquetas. Cada bloque sube de intensidad en su fila de total. */
#summary-table tbody tr.row-ingresos td { background: rgba(var(--accent-rgb), 0.045); }
#summary-table tbody tr.row-gastos td { background: rgba(var(--bad-rgb), 0.045); }

#summary-table tr.row-section-start td { border-top: 2px solid var(--border); }

#summary-table tr.row-bold td { font-weight: 700; }

#summary-table tbody tr.row-ingresos.row-bold td { background: rgba(var(--accent-rgb), 0.16); }
#summary-table tbody tr.row-ingresos.row-bold.row-section-start td { border-top: 2px solid var(--accent); }
#summary-table tbody tr.row-ingresos.row-bold td:first-child { color: var(--accent-dark); }

#summary-table tbody tr.row-gastos.row-bold td { background: rgba(var(--bad-rgb), 0.16); }
#summary-table tbody tr.row-gastos.row-bold.row-section-start td { border-top: 2px solid var(--bad); }
#summary-table tbody tr.row-gastos.row-bold td:first-child { color: var(--bad); }

#summary-table tbody tr.row-diferencia td { background: rgba(var(--highlight-rgb), 0.3); border-top: 2px solid var(--highlight); }
#summary-table tbody tr.row-diferencia td:first-child { color: var(--highlight-text); }

/* La columna de conceptos es sticky (queda fija al hacer scroll horizontal), así
   que necesita fondo sólido siempre — el color de sección se marca con un borde
   en vez de con el tinte transparente que llevan el resto de celdas de la fila. */
#summary-table tbody tr.row-ingresos td:first-child { background: var(--bg); border-left: 4px solid var(--accent); }
#summary-table tbody tr.row-gastos td:first-child { background: var(--bg); border-left: 4px solid var(--bad); }
#summary-table tbody tr.row-diferencia td:first-child { background: var(--bg); border-left: 4px solid var(--highlight); }

#summary-table td.row-total { font-weight: 600; border-left: 2px solid var(--border); }
#summary-table th:last-child { border-left: 2px solid var(--border); }

#summary-table .expense-input { width: 74px; padding: 3px 5px; font-size: 13px; }

thead th { background: var(--panel); color: var(--muted); font-weight: 600; position: sticky; top: 0; }

tbody tr:hover { background: rgba(16,21,28,0.035); }

tr.total-row td { font-weight: 700; border-top: 2px solid var(--border); }

.filters { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; font-size: 14px; }

.filters label { display: flex; gap: 6px; align-items: center; color: var(--muted); }

.badge { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.badge.review { background: rgba(224,57,62,0.15); color: var(--bad); }
.badge.ok { background: rgba(28,154,91,0.15); color: var(--good); }

.diff-pos { color: var(--good); }
.diff-neg { color: var(--bad); }

.expense-input {
  width: 80px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 6px;
  border-radius: 4px;
  text-align: right;
}

.concepto-item { display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; }

.categoria-select {
  font-size: 12px;
  padding: 2px 4px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
}

.link-btn {
  background: transparent;
  color: var(--bad);
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
}

/* .link-btn es rojo por defecto (pensado para acciones destructivas: eliminar).
   Para acciones neutras (paginación, navegación, desactivar sin perder datos)
   se combina con esta clase para quitarle el color de alarma. */
.link-btn-neutral { color: var(--text); }

.edit-btn, .keep-btn, .save-btn {
  background: transparent;
  color: var(--accent);
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  margin-left: 4px;
}

.edit-btn:disabled, .keep-btn:disabled, .save-btn:disabled { opacity: 0.35; cursor: default; }

.row-actions { display: flex; gap: 4px; justify-content: flex-end; }

.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel-header h2 { margin: 0; }

.header-actions { display: flex; gap: 10px; align-items: center; }

.button-link {
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  padding: 9px 18px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  font-size: 14px;
}

.button-link-secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}

.chart-wrap { position: relative; margin-top: 8px; }

#profit-chart, #concept-chart, #clients-chart, #curso-compare-chart {
  max-width: 100%;
  height: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: block;
  cursor: crosshair;
}

.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); margin-top: 4px; }

.chart-legend .legend-item { display: inline-flex; align-items: center; gap: 5px; }

.chart-legend .dot, .share-legend .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }

.chart-legend .line-swatch { width: 14px; height: 2px; background: var(--good); display: inline-block; }

.chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  white-space: nowrap;
  z-index: 5;
}

.chart-tooltip strong { display: block; margin-bottom: 4px; font-size: 12px; }

.chart-tooltip .tt-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.chart-tooltip .tt-row .dot { margin-right: 5px; }
.chart-tooltip .tt-row.tt-strong { font-weight: 600; border-top: 1px solid var(--border); margin-top: 3px; padding-top: 3px; }
.chart-tooltip .var-badge { margin-left: 4px; }

.share-bar {
  display: flex;
  width: 100%;
  height: 26px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--border);
  margin-top: 8px;
}

.share-segment { height: 100%; min-width: 2px; }

.share-legend { display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: 13px; margin-top: 10px; }

.share-legend .share-item { display: inline-flex; align-items: center; gap: 6px; }
.share-legend .share-pct { color: var(--muted); }

h3 { margin-top: 32px; font-size: 15px; color: var(--muted); }
h3.section-title-first { margin-top: 4px; }
h3.section-title-inline { margin: 0; color: var(--text); font-size: 16px; }

.panel-header-sub { margin-top: 28px; }

.remember-label { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); margin-left: 4px; }

.edit-row td { background: rgba(var(--accent-rgb), 0.05); }

.edit-field {
  width: 100px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.edit-field.name-field { width: 160px; text-align: left; }

.dup-note { color: var(--muted); font-size: 12px; display: block; margin-top: 2px; }

.var-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 8px;
  margin-left: 4px;
  white-space: nowrap;
}

.var-badge.var-up { color: var(--good); background: rgba(28,154,91,0.12); }
.var-badge.var-down { color: var(--bad); background: rgba(224,57,62,0.12); }
.var-badge.var-flat { color: var(--muted); background: rgba(91,107,124,0.12); }
.var-badge.var-new { color: #7a7200; background: rgba(217,224,33,0.35); }

.bulk-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 8px 14px;
  background: rgba(224,57,62,0.08);
  border: 1px solid var(--bad);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
}

.bulk-actions[hidden] { display: none; }

#bulk-delete-btn { color: var(--bad); border-color: var(--bad); }

#tickets-table th:first-child, #tickets-table td:first-child { width: 28px; text-align: center; }
#tickets-table th:nth-child(5), #tickets-table td:nth-child(5) { text-align: left; }
#tickets-table th:nth-child(6), #tickets-table td:nth-child(6) { text-align: left; }

.donut-wrap {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 24px;
}

.table-wrap-scroll { max-height: 460px; overflow-y: auto; }
.table-wrap-scroll thead th { position: sticky; top: 0; z-index: 1; }

#category-donut { flex: none; }

#client-search { min-width: 240px; }

.filter-amount { width: 90px; }
#filter-search { min-width: 180px; }

#concept-table th:nth-child(2), #concept-table td:nth-child(2) { text-align: left; }
#clients-table th:nth-child(2), #clients-table td:nth-child(2),
#clients-table th:nth-child(3), #clients-table td:nth-child(3) { text-align: right; }

#crm-clients-table th:nth-child(4), #crm-clients-table td:nth-child(4) { text-align: center; }
#crm-clients-table th:nth-child(5), #crm-clients-table td:nth-child(5),
#crm-clients-table th:nth-child(6), #crm-clients-table td:nth-child(6) { text-align: right; }
#crm-services-table th:nth-child(3), #crm-services-table td:nth-child(3) { text-align: right; }
#crm-services-table th:nth-child(4), #crm-services-table td:nth-child(4) { text-align: center; }

/* Modales */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 12, 20, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  padding: 20px;
}

.modal-overlay[hidden] { display: none; }

.modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}

.modal.modal-wide { max-width: 620px; }

.modal-title { margin: 0; font-size: 17px; color: var(--text); }
.modal-subtitle { margin: 20px 0 4px; font-size: 14px; color: var(--muted); }

.ficha-contacto { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }

.modal label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }

.modal input, .modal select, .modal textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
}

.checkbox-label { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin: 8px 0 16px; }

.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.modal-actions-left { margin-right: auto; }

.form-error { color: var(--bad); font-size: 13px; }

.cobro-new-client-fields { display: flex; flex-direction: column; gap: 12px; padding: 12px; background: var(--bg); border-radius: 8px; }
.cobro-new-client-fields[hidden] { display: none; }

.client-combobox { position: relative; }
.combobox-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin-top: 4px;
  max-height: 220px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.combobox-options[hidden] { display: none; }
.combobox-option {
  padding: 8px 10px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}
.combobox-option:hover, .combobox-option.active { background: rgba(var(--accent-rgb), 0.08); }
.combobox-option-empty { padding: 8px 10px; font-size: 13px; color: var(--muted); }

#cobro-modal .modal { max-width: 760px; }

.cobro-items { display: flex; flex-direction: column; gap: 12px; }

.cobro-item-row {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}

.cobro-item-service-label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); margin-bottom: 10px; }

.cobro-item-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 0.7fr 0.8fr 1fr;
  gap: 8px;
}

.cobro-item-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); }

.cobro-item-row input, .cobro-item-row select { width: 100%; }

.cobro-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}

.cobro-item-importe { color: var(--text); }

.modal-total { font-size: 15px; text-align: right; }

.crm-actions { display: flex; gap: 6px; justify-content: flex-end; }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
}

.pagination button:disabled { opacity: 0.4; cursor: default; }

.stats-line { color: var(--text); font-size: 14px; font-weight: 600; margin: 4px 0 16px; }
.stats-line .stat-muted { color: var(--muted); font-weight: 400; }

.cuota-badge {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.cuota-badge.cuota-si { background: rgba(28,154,91,0.15); color: var(--good); }
.cuota-badge.cuota-no { color: var(--muted); }

#cuotas-table th:nth-child(4), #cuotas-table td:nth-child(4) { text-align: right; }
#cuotas-table th:nth-child(5), #cuotas-table td:nth-child(5) { text-align: center; }
#cuotas-table th:nth-child(6), #cuotas-table td:nth-child(6) { text-align: center; }
#cuotas-table th:nth-child(7), #cuotas-table td:nth-child(7) { text-align: right; }

.metodo-badge { padding: 3px 10px; border-radius: 10px; font-size: 12px; font-weight: 600; background: rgba(var(--accent-rgb), 0.12); color: var(--accent-dark); }

.estado-badge { padding: 3px 10px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.estado-badge.estado-pagada { background: rgba(28,154,91,0.15); color: var(--good); }
.estado-badge.estado-pendiente { background: rgba(245,166,35,0.15); color: #f5a623; }
.estado-badge.estado-activo { background: rgba(28,154,91,0.15); color: var(--good); }
.estado-badge.estado-baja { background: rgba(224,57,62,0.15); color: var(--bad); }

.row-inactivo { opacity: 0.55; }

.cuotas-list { display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; }

.cuota-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
}

.cuota-row.cuota-inactiva { opacity: 0.5; }
.cuota-row .cuota-concepto { flex: 1; }
.cuota-row .cuota-importe { color: var(--muted); white-space: nowrap; }
.cuota-row .cuota-edit-concepto, .cuota-row .bibelo-cuota-edit-concepto { flex: 1; }

.cuota-add-row {
  display: grid;
  grid-template-columns: 150px 1.3fr 100px;
  gap: 8px;
  margin-top: 8px;
}

/* ==========================================================================
   Móvil — pensado como una app de verdad: barra de navegación fija abajo
   con iconos (como cualquier app), listas en tarjetas en vez de tablas
   anchas, y modales que suben desde abajo a pantalla casi completa.
   ========================================================================== */
@media (max-width: 640px) {
  header { padding: 12px 14px 0; }

  .header-brand { gap: 10px; margin-bottom: 12px; }
  .brand-logo { height: 26px; }
  .brand-logo-paquito { height: 22px; }
  .brand-subtitle { display: none; }

  /* La navegación de escritorio (pestañas arriba + copia/cerrar sesión) se
     sustituye entera por la barra inferior y el panel "Más". */
  header nav { display: none; }

  main { padding: 14px 14px calc(84px + env(safe-area-inset-bottom)); }

  h2 { font-size: 18px; }

  .panel-header { flex-wrap: wrap; gap: 10px; }
  .header-actions { flex-wrap: wrap; width: 100%; }
  .header-actions .button-link, .header-actions .button-link-secondary { flex: 1; text-align: center; }

  .filters { gap: 10px; }
  .filters label { flex: 1 1 auto; }

  table { font-size: 13px; }
  th, td { padding: 9px 10px; }

  /* Modales a pantalla casi completa, deslizando desde abajo — se siente
     más "app" que una ventanita centrada con márgenes grandes a los lados. */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal, .modal.modal-wide, #cobro-modal .modal {
    max-width: 100%;
    width: 100%;
    max-height: 85vh;
    border-radius: 16px 16px 0 0;
    padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
  }

  .cobro-item-grid { grid-template-columns: 1fr 1fr; }
  .cobro-item-grid label:first-child { grid-column: 1 / -1; }

  .cuota-add-row { grid-template-columns: 1fr; }

  .donut-wrap { padding: 16px; gap: 20px; }

  /* ---------------- Barra de navegación inferior ---------------- */
  .bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--panel);
    border-top: 1px solid var(--border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    z-index: 15;
    /* En Safari/iOS, un elemento fixed sin capa propia se queda "atrás" y
       se ve saltar durante el gesto de scroll — forzarlo a su propia capa
       de composición (GPU) hace que se quede pegado abajo sin retraso. */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  .bottom-nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    padding: 6px 2px;
    border-radius: 10px;
  }
  .bottom-nav-btn svg { width: 22px; height: 22px; }
  .bottom-nav-btn.active { color: var(--accent); }

  .more-sheet { gap: 4px; padding: 12px; }
  .more-sheet-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    color: var(--text);
    border: none;
    padding: 14px 12px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
  }
  .more-sheet-item:hover { background: var(--bg); opacity: 1; }
  .more-sheet-divider { height: 1px; background: var(--border); margin: 6px 4px; }
  .more-sheet-danger { color: var(--bad); }

  /* ---------------- Listas en tarjetas en vez de tablas ---------------- */
  .table-wrap:has(.card-table) { border: none; border-radius: 0; overflow: visible; }

  .card-table thead { display: none; }
  .card-table, .card-table tbody { display: block; width: 100%; }
  .card-table tr {
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 4px 14px;
    margin-bottom: 10px;
    position: relative;
  }
  .card-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    text-align: right;
    white-space: normal;
  }
  .card-table td:last-child { border-bottom: none; }
  .card-table td::before { content: ''; color: var(--muted); font-size: 12px; font-weight: 600; text-align: left; flex: none; }

  /* Celda de acciones (Nuevo cobro/Ficha/Editar/Eliminar…): ancho completo,
     sin etiqueta, los botones libres para envolver línea. */
  .card-table td:has(.crm-actions), .card-table td:has(.row-actions) {
    display: block;
    text-align: left;
    border-bottom: none;
    padding-top: 10px;
  }
  .card-table td:has(.crm-actions)::before, .card-table td:has(.row-actions)::before { content: none; }
  .card-table .crm-actions, .card-table .row-actions { flex-wrap: wrap; justify-content: flex-start; }

  /* Checkbox de selección de Tickets: flota arriba a la derecha de la tarjeta. */
  .card-table td:has(> input.row-select) {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 0;
    border: none;
  }
  .card-table td:has(> input.row-select)::before { content: none; }

  #crm-clients-table td:first-child { font-size: 15px; font-weight: 700; color: var(--text); justify-content: flex-start; padding-top: 12px; }
  #crm-clients-table td:nth-child(2)::before { content: "Teléfono"; }
  #crm-clients-table td:nth-child(3)::before { content: "Email"; }
  #crm-clients-table td:nth-child(4)::before { content: "Estado"; }
  #crm-clients-table td:nth-child(5)::before { content: "Cuota"; }
  #crm-clients-table td:nth-child(6)::before { content: "Total facturado"; }
  #crm-clients-table td:nth-child(7)::before { content: "Cobros"; }
  #crm-clients-table td:nth-child(8)::before { content: "Último cobro"; }

  #cuotas-table td:first-child, #impagos-table td:first-child { font-size: 15px; font-weight: 700; color: var(--text); justify-content: flex-start; padding-top: 12px; }
  #cuotas-table td:nth-child(2)::before { content: "Concepto"; }
  #cuotas-table td:nth-child(3)::before { content: "Mes"; }
  #cuotas-table td:nth-child(4)::before { content: "Importe"; }
  #cuotas-table td:nth-child(5)::before { content: "Estado"; }
  #cuotas-table td:nth-child(6)::before { content: "Método"; }
  #impagos-table td:nth-child(2)::before { content: "Meses pendientes"; }
  #impagos-table td:nth-child(3)::before { content: "Desde"; }
  #impagos-table td:nth-child(4)::before { content: "Hasta"; }
  #impagos-table td:nth-child(5)::before { content: "Total pendiente"; }

  #crm-services-table td:first-child { font-size: 15px; font-weight: 700; color: var(--text); justify-content: flex-start; padding-top: 12px; }
  #crm-services-table td:nth-child(2)::before { content: "Categoría"; }
  #crm-services-table td:nth-child(3)::before { content: "Precio"; }
  #crm-services-table td:nth-child(4)::before { content: "Activo"; }

  #eventos-table td:nth-child(2) { order: -1; font-size: 15px; font-weight: 700; color: var(--text); justify-content: flex-start; padding-top: 12px; }
  #eventos-table td:nth-child(1)::before { content: "Fecha"; }
  #eventos-table td:nth-child(3)::before { content: "Descripción"; }
  #eventos-table td:nth-child(4)::before { content: "Precio cobrado"; }

  #pending-cobros-table td:nth-child(2) { order: -1; font-size: 15px; font-weight: 700; color: var(--text); justify-content: flex-start; padding-top: 12px; }
  #pending-cobros-table td:nth-child(1)::before { content: "Fecha"; }
  #pending-cobros-table td:nth-child(3)::before { content: "Conceptos"; }
  #pending-cobros-table td:nth-child(4)::before { content: "Importe"; }

  #tickets-table td:nth-child(5) { order: -1; font-size: 15px; font-weight: 700; color: var(--text); justify-content: flex-start; padding-top: 12px; }
  #tickets-table td:nth-child(2)::before { content: "Fecha"; }
  #tickets-table td:nth-child(3)::before { content: "Mes"; }
  #tickets-table td:nth-child(4)::before { content: "Bill No"; }
  #tickets-table td:nth-child(6) { display: block; text-align: left; }
  #tickets-table td:nth-child(6)::before { content: "Conceptos"; display: block; margin-bottom: 4px; }
  #tickets-table td:nth-child(7) { font-weight: 700; font-size: 15px; }
  #tickets-table td:nth-child(7)::before { content: "Total"; }
  #tickets-table td:nth-child(8)::before { content: "Revisar"; }

  #bibelo-clients-table td:first-child, #bibelo-clients-table td:nth-child(2) {
    font-size: 15px; font-weight: 700; color: var(--text); justify-content: flex-start; padding-top: 12px; border-bottom: none;
  }
  #bibelo-clients-table td:nth-child(2) { padding-top: 0; }
  #bibelo-clients-table td:nth-child(3)::before { content: "Teléfono"; }
  #bibelo-clients-table td:nth-child(4)::before { content: "Cuota"; }
  #bibelo-clients-table td:nth-child(5)::before { content: "Total facturado"; }
  #bibelo-clients-table td:nth-child(6)::before { content: "Cobros"; }
  #bibelo-clients-table td:nth-child(7)::before { content: "Último cobro"; }

  #bibelo-catalog-table td:first-child { font-size: 15px; font-weight: 700; color: var(--text); justify-content: flex-start; padding-top: 12px; }
  #bibelo-catalog-table td:nth-child(2)::before { content: "Importe"; }
  #bibelo-catalog-table td:nth-child(3)::before { content: "Activa"; }

  #bibelo-cuotas-table td:first-child, #bibelo-impagos-table td:first-child {
    font-size: 15px; font-weight: 700; color: var(--text); justify-content: flex-start; padding-top: 12px;
  }
  #bibelo-cuotas-table td:nth-child(2)::before { content: "Concepto"; }
  #bibelo-cuotas-table td:nth-child(3)::before { content: "Importe"; }
  #bibelo-cuotas-table td:nth-child(4)::before { content: "Estado"; }
  #bibelo-impagos-table td:nth-child(2)::before { content: "Meses pendientes"; }
  #bibelo-impagos-table td:nth-child(3)::before { content: "Desde"; }
  #bibelo-impagos-table td:nth-child(4)::before { content: "Hasta"; }
  #bibelo-impagos-table td:nth-child(5)::before { content: "Total pendiente"; }
}