/* ============================================================
   theme.css — Capa de rediseño UX/UI (Manrope + Material 3)
   Se carga DESPUÉS de variables/components/layout y los evoluciona
   sin romper las clases que ya emiten los módulos JS.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400,0,0&display=swap');

/* ── 1. Tokens afinados (heredan en TODOS los componentes) ───────────────── */
:root {
  /* Marca: verde más profundo y premium, alineado a las maquetas */
  --g:       #146C43;
  --g2:      #1E9E5A;
  --g3:      #0B5132;
  --gl:      rgba(20, 108, 67, 0.10);
  --g-hover: rgba(20, 108, 67, 0.16);

  /* Semánticos con mejor contraste */
  --gold:    #B5740B;
  --gold-l:  rgba(181, 116, 11, 0.12);
  --red:     #C23535;
  --red-l:   rgba(194, 53, 53, 0.10);
  --blue:    #2563EB;
  --blue-l:  rgba(37, 99, 235, 0.10);

  /* Superficies: fondo de app y tinte de superficie según el design system */
  --bg:       #EEF1EA;  /* Fondo app (doc §1.1) */
  --surface:  #FFFFFF;
  --surface2: #F6F8F3;  /* Tinte superficie (doc §1.1) */
  --border:   #DDE4D7;

  /* Texto: secundarios más oscuros para cumplir contraste (WCAG AA) */
  --text:   #18211A;
  --text2:  #3C463B;
  --muted:  #5F6B5C;

  /* Acento vino (flujos de cobro/torneos) — igual al referente */
  --wine:    #6B1D3D;
  --wine-l:  #FBE7EF;
  --red-2:   rgb(138, 2, 2);

  /* Sidebar más legible */
  --sidebar-bg:   #10261A;
  --sidebar-text: rgba(255, 255, 255, 0.72);

  /* Radios alineados al referente (botones/inputs 11px, chips 9px, tarjetas 16px) */
  --radius-sm: 9px;
  --radius-md: 11px;
  --radius-lg: 16px;

  --shadow-card: 0 1px 2px rgba(16,38,26,.06), 0 6px 20px rgba(16,38,26,.05);
  --shadow-pop:  0 12px 32px rgba(16,38,26,.16), 0 4px 12px rgba(16,38,26,.08);
  --shadow-app:  0 24px 60px rgba(0,0,0,.30), 0 4px 16px rgba(0,0,0,.08);

  --ring: 0 0 0 3px rgba(20,108,67,.30);
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(.4,0,.2,1);
}

html, body { font-family: var(--font); }

/* Iconos Material Symbols */
.msym {
  font-family: 'Material Symbols Rounded';
  font-weight: normal; font-style: normal;
  font-size: 20px; line-height: 1;
  display: inline-flex; vertical-align: middle;
  -webkit-font-feature-settings: 'liga'; letter-spacing: normal;
  text-transform: none; white-space: nowrap; word-wrap: normal;
}
.msym.fill { font-variation-settings: 'FILL' 1; }

/* ── 2. Foco accesible global (teclado) ─────────────────────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible,
.nav-item:focus-visible, .attn-seg-btn:focus-visible, .pill:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}
@media (prefers-reduced-motion: no-preference) {
  .btn-primary, .nav-item, .card, .aviso-card, .pay-card, .attn-seg-btn,
  .list-row, .btn-ghost, .btn-danger, .pill { transition: all .18s var(--ease); }
}

/* ── 3. Botones ──────────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--g); border: 1px solid var(--g);
  border-radius: var(--radius-md); box-shadow: 0 1px 2px rgba(11,81,50,.18);
  font-weight: 800;
}
.btn-primary:hover { background: var(--g3); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost { border-radius: var(--radius-md); }
.btn-ghost:hover { background: var(--gl); border-color: var(--g); color: var(--g3); }
.btn-danger { border-radius: var(--radius-md); }
.btn-primary:disabled, .btn-ghost:disabled, .btn-danger:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* Botón con spinner (estado cargando) */
.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.is-loading::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.5); border-top-color: #fff;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 4. Cards y superficies ─────────────────────────────────────────────── */
.card, .pay-card, .settings-card, .aviso-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}
.card:hover { box-shadow: var(--shadow-pop); }

/* ── 5. Badges / pills ──────────────────────────────────────────────────── */
.badge { border-radius: 999px; font-weight: 800; letter-spacing: .02em; padding: 3px 10px; }
.pill, .pagos-filter-pill, .attn-filter-pill { border-radius: 999px; font-weight: 600; }
.pagos-filter-pill.active, .attn-filter-pill.active {
  background: var(--g); color: #fff; border-color: var(--g);
}

/* ── 6. Sidebar / nav ───────────────────────────────────────────────────── */
.sidebar { background: var(--sidebar-bg); }
.nav-item { color: var(--sidebar-text); border-radius: var(--radius-md); font-weight: 600; }
.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-item.active { background: var(--g); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); }

/* ── 7. Tablas: zebra + cabecera + responsive a cards ───────────────────── */
table thead th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 700;
}
table tbody tr { transition: background .12s var(--ease); }
table tbody tr:hover { background: var(--gl); }

@media (max-width: 820px) {
  table.responsive thead { display: none; }
  table.responsive, table.responsive tbody, table.responsive tr, table.responsive td { display: block; width: 100%; }
  table.responsive tr {
    border: 1px solid var(--border); border-radius: var(--radius-md);
    margin-bottom: 10px; padding: 8px 12px; background: var(--surface);
  }
  table.responsive td {
    border: none !important; padding: 6px 0; text-align: right;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
  }
  table.responsive td::before {
    content: attr(data-label); font-weight: 700; color: var(--muted);
    font-size: 11px; text-transform: uppercase; letter-spacing: .05em; text-align: left;
  }
}

/* ── 8. Skeletons (sustituyen "Cargando…") ──────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--surface2) 25%, #e7ece2 37%, var(--surface2) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm); display: block;
}
.skeleton.line { height: 12px; margin: 8px 0; }
.skeleton.row  { height: 44px; margin: 8px 0; border-radius: var(--radius-md); }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ── 9. Toasts ──────────────────────────────────────────────────────────── */
#toast-stack {
  position: fixed; right: 20px; bottom: 20px; z-index: 9999;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.toast {
  pointer-events: auto; min-width: 240px; max-width: 360px;
  background: var(--text); color: #fff; border-radius: var(--radius-md);
  padding: 12px 14px; box-shadow: var(--shadow-pop);
  display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500;
  transform: translateY(12px); opacity: 0; transition: all .25s var(--ease);
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.success { background: var(--g3); }
.toast.error   { background: var(--red); }
.toast .msym { font-size: 20px; }
@media (max-width: 760px) {
  #toast-stack { left: 12px; right: 12px; bottom: 84px; align-items: stretch; }
  .toast { max-width: none; }
}

/* ── 10. Bottom nav móvil ───────────────────────────────────────────────── */
.bottom-nav { display: none; }
@media (max-width: 900px) {
  .sidebar { display: none; }
  .content { margin-left: 0 !important; padding-bottom: 78px; }
  .bottom-nav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 800;
    background: var(--surface); border-top: 1px solid var(--border);
    padding: 6px 4px env(safe-area-inset-bottom); justify-content: space-around;
  }
  .bottom-nav button {
    flex: 1; background: none; border: none; cursor: pointer; color: var(--muted);
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    font-family: var(--font); font-size: 10px; font-weight: 700; padding: 6px 2px;
    border-radius: var(--radius-sm); min-height: 48px;
  }
  .bottom-nav button .msym { font-size: 22px; }
  .bottom-nav button.active { color: var(--g); }
}

/* ── 11. Touch targets / inputs ─────────────────────────────────────────── */
@media (max-width: 760px) {
  .attn-seg-btn, .pill, .btn-mini { min-height: 40px; }
  .btn-primary, .btn-ghost, .btn-danger { min-height: 44px; }
}
.form-input:focus, input:focus, select:focus, textarea:focus { border-color: var(--g); }

/* ── 12. Topbar (móvil) ─────────────────────────────────────────────────── */
/* ── Socios: riel lateral de tipos + contenido ──────────────────────────── */
.socios-layout { display: grid; grid-template-columns: 210px 1fr; gap: 20px; align-items: start; }
.socios-side {
  position: sticky; top: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 12px;
}
.socios-side-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); padding: 4px 8px 10px;
}
.socios-side .socios-role-pills { display: flex; flex-direction: column; gap: 4px; }
.socios-side .socios-role-pill {
  display: flex; align-items: center; gap: 10px;
  text-align: left; width: 100%;
  border: none; background: none; padding: 10px 12px;
  border-radius: var(--radius-md); font-family: var(--font);
  font-size: 14px; font-weight: 600; color: var(--text2); cursor: pointer;
  transition: all .15s var(--ease);
}
.socios-side .socios-role-pill .msym { font-size: 20px; }
.socios-side .socios-role-pill:hover { background: var(--gl); color: var(--g3); }
.socios-side .socios-role-pill.active { background: var(--g); color: #fff; }
.socios-main { min-width: 0; }
.socios-toolbar { margin-bottom: 14px; display: flex; justify-content: flex-end; }

@media (max-width: 860px) {
  .socios-layout { grid-template-columns: 1fr; }
  .socios-side { position: static; padding: 8px; }
  .socios-side-title { display: none; }
  .socios-side .socios-role-pills { flex-direction: row; overflow-x: auto; gap: 6px; }
  .socios-side .socios-role-pill { width: auto; white-space: nowrap; padding: 8px 14px; border-radius: 999px; background: var(--surface2); }
  .socios-side .socios-role-pill.active { background: var(--g); }
  .socios-toolbar { justify-content: stretch; }
  .socios-toolbar .pagos-search-wrap { max-width: none !important; width: 100%; }
}

/* ── Asistencia: pase de lista (tabla) ──────────────────────────────────── */
.attn-controls {
  display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px; margin-bottom: 16px;
}
.attn-controls .attn-field { display: flex; flex-direction: column; gap: 6px; }
.attn-controls .attn-field label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.attn-controls .attn-field .form-input { min-width: 200px; }
.attn-summary { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.attn-sum-item {
  min-width: 80px; text-align: center; background: var(--surface2);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 8px 12px; display: flex; flex-direction: column; gap: 2px;
}
.attn-sum-val { font-size: 22px; font-weight: 800; line-height: 1; color: var(--text); }
.attn-sum-lbl { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.attn-sum-present .attn-sum-val { color: var(--g); }
.attn-sum-absent .attn-sum-val  { color: var(--red); }
.attn-sum-late .attn-sum-val    { color: var(--gold); }

/* Lista de tarjetas + panel de resumen */
.attn-layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
.attn-list-col { min-width: 0; }
.attn-cards { display: flex; flex-direction: column; gap: 10px; }
.attn-member-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 12px 14px; transition: box-shadow .15s var(--ease);
}
.attn-member-card:hover { box-shadow: var(--shadow-card); }
.attn-card-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.attn-card-sub { font-size: 11px; color: var(--muted); }
.attn-member-card .attn-seg-ctrl { display: inline-flex; gap: 6px; flex-wrap: wrap; }

.attn-sidebar { position: sticky; top: 12px; }
.attn-progress { margin: 8px 0 14px; }
.attn-progress-bar { height: 8px; background: var(--surface2); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.attn-progress-bar > div { height: 100%; background: var(--g); border-radius: 999px; transition: width .4s var(--ease); }
.attn-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.attn-stats-grid .attn-sum-item { min-width: 0; }

@media (max-width: 980px) {
  .attn-layout { grid-template-columns: 1fr; }
  .attn-sidebar { position: static; }
}
@media (max-width: 560px) {
  .attn-member-card { align-items: flex-start; }
  .attn-member-card .attn-seg-ctrl { width: 100%; }
  .attn-member-card .attn-seg-btn { flex: 1; }
}

/* Kebab por encima del chrome (topbar 700 / bottom-nav 800) y sin recortes,
   pero SIEMPRE debajo de los modales (backdrop z-index 1000): antes 1200 y se
   encimaba a los diálogos abiertos. */
.kebab-menu.open { z-index: 900 !important; box-shadow: var(--shadow-pop); }
.kebab-item { display: flex; align-items: center; gap: 8px; }

.topbar { display: none; }
@media (max-width: 900px) {
  .topbar {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 700; height: 56px; padding: 0 16px;
    background: var(--surface); border-bottom: 1px solid var(--border);
  }
  .topbar .tb-brand { font-weight: 800; color: var(--g); display: flex; align-items: center; gap: 8px; }
}

/* ── 13. Controles de formulario unificados (selects/inputs/textarea) ──────
   Los selects nativos se veían planos y claros (sobre todo en dark). Misma
   altura/serie que los botones, tokens de tema y flecha propia. */
select,
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
textarea {
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--text);
  background-color: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  outline: none;
  transition: border-color .12s, box-shadow .12s, background-color .12s;
}
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238C988C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  cursor: pointer;
}
select:hover,
textarea:hover,
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):hover {
  border-color: var(--g2);
}
select:focus, textarea:focus,
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):focus {
  border-color: var(--g);
  box-shadow: 0 0 0 3px var(--gl);
  background-color: var(--surface);
}
select option { background: var(--surface); color: var(--text); }
select:disabled, input:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
/* Checkboxes con acento de marca (aplica también a la matriz de permisos) */
input[type=checkbox], input[type=radio] { accent-color: var(--g); width: 16px; height: 16px; cursor: pointer; }