/* Geist servida desde la propia Sede (sin Google Fonts: la IP del visitante no sale a terceros). Licencia OFL en fonts/OFL.txt. */
  @font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/geist-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
  @font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/geist-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

  :root {
    --primary: #042DA3;
    --primary-dark: #021e72;
    --primary-light: #1a4fd8;
    --primary-faint: #eef3ff;
    --accent: #8A5A00;
    --success: #1B7A43;
    --success-light: #E3F2E8;
    --danger: #B3261E;
    --danger-light: #FBE9E7;
    --text: #1B2430;
    --text-muted: #4F5B6B;
    --border: #D3DAE3;
    --bg: #F2F4F7;
    --card: #ffffff;
    --shadow-sm: 0 1px 2px rgba(16,32,56,0.06);
    --shadow: 0 2px 6px rgba(16,32,56,0.08);
    --shadow-lg: 0 12px 32px rgba(16,32,56,0.18);
    --radius: 6px;
    --radius-sm: 4px;
    --transition: 0.18s cubic-bezier(0.16,1,0.3,1);
    --font: 'Geist', 'Segoe UI', Arial, sans-serif;
    /* Modo oscuro: tokens con el valor claro de siempre, redefinidos en html.tema-oscuro */
    --border-control: #8C99AA;
    --on-primary: #fff;
    --on-solid: #fff;
    --on-band: #fff;
    --header-bg: #fff;
    --header-rule: var(--primary);
    --warning-light: #fef3c7;
    --hero: var(--primary);
    --barra-fija: rgba(255,255,255,.97);
    --aviso-oscuro: rgba(15,23,42,0.96);
    --info-text: var(--primary-dark);
  }
  /* Paleta oscura (solo dentro de la zona de socios y del panel; ver web/js/tema.js) */
  html.tema-oscuro {
    color-scheme: dark;
    --bg: #0F141B;
    --card: #18202B;
    --border: #2C3747;
    --border-control: #5F6F86;
    --text: #E6EBF2;
    --text-muted: #A3AEBD;
    --primary: #8FB0FF;
    --primary-light: #A9C1FF;
    --primary-faint: #16223A;
    --primary-dark: #021e72;
    --on-primary: #0B1530;
    --on-solid: #fff;
    --on-band: #fff;
    --header-bg: #18202B;
    --header-rule: #8FB0FF;
    --success: #5BD08A;
    --success-light: #10291B;
    --danger: #FF8A80;
    --danger-light: #3A1715;
    --accent: #F0B54A;
    --warning-light: #33260A;
    --hero: #1C3A8F;
    --barra-fija: rgba(24,32,43,.97);
    --aviso-oscuro: rgba(38,48,64,0.97);
    --info-text: #C3D3FF;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow: 0 2px 6px rgba(0,0,0,0.45);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.6);
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: var(--font);
    color: var(--text);
    font-size: 1rem;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    background: var(--bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0 40px;
  }

  #app-container {
    width: 100%;
    max-width: 500px;
    padding: 0;
    position: relative;
    overflow-x: hidden;
  }
  html, body { overflow-x: hidden; max-width: 100%; }
  html { background: var(--card); }
  .sk-line { background: linear-gradient(90deg,var(--fondo-eef2fb) 25%,var(--fondo-e2e8f5) 37%,var(--fondo-eef2fb) 63%); background-size: 400% 100%; border-radius: var(--radius); animation: sk 1.2s ease-in-out infinite; }
  @keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
  /* Tarjeta de aviso centrada verticalmente; si no cabe, la columna se desplaza */
  ._ann-ov > div { margin: auto 0; }

  /* Barra de identidad institucional: Club (izq.) · Sede (der.) sobre filete azul */
  button, input, select, textarea { font-family: inherit; }
  .app-header {
    width: 100%;
    background: var(--header-bg);
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 3px solid var(--header-rule);
    padding-top: env(safe-area-inset-top);
  }
  .id-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 60px; padding: 0 16px; max-width: 500px; margin: 0 auto; }
  @media (min-width: 700px) { .id-bar { max-width: 1100px; height: 72px; padding: 0 28px; } .id-bar .id-club { height: 56px; } .id-bar .id-sede { height: 34px; } }
  .id-club { height: 46px; width: auto; display: block; }
  .id-sede { height: 30px; width: auto; max-width: 62%; object-fit: contain; display: block; }

  .progress-bar-wrap { background: rgba(255,255,255,0.18); height: 3px; margin-top: 12px; border-radius: 2px; overflow: hidden; display: none; } /* color-fijo: igual en claro y oscuro */
  .progress-bar-wrap.visible { display: block; }
  .progress-bar-fill { height: 100%; background: rgba(255,255,255,0.9); border-radius: 2px; transition: width 0.4s cubic-bezier(0.4,0,0.2,1); } /* color-fijo: igual en claro y oscuro */

  .step-indicator { display: none; justify-content: center; align-items: center; gap: 8px; padding: 14px 24px 4px; background: var(--card); border-bottom: 1px solid var(--border); }
  .step-indicator.visible { display: flex; }
  .step-dot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; background: var(--border); color: var(--text-muted); transition: var(--transition); flex-shrink: 0; }
  .step-dot.active { background: var(--primary); color: var(--on-primary); box-shadow: 0 0 0 3px var(--velo-18); }
  .step-dot.done { background: var(--fondo-1b7a43); color: var(--on-solid); }
  .step-dot.done::after { content: '✓'; font-size: 0.8rem; }
  .step-dot.done .step-num { display: none; }
  .step-line { flex: 1; height: 2px; max-width: 40px; background: var(--border); border-radius: 2px; transition: background 0.3s; }
  .step-line.done { background: var(--success); }

  .card { background: var(--card); padding: 22px 20px 26px; margin: 0; animation: fadeIn 0.22s ease-out both; }
  @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

  .title { font-family: var(--font); color: var(--text); font-size: 1.5rem; font-weight: 700; margin-bottom: 6px; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
  .title::after { content: ''; display: block; width: 40px; height: 3px; background: var(--primary); margin-top: 10px; }
  .title[style*="margin:0"]::after, .title[style*="margin: 0"]::after { display: none; }
  /* Títulos con icono (flex): la rayita va debajo, nunca al lado */
  .title[style*="display:flex"], .title[style*="display: flex"] { flex-wrap: wrap; }
  .title[style*="display:flex"]::after, .title[style*="display: flex"]::after { flex-basis: 100%; margin-top: 4px; background: linear-gradient(var(--primary), var(--primary)) left / 40px 100% no-repeat; }
  .subtitle { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 20px; line-height: 1.5; }
  .section-title { font-size: 1rem; font-weight: 700; color: var(--text); margin: 26px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }

  .form-group { margin-bottom: 16px; }
  .form-group.full-width { grid-column: 1 / -1; }

  label { display: block; font-size: 0.9rem; font-weight: 600; color: var(--text); margin-bottom: 6px; }

  input:not([type]), input[type="text"], input[type="password"], input[type="email"], input[type="number"],
  input[type="date"], input[type="datetime-local"], input[type="time"], input[type="url"], input[type="tel"], input[type="search"], select, textarea {
    width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border-control); border-radius: var(--radius-sm);
    background: var(--card); font-family: var(--font); font-size: 16px;
    color: var(--text); transition: var(--transition); appearance: none;
  }
  textarea { line-height: 1.5; resize: vertical; min-height: 52px; }
  input:focus, select:focus, textarea:focus { border-color: var(--primary); background: var(--card); outline: 2px solid var(--primary-light); outline-offset: 1px; box-shadow: none; }
  input:disabled, select:disabled { background: var(--fondo-eef1f5); color: var(--text-muted); cursor: default; }
  :focus-visible { outline: 2px solid var(--primary-light); outline-offset: 2px; }
  a { color: var(--primary-light); }
  select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23042DA3' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; } /* color-fijo: flecha en claro */
  html.tema-oscuro select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238FB0FF' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; } /* color-fijo: flecha en oscuro */

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border: 1px solid transparent; border-radius: var(--radius-sm); font-family: var(--font); font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: background-color var(--transition), border-color var(--transition), color var(--transition); text-decoration: none; white-space: nowrap; }
  .btn-block { display: flex; width: 100%; margin-top: 12px; }
  .btn-primary { background: var(--primary); color: var(--on-primary); }
  .btn-primary:hover:not(:disabled) { background: var(--primary-dark); }
  .btn-primary:active:not(:disabled) { background: var(--fondo-01165a); }
  /* En oscuro el botón principal es azul claro con texto oscuro: al pasar o pulsar, más claro aún */
  html.tema-oscuro .btn-primary:hover:not(:disabled), html.tema-oscuro .btn-primary:active:not(:disabled) { background: var(--primary-light); }
  .btn-secondary { background: var(--card); color: var(--primary); border-color: var(--primary); }
  .btn-secondary:hover:not(:disabled) { background: var(--primary-faint); }
  .btn-danger { background: var(--card); color: var(--danger); border-color: var(--danger); }
  .btn-danger:hover:not(:disabled) { background: var(--danger-light); }
  .btn-success { background: var(--fondo-1b7a43); color: var(--on-solid); }
  .btn-success:hover:not(:disabled) { background: var(--fondo-146236); }
  .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

  .btn-row { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
  .btn-row .btn { flex: 1; min-width: 100px; }
  /* Los botones de ancho completo (block) o de acción larga ajustan el texto en
     varias líneas en lugar de desbordar y provocar scroll horizontal. */
  .btn-block { white-space: normal; }

  .message-box { padding: 12px 14px; border-radius: var(--radius-sm); margin-bottom: 14px; font-size: 0.95rem; border: 1px solid; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; animation: fadeIn 0.2s ease-out; }
  .error-box   { background: var(--danger-light); color: var(--texto-8c1d18); border-color: var(--borde-e6b0aa); }
  .success-box { background: var(--success-light); color: var(--texto-145a32); border-color: var(--borde-a9d3b7); }
  .info-box    { background: var(--primary-faint); color: var(--info-text); border-color: var(--borde-b9cce2); }

  /* ── Modal de carga institucional (global y trámites) ── */
  .loading-overlay, .sede-carga { position: fixed; inset: 0; background: rgba(4,20,70,0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 9999; padding: 24px; } /* color-fijo: igual en claro y oscuro */
  .sede-carga { display: flex; z-index: 3200; }
  .carga-box { background: var(--card); border-radius: var(--radius); width: 100%; max-width: 340px; overflow: hidden; box-shadow: var(--shadow-lg); text-align: center; animation: cargaIn .22s cubic-bezier(.16,1,.3,1) both; }
  @keyframes cargaIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
  .carga-logos { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 12px; border-bottom: 3px solid var(--header-rule); }
  /* Modo oscuro: logos en versión clara (barra de identidad y pantallas de carga) */
  html.tema-oscuro .id-club { content: url(../icons/logo-club-sm-claro.png); }
  html.tema-oscuro .id-sede { content: url(../icons/logo-sede-claro.png); }
  .carga-logos .id-club { height: 44px; }
  .carga-logos .id-sede { height: 26px; }
  .carga-body { padding: 26px 22px 24px; }
  .loading-spinner, .tram-spin { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--borde-dce3ec); border-top-color: var(--primary); margin: 0 auto; animation: spin 0.8s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .loading-text, .carga-titulo { font-weight: 700; color: var(--text); font-size: 1.05rem; margin-top: 16px; }
  .carga-msg-wrap { height: 3em; display: flex; align-items: center; justify-content: center; margin-top: 4px; overflow: hidden; }
  .carga-msg { font-size: 0.92rem; color: var(--text-muted); line-height: 1.4; opacity: 0; transition: opacity 350ms ease; }
  .carga-msg.on { opacity: 1; }
  .carga-pie { font-size: 0.75rem; color: var(--text-muted); background: var(--bg); border-top: 1px solid var(--border); padding: 8px 12px; }
  /* Carga dentro de una lista o bloque */
  .carga-inline { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--text-muted); font-size: 0.92rem; padding: 18px 12px; text-align: center; }
  .carga-inline::before { content: ''; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--borde-dce3ec); border-top-color: var(--primary); animation: spin 0.8s linear infinite; flex-shrink: 0; }

  .reservation-item { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 15px; margin-bottom: 10px; cursor: pointer; transition: var(--transition); background: var(--card); }
  .reservation-item:hover { background: var(--primary-faint); }
  .reservation-item.future .res-date::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--success); margin-right: 8px; vertical-align: middle; }
  .reservation-item.past .res-date { color: var(--text-muted); }
  .res-date { font-size: 0.92rem; font-weight: 700; color: var(--primary); margin-bottom: 3px; }
  .res-meta { font-size: 0.82rem; color: var(--text-muted); display: flex; gap: 8px; flex-wrap: wrap; }
  .res-meta span { display: flex; align-items: center; gap: 3px; }

  .badge { display: inline-block; padding: 2px 9px; border-radius: var(--radius); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
  .badge-pending { background: var(--fondo-fef3c7); color: var(--texto-92400e); }
  .badge-ok      { background: var(--success-light); color: var(--texto-065f46); }
  .badge-danger  { background: var(--danger-light); color: var(--texto-991b1b); }
  .badge-muted   { background: var(--fondo-f1f5f9); color: var(--text-muted); }

  .summary-card { background: var(--primary-faint); border: 1px solid var(--velo-12); border-radius: var(--radius-sm); padding: 16px; margin: 14px 0; }
  .summary-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid var(--velo-8); font-size: 0.88rem; gap: 12px; }
  .summary-row:last-child { border-bottom: none; }
  .summary-row .label { color: var(--text-muted); font-weight: 500; flex-shrink: 1; min-width: 0; overflow-wrap: anywhere; } /* una etiqueta larga se parte en líneas en vez de salirse */
  .summary-row .value { color: var(--text); font-weight: 600; text-align: right; }

  .detail-block { background: var(--fondo-fafbff); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 15px; margin-bottom: 14px; }
  .detail-row { display: flex; gap: 10px; padding: 5px 0; font-size: 0.88rem; border-bottom: 1px solid var(--border); }
  .detail-row:last-child { border-bottom: none; }
  .detail-label { color: var(--text-muted); font-weight: 500; min-width: 110px; flex-shrink: 0; }
  .detail-value { color: var(--text); font-weight: 600; }

  .success-icon { width: 64px; height: 64px; background: var(--success-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 16px; animation: popIn 0.3s cubic-bezier(0.16,1,0.3,1) both; }
  @keyframes popIn { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }

  .policy-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px; background: var(--primary-faint); border-radius: var(--radius-sm); border: 1px solid var(--velo-12); margin: 14px 0; }
  .policy-row input[type="checkbox"] { width: 17px; height: 17px; margin-top: 2px; flex-shrink: 0; accent-color: var(--primary); cursor: pointer; }
  .policy-row label { font-size: 0.84rem; font-weight: 500; color: var(--text); text-transform: none; letter-spacing: 0; cursor: pointer; }

  .menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 12px; }
  .menu-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: var(--transition); font-family: 'Geist', Arial, sans-serif; font-size: 0.88rem; font-weight: 600; color: var(--primary); text-align: center; box-shadow: var(--shadow-sm); }
  .menu-btn:hover { background: var(--primary-faint); border-color: var(--primary); box-shadow: var(--shadow); }
  .menu-btn .menu-icon { font-size: 1.6rem; }
  .menu-btn.logout { grid-column: 1 / -1; flex-direction: row; padding: 12px 16px; color: var(--text-muted); background: var(--fondo-f8fafc); justify-content: center; }
  .menu-btn.logout:hover { background: var(--danger-light); color: var(--texto-991b1b); border-color: rgba(239,68,68,0.2); } /* color-fijo: igual en claro y oscuro */

  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
  /* Las fechas tienen un ancho mínimo propio: sin esto desbordan la columna y la página */
  .form-grid > *, .form-group { min-width: 0; }
  input[type="date"], input[type="datetime-local"], input[type="time"] { min-width: 0; max-width: 100%; }
  .carga-box .form-grid { grid-template-columns: 1fr; }

  hr.divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; }

  @media (max-width: 400px) {
    .form-grid { grid-template-columns: 1fr; }
    .card { padding: 18px 16px 22px; }
  }

  /* Espacio para la barra de tareas en segundo plano */
  #main-content { padding-bottom: 8px; }

  /* ── Dashboard v2 (rediseño reversible: revertir commit para volver al menu-grid) ── */
  .socio-carnet { display: block; width: 100%; text-align: left; cursor: pointer; border: none; border-radius: var(--radius); padding: 18px 20px 16px; color: var(--on-band); position: relative; overflow: hidden; background: var(--hero); box-shadow: var(--shadow); font-family: 'Geist', Arial, sans-serif; transition: var(--transition); }
  .socio-carnet:hover { box-shadow: 0 14px 34px var(--velo-34); }
  .socio-carnet .carnet-label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.78); } /* color-fijo: igual en claro y oscuro */
  .socio-carnet .carnet-nombre { font-size: 1.2rem; font-weight: 800; letter-spacing: 0.01em; text-transform: uppercase; line-height: 1.25; margin-bottom: 6px; }
  .socio-carnet .carnet-num { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; color: rgba(255,255,255,0.92); } /* color-fijo: igual en claro y oscuro */
  .socio-carnet .carnet-numero { font-size: 1.05rem; font-weight: 800; }
  .socio-carnet .carnet-ver { display: inline-flex; align-items: center; gap: 4px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.9); } /* color-fijo: igual en claro y oscuro */

  .tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: var(--transition); font-family: 'Geist', Arial, sans-serif; text-align: left; box-shadow: var(--shadow-sm); }
  .tile:hover { border-color: var(--primary); background: var(--primary-faint); box-shadow: var(--shadow); }
  .tile .tile-icon { width: 38px; height: 38px; border-radius: var(--radius); background: var(--primary-faint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: var(--transition); }
  .tile:hover .tile-icon { background: var(--card); }
  .tile .tile-text { display: flex; flex-direction: column; gap: 2px; }
  .tile .tile-name { font-size: 0.86rem; font-weight: 700; color: var(--primary); line-height: 1.25; }
  .tile .tile-desc { font-size: 0.7rem; font-weight: 500; color: var(--text-muted); line-height: 1.35; }
  .tile-wide { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .tile .tile-badge { position: absolute; top: 10px; right: 10px; background: var(--primary); color: var(--on-primary); border-radius: 50%; width: 20px; height: 20px; font-size: 0.7rem; font-weight: 800; display: none; align-items: center; justify-content: center; line-height: 1; }

  .svc-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--card); box-shadow: var(--shadow-sm); }
  .svc-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; background: none; border: none; border-bottom: 1px solid var(--border); cursor: pointer; font-family: 'Geist', Arial, sans-serif; font-size: 0.85rem; font-weight: 600; color: var(--text); text-align: left; transition: var(--transition); }
  .svc-list .svc-row:last-child { border-bottom: none; }
  .svc-row:hover { background: var(--primary-faint); }
  .svc-row .svc-chev { margin-left: auto; color: var(--text-muted); display: flex; flex-shrink: 0; }
  .svc-logout { border: 1px solid transparent; border-radius: var(--radius-sm); justify-content: center; color: var(--text-muted); margin-top: 16px; background: var(--fondo-f8fafc); }
  .svc-logout:hover { background: var(--danger-light); color: var(--texto-991b1b); border-color: rgba(239,68,68,0.2); } /* color-fijo: igual en claro y oscuro */

  /* Acción secundaria de avisos/modales: texto pequeño gris subrayado */
  .link-dismiss { background: none; border: none; color: var(--text-muted); font-size: 0.8rem; font-weight: 600; cursor: pointer; text-decoration: underline; font-family: 'Geist', Arial, sans-serif; padding: 6px; display: inline-flex; align-items: center; gap: 6px; }
  .link-dismiss:hover { color: var(--text); }

  /* ── Login v2 ── */
  .login-hero { border-radius: var(--radius); padding: 20px; margin-bottom: 20px; color: var(--on-band); background: var(--hero); position: relative; overflow: hidden; box-shadow: var(--shadow); }
  .login-hero-club { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.01em; }
  .login-hero-sub { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.75); margin-top: 3px; } /* color-fijo: igual en claro y oscuro */
  .find-num-cta { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 8px; padding: 10px 12px; background: var(--primary-faint); border: 1px dashed var(--velo-35); border-radius: var(--radius-sm); color: var(--primary); font-family: 'Geist', Arial, sans-serif; font-size: 0.8rem; font-weight: 600; cursor: pointer; text-align: left; transition: var(--transition); }
  .find-num-cta:hover { background: var(--fondo-e0e8ff); border-style: solid; }
  .find-num-cta strong { font-weight: 800; text-decoration: underline; }
  .login-foot { margin-top: 16px; text-align: center; font-size: 0.75rem; color: var(--text-muted); line-height: 1.5; }

  @media (prefers-reduced-motion: reduce) {
    .socio-carnet, .tile, .svc-row, .socio-carnet:hover, .tile:hover { transition: none; transform: none; }
  }

  /* Banner informativo de la Sede (MENSAJE_SEDE), arriba del dashboard */
  .sede-banner {
    display: flex; align-items: flex-start; gap: 10px;
    background: var(--hero);
    color: var(--on-band); border-radius: var(--radius); padding: 13px 16px; margin-bottom: 14px;
    font-size: 0.9rem; line-height: 1.45; font-weight: 600;
    box-shadow: var(--shadow);
  }
  .sede-banner svg { flex-shrink: 0; margin-top: 1px; opacity: 0.95; }

  /* Aviso "Activa tu passkey" — cuadrado y pegado arriba, solo si no tiene passkey */
  .pk-activate-bar {
    display: flex; align-items: center; gap: 12px; width: 100%;
    background: var(--fondo-1b7a43);
    color: var(--on-solid); border: none; border-radius: 0; margin: 0;
    padding: 13px 20px; cursor: pointer; text-align: left; font-family: inherit;
    box-shadow: 0 2px 10px rgba(5,150,105,0.28); /* color-fijo: igual en claro y oscuro */
  }
  .pk-activate-bar:hover { filter: brightness(1.05); }
  .pk-activate-bar:active { filter: brightness(0.96); }
  .pk-activate-ico { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255,255,255,0.16); border-radius: var(--radius); } /* color-fijo: igual en claro y oscuro */
  .pk-activate-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
  .pk-activate-txt strong { font-size: 0.95rem; font-weight: 800; letter-spacing: 0.01em; }
  .pk-activate-txt span { font-size: 0.76rem; opacity: 0.9; font-weight: 500; }
  .pk-activate-cta { flex-shrink: 0; background: var(--card); color: var(--texto-047857); font-weight: 800; font-size: 0.82rem; padding: 8px 16px; border-radius: 999px; white-space: nowrap; }

  /* Cobros (KPIs) */
  .cob-kpi { background: var(--fondo-f8fafc); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 6px; text-align: center; min-width: 0; overflow: hidden; }
  .cob-kpi-n { font-size: 1.02rem; font-weight: 900; color: var(--primary); line-height: 1.15; overflow-wrap: anywhere; }
  .cob-kpi-l { font-size: 0.7rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; margin-top: 3px; }

  /* Ficha de socio: pestañas */
  .ficha-tabs { display: flex; gap: 4px; background: var(--fondo-f1f5f9); border-radius: var(--radius); padding: 4px; margin-bottom: 4px; overflow-x: auto; }
  .ficha-tab { flex: 1; min-width: max-content; border: none; background: none; padding: 9px 12px; border-radius: 8px; font-weight: 700; font-size: 0.82rem; color: var(--text-muted); cursor: pointer; font-family: inherit; white-space: nowrap; }
  .ficha-tab.on { background: var(--card); color: var(--primary); box-shadow: 0 1px 3px var(--velo-12); }

  /* Panel de Junta: acceso rápido */
  .dash { animation: fadeSlideUp 0.3s ease both; }
  .dash-head { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; }
  .dash-logo { width: 58px; height: 58px; border-radius: var(--radius); overflow: hidden; flex-shrink: 0; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; background: var(--card); }
  .dash-logo img { width: 100%; height: 44px; object-fit: cover; }
  .dash-club { font-size: 1.02rem; font-weight: 800; color: var(--texto-0f172a); line-height: 1.2; }
  .dash-meta { font-size: 0.82rem; color: var(--texto-16a34a); font-weight: 700; display: flex; align-items: center; gap: 6px; margin-top: 3px; }
  .dash-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fondo-16a34a); box-shadow: 0 0 0 3px rgba(22,163,74,.2); } /* color-fijo: igual en claro y oscuro */
  .dash-period { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
  .dash-period-l { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-94a3b8); flex-shrink: 0; }
  .dash-period select { width: auto; flex: 1; }
  .dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 14px; }
  .dk { background: var(--fondo-f8faff); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 15px 16px; position: relative; overflow: hidden; }
  .dk-ic { position: absolute; top: 13px; right: 13px; opacity: .5; }
  .dk-n { font-size: 1.9rem; font-weight: 900; line-height: 1; letter-spacing: -.02em; }
  .dk-l { font-size: 0.75rem; font-weight: 600; color: var(--texto-64748b); margin-top: 7px; line-height: 1.3; }
  .qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 16px; }
  .qa-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; cursor: pointer; font-family: inherit; text-align: left; transition: .14s; }
  .qa-tile:hover { border-color: var(--primary); box-shadow: 0 4px 14px var(--velo-8); }
  .qa-tile.qa-wide { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .qa-ic { width: 40px; height: 40px; border-radius: var(--radius); background: var(--primary-faint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .qa-txt { display: flex; flex-direction: column; gap: 1px; }
  .qa-lbl { font-weight: 800; font-size: 0.92rem; color: var(--texto-0f172a); letter-spacing: -.01em; }
  .qa-sub { font-weight: 500; font-size: 0.72rem; line-height: 1.25; color: var(--text-muted); }
  /* Panel de Junta: sección Asambleas plegable */
  .asm-details { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; background: var(--card); }
  .asm-details > summary { list-style: none; cursor: pointer; padding: 13px 15px; font-weight: 800; color: var(--primary); font-size: 0.95rem; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .asm-details > summary::-webkit-details-marker { display: none; }
  .asm-details[open] > summary { border-bottom: 1px solid var(--border); }
  .asm-details .svc-list { padding: 6px 10px 10px; }
  .asm-hint { font-weight: 500; font-size: 0.72rem; color: var(--text-muted); }
  .asm-arrow { display: flex; transition: transform .18s; flex-shrink: 0; }
  .asm-details[open] .asm-arrow { transform: rotate(90deg); }
  .section-title.muted { color: var(--texto-94a3b8); }

  /* ── App del socio: barra inferior ── */
  body.has-socio-nav { padding-bottom: 0; background: var(--card); }
  body.has-socio-nav #app-container { background: var(--card); min-height: 100vh; }
  body.has-socio-nav #main-content { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .ini-wrap { padding: 16px 16px 4px; background: var(--card); animation: fadeSlideUp 0.3s ease both; }
  .perf-tile { display: flex; align-items: center; gap: 14px; width: 100%; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 16px; cursor: pointer; font-family: inherit; text-align: left; margin-bottom: 10px; transition: .14s; }
  .perf-grupo { margin: 20px 2px 8px; font-size: 0.72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); }
  .perf-tile:active { background: var(--fondo-f6f9ff); transform: scale(.99); }
  .perf-ic { width: 46px; height: 46px; border-radius: var(--radius); background: var(--primary-faint); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .perf-tx { flex: 1; min-width: 0; }
  .perf-t { display: block; font-weight: 800; font-size: 0.98rem; color: var(--texto-0f172a); }
  .perf-d { display: block; font-size: 0.77rem; color: var(--text-muted); margin-top: 2px; line-height: 1.3; }
  .perf-ch { color: var(--texto-c3cfe6); flex-shrink: 0; display: flex; }
  body.has-junta-nav { padding-bottom: 0; }
  body.has-junta-nav #main-content { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  #junta-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 900; background: var(--card); border-top: 1px solid var(--border); }
  #junta-nav .sn-inner { max-width: 480px; margin: 0 auto; display: flex; padding: 6px 2px calc(6px + env(safe-area-inset-bottom)); }
  #junta-nav .sn-item { font-size: 0.6rem; padding-left: 1px; padding-right: 1px; }
  .sn-brand { display: none; }
  #junta-nav .sn-desk { display: none; }
  /* ── Versión ordenador de la Junta: barra lateral + contenido ancho ── */
  @media (min-width: 900px) {
    body.has-junta-nav #junta-nav { top: 0; bottom: 0; left: 0; right: auto; width: 262px; border-top: none; border-right: 1px solid var(--border); box-shadow: 2px 0 12px var(--velo-4); }
    body.has-junta-nav #junta-nav .sn-inner { flex-direction: column; align-items: stretch; max-width: none; margin: 0; height: 100%; padding: 14px 12px; gap: 1px; }
    body.has-junta-nav #junta-nav .sn-brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 12px; cursor: pointer; }
    body.has-junta-nav #junta-nav .sn-brand img { width: 34px; height: 34px; border-radius: var(--radius-sm); }
    body.has-junta-nav #junta-nav .sn-brand span { font-weight: 800; color: var(--primary); font-size: 1.02rem; }
    body.has-junta-nav #junta-nav .sn-item { flex: none; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 7px 14px; line-height: 1.2; border-radius: var(--radius); font-size: 0.9rem; font-weight: 700; color: var(--texto-475569); }
    body.has-junta-nav #junta-nav .sn-item span { font-size: 0.9rem; white-space: nowrap; }
    body.has-junta-nav #junta-nav .sn-item.on { background: var(--primary-faint); color: var(--primary); }
    body.has-junta-nav #junta-nav .sn-item:hover { background: var(--fondo-f5f8ff); }
    body.has-junta-nav #junta-nav .sn-desk { display: flex; }
    body.has-junta-nav #junta-nav .sn-mob { display: none; }
    body.has-junta-nav #junta-nav .sn-inner { overflow-y: auto; }
    body.has-junta-nav #junta-nav .sn-salir { margin-top: auto; color: var(--danger); border-top: 1px solid var(--border); border-radius: 0; padding-top: 10px; }
    body.has-junta-nav #junta-nav .sn-salir:hover { background: var(--danger-light); }
    body.has-junta-nav { align-items: stretch; }
    body.has-junta-nav #app-container { margin-left: 262px; width: auto; max-width: none; min-height: calc(100vh - 75px); background: var(--card); }
    body.has-junta-nav #main-content > .card, body.has-junta-nav #main-content > .dash, body.has-junta-nav #main-content > div { max-width: 1120px; }
    body.has-junta-nav #main-content > .card { padding: 28px 36px 36px; }
    body.has-junta-nav .app-header { padding-left: 262px; }
    body.has-junta-nav #main-content { padding-bottom: 28px; }
    body.has-junta-nav .dash-grid { grid-template-columns: repeat(4, 1fr); }
    body.has-junta-nav #junta-mas .sm-sheet { max-width: 420px; margin-left: 262px; }
  }
  #socio-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 900; background: var(--card); border-top: 1px solid var(--border); }
  #socio-nav .sn-inner { max-width: 480px; margin: 0 auto; display: flex; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .sn-item { flex: 1; background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; color: var(--texto-5b6676); font-family: inherit; font-size: 0.7rem; font-weight: 600; }
  .sn-item span { white-space: nowrap; }
  .sn-item.on { color: var(--primary); }
  .sn-badge { position: absolute; top: 0; right: 50%; transform: translateX(20px); min-width: 16px; height: 16px; padding: 0 4px; background: var(--fondo-dc2626); color: var(--on-solid); border-radius: 999px; font-size: 0.62rem; font-weight: 800; display: flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 0 0 2px var(--card); }
  /* Inicio */
  .ini-hero { background: var(--hero); border-radius: var(--radius); padding: 18px 18px 16px; color: var(--on-band); margin-bottom: 14px; box-shadow: var(--shadow); }
  .ini-top { display: flex; justify-content: space-between; align-items: flex-start; }
  .ini-hello { font-size: 0.85rem; opacity: .8; }
  .ini-name { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
  .ini-logout { background: rgba(255,255,255,.15); border: none; color: var(--on-solid); width: 34px; height: 34px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } /* color-fijo: igual en claro y oscuro */
  .ini-estado { margin-top: 14px; font-size: 0.82rem; display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius); padding: 8px 12px; } /* color-fijo: igual en claro y oscuro */
  .ini-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--fondo-34d399); box-shadow: 0 0 0 3px rgba(52,211,153,.3); flex-shrink: 0; } /* color-fijo: igual en claro y oscuro */
  .ini-socio { width: 100%; margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius); padding: 9px 13px; color: var(--on-solid); font-family: inherit; cursor: pointer; } /* color-fijo: igual en claro y oscuro */
  .ini-socio:active { background: rgba(255,255,255,.2); } /* color-fijo: igual en claro y oscuro */
  .ini-socio-num { font-size: 0.98rem; font-weight: 800; }
  .ini-socio-ver { display: inline-flex; align-items: center; gap: 4px; font-size: 0.68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.9); } /* color-fijo: igual en claro y oscuro */
  /* Recuadro «Evento próximo» del Inicio */
  .iev { width: 100%; display: flex; align-items: stretch; gap: 14px; text-align: left; background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius); padding: 12px 12px 12px 12px; margin-bottom: 14px; box-shadow: var(--shadow-sm); font-family: inherit; color: var(--text); cursor: pointer; transition: box-shadow var(--transition), transform var(--transition); }
  .iev:hover { box-shadow: var(--shadow); }
  .iev:active { transform: scale(.995); }
  .iev:focus-visible { outline: 3px solid var(--primary-light); outline-offset: 2px; }
  .iev-fecha { flex-shrink: 0; width: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--primary-faint); border: 1px solid var(--borde-c9d6f5); border-radius: var(--radius-sm); color: var(--primary); }
  .iev-dia { font-size: 1.55rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
  .iev-mes { margin-top: 3px; font-size: 0.68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
  .iev-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .iev-etq { font-size: 0.66rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--primary); }
  .iev-tit { font-size: 1rem; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
  .iev-meta { font-size: 0.82rem; color: var(--text-muted); }
  .iev-meta::first-letter { text-transform: uppercase; }
  .iev-est { align-self: flex-start; margin-top: 5px; display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--bg); color: var(--text-muted); }
  .iev-ok { background: var(--success-light); color: var(--success); }
  .iev-pend { background: var(--fondo-fff3dc); color: var(--accent); }
  .iev-abierta { background: var(--primary-faint); color: var(--primary); }
  /* «No he sido yo»: bloquear la cuenta desde el correo de seguridad */
  .nhsy { text-align: center; }
  .nhsy-ic { width: 60px; height: 60px; margin: 2px auto 12px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--fondo-fef2f2); color: var(--texto-dc2626); }
  .nhsy-ic-gris { background: var(--bg); color: var(--text-muted); }
  .nhsy-ic-ok { background: var(--primary-faint); color: var(--primary); }
  .nhsy-lista { text-align: left; background: var(--fondo-fff7f7); border: 1px solid var(--borde-fecaca); border-radius: var(--radius-sm); padding: 12px 14px; margin: 16px 0; font-size: 0.86rem; }
  .nhsy-tit { font-weight: 800; color: var(--texto-991b1b); margin-bottom: 4px; }
  .nhsy-lista ul { margin: 0; padding-left: 18px; }
  .nhsy-lista li { margin: 4px 0; }
  .nhsy-btn { background: var(--fondo-dc2626); color: var(--on-solid); border: none; }
  /* Pantalla «Sin conexión» con el carné guardado */
  .sin-red { text-align: center; }
  .sin-red-ic { width: 60px; height: 60px; margin: 2px auto 12px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--primary-faint); color: var(--primary); }
  .sin-red .carnet-btn { margin-top: 16px; text-align: left; }
  .iev-chev { align-self: center; font-size: 1.4rem; color: var(--text-muted); line-height: 1; }
  .ini-ejercicio { margin-top: 9px; font-size: 0.8rem; color: rgba(255,255,255,.82); } /* color-fijo: igual en claro y oscuro */
  .ini-logo { display: flex; align-items: center; justify-content: center; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px; margin-bottom: 14px; overflow: hidden; }
  .ini-logo img { width: 100%; max-width: 360px; height: 104px; object-fit: cover; object-position: center; display: block; }
  .ini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .ini-tile { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; cursor: pointer; font-family: inherit; text-align: left; transition: .14s; }
  .ini-tile:hover { border-color: var(--primary); box-shadow: 0 4px 14px var(--velo-8); }
  .ini-ic { width: 40px; height: 40px; border-radius: var(--radius); background: var(--primary-faint); display: flex; align-items: center; justify-content: center; color: var(--primary); }
  .ini-tn { font-weight: 700; font-size: 0.92rem; color: var(--texto-0f172a); }
  .ini-desc { font-size: 0.74rem; font-weight: 500; line-height: 1.3; color: var(--text-muted); margin-top: -3px; }
  /* Servicios de Inicio: informe de datos destacado y lista del resto */
  .ini-datos { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px 14px; margin-bottom: 10px; background: linear-gradient(135deg, var(--primary-faint) 0%, var(--card) 70%); border: 1.5px solid var(--borde-c9d6fb); border-radius: var(--radius); cursor: pointer; font-family: inherit; color: var(--text); transition: border-color var(--transition), box-shadow var(--transition); }
  .ini-datos:hover { border-color: var(--primary); box-shadow: 0 4px 14px var(--velo-10); }
  .ini-datos:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
  .ini-datos-ic { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; background: var(--primary); color: var(--on-primary); display: flex; align-items: center; justify-content: center; }
  .ini-datos-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .ini-datos-tit { font-weight: 800; font-size: 0.98rem; color: var(--texto-0f172a); }
  .ini-datos-sub { font-size: 0.8rem; line-height: 1.35; color: var(--text-muted); }
  .ini-datos-ver { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 0.74rem; font-weight: 700; color: var(--primary); }
  .ini-datos .svc-chev, .ini-svc .svc-chev { margin-left: auto; color: var(--text-muted); font-size: 1.3rem; }
  .ini-svc { margin-bottom: 8px; }
  .ini-svc .svc-row { text-align: left; color: var(--text); }
  .ini-svc-ic { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; background: var(--primary-faint); color: var(--primary); display: flex; align-items: center; justify-content: center; }
  .ini-svc-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .ini-svc-tit { font-weight: 700; font-size: 0.9rem; color: var(--texto-0f172a); }
  .ini-svc-desc { font-size: 0.76rem; color: var(--text-muted); line-height: 1.3; }
  .cuo-hero { background: var(--hero); border-radius: var(--radius); padding: 18px 18px 16px; color: var(--on-band); margin-bottom: 14px; box-shadow: var(--shadow); }
  .cuo-hero-t { font-size: 1.15rem; font-weight: 800; }
  .cuo-hero-s { font-size: 0.82rem; color: rgba(255,255,255,.82); margin-top: 3px; } /* color-fijo: igual en claro y oscuro */
  .cuo-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
  .cuo-sum-i { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 14px; }
  .cuo-sum-n { font-size: 1.28rem; font-weight: 800; line-height: 1.1; }
  .cuo-sum-l { font-size: 0.72rem; font-weight: 600; color: var(--texto-64748b); margin-top: 2px; }
  .cuo-alert { display: flex; align-items: flex-start; gap: 8px; background: var(--fondo-fef2f2); border: 1px solid var(--borde-fecaca); color: var(--texto-991b1b); border-radius: var(--radius); padding: 10px 12px; font-size: 0.8rem; line-height: 1.4; margin-bottom: 12px; }
  .cuo-alert svg { flex-shrink: 0; margin-top: 1px; }
  .cuo-row { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 15px; margin-bottom: 9px; }
  .cuo-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  .cuo-con { font-weight: 700; font-size: 0.94rem; color: var(--texto-0f172a); }
  .cuo-imp { font-weight: 800; font-size: 1rem; color: var(--primary); flex-shrink: 0; }
  .cuo-row-bot { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
  .cuo-meta { font-size: 0.76rem; color: var(--texto-64748b); }
  .cuo-chip { font-size: 0.7rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; letter-spacing: .02em; }
  .cuo-ok { background: var(--fondo-dcfce7); color: var(--texto-166534); } .cuo-pen { background: var(--fondo-fef3c7); color: var(--texto-92400e); } .cuo-ven { background: var(--fondo-fee2e2); color: var(--texto-991b1b); }
  .cuo-recibo { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; background: var(--primary-faint); color: var(--primary); border: none; border-radius: var(--radius-sm); padding: 7px 12px; font-family: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer; }
  .cuo-recibo:active { background: var(--fondo-dbe6ff); }
  .rt-toolbar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; border: 1px solid var(--border); border-bottom: none; border-radius: 10px 10px 0 0; padding: 6px 8px; background: var(--fondo-f8faff); }
  .rt-btn { min-width: 32px; height: 30px; padding: 0 8px; border: 1px solid var(--border); background: var(--card); border-radius: 7px; cursor: pointer; color: var(--texto-334155); font-family: inherit; font-size: 0.95rem; display: inline-flex; align-items: center; justify-content: center; }
  .rt-btn:active { background: var(--primary-faint); border-color: var(--primary); color: var(--primary); }
  .rt-sep { width: 1px; height: 20px; background: var(--border); margin: 0 3px; }
  .rt-editor { border: 1px solid var(--border); border-radius: 0 0 10px 10px; padding: 12px 14px; min-height: 180px; font-family: inherit; font-size: 1rem; line-height: 1.7; color: #0f172a; background: #fff; caret-color: #0f172a; outline: none; overflow-y: auto; } /* color-fijo: escribe un correo o documento claro (lo que se ve es lo que sale) */
  .rt-editor ul, .rt-editor ol { margin: 4px 0 10px; padding-left: 1.4em; }
  .rt-editor li { margin-bottom: 2px; padding-left: 2px; }
  .rt-editor:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--velo-8); }
  .rt-editor:empty::before { content: 'Escribe aquí el comunicado…'; color: #94a3b8; } /* color-fijo */
  #socio-peek { position: fixed; inset: 0; z-index: 3100; }
  #socio-peek .pk-backdrop { position: absolute; inset: 0; background: var(--velo-45); backdrop-filter: blur(3px); opacity: 0; transition: opacity .24s; }
  #socio-peek.open .pk-backdrop { opacity: 1; }
  .pk-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-width: 500px; margin: 0 auto; background: var(--card); border-radius: 10px 10px 0 0; padding: 10px 20px calc(22px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 40px var(--velo-18); transform: translateY(100%); transition: transform .28s cubic-bezier(.22,1,.36,1); }
  #socio-peek.open .pk-sheet { transform: translateY(0); }
  .pk-grab { width: 40px; height: 4px; border-radius: 3px; background: var(--fondo-d7deec); margin: 0 auto 14px; }
  .pk-head { display: flex; gap: 14px; align-items: center; }
  .pk-avatar { width: 62px; height: 62px; border-radius: var(--radius); overflow: hidden; flex-shrink: 0; background: var(--primary); display: flex; align-items: center; justify-content: center; }
  .pk-name { font-size: 1.1rem; font-weight: 800; color: var(--texto-0f172a); line-height: 1.2; }
  .pk-sub { font-size: 0.82rem; color: var(--text-muted); margin-top: 1px; }
  .pk-etq { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 4px; }
  .pk-chip { display: inline-flex; align-items: center; font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
  .pk-datos { margin: 12px 0 16px; }
  .pk-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--borde-f1f5f9); font-size: 0.86rem; }
  .pk-row .pk-k { color: var(--text-muted); flex-shrink: 0; }
  .pk-row .pk-v { color: var(--texto-0f172a); font-weight: 600; text-align: right; word-break: break-word; }
  .facc { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; overflow: hidden; }
  .facc-h { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--fondo-f8faff); border: none; padding: 13px 15px; cursor: pointer; font-family: inherit; font-size: 0.9rem; font-weight: 800; color: var(--primary); text-align: left; }
  .facc.open .facc-h { background: var(--primary-faint); }
  .facc-x { color: var(--texto-94a3b8); transition: transform .2s; flex-shrink: 0; }
  .facc.open .facc-x { transform: rotate(180deg); }
  .facc-b { padding: 14px 15px; border-top: 1px solid var(--border); }
  .etq-grp { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-94a3b8); margin: 16px 0 6px; }
  .env-count { font-size: 0.85rem; color: var(--texto-334155); margin-top: 10px; padding: 8px 12px; background: var(--fondo-f0fdf4); border: 1px solid var(--borde-bbf7d0); border-radius: var(--radius); }
  .env-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
  .env-tag { font-size: 0.72rem; font-weight: 700; color: var(--primary); background: var(--primary-faint); border: 1px solid var(--borde-d6e2ff); border-radius: 7px; padding: 3px 8px; cursor: pointer; font-family: inherit; }
  .env-tag:active { background: var(--fondo-dbe6ff); }

  /* Acciones de una cuota (Editar · Descargar · Enlace de pago · Eliminar): en el móvil, 2 × 2 */
  .cob-acciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 14px; }
  .cob-acciones .btn { min-width: 0; }

  /* Enlace de una asamblea para los socios (ficha de la convocatoria, Junta) */
  .conv-enlace { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin: 12px 0 14px; background: var(--card); }
  .conv-enlace.nueva { border-color: var(--primary); background: var(--primary-faint); }
  .conv-enlace-t { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--primary); font-size: 0.92rem; }
  .conv-enlace-u { margin-top: 8px; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); font-size: 0.82rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: var(--text); user-select: all; }
  .conv-enlace-b { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .conv-enlace-n { margin: 10px 0 0; font-size: 0.8rem; color: var(--text-muted); line-height: 1.45; }

  /* Orden del día en el formulario de la asamblea */
  .orden-fila { display: grid; grid-template-columns: 22px 1fr 36px 36px 36px; gap: 6px; align-items: start; margin-bottom: 6px; }
  .orden-fila .orden-n { padding-top: 11px; }
  .orden-t { width: 100%; min-height: 44px; resize: none; overflow: hidden; line-height: 1.4; }
  .orden-n { font-weight: 700; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
  .orden-fila .env-bbtn { width: 36px; height: 40px; }
  .orden-fila .env-bbtn:disabled { opacity: .35; cursor: default; }

  /* Visor propio de PDF (documentos de las asambleas) */
  .doc-pags { flex: 1; overflow-y: auto; background: var(--fondo-475569); padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 12px; -webkit-overflow-scrolling: touch; }
  .doc-pags canvas { width: 100%; height: auto; background: var(--card); box-shadow: 0 2px 8px rgba(0,0,0,.25); }
  .doc-pags-msg { color: var(--texto-e2e8f0); text-align: center; margin: auto; padding: 24px; font-size: 0.92rem; line-height: 1.5; max-width: 420px; }

  /* Envíos › Automatizaciones (felicitación de cumpleaños) */
  .auto-bloque { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; background: var(--card); }
  .auto-cab { display: flex; align-items: center; gap: 12px; }
  .auto-ico { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--primary-faint); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .auto-t { font-size: 1.05rem; font-weight: 700; color: var(--text); margin: 0; }
  .auto-sub { font-size: 0.85rem; color: var(--text-muted); margin-top: 2px; }
  .auto-linea { margin-top: 12px; font-size: 0.88rem; color: var(--text); line-height: 1.5; }
  .auto-estado { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; background: var(--fondo-f1f5f9); color: var(--text-muted); margin-right: 6px; vertical-align: 1px; }
  .auto-estado.on { background: var(--success-light); color: var(--texto-145a32); }
  .auto-cifras { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: 14px; }
  .auto-cifras > div { padding: 10px 12px; border-left: 1px solid var(--border); }
  .auto-cifras > div:first-child { border-left: none; }
  .auto-cifras b { display: block; font-size: 1.25rem; color: var(--primary); font-variant-numeric: tabular-nums; }
  .auto-cifras span { display: block; font-size: 0.75rem; color: var(--text-muted); line-height: 1.3; }
  .auto-dia { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); margin: 16px 0 6px; }
  .auto-dia:first-child { margin-top: 4px; }
  .auto-fila { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 6px; background: var(--card); }
  .auto-fila.off .auto-nom { color: var(--text-muted); text-decoration: line-through; }
  .auto-fila-btn { width: 100%; font-family: inherit; cursor: pointer; }
  .auto-fila-btn:hover { border-color: var(--primary); }
  .auto-nom { font-weight: 600; font-size: 0.92rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .auto-meta { font-size: 0.78rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .auto-acc { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .auto-btn { min-height: 44px; padding: 6px 12px; font-size: 0.82rem; }
  .auto-nota { display: flex; gap: 6px; align-items: flex-start; font-size: 0.78rem; color: var(--text-muted); line-height: 1.45; margin: 12px 0 0; }
  .auto-vacio { text-align: center; color: var(--text-muted); padding: 18px 8px; margin: 0; }
  .auto-asunto { font-size: 0.88rem; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 10px; overflow-wrap: anywhere; }
  .auto-asunto span { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-right: 6px; }
  .auto-prev { width: 100%; height: 560px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); display: block; }
  .auto-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  @media (max-width: 480px) {
    .auto-fila { flex-wrap: wrap; }
    .auto-acc { width: 100%; justify-content: flex-end; }
    .auto-cifras b { font-size: 1.1rem; }
    .auto-prev { height: 480px; }
  }
  .env-chip { font-size: 0.76rem; font-weight: 700; color: var(--texto-475569); background: var(--fondo-f1f5f9); border: 1px solid var(--borde-e2e8f0); border-radius: 999px; padding: 5px 11px; cursor: pointer; font-family: inherit; }
  .env-chip.in { background: var(--fondo-dcfce7); border-color: var(--borde-86efac); color: var(--texto-166534); }
  .env-chip.ex { background: var(--fondo-fee2e2); border-color: var(--borde-fca5a5); color: var(--texto-991b1b); }
  .env-block { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; background: var(--card); }
  .env-bhead { display: flex; justify-content: space-between; align-items: center; font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-94a3b8); margin-bottom: 8px; }
  .env-bbtn { background: var(--fondo-f1f5f9); border: none; border-radius: 6px; width: 26px; height: 26px; cursor: pointer; font-size: 0.9rem; color: var(--texto-475569); font-family: inherit; }
  .env-addbar { display: flex; flex-wrap: wrap; gap: 6px; }
  .env-addbar .btn { flex: 1; min-width: 90px; font-size: 0.8rem; padding: 8px 6px; display: flex; align-items: center; justify-content: center; gap: 5px; }
  .env-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; justify-content: center; border: 2px dashed var(--borde-cbd5e1); border-radius: var(--radius); padding: 20px; color: var(--texto-64748b); font-size: 0.85rem; cursor: pointer; }
  .env-drop svg { color: var(--primary); }
  .env-radio { display: flex; align-items: flex-start; gap: 9px; font-size: 0.85rem; line-height: 1.4; padding: 8px 0; cursor: pointer; }
  .env-radio input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--primary); flex-shrink: 0; }
  .etq-count { min-width: 26px; height: 22px; padding: 0 7px; border-radius: var(--radius); background: var(--primary-faint); color: var(--primary); font-size: 0.78rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .cuo-nota { display: flex; align-items: flex-start; gap: 8px; background: var(--fondo-fff7ed); border: 1px solid var(--borde-fed7aa); color: var(--texto-9a3412); border-radius: var(--radius); padding: 11px 13px; font-size: 0.78rem; line-height: 1.45; margin-top: 14px; }
  .cuo-nota svg { flex-shrink: 0; margin-top: 1px; color: var(--texto-ea580c); }
  .conv-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--texto-94a3b8); background: var(--fondo-f8faff); border: 1px dashed var(--border); border-radius: var(--radius); padding: 24px 18px; font-size: 0.86rem; }
  .conv-empty svg { color: var(--texto-c3cfe6); }
  .ini-badge { position: absolute; top: 10px; right: 10px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--radius); background: var(--fondo-ef4444); color: var(--on-solid); font-size: 0.72rem; font-weight: 800; display: none; align-items: center; justify-content: center; }
  /* Hoja "Más" */
  #socio-mas, #junta-mas { position: fixed; inset: 0; z-index: 1000; }
  #socio-mas .sm-backdrop, #junta-mas .sm-backdrop { position: absolute; inset: 0; background: var(--velo-40); opacity: 0; transition: opacity .26s; }
  #socio-mas.open .sm-backdrop, #junta-mas.open .sm-backdrop { opacity: 1; }
  #socio-mas .sm-sheet, #junta-mas .sm-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-width: 480px; margin: 0 auto; background: var(--card); border-radius: 10px 10px 0 0; padding: 8px 16px calc(20px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .28s cubic-bezier(.16,1,.3,1); box-shadow: 0 -8px 40px rgba(0,0,0,.2); }
  #socio-mas.open .sm-sheet, #junta-mas.open .sm-sheet { transform: translateY(0); }
  /* Nunca más alta que la pantalla: deja ver el fondo (que también cierra) y se desplaza dentro. */
  #socio-mas .sm-sheet, #junta-mas .sm-sheet { max-height: calc(100dvh - 56px); overflow-y: auto; overscroll-behavior: contain; }
  .sm-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 4px 10px; }
  .sm-cab .sm-title { margin: 0; }
  .sm-cerrar { background: var(--fondo-eef2fb); color: var(--primary); border: none; border-radius: 999px; padding: 7px 14px; font: 700 .85rem/1 var(--font); cursor: pointer; }
  .sm-cerrar:focus-visible, .sm-tile:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
  .sm-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 6px; }
  .sm-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 76px; padding: 12px; background: var(--fondo-f6f8fd); border: 1px solid var(--borde-e3e8f3); border-radius: 12px; font: 600 .86rem/1.25 var(--font); color: var(--texto-14213d); text-align: left; cursor: pointer; }
  .sm-tile svg { color: var(--primary); }
  .sm-tile:active { background: var(--fondo-eef2fb); }
  #junta-mas .sm-salir { width: 100%; }
  .sm-grabber { width: 40px; height: 4px; border-radius: 3px; background: var(--fondo-cbd5e1); margin: 6px auto 12px; }
  .sm-title { font-weight: 800; color: var(--primary); font-size: 1.05rem; margin: 0 4px 10px; }
  .sm-list { display: flex; flex-direction: column; }
  .sm-item { display: flex; align-items: center; gap: 13px; background: none; border: none; border-top: 1px solid var(--border); padding: 14px 4px; font-family: inherit; font-size: 0.98rem; font-weight: 600; color: var(--texto-0f172a); cursor: pointer; text-align: left; }
  .sm-item:first-child { border-top: none; }
  .sm-item svg { color: var(--primary); flex-shrink: 0; }
  .sm-item .sm-chev { margin-left: auto; color: var(--texto-cbd5e1); font-size: 1.3rem; }
  .sm-item .sm-num { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--primary); color: var(--card); font-size: 0.78rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
  .sm-item .sm-num + .sm-chev { margin-left: 8px; }

/* ── Carné digital ── */
.carnet-btn { width: 100%; display: flex; align-items: center; gap: 13px; text-align: left; margin: 0 0 18px; padding: 15px 16px; border: none; cursor: pointer;
  border-radius: var(--radius); background: var(--hero); color: var(--on-band);
  box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease; }
.carnet-btn:active { transform: scale(.985); }
.carnet-btn:hover { box-shadow: var(--shadow); }
.carnet-btn-ic { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius); background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; color: var(--on-solid); } /* color-fijo: igual en claro y oscuro */
.carnet-btn-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.carnet-btn-t { font-weight: 800; font-size: 1.02rem; letter-spacing: .01em; }
.carnet-btn-d { font-size: .78rem; color: rgba(255,255,255,.72); } /* color-fijo: igual en claro y oscuro */
.carnet-btn-chev { color: rgba(255,255,255,.6); flex-shrink: 0; } /* color-fijo: igual en claro y oscuro */

#carnet-ov { position: fixed; inset: 0; z-index: 2600; display: flex; align-items: center; justify-content: center; padding: 22px; }
#carnet-ov .carnet-backdrop { position: absolute; inset: 0; background: rgba(4,20,70,.62); backdrop-filter: blur(6px); opacity: 0; transition: opacity .24s; } /* color-fijo: igual en claro y oscuro */
#carnet-ov.open .carnet-backdrop { opacity: 1; }
.carnet-card { position: relative; width: 100%; max-width: 350px; background: var(--card); border-radius: var(--radius); padding: 30px 24px 22px;
  box-shadow: 0 30px 80px rgba(4,20,70,.5); text-align: center; transform: translateY(14px) scale(.96); opacity: 0; transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .24s; } /* color-fijo: igual en claro y oscuro */
#carnet-ov.open .carnet-card { transform: translateY(0) scale(1); opacity: 1; }
.carnet-x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--fondo-f1f5f9); color: var(--texto-475569); display: flex; align-items: center; justify-content: center; transition: background .15s; }
.carnet-x:hover { background: var(--fondo-e2e8f0); }
.carnet-head-t { font-weight: 800; font-size: 1.02rem; color: var(--primary); letter-spacing: .01em; }
.carnet-head-s { font-size: .7rem; color: var(--texto-94a3b8); text-transform: uppercase; letter-spacing: .12em; margin-top: 3px; }
.carnet-qr { width: 230px; height: 230px; max-width: 74vw; margin: 20px auto 18px; padding: 14px; background: var(--card); border: 1px solid var(--borde-e6ebf5); border-radius: var(--radius); box-shadow: var(--shadow); }
.carnet-qr svg { display: block; width: 100%; height: 100%; }
.carnet-name { font-family: 'Geist', Arial, sans-serif; font-weight: 800; font-size: 1.32rem; line-height: 1.15; color: var(--texto-0f172a); }
.carnet-num { margin-top: 5px; font-size: .92rem; color: var(--primary); letter-spacing: .02em; }
.carnet-num b { font-weight: 800; }
.carnet-wallet { width: 100%; margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 16px; border-radius: var(--radius); border: none; background: var(--fondo-000000); color: var(--on-solid); cursor: pointer; }
.carnet-wallet-tx { font-weight: 600; font-size: .95rem; }
.carnet-soon { margin-top: 8px; text-align: center; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-94a3b8); }

/* ── Trámites ── */
.tram-cta { position: fixed; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom)); z-index: 900;
  padding: 10px 16px; background: var(--barra-fija); backdrop-filter: blur(8px); border-top: 1px solid var(--border); box-shadow: 0 -6px 20px var(--velo-6); }
.tram-cta .btn { margin: 0; max-width: 500px; margin: 0 auto; }
body:not(.has-socio-nav) .tram-cta { bottom: 0; }

/* ── Accesibilidad (ajustes del socio) ── */
.a11y-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--primary); border-radius: var(--radius-sm); overflow: hidden; }
.a11y-seg-b { min-height: 52px; background: var(--card); border: none; border-left: 1px solid var(--primary); color: var(--primary); font-family: var(--font); font-weight: 600; cursor: pointer; }
.a11y-seg-b:first-child { border-left: none; }
.a11y-seg-b.on { background: var(--primary); color: var(--on-primary); }
.a11y-opt { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); cursor: pointer; margin: 0; }
.a11y-opt-tx { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.a11y-opt-t { font-weight: 600; color: var(--text); font-size: 1rem; }
.a11y-opt-d { font-weight: 400; color: var(--text-muted); font-size: 0.88rem; }
.a11y-sw { appearance: none; -webkit-appearance: none; width: 48px; height: 28px; border-radius: 14px; background: var(--fondo-b7c0cc); position: relative; cursor: pointer; flex-shrink: 0; transition: background var(--transition); }
.a11y-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform var(--transition); }
.a11y-sw:checked { background: var(--primary); }
.a11y-sw:checked::after { transform: translateX(20px); }

html.a11y-t-grande body { zoom: 1.125; }
html.a11y-t-muy-grande body { zoom: 1.25; }

/* Alto contraste por variables: los grises claros de texto pasan a casi negro (o casi blanco en oscuro). */
html.a11y-contraste { --text: #000; --text-muted: #1B2430; --border: #5A6676; --bg: #fff; --border-control: #000;
  --texto-94a3b8: #1B2430; --texto-64748b: #1B2430; --texto-9ca3af: #1B2430; }
html.tema-oscuro.a11y-contraste { --text: #fff; --text-muted: #E6EBF2; --border: #8B9AB0; --bg: #0B0F14; --border-control: #C9D3E0;
  --texto-94a3b8: #E6EBF2; --texto-64748b: #E6EBF2; --texto-9ca3af: #E6EBF2; }
html.a11y-contraste .btn-secondary, html.a11y-contraste input, html.a11y-contraste select, html.a11y-contraste textarea { border-width: 2px; border-color: var(--border-control); }
html.a11y-contraste .sn-item { color: var(--text-muted); }
html.a11y-contraste .sn-item.on { color: var(--primary); text-decoration: underline; text-underline-offset: 4px; }

html.a11y-enlaces a, html.a11y-enlaces .link-dismiss, html.a11y-enlaces .find-num-cta strong { text-decoration: underline !important; text-underline-offset: 3px; }

html.a11y-movimiento *, html.a11y-movimiento *::before, html.a11y-movimiento *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
html.a11y-movimiento .loading-spinner, html.a11y-movimiento .carga-inline::before { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
@media (prefers-reduced-motion: reduce) {
  .card, .carga-box, .message-box { animation: none; }
  .loading-spinner, .carga-inline::before { animation-duration: 1.6s; }
}
.sm-item.sm-salir, .sm-item.sm-salir svg { color: var(--danger); }
/* Interruptor «Modo oscuro» (menú «Más» y barra lateral del panel) */
[data-tema-sw][hidden] { display: none !important; }
[data-tema-sw] .tema-sw { margin-left: auto; width: 36px; height: 22px; border-radius: 11px; background: var(--border-control); position: relative; flex-shrink: 0; transition: background var(--transition); }
[data-tema-sw] .tema-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow-sm); transition: transform var(--transition); }
[data-tema-sw][aria-checked="true"] .tema-sw { background: var(--primary); }
[data-tema-sw][aria-checked="true"] .tema-sw::after { transform: translateX(14px); }
[data-tema-sw]:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 2px; }
/* Inicio: recuadros de estado (cuotas · formularios) */
.ini-estado-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0 0 4px; }
.ini-est { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 104px; padding: 13px 14px; background: var(--card); border: 1px solid var(--border); border-top: 3px solid var(--border); border-radius: var(--radius); cursor: pointer; text-align: left; transition: background-color var(--transition); }
.ini-est:hover { background: var(--bg); }
.ini-est-top { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); }
.ini-est-v { font-size: 1.35rem; font-weight: 700; line-height: 1.15; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ini-est-d { font-size: 0.8rem; color: var(--text-muted); }
.ini-est-eur { font-size: 1rem; line-height: 1; }
.ini-est-ok { border-top-color: var(--success); } .ini-est-ok .ini-est-top { color: var(--success); }
.ini-est-debe { border-top-color: var(--danger); } .ini-est-debe .ini-est-top, .ini-est-debe .ini-est-v { color: var(--danger); }
.ini-est-aviso { border-top-color: var(--primary); } .ini-est-aviso .ini-est-top, .ini-est-aviso .ini-est-v { color: var(--primary); }
/* Envío masivo: contador */
.env-asunto { font-size: 0.88rem; color: var(--text-muted); margin-top: 4px; overflow-wrap: anywhere; }
.env-cont { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 16px 0 10px; font-variant-numeric: tabular-nums; }
.env-cont b { font-size: 2.4rem; font-weight: 700; color: var(--primary); line-height: 1; letter-spacing: -0.02em; }
.env-cont span { font-size: 1rem; color: var(--text-muted); }
.env-barra { height: 8px; background: var(--fondo-dce3ec); border-radius: 4px; overflow: hidden; }
.env-barra > div { height: 100%; background: var(--primary); transition: width .4s cubic-bezier(.16,1,.3,1); }
.env-nota { font-size: 0.84rem; color: var(--text-muted); line-height: 1.45; margin-top: 12px; }
.env-acciones { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.env-acciones .btn { width: 100%; }
.env-ok, .env-pausa { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.env-ok { background: var(--success-light); color: var(--success); }
.env-pausa { background: var(--fondo-fff4e0); color: var(--accent); }
body.has-junta-nav #bg-taskbar, body.has-socio-nav #bg-taskbar { bottom: calc(76px + env(safe-area-inset-bottom)) !important; }
@media (min-width: 900px) { body.has-junta-nav #bg-taskbar { bottom: 16px !important; left: 254px !important; } }
/* En pantallas centradas, la rayita del título también va centrada */
[style*="text-align:center"] .title::after, [style*="text-align: center"] .title::after, .title[style*="text-align:center"]::after { margin-left: auto; margin-right: auto; }
/* Paginación de listados */
.pag { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.pag-info { font-size: 0.85rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pag-ctrl { display: flex; align-items: center; gap: 10px; }
.pag-ctrl .btn { min-height: 40px; padding: 6px 12px; font-size: 0.88rem; }
.pag-n { font-size: 0.9rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pag-tam { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 400; color: var(--text-muted); margin: 0; }
.pag-tam select { width: auto; min-height: 36px; padding: 4px 30px 4px 10px; }
@media (max-width: 480px) { .pag { flex-direction: column; align-items: stretch; } .pag-ctrl { justify-content: space-between; } .pag-tam { justify-content: center; } }
/* ── Agenda (eventos) ── */
.ev-card { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; cursor: pointer; transition: background-color var(--transition); }
.ev-card:hover { background: var(--bg); }
.ev-fecha { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 54px; height: 58px; flex-shrink: 0; border: 1px solid var(--primary); border-radius: var(--radius-sm); color: var(--primary); }
.ev-dia { font-size: 1.45rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.ev-mes { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.ev-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ev-tit { font-weight: 700; font-size: 1rem; color: var(--text); }
.ev-meta { font-size: 0.85rem; color: var(--text-muted); }
.ev-tipo { display: inline-block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; vertical-align: 1px; }
.ev-tipo-insc { background: var(--fondo-e8edfb); color: var(--primary); }
.ev-tipo-info { background: var(--fondo-ddf4ef); color: var(--texto-0f6b5e); }
.ev-total { font-size: 0.92rem; margin: 4px 0 10px; }
.btn-row a.btn { text-decoration: none; }
/* Informes: barras y tablas */
.inf-barras { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding: 8px 0 0; border-bottom: 1px solid var(--border); }
.inf-barra { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.inf-barra-b { width: 100%; max-width: 34px; min-height: 2px; background: var(--primary); border-radius: 3px 3px 0 0; }
.inf-barra-n { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.inf-barra-m { font-size: 0.7rem; color: var(--text-muted); margin-top: 4px; white-space: nowrap; }
.inf-tabla { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.inf-tabla th { text-align: left; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border); padding: 8px 10px; white-space: nowrap; }
.inf-tabla td { border-bottom: 1px solid var(--border); padding: 8px 10px; vertical-align: top; }
/* Estado de la Sede */
.est-general { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: var(--radius); font-weight: 700; font-size: 1.05rem; border: 1px solid; margin: 4px 0 6px; }
.est-OPERATIVO { background: var(--success-light); color: var(--texto-145a32); border-color: var(--borde-a9d3b7); }
.est-DEGRADADO, .est-MANTENIMIENTO { background: var(--fondo-fff4e0); color: var(--texto-6b4600); border-color: var(--borde-f0d49a); }
.est-serv { align-items: center; }
.est-serv .label { flex: 1 1 auto; min-width: 0; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.est-serv-d { font-weight: 400; color: var(--text-muted); font-size: 0.85rem; }
.est-serv .value { flex-shrink: 0; }
.est-serv .badge { white-space: nowrap; }
.est-INCIDENCIA, .est-CAIDO { background: var(--danger-light); color: var(--texto-8c1d18); border-color: var(--borde-e6b0aa); }
/* Pie institucional */
.sede-pie { width: 100%; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 18px 16px 28px; font-size: 0.82rem; color: var(--text-muted); }
.sede-pie a { color: var(--text-muted); }
.sede-pie-titular { flex-basis: 100%; max-width: 560px; margin: 6px auto 2px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; line-height: 1.5; font-size: 0.76rem; }
.sede-pie-nombre { font-size: 0.72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.sede-pie-enlaces { flex-basis: 100%; display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 10px; }
/* Textos legales públicos (/legal/…) */
.legal-pub-txt { white-space: pre-wrap; font-size: 0.9rem; line-height: 1.75; color: var(--texto-374151); overflow-wrap: anywhere; }
.legal-pub-fecha { font-size: 0.8rem; color: var(--text-muted); margin: -6px 0 16px; }
.legal-pub-otro { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 0.86rem; }
body.has-socio-nav .sede-pie, body.has-junta-nav .sede-pie { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { body.has-junta-nav .sede-pie { padding-left: 262px; padding-bottom: 28px; } }
/* Botones en fila: si no cabe el texto, se parte en dos líneas en vez de salirse */
.btn-row .btn { white-space: normal; text-align: center; line-height: 1.25; }
.ev-fecha-pend { border-style: dashed; color: var(--accent); border-color: var(--accent); }
/* Evento público (/e/<id>) */
.evp-cab { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.evp-tit { font-size: 1.35rem; font-weight: 700; color: var(--primary); line-height: 1.25; margin: 0; }
.evp-meta { font-size: 0.9rem; color: var(--text-muted); margin-top: 4px; }
.evp-desc { white-space: pre-wrap; line-height: 1.6; margin-bottom: 14px; }
.evp-precios { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; }
.evp-precios > div { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.evp-precios > div + div { border-left: 1px solid var(--border); }
.evp-precios span { font-size: 0.8rem; color: var(--text-muted); }
.evp-precios b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.evp-socio { border: 0; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.evp-socio legend { font-weight: 600; margin-bottom: 8px; }
.evp-opc { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; cursor: pointer; background: var(--card); min-height: 44px; }
.evp-opc:has(input:checked) { border-color: var(--primary); background: var(--primary-faint); }
.evp-opc input { margin-top: 3px; accent-color: var(--primary); }
.evp-opc > span { display: flex; flex-direction: column; gap: 2px; }
.evp-opc > span > span { font-size: 0.85rem; color: var(--text-muted); }
.evp-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.evp-rgpd { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin: 4px 0 10px; font-size: 0.85rem; }
.evp-rgpd summary { cursor: pointer; font-weight: 600; color: var(--primary); }
.evp-rgpd p { margin: 8px 0 0; line-height: 1.5; }
.evp-acepto { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; margin-bottom: 12px; }
.evp-acepto input { margin-top: 3px; accent-color: var(--primary); }
.evp-resumen { border-top: 1px solid var(--border); margin: 6px 0 12px; font-variant-numeric: tabular-nums; }
.evp-resumen > div { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
.evp-total { font-weight: 700; }
.evp-nota { font-size: 0.82rem; color: var(--text-muted); margin-top: 8px; }
.evp-entrada { display: flex; gap: 16px; align-items: center; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin: 12px 0; }
.evp-qr { width: 128px; height: 128px; flex-shrink: 0; }
.evp-qr svg { width: 100%; height: 100%; }
.evp-cod { font-size: 1.2rem; font-weight: 700; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.evp-titular { font-weight: 600; margin-top: 4px; }
@media (max-width: 380px) { .evp-entrada { flex-direction: column; text-align: center; } }
/* Pagos */
.pago-box { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; background: var(--card); }
.pago-transf { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 0.95rem; }
.pago-box > .pago-transf:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* Escáner de entradas (Junta) */
.esc-visor { position: relative; margin-top: 14px; aspect-ratio: 1 / 1; max-height: 62vh; width: 100%; background: var(--fondo-0b1220); border-radius: var(--radius); overflow: hidden; }
.esc-visor video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.esc-marco { position: absolute; inset: 16%; pointer-events: none; }
.esc-marco span { position: absolute; width: 34px; height: 34px; border: 4px solid var(--borde-ffffff); border-radius: 4px; opacity: .92; }
.esc-marco span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.esc-marco span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.esc-marco span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.esc-marco span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.esc-aviso { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; color: var(--texto-d6deea); font-size: 0.92rem; font-weight: 600; background: rgba(11,18,32,.82); } /* color-fijo: igual en claro y oscuro */
.esc-res { display: none; align-items: center; gap: 12px; margin-top: 12px; padding: 14px 16px; border-radius: var(--radius); border: 1px solid transparent; }
.esc-res.esc-cargando, .esc-res.esc-ok, .esc-res.esc-rep, .esc-res.esc-no { display: flex; }
.esc-cargando { background: var(--bg); color: var(--text-muted); font-weight: 600; }
.esc-ok { background: var(--success-light); border-color: var(--borde-a9d8ba); color: var(--success); }
.esc-rep { background: var(--fondo-fff3dc); border-color: var(--borde-f0d49a); color: var(--accent); }
.esc-no { background: var(--danger-light); border-color: var(--borde-f1b8b2); color: var(--danger); }
.esc-ic { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: currentColor; }
.esc-ic > span { color: var(--on-solid); }
.esc-tit { font-size: 1.05rem; font-weight: 800; line-height: 1.25; }
.esc-quien { margin-top: 3px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.esc-det { font-size: 0.84rem; color: var(--text-muted); }
.esc-motivo { font-size: 0.92rem; font-weight: 600; margin-top: 2px; }
.esc-cont { margin-top: 14px; font-size: 0.84rem; color: var(--text-muted); text-align: center; font-variant-numeric: tabular-nums; }
.cob-online { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.8rem; font-weight: 600; color: var(--text); cursor: pointer; background: var(--card); }
.cob-online input { width: 16px; height: 16px; accent-color: var(--primary); margin: 0; }
.pgm { border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 12px; }
.pgm-l { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
.pgm-l > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.pgm-l > span:last-child { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.pgm-l:last-child { border-bottom: 0; }
.pgm-tot { font-weight: 800; font-size: 1rem; }

/* Confirmación previa de una cancelación o devolución */
.dev-dinero { background: var(--primary-faint); border: 1px solid var(--borde-c8d3ea); border-radius: var(--radius); padding: 12px 14px; line-height: 1.55; font-size: 0.95rem; }
.dev-aviso { font-size: 0.85rem; color: var(--text-muted); margin: 10px 0 0; }
.dev-botones { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.dev-botones .btn { flex: 1 1 140px; min-width: 0; white-space: normal; }
.evp-captcha { margin: 4px 0 12px; min-height: 65px; }
.evp-incluye { display: inline-block; margin-top: 6px; padding: 3px 8px; border: 1px solid var(--primary); border-radius: var(--radius-sm); color: var(--primary); font-weight: 700; font-size: 0.85rem; }
.esc-incl { margin-top: 4px; font-weight: 700; font-size: 0.92rem; }

/* Pago integrado (Stripe dentro de la Sede) */
.pago-int { position: fixed; inset: 0; z-index: 10060; background: var(--velo-55); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 16px; }
.pago-int-box { background: var(--card); width: 100%; max-width: 520px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; border-radius: var(--radius); box-shadow: 0 20px 60px var(--velo-30); overflow: hidden; }
.pago-int-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 3px solid var(--primary); }
.pago-int-tit { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--primary); }
.pago-int-x { min-width: 44px; min-height: 44px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.pago-int-form { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 200px; }
.pago-int-pie { font-size: 0.78rem; color: var(--text-muted); padding: 8px 14px 12px; border-top: 1px solid var(--border); }
/* Elegir cómo pagar: dos botones grandes con los logos, Bizum el primero */
.pago-elige { display: flex; flex-direction: column; gap: 12px; padding: 22px 18px 18px; }
.pago-elige-tit { font-size: 1.05rem; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.pago-op { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 76px; padding: 12px 16px; background: var(--card); border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; font-family: inherit; color: var(--text); transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.pago-op:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, .08); } /* color-fijo: igual en claro y oscuro */
.pago-op:active { transform: scale(0.99); }
.pago-op:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.pago-op-bizum { border: 2px solid var(--borde-05bec6); background: var(--fondo-f2fcfc); }
.pago-op-bizum:hover { border-color: var(--borde-039aa1); }
.pago-logo-bizum { height: 34px; width: auto; }
.pago-op-sub { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }
.pago-op-tarjeta { flex-direction: row; justify-content: space-between; gap: 12px; }
.pago-op-marca { display: inline-flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 700; }
.pago-logos { display: inline-flex; align-items: center; gap: 12px; }
.pago-logos { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
.pago-logos img { height: 22px; width: auto; }
.pago-logos .pago-logo-revolut { height: 14px; }
.pago-otra { display: block; margin: 6px auto 14px; background: none; border: none; color: var(--primary); font-weight: 700; font-size: 0.9rem; cursor: pointer; font-family: inherit; padding: 8px; }
@media (max-width: 560px) { .pago-int { padding: 0; } .pago-int-box { max-width: none; height: 100%; max-height: none; border-radius: 0; } }

/* Formulario de preinscripción: lo escrito se ve (y se guarda) en mayúsculas */
.pf-mayus { text-transform: uppercase; }
.pf-mayus::placeholder { text-transform: none; }

/* Aviso plegable de la transferencia (junto al pago con tarjeta) */
.info-transf { margin-top: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--fondo-f7f9fd); font-size: 0.88rem; }
.info-transf summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px; padding: 9px 12px; font-weight: 600; color: var(--primary); border-radius: 10px; }
.info-transf summary::-webkit-details-marker { display: none; }
.info-transf summary::after { content: '+'; margin-left: auto; font-weight: 700; font-size: 1.05rem; line-height: 1; }
.info-transf[open] summary::after { content: '–'; }
.info-transf summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.info-transf p { margin: 0; padding: 0 12px 11px; color: var(--text-muted); line-height: 1.55; }

/* ── Protección de datos (RGPD) ── */
.rgpd-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.rgpd-sello { width: 56px; height: 56px; flex-shrink: 0; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--primary); color: var(--on-primary); box-shadow: 0 8px 20px var(--velo-25); }
.rgpd-sello-ok { background: var(--fondo-0e7a41); box-shadow: 0 8px 20px rgba(14, 122, 65, .25); } /* color-fijo: igual en claro y oscuro */
.rgpd-eyebrow { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.rgpd-h1 { margin: 2px 0 8px; font: 800 1.55rem/1.15 var(--font); letter-spacing: -0.02em; color: var(--primary); text-wrap: balance; }
.rgpd-intro { font-size: 1rem; line-height: 1.6; margin: 0 0 14px; }
.rgpd-pasos { counter-reset: paso; list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.rgpd-pasos li { counter-increment: paso; display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; line-height: 1.45; }
.rgpd-pasos li::before { content: counter(paso); flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--fondo-eef2fb); color: var(--primary); font-weight: 800; font-size: .8rem; display: flex; align-items: center; justify-content: center; }
.rgpd-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; }
.rgpd-acciones .btn { flex: 1 1 200px; margin-top: 0; }
.rgpd-pregunta { border: 2px solid var(--primary); border-radius: 14px; padding: 14px; margin: 4px 0 14px; background: var(--fondo-f7f9fd); }
.rgpd-pregunta-t { font-weight: 800; color: var(--primary); font-size: 1.05rem; }
.rgpd-derechos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.rgpd-derecho { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.rgpd-derecho-t { font-weight: 700; color: var(--texto-14213d); margin-bottom: 2px; }
.rgpd-derecho p, .rgpd-texto { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--text-muted); }
.rgpd-texto { margin-bottom: 8px; }
.rgpd-faq { border-bottom: 1px solid var(--border); padding: 8px 0; }
.rgpd-faq summary { cursor: pointer; font-weight: 600; }
.rgpd-faq p { margin: 6px 0 0; color: var(--text-muted); font-size: .9rem; }
.rgpd-volver { display: inline-block; margin-bottom: 10px; color: var(--primary); font-weight: 600; text-decoration: none; }
.rgpd-opciones { display: grid; gap: 6px; margin-bottom: 8px; }
.rgpd-opcion { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--border); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.rgpd-opcion:has(input:checked) { border-color: var(--primary); background: var(--fondo-f7f9fd); }
.rgpd-opcion input { margin-top: 3px; accent-color: var(--primary); }
.rgpd-opcion small { display: block; color: var(--text-muted); font-size: .8rem; line-height: 1.4; margin-top: 2px; }
.rgpd-ficha { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font-size: .9rem; line-height: 1.55; }
.rgpd-nota { font-size: .8rem; color: var(--text-muted); margin-top: 4px; }
.rgpd-check { display: flex; gap: 8px; align-items: flex-start; font-size: .88rem; margin: 10px 0; }
.rgpd-centro { text-align: center; }
.rgpd-centro .rgpd-sello { margin: 4px auto 10px; }
.rgpd-numero { font: 800 1.6rem/1.2 var(--font); font-variant-numeric: tabular-nums; color: var(--texto-14213d); letter-spacing: -0.01em; margin: 4px 0; }
.rgpd-code { font-size: 1.5rem; letter-spacing: .35em; text-align: center; width: 100%; margin: 4px 0 12px; }
.rgpd-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.rgpd-estado { margin: 8px 0 12px; line-height: 1.5; }
.rgpd-req { border: 1.5px solid var(--borde-e8b44a); background: var(--fondo-fff8e8); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.rgpd-req-t { font-weight: 800; color: var(--accent); display: flex; gap: 6px; align-items: center; }
.rgpd-historial { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--borde-dde3ef); }
.rgpd-historial li { padding: 0 0 10px 14px; position: relative; font-size: .9rem; line-height: 1.45; }
.rgpd-historial li::before { content: ''; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }
.rgpd-historial time { display: block; font-size: .75rem; color: var(--text-muted); }
.plazo-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plazo-verde { background: var(--fondo-e7f6ec); color: var(--texto-0e6b39); }
.plazo-ambar { background: var(--fondo-fff4db); color: var(--accent); }
.plazo-rojo { background: var(--fondo-fde8e8); color: var(--texto-a61b1b); }
.plazo-vencida { background: var(--fondo-a61b1b); color: var(--on-solid); }
.plazo-pausa, .plazo-cerrada, .plazo-sin-empezar { background: var(--fondo-eef1f5); color: var(--text-muted); }

.rgpd-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 12px 0 6px; }
.rgpd-kpi { border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; }
.rgpd-kpi-n { font: 800 1.6rem/1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--texto-14213d); }
.rgpd-kpi-t { font-size: .72rem; color: var(--text-muted); margin-top: 2px; }
.rgpd-kpi.ambar { background: var(--fondo-fff4db); border-color: var(--borde-f1d58e); }
.rgpd-kpi.rojo { background: var(--fondo-fde8e8); border-color: var(--borde-f3b1b1); }
.rgpd-proxima { width: 100%; text-align: left; background: var(--fondo-f7f9fd); border: 1px dashed var(--borde-b9c6e8); border-radius: 10px; padding: 8px 10px; cursor: pointer; font-size: .88rem; color: var(--texto-14213d); }
.rgpd-filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.rgpd-filtros select { flex: 1 1 160px; }
@media (max-width: 420px) { .rgpd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Usuarios de la Junta: alta por enlace y gestión ── */
.ja-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ja-icono { width: 46px; height: 46px; border-radius: 14px; background: var(--primary); color: var(--on-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 8px 20px var(--velo-22); }
.ja-pasos { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 16px; }
.ja-pasos li { flex: 1; display: flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--text-muted); padding: 7px 8px; border-radius: 10px; background: var(--fondo-f3f5fa); }
.ja-pasos li span { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; background: var(--fondo-e3e8f3); color: var(--text-muted); flex-shrink: 0; }
.ja-pasos li.actual { background: var(--fondo-eef2fb); color: var(--primary); }
.ja-pasos li.actual span { background: var(--primary); color: var(--on-primary); }
.ja-pasos li.hecho span { background: var(--fondo-0e6b39); color: var(--on-solid); }
.ja-pk { display: flex; justify-content: center; color: var(--primary); margin: 6px 0 8px; }
.ja-compartida { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 10px; }
.ja-compartida summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--text-muted); margin-bottom: 10px; }
.ju-fila { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ju-fila.ju-off { opacity: .55; }
.ju-foto { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ju-ini { display: flex; align-items: center; justify-content: center; background: var(--fondo-eef2fb); color: var(--primary); font-weight: 800; }
.ju-datos { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: .85rem; }
.ju-datos span { color: var(--text-muted); overflow-wrap: anywhere; }
.ju-enlace { display: flex; gap: 6px; }
.ju-enlace input { flex: 1; min-width: 0; font-size: .8rem; }

/* ── Fecha y hora oficial de la Sede (cabecera y pie) ── */
.hora-bar { display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 1100px; margin: 0 auto; padding: 4px 16px 6px; font-size: 0.74rem; line-height: 1; color: var(--text-muted); }
.hora-bar[hidden], .sede-pie-hora[hidden] { display: none; }
.solo-lector { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hora-oficial { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--texto-334155); }
.sede-pie-hora { flex-basis: 100%; text-align: center; margin-bottom: 4px; }
.sede-pie-hora .hora-oficial { color: inherit; }
@media (min-width: 700px) { .hora-bar { justify-content: flex-end; padding: 0 28px 6px; } }

/* Formulario ya respondido por el socio */
.form-respondido { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0; padding: 14px; background: var(--fondo-f0fdf4); border: 1px solid var(--borde-bbf7d0); border-radius: var(--radius); }
.form-respondido-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: var(--fondo-16a34a); color: var(--on-solid); display: flex; align-items: center; justify-content: center; }
.form-respondido-tit { font-weight: 800; color: var(--texto-14532d); font-size: 0.98rem; }
.form-respondido-sub { font-size: 0.84rem; color: var(--texto-166534); margin-top: 3px; line-height: 1.4; }

/* Franja de mantenimiento programado o en curso (arriba, en todas las pantallas) */
.aviso-mant { display: flex; align-items: flex-start; gap: 9px; padding: 9px 14px; background: var(--fondo-fef3c7); color: var(--texto-78350f); border-bottom: 1px solid var(--borde-fcd34d); font-size: 0.82rem; line-height: 1.45; }
.aviso-mant-curso { background: var(--fondo-fde68a); }
.aviso-mant-ic { flex-shrink: 0; margin-top: 1px; color: var(--texto-b45309); }
.aviso-mant-tx { flex: 1; max-width: 1060px; margin: 0 auto; }
.aviso-mant-tx a { color: var(--texto-78350f); font-weight: 700; white-space: nowrap; }
.aviso-mant-x { flex-shrink: 0; background: none; border: none; color: var(--texto-92400e); font-size: 1.2rem; line-height: 1; padding: 0 2px; cursor: pointer; }
.aviso-mant-x:focus-visible { outline: 2px solid var(--borde-b45309); outline-offset: 2px; border-radius: 4px; }
html[data-entorno="pruebas"] .aviso-mant { margin-top: 20px; }

/* Ficha obligatoria (primer paso antes de usar la Sede) */
.ficha-ob-pasos { display: flex; gap: 6px; list-style: none; margin: 0 0 16px; padding: 0; counter-reset: paso; }
.ficha-ob-pasos li { flex: 1; counter-increment: paso; font-size: 0.72rem; font-weight: 700; color: var(--text-muted); padding-top: 8px; border-top: 3px solid var(--border); }
.ficha-ob-pasos li::before { content: counter(paso) ". "; }
.ficha-ob-pasos li.on { color: var(--primary); border-top-color: var(--primary); }
.ficha-ob-req { color: var(--texto-b91c1c); font-weight: 800; }
.ficha-ob-opc { color: var(--text-muted); font-weight: 400; font-size: 0.78em; }
.ficha-ob-falta input, .ficha-ob-falta select, .ficha-ob-falta textarea { border-color: var(--borde-f59e0b); background: var(--fondo-fffbeb); }
.ficha-ob-solo { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.ficha-ob-solo input { width: 18px; height: 18px; accent-color: var(--primary); }
.ficha-ob-nota { font-size: 0.8rem; color: var(--text-muted); text-align: center; margin: 12px 0 0; line-height: 1.5; }
.ficha-ob-codigo { display: flex; gap: 10px; align-items: flex-start; background: var(--primary-faint); border: 1px solid var(--borde-c9d6f5); border-radius: var(--radius-sm); padding: 12px 14px; color: var(--texto-1e3a8a); font-size: 0.88rem; line-height: 1.5; }
.ficha-ob-otp { text-align: center; font-size: 1.3rem; letter-spacing: 0.3em; font-weight: 700; }
.ficha-ob-sin { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.ficha-ob-junta { background: var(--fondo-fffbeb); border: 1px solid var(--borde-fcd34d); border-radius: var(--radius-sm); padding: 12px 14px; margin-top: 12px; font-size: 0.86rem; color: var(--texto-78350f); }
.ficha-ob-junta p { margin: 0 0 10px; line-height: 1.5; }

/* Transparencia */
.tr-intro { color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; margin: 0 0 6px; }
.tr-bloque { margin-top: 20px; }
.tr-bloque h2 { font-size: 0.74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); margin: 0 0 8px; }
.tr-bloque dl { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.tr-fila { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; padding: 10px 14px; font-size: 0.88rem; line-height: 1.45; }
.tr-fila + .tr-fila { border-top: 1px solid var(--border); }
.tr-fila dt { color: var(--text-muted); }
.tr-fila dd { margin: 0; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.tr-fila a { color: var(--primary); }
@media (max-width: 520px) { .tr-fila { grid-template-columns: 1fr; gap: 2px; } }
.ficha-ob-foto { display: flex; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ficha-ob-foto.ficha-ob-falta { border-color: var(--borde-f59e0b); background: var(--fondo-fffbeb); }
.ficha-ob-foto p { margin: 0 0 8px; font-size: 0.84rem; color: var(--text-muted); line-height: 1.45; }
.ficha-ob-foto-img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 3px solid var(--borde-eef2fb); display: block; }
.ficha-ob-foto-vacia { background: var(--primary-faint); border: 3px dashed var(--borde-c7d6f5); display: flex; align-items: center; justify-content: center; color: var(--texto-9db4ec); }
.ficha-ob-foto-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; cursor: pointer; }

/* Editor de convivientes */
.conv-ed-lista { display: flex; flex-direction: column; gap: 8px; }
.conv-ed-fila { display: flex; gap: 8px; align-items: center; }
.conv-ed-nom { flex: 1; text-transform: uppercase; letter-spacing: .02em; }
.conv-ed-nom::placeholder { text-transform: none; letter-spacing: 0; }
.conv-ed-quita { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--texto-b91c1c); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.conv-ed-quita:hover { background: var(--fondo-fef2f2); }
.conv-ed-vacio { margin: 0; font-size: 0.84rem; color: var(--text-muted); }
.conv-ed-fijos .conv-ed-lista { display: grid; gap: 8px; }
.conv-ed-fija { margin: 0; font-weight: 400; }
.conv-ed-n { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--primary-faint); color: var(--primary); font-weight: 800; font-size: 0.85rem; }
.conv-ed-ayuda { margin: 8px 0 0; font-size: 0.82rem; color: var(--text-muted); line-height: 1.45; }
/* Contraste de los avalistas con los socios (detalle de la preinscripción, Junta) */
.aval-lista { display: grid; gap: 8px; margin: 4px 0 6px; }
.aval-fila { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; background: var(--card); }
.aval-ic { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.85rem; }
.aval-ok .aval-ic { background: var(--success-light); color: var(--success); }
.aval-dudoso .aval-ic { background: var(--fondo-fef3c7); color: var(--texto-92400e); }
.aval-mal .aval-ic { background: var(--fondo-fee2e2); color: var(--texto-991b1b); }
.aval-txt { min-width: 0; flex: 1; }
.aval-escrito { font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.aval-estado { font-size: 0.82rem; color: var(--text-muted); margin-top: 2px; line-height: 1.45; }
.aval-aviso { display: flex; gap: 8px; align-items: flex-start; background: var(--fondo-fee2e2); color: var(--texto-991b1b); border-radius: var(--radius); padding: 9px 12px; font-size: 0.86rem; font-weight: 600; margin: 4px 0 8px; }
.conv-ed-acc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.conv-ed-add { font-size: 0.86rem; }
.conv-ed-solo { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.conv-ed-solo input { width: 18px; height: 18px; accent-color: var(--primary); }
.ficha-ob-no { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.ficha-ob-no input { width: 16px; height: 16px; accent-color: var(--primary); }
.conv-ed-bloq .conv-ed-nom { background: var(--bg); color: var(--text); cursor: default; }
.conv-ed-candado { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; }
.conv-ed-nota { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 0.8rem; color: var(--text-muted); }

/* Campo no editable: gris y con candado */
.campo-bloq { position: relative; }
.campo-bloq input, .campo-bloq select { padding-right: 42px; background: var(--bg); color: var(--text); opacity: 1; -webkit-text-fill-color: var(--text); cursor: default; }
.campo-bloq-ic { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--text-muted); pointer-events: none; }

/* Tabla de socios del panel (ordenable, con foto) */
.soc-tabla-wrap { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.soc-tabla { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.soc-tabla th { background: var(--bg); text-align: left; padding: 0; border-bottom: 2px solid var(--border); }
.soc-th { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 12px; background: none; border: 0; font: inherit; font-weight: 700; color: var(--text); cursor: pointer; text-align: left; }
.soc-th:hover { color: var(--primary); }
.soc-th:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.soc-flecha { font-size: 0.62rem; letter-spacing: -2px; color: var(--texto-a5b4d4); }
.soc-th.on .soc-flecha { color: var(--primary); letter-spacing: 0; }
.soc-tabla td { padding: 8px 12px; border-top: 1px solid var(--border); vertical-align: middle; }
.soc-tabla tbody tr { cursor: pointer; transition: background var(--transition); }
.soc-tabla tbody tr:hover, .soc-tabla tbody tr:focus-visible { background: var(--primary-faint); outline: none; }
.soc-c-foto { width: 58px; }
.soc-foto { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; border: 2px solid var(--borde-eef2fb); }
.soc-ini { display: inline-flex; align-items: center; justify-content: center; background: var(--primary-faint); color: var(--primary); font-weight: 800; font-size: 0.82rem; }
.soc-nom { font-weight: 600; }
.soc-sub { display: none; font-size: 0.78rem; color: var(--text-muted); overflow-wrap: anywhere; }
.soc-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.soc-c-mail { overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .soc-c-mail, .soc-c-tel { display: none; }
  .soc-sub { display: block; }
  .soc-tabla td, .soc-th { padding-left: 8px; padding-right: 8px; }
}
/* Foto desde la previsualización */
.pk-avatar-foto { position: relative; cursor: pointer; }
.pk-avatar-foto.sobre { outline: 3px dashed var(--primary); outline-offset: 2px; }
.pk-avatar-foto #pk-avatar-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.pk-avatar-cam { position: absolute; right: 3px; bottom: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--card); color: var(--primary); display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px var(--velo-30); }
.pk-foto-ayuda { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
.aud-quien { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 0.78rem; color: var(--primary); }
.aud-quien b { font-weight: 700; }

/* Vista previa de una tabla antes de descargarla (CSV) */
.csv-prev { position: fixed; inset: 0; z-index: 4000; background: rgba(4,20,70,.55); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 14px; } /* color-fijo: igual en claro y oscuro */
.csv-prev-hoja { background: var(--card); width: 100%; max-width: 1100px; max-height: 100%; border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(4,20,70,.35); } /* color-fijo: igual en claro y oscuro */
.csv-prev-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.csv-prev-tit { font-weight: 800; color: var(--primary); font-size: 1rem; }
.csv-prev-sub { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }
.csv-prev-bot { display: flex; gap: 8px; flex-wrap: wrap; }
.csv-prev-tabla { overflow: auto; flex: 1; min-height: 0; }
.csv-prev-tabla table { border-collapse: collapse; width: max-content; min-width: 100%; }
.csv-prev-tabla th { position: sticky; top: 0; background: var(--fondo-eef2fb); color: var(--primary); text-align: left; padding: 7px 10px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; border-bottom: 1.5px solid var(--borde-cbd5e1); }
.csv-prev-tabla td { padding: 5px 10px; border-bottom: 1px solid var(--borde-f1f5f9); font-size: 0.78rem; white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.csv-prev-nota { font-size: 0.72rem; color: var(--texto-94a3b8); padding: 8px 16px 12px; border-top: 1px solid var(--border); }

/* ── Firma electrónica: aviso «Accediendo al proceso de firma» y paso «Firmar» ── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.af-caja { max-width: 520px; margin: 0 auto; padding: 14px 0 6px; text-align: center; }
.af-icono { position: relative; width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-dark), var(--fondo-1a4fd8)); color: var(--on-solid); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px var(--velo-30); }
.af-candado { position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%; background: var(--fondo-1b7a43); border: 2.5px solid var(--card); display: flex; align-items: center; justify-content: center; }
.af-titulo { font-size: 1.12rem; font-weight: 800; color: var(--primary); margin: 0 0 6px; line-height: 1.3; }
.af-texto { font-size: 0.88rem; color: var(--text-muted); line-height: 1.5; margin: 0 0 16px; }
.af-texto strong { color: var(--text); }
.af-pasos { list-style: none; margin: 0 0 18px; padding: 12px 14px; background: var(--primary-faint); border-radius: 10px; text-align: left; display: grid; gap: 8px; }
.af-pasos li { display: flex; align-items: center; gap: 10px; font-size: 0.84rem; color: var(--text); }
.af-pasos span { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-size: 0.74rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.af-cancelar { margin-top: 10px; }
@keyframes afCaja { from { opacity: 0; transform: translateY(14px) scale(.97) } }

/* Paso «Firmar»: sin recuadro; un botón grande que late. Al pulsarlo aparece la escena. */
.firma-accion { margin-top: 18px; text-align: center; }
.firma-accion[hidden], .firma-escena[hidden] { display: none; }
.firma-ok { width: 100%; padding: 18px 20px; font-size: 1.12rem; font-weight: 800; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 10px; animation: firmaLate 1.9s ease-in-out infinite; --late: 4,45,163; }
.firma-peligro .firma-ok { --late: 179,38,30; }
.firma-ok:disabled { animation: none; }
.firma-no { margin-top: 10px; }
.firma-legal { font-size: 0.74rem; color: var(--texto-64748b); line-height: 1.45; margin-top: 10px; text-align: center; }
.firma-paso .summary-row .label { white-space: nowrap; }
.firma-escena { margin: 22px 0 8px; text-align: center; animation: firmaAparece .35s cubic-bezier(0.16,1,0.3,1) both; }
.firma-lienzo { position: relative; height: 84px; display: flex; align-items: flex-end; }
.firma-nombre { width: 100%; padding: 0 4px 4px; font-family: 'Snell Roundhand', 'Segoe Script', 'Apple Chancery', 'Brush Script MT', 'URW Chancery L', cursive; font-size: 46px; line-height: 1.1; color: var(--texto-12308f); white-space: nowrap; overflow: hidden; text-align: left; clip-path: inset(0 100% 0 0); }
.firma-pluma { position: absolute; left: 4px; bottom: 10px; color: var(--primary); opacity: 0; }
.firma-lienzo.dos-lineas { height: auto; min-height: 84px; }
.dos-lineas .firma-nombre { white-space: normal; overflow-wrap: anywhere; line-height: 1.15; }
.firma-linea { height: 1.5px; background: var(--fondo-94a3b8); margin: 2px 0 0; transform-origin: left; transform: scaleX(0); }
.firma-check { width: 64px; height: 64px; margin: 18px auto 6px; opacity: 0; transform: scale(.6); }
.firma-check svg { display: block; }
.firma-check circle { fill: none; stroke: var(--success); stroke-width: 3; stroke-dasharray: 145; stroke-dashoffset: 145; }
.firma-check path { fill: none; stroke: var(--success); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
.firma-estado { font-size: 0.9rem; font-weight: 700; color: var(--text-muted); }
.firmando .firma-linea { animation: firmaLinea .4s ease-out forwards; }
.firmando .firma-nombre { animation: firmaEscribe 1.7s .15s cubic-bezier(.45,.05,.4,1) forwards; }
.firmando .firma-pluma { animation: firmaPluma 1.7s .15s cubic-bezier(.45,.05,.4,1) forwards; }
.firmado .firma-nombre { clip-path: inset(0 0 0 0); animation: none; }
.firmado .firma-linea { transform: scaleX(1); animation: none; }
.firmado .firma-pluma { display: none; }
.firmado .firma-check { animation: firmaCheck .35s cubic-bezier(0.16,1,0.3,1) forwards; }
.firmado .firma-check circle { animation: firmaTrazo .55s ease-out forwards; }
.firmado .firma-check path { animation: firmaTrazo .35s .4s ease-out forwards; }
.firmado .firma-estado { color: var(--success); }
@keyframes firmaLate { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--late), .45); } 50% { transform: scale(1.025); box-shadow: 0 0 0 12px rgba(var(--late), 0); } } /* color-fijo: igual en claro y oscuro */
@keyframes firmaAparece { from { opacity: 0; transform: translateY(10px) } }
@keyframes firmaLinea { to { transform: scaleX(1) } }
@keyframes firmaEscribe { from { clip-path: inset(0 100% 0 0) } to { clip-path: inset(0 0 0 0) } }
@keyframes firmaPluma { 0% { opacity: 0; left: 4px; transform: translateY(0) rotate(-8deg) } 8% { opacity: 1 } 35% { transform: translateY(-10px) rotate(4deg) } 65% { transform: translateY(-2px) rotate(-6deg) } 92% { opacity: 1 } 100% { opacity: 0; left: var(--fin, calc(100% - 64px)); transform: translateY(-6px) rotate(0) } }
@keyframes firmaCheck { to { opacity: 1; transform: scale(1) } }
@keyframes firmaTrazo { to { stroke-dashoffset: 0 } }

/* Verificación de identidad, PIN y código: dentro de la página (encabezado y pie de la
   Sede), no en una ventana encima. El contenido, centrado y con aire. */
.vf-pagina { display: block; }
.vf-pagina > *, .vf-pagina > form { max-width: 520px !important; width: 100% !important; margin: 0 auto !important; padding: 14px 0 6px !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; }
.vf-pagina .btn { padding-top: 14px; padding-bottom: 14px; }
.vf-titulo { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; font-weight: 800; color: var(--primary); margin: 0 0 8px; }
.vf-texto { font-size: 0.95rem; color: var(--text-muted); line-height: 1.5; margin: 0 0 14px; }
.af-icono { width: 78px; height: 78px; margin-bottom: 18px; }
.af-titulo { font-size: 1.45rem; }
.af-texto { font-size: 0.98rem; }
.af-continuar { padding-top: 15px; padding-bottom: 15px; font-size: 1.05rem; }

@media (prefers-reduced-motion: reduce) {
  .firma-ok { animation: none; }
  .af-caja, .firma-escena, .firmando .firma-linea, .firmando .firma-nombre, .firmando .firma-pluma, .firmado .firma-check, .firmado .firma-check circle, .firmado .firma-check path { animation-duration: .01ms !important; animation-delay: 0s !important; }
}


/* ── Configuración: dato de solo lectura (p. ej. datos para transferencias, en un secreto) ── */
.cfg-solo-lectura { white-space: pre-wrap; background: var(--fondo-f8fafc); border: 1px dashed var(--border); border-radius: var(--radius); padding: 10px 12px; font-size: 0.9rem; color: var(--text); font-variant-numeric: tabular-nums; }

/* ── Cobros: registrar / deshacer pagos, quién lo registró, historial ── */
.pg-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .pg-campos { grid-template-columns: 1fr; } }
.pg-recibo { display: flex; gap: 10px; align-items: flex-start; background: var(--primary-faint); border: 1px solid var(--borde-d6e0fb); border-radius: var(--radius); padding: 11px 12px; color: var(--primary); margin: 2px 0 4px; }
.pg-recibo b { display: block; font-size: 0.9rem; }
.pg-recibo span { display: block; font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }
.pg-err { min-height: 1.1em; font-size: 0.82rem; color: var(--danger); font-weight: 600; }
.cob-por { border: none; cursor: pointer; font-family: inherit; }
.cob-por:hover { text-decoration: underline; }
.cob-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cob-hist li { border-left: 3px solid var(--border); padding: 4px 0 4px 10px; font-size: 0.85rem; }
.cob-hist li span { color: var(--text-muted); font-size: 0.8rem; }
.rec-pago { display: flex; gap: 10px; align-items: center; background: var(--fondo-f8fafc); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; font-size: 0.8rem; color: var(--text-muted); margin: 0 0 14px; }
.rec-logos { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.rec-logos img { height: 14px; width: auto; display: block; }
@media (max-width: 480px) { .rec-pago { flex-direction: column; align-items: flex-start; } }

/* ── Cobros: cierre de temporada ── */
.cie-entrada { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius); padding: 13px 14px; margin: 4px 0 16px; cursor: pointer; font-family: inherit; color: var(--text); }
.cie-entrada:hover { background: var(--primary-faint); }
.cie-entrada b { display: block; font-size: 0.95rem; color: var(--primary); }
.cie-entrada > span:nth-child(2) > span { display: block; font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }
.cie-entrada-ico { flex-shrink: 0; width: 38px; height: 38px; border-radius: var(--radius); background: var(--primary-faint); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.cie-entrada .svc-chev { margin-left: auto; }
.cie-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 14px; }
.cie-barra label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.cie-barra select { width: auto; min-width: 96px; }
.cie-barra .btn { margin-left: auto; }
.cie-tabla-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.cie-tabla { width: 100%; border-collapse: collapse; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.cie-tabla th, .cie-tabla td { padding: 9px 12px; border-bottom: 1px solid var(--borde-eef2f6); text-align: right; white-space: nowrap; }
.cie-tabla thead th { background: var(--fondo-f8fafc); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.cie-tabla tbody th { text-align: left; font-weight: 600; color: var(--text); white-space: normal; }
.cie-tabla tr:last-child th, .cie-tabla tr:last-child td { border-bottom: none; }
.cie-tabla .cie-sub th { padding-left: 24px; font-weight: 400; color: var(--text-muted); }
.cie-tabla .cie-ant { color: var(--text-muted); }
.cie-dif { font-weight: 700; }
.cie-dif span { display: block; font-size: 0.72rem; font-weight: 600; }
.cie-dif.bien { color: var(--success); }
.cie-dif.mal { color: var(--danger); }
.cie-mini td, .cie-mini th { font-size: 0.82rem; }

/* ── Socios: cabecera del listado (pestañas, pendiente de revisar, filtros) ── */
.soc-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.soc-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.soc-acciones .btn { min-width: 0; font-size: 0.85rem; padding: 8px 12px; }
.soc-acciones span { font-size: 0.8rem; color: var(--text-muted); }
/* La línea de abajo va en el fondo (no como borde): así las pestañas la tapan sin salirse 1 px de
   la barra, que en el móvil hacía que la barra se moviera también arriba y abajo. */
.soc-tabs { display: flex; gap: 6px; background: linear-gradient(var(--border), var(--border)) left bottom / 100% 1px no-repeat; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pinch-zoom; scrollbar-width: none; }
.soc-tabs > .soc-tab { margin-bottom: 0; }
.soc-tabs::-webkit-scrollbar { display: none; }
.soc-tab { display: inline-flex; align-items: center; gap: 8px; border: 1px solid transparent; border-bottom: none; background: var(--fondo-eceff4); color: var(--text-muted); font-family: inherit; font-size: 0.95rem; font-weight: 600; padding: 11px 18px; border-radius: 10px 10px 0 0; cursor: pointer; white-space: nowrap; margin-bottom: -1px; }
.soc-tab:hover { color: var(--text); }
.soc-tab.on { background: var(--card); color: var(--primary); border-color: var(--border); }
.soc-tab-n { font-size: 0.74rem; font-weight: 800; background: var(--velo-8); color: inherit; border-radius: 999px; padding: 1px 8px; }
.soc-revisar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin: 14px 0 4px; background: var(--card); }
.soc-revisar-t { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--text); }
.soc-revisar-t svg { color: var(--text-muted); }
.soc-pill-dup { display: inline-flex; align-items: center; gap: 8px; background: var(--fondo-fffbea); border: 1px solid var(--borde-f5cf4a); color: var(--texto-8a4b00); font-family: inherit; font-weight: 600; font-size: 0.92rem; padding: 8px 14px; border-radius: 10px; cursor: pointer; }
.soc-pill-dup:hover { background: var(--fondo-fff4c7); }
.soc-pill-n { background: var(--fondo-f59e0b); color: var(--on-solid); font-size: 0.74rem; font-weight: 800; border-radius: 999px; padding: 1px 8px; }
.soc-filtros { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin: 14px 0 6px; }
.soc-filtro { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 200px; }
.soc-filtro-q { flex: 1 1 260px; }
.soc-filtro label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin: 0; }
.soc-filtro select { background: var(--fondo-f3f5f8); }
.soc-q { position: relative; }
.soc-q > span:first-child { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.soc-q input { padding-left: 38px; }
.soc-cuenta { font-size: 0.78rem; color: var(--text-muted); margin: 4px 0 8px; font-variant-numeric: tabular-nums; }

/* ── Socios: posibles duplicados ── */
.dup-grupo { border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin: 0 0 12px; background: var(--card); }
.dup-motivo { display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-8a4b00); background: var(--fondo-fffbea); border: 1px solid var(--borde-f5cf4a); border-radius: 999px; padding: 2px 10px; margin-bottom: 10px; }
.dup-socios { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-bottom: 10px; }
.dup-socio { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--borde-eef2f6); border-radius: var(--radius); padding: 10px; background: var(--fondo-f8fafc); }
.dup-foto { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.dup-foto.soc-ini { display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: var(--on-primary); font-weight: 800; }
.dup-datos { display: flex; flex-direction: column; gap: 2px; font-size: 0.82rem; color: var(--text-muted); min-width: 0; overflow-wrap: anywhere; }
.dup-datos b { color: var(--text); font-size: 0.92rem; }
.dup-socio .btn { align-self: flex-start; font-size: 0.8rem; padding: 6px 12px; }

/* ── Cobros: tipos de partida (Anual · Entrada · Otra) ── */
.par-clases { border: none; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.par-clases legend { font-size: 0.9rem; font-weight: 600; color: var(--text); margin-bottom: 6px; padding: 0; }
@media (max-width: 560px) { .par-clases { grid-template-columns: 1fr; } }
.par-op { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--border); border-radius: var(--radius); padding: 11px 12px; cursor: pointer; margin: 0; font-weight: 400; }
.par-op:has(input:checked) { border-color: var(--primary); background: var(--primary-faint); }
.par-op input { margin-top: 3px; accent-color: var(--primary); flex-shrink: 0; width: 16px; height: 16px; min-height: 0; }
.par-op b { display: block; font-size: 0.9rem; color: var(--text); }
.par-op span span { display: block; font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; line-height: 1.35; }
.par-clase { display: inline-block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; margin-right: 8px; vertical-align: 2px; }
.par-anual { background: var(--primary-faint); color: var(--primary); }
.par-entrada { background: var(--success-light); color: var(--success); }
.par-otra { background: var(--fondo-f1f5f9); color: var(--text-muted); }
.par-borrador { background: var(--fondo-fef3c7); color: var(--texto-92400e); }
.par-aviso-borrador { display: flex; flex-direction: column; gap: 10px; background: var(--fondo-fffbeb); border: 1.5px solid var(--fondo-fef3c7); border-radius: var(--radius); padding: 13px 14px; margin: 12px 0 4px; color: var(--texto-92400e); font-size: 0.9rem; line-height: 1.45; }
.par-aviso-borrador b { color: inherit; }
.etq-tabs { margin: 14px 0; }
.etq-tabs .soc-tab { flex: 1 1 0; justify-content: center; min-width: 0; }
@media (max-width: 420px) { .etq-tabs .soc-tab { padding: 10px 8px; font-size: 0.88rem; gap: 6px; } }
/* Nombre de socio pulsable en cualquier listado de la Junta: abre su previa */
.soc-link { display: inline; background: none; border: none; padding: 0; margin: 0; font: inherit; color: var(--primary); font-weight: 700; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .15s; overflow-wrap: anywhere; }
.soc-link:hover { text-decoration-color: currentColor; }
.soc-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }
.aud-todo { display: inline-flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--text-muted); margin: -4px 0 12px; cursor: pointer; font-weight: 600; }
.aud-todo input { width: 18px; height: 18px; accent-color: var(--primary); min-height: 0; }
.env-tabs .soc-tab svg { flex-shrink: 0; }
@media (max-width: 480px) { .env-tabs .soc-tab svg { display: none; } .env-tabs .soc-tab { padding: 10px 4px; font-size: 0.86rem; gap: 5px; } .env-tabs .soc-tab-n { padding: 1px 6px; } }
.etc-ayuda { font-size: 0.86rem; color: var(--text-muted); line-height: 1.5; margin: 0 0 12px; }
.etc-row { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.etc-row:last-child { border-bottom: none; }
.etc-arch { opacity: 0.7; }
.etc-info { flex: 1 1 220px; min-width: 0; }
.etc-nom { font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.etc-n { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }
.etc-acc { display: flex; gap: 6px; flex-wrap: wrap; }
.etc-acc .btn { padding: 6px 11px; font-size: 0.8rem; margin: 0; width: auto; }
.etc-gestionar { display: inline-block; margin-top: 6px; padding: 2px 0; background: none; border: none; color: var(--primary); font: inherit; font-size: 0.82rem; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.pg-partida { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 10px 0 0; font-weight: 400; }
.pg-partida select { flex: 1 1 200px; min-width: 0; }
.pg-partida > span { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; flex-shrink: 0; }
.pg-partida select { min-height: 38px; padding-top: 6px; padding-bottom: 6px; font-size: 0.88rem; }
.par-etq { background: var(--success-light); color: var(--success); }
.ind-filtros { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin: 6px 0 12px; }
.ind-filtros .soc-filtro select, .ind-filtros .soc-filtro input { margin: 0; }
.ind-descargas { display: flex; gap: 8px; flex-shrink: 0; }
.ind-descargar { flex-shrink: 0; min-height: 44px; margin: 0; width: auto; }
@media (max-width: 560px) { .ind-descargas { width: 100%; } .ind-descargar { flex: 1 1 0; padding-left: 8px; padding-right: 8px; } }

/* ── Avisos de tareas pendientes del panel de la Junta ── */
.aviso-junta { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 12px 20px; background: var(--primary-faint); color: var(--text); border: 0; border-bottom: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 0; text-align: left; font-family: inherit; cursor: pointer; }
.aviso-junta:hover .aviso-junta-cta { background: var(--primary-dark); }
.aviso-junta:focus-visible { outline: 3px solid var(--primary-light); outline-offset: -3px; }
.aviso-junta-ic { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius); background: var(--card); color: var(--primary); border: 1px solid var(--border); }
.aviso-junta-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.aviso-junta-txt strong { font-size: 0.95rem; font-weight: 800; color: var(--primary); }
.aviso-junta-txt span { font-size: 0.78rem; color: var(--text-muted); }
.aviso-junta-cta { flex-shrink: 0; background: var(--primary); color: var(--on-primary); font-weight: 800; font-size: 0.82rem; padding: 8px 18px; border-radius: var(--radius-sm); white-space: nowrap; transition: background var(--transition); }

/* ── Elecciones a la Junta Directiva ── */
.elec-pasos { list-style: none; display: flex; margin: 6px 0 16px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.elec-paso { flex: 1; min-width: 0; padding: 8px 6px; font-size: 0.76rem; font-weight: 700; color: var(--text-muted); background: var(--card); border-right: 1px solid var(--border); text-align: center; line-height: 1.2; }
.elec-paso:last-child { border-right: 0; }
.elec-paso b { display: block; font-size: 0.7rem; font-variant-numeric: tabular-nums; opacity: .75; }
.elec-paso.hecho { color: var(--success); background: var(--success-light); }
.elec-paso.actual { color: var(--on-primary); background: var(--primary); }
.elec-intro { font-size: 0.86rem; color: var(--text-muted); line-height: 1.5; margin: 0 0 12px; }
.elec-sub { font-size: 0.72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); margin: 12px 0 6px; }
.elec-cand { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); margin-bottom: 12px; overflow: hidden; }
.elec-cand.elegida { border-color: var(--success); box-shadow: inset 4px 0 0 var(--success); }
.elec-cand.apagada { opacity: .6; }
.elec-cand-cab { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--primary-faint); border-bottom: 1px solid var(--border); }
.elec-cand-tt { flex: 1; min-width: 0; }
.elec-cand-n { font-size: 0.66rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--primary); }
.elec-cand-t { font-weight: 800; font-size: 0.98rem; line-height: 1.25; overflow-wrap: anywhere; }
.elec-cand-err, .elec-cand-motivo { padding: 8px 12px; font-size: 0.8rem; border-bottom: 1px solid var(--border); }
.elec-cand-err { color: var(--danger); background: var(--danger-light); }
.elec-cand-motivo { color: var(--text-muted); font-style: italic; border-bottom: 0; }
.elec-fila { display: grid; grid-template-columns: minmax(92px, 32%) 1fr; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 0.9rem; align-items: baseline; overflow-wrap: anywhere; }
.elec-fila:last-child { border-bottom: 0; }
.elec-cargo { font-weight: 700; font-size: 0.8rem; color: var(--primary); }
.elec-num-socio { font-size: 0.75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.elec-aviso { display: flex; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 600; color: var(--danger); margin-top: 3px; }
.elec-aviso.duda { color: var(--accent); }
.elec-cand-pie { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--border); }
.elec-cand-pie .btn { padding: 6px 11px; font-size: 0.8rem; min-height: 36px; display: inline-flex; align-items: center; gap: 4px; }
.elec-accion { display: flex; align-items: center; gap: 12px; padding: 12px; margin-top: 14px; border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius); background: var(--card); }
.elec-accion > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; }
.elec-accion > div > span { font-size: 0.8rem; color: var(--text-muted); }
.elec-accion .btn { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.elec-config { border: 1px solid var(--border); border-radius: var(--radius); margin: 14px 0 0; background: var(--card); }
.elec-config summary { cursor: pointer; padding: 11px 12px; font-weight: 700; font-size: 0.88rem; display: flex; align-items: center; gap: 7px; color: var(--primary); }
.elec-config[open] summary { border-bottom: 1px solid var(--border); }
.elec-config-c { padding: 4px 12px 12px; }
.elec-config .elec-lista { padding: 6px 12px 12px 30px; }
.elec-chips { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.elec-chk { display: flex; align-items: flex-start; gap: 9px; margin: 8px 0; cursor: pointer; font-size: 0.88rem; }
.elec-chk input { width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; accent-color: var(--primary); }
.elec-chk span { display: flex; flex-direction: column; gap: 1px; }
.elec-chk small { color: var(--text-muted); font-size: 0.76rem; }
.elec-mfila { display: grid; grid-template-columns: 172px 1fr 40px; gap: 8px; align-items: start; margin-bottom: 8px; }
.elec-mfila .env-bbtn { height: 44px; }
@media (max-width: 520px) { .elec-mfila { grid-template-columns: 1fr 40px; } .elec-mfila .elec-picker { grid-column: 1 / -1; grid-row: 2; } }
.elec-picker { position: relative; min-width: 0; }
.elec-res { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px); background: var(--card); border: 1px solid var(--border-control); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); max-height: 280px; overflow-y: auto; }
.elec-res button { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--border); background: none; font: inherit; font-size: 0.88rem; color: var(--text); cursor: pointer; }
.elec-res button:last-child { border-bottom: 0; }
.elec-res button:hover, .elec-res button:focus-visible { background: var(--primary-faint); outline: none; }
.elec-res-vacio { padding: 10px 12px; font-size: 0.85rem; color: var(--text-muted); }
.elec-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 4px 0 10px; }
.elec-cifra { display: flex; flex-direction: column; gap: 5px; border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; background: var(--card); }
.elec-cifra label, .elec-cifra-l { min-height: 2.5em; font-size: 0.76rem; font-weight: 700; color: var(--text-muted); line-height: 1.25; }
.elec-cifra input { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.elec-cifra small { font-size: 0.72rem; color: var(--text-muted); }
.elec-cifra.calc { background: var(--primary-faint); justify-content: space-between; }
.elec-num { font-size: 1.7rem; font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; line-height: 1.1; }
.elec-veredicto { min-height: 1.4em; margin: 0 0 12px; font-weight: 700; font-size: 0.92rem; }
.elec-veredicto.bien { color: var(--success); }
.elec-veredicto.mal { color: var(--danger); }
.elec-recuento { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); padding: 12px; margin-bottom: 12px; }
.elec-recuento-t { display: flex; justify-content: space-between; gap: 10px; font-size: 0.86rem; color: var(--text-muted); padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.elec-recuento-t b { color: var(--text); font-size: 1rem; font-variant-numeric: tabular-nums; }
.elec-recuento-f { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 7px 0; font-size: 0.88rem; }
.elec-recuento-f b { font-variant-numeric: tabular-nums; }
.elec-barra { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.elec-barra > span { display: block; height: 100%; background: var(--primary); }
.elec-lista { margin: 0 0 8px; padding-left: 18px; font-size: 0.88rem; line-height: 1.6; }
.elec-ok { display: flex; align-items: center; gap: 7px; font-size: 0.88rem; font-weight: 600; color: var(--success); }
/* Socio */
.iev-eleccion { border-left-color: var(--accent); }
.iev-eleccion .iev-fecha { color: var(--accent); background: var(--warning-light); border-color: transparent; }
.iev-eleccion .iev-etq { color: var(--accent); }
.elec-fase { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--card); margin-bottom: 14px; font-size: 0.9rem; line-height: 1.45; }
.elec-fase > svg { flex-shrink: 0; color: var(--accent); margin-top: 2px; }
.elec-fase b { display: block; margin-bottom: 2px; }
.elec-historial { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); margin-bottom: 8px; }
.elec-historial summary { cursor: pointer; padding: 11px 12px; font-weight: 700; font-size: 0.9rem; }
.elec-historial summary small { display: block; font-weight: 500; color: var(--text-muted); font-size: 0.78rem; }
.elec-historial[open] summary { border-bottom: 1px solid var(--border); }

/* ── Medios de pago aceptados (debajo de cada botón de pagar con tarjeta o Bizum) ── */
.pago-medios { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; width: fit-content; max-width: 100%; margin: 10px auto 2px; padding: 8px 10px; background: #fff; border: 1px solid var(--border); border-radius: 12px; } /* color-fijo: los logotipos necesitan fondo blanco también en modo oscuro */
.pago-medios img { height: 16px; width: auto; display: block; }
.pago-medios .pm-bizum { height: 18px; }
.pago-medios .pm-visa { height: 11px; }
.pago-medios .pm-revolut { height: 11px; }
.btn-row + .pago-medios { margin-top: 12px; }
/* Selector «¿Cómo quieres pagar?»: en modo oscuro, los logotipos de tarjeta sobre blanco (Apple Pay y VISA son oscuros) */
html.tema-oscuro .pago-logos { background: #fff; border-radius: 8px; padding: 5px 8px; } /* color-fijo: logotipos sobre blanco */
.pago-logos img.pago-logo-visa { height: 14px; }

/* ── DNI ya usado por otro socio ── */
.dni-aviso { font-size: 0.82rem; font-weight: 600; color: var(--danger); margin-top: 6px; }
.dni-aviso:empty { display: none; }
input[aria-invalid="true"] { border-color: var(--danger); }

/* ── Comedor: temporada informativa, histórico y sesiones archivadas ── */
.ctl-info { display: flex; gap: 10px; align-items: flex-start; background: var(--primary-faint); border: 1px solid var(--borde-d6e0fb); color: var(--primary); border-radius: var(--radius); padding: 11px 13px; margin: 0 0 14px; }
.ctl-info b { display: block; font-size: 0.9rem; }
.ctl-info span { display: block; font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }
.ctl-prog { display: inline-block; font-size: 12px; font-weight: 600; color: var(--text-muted); background: var(--fondo-f8fafc); border: 1px dashed var(--borde-cbd5e1); border-radius: 6px; padding: 5px 10px; }
.ctl-hist { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--card); border: none; border-bottom: 1px solid var(--borde-f1f5f9); padding: 10px 2px; font-family: inherit; font-size: 0.88rem; color: var(--text); cursor: pointer; }
.ctl-hist:hover { background: var(--fondo-f8fafc); }
.ctl-hist-n { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
.ctl-archivada { color: var(--texto-92400e); font-weight: 700; }
.ctl-consulta { border: none; padding: 0; margin: 0; min-width: 0; }
.ctl-consulta button, .ctl-consulta input, .ctl-consulta select, .ctl-consulta textarea { pointer-events: none; opacity: 0.75; }
.dup-ayuda { font-size: 0.84rem; color: var(--text); background: var(--fondo-fffbea); border: 1px solid var(--borde-f5e3a3); border-radius: var(--radius); padding: 9px 11px; margin: 0 0 10px; line-height: 1.45; }

/* ── Colores generados por scripts/colores-a-variables.mjs: se pueden retocar los valores oscuros a mano ── */
:root {
  --borde-039aa1: #039aa1;
  --borde-05bec6: #05bec6;
  --borde-0e2fae: #0e2fae;
  --borde-111111: #111111;
  --borde-166534: #166534;
  --borde-16a34a: #16a34a;
  --borde-3b82f6: #3b82f6;
  --borde-86efac: #86efac;
  --borde-93c5fd: #93c5fd;
  --borde-94a3b8: #94a3b8;
  --borde-9aa7bd: #9aa7bd;
  --borde-a9d3b7: #a9d3b7;
  --borde-a9d8ba: #a9d8ba;
  --borde-b45309: #b45309;
  --borde-b9c6e8: #b9c6e8;
  --borde-b9cce2: #b9cce2;
  --borde-bae6fd: #bae6fd;
  --borde-bbf7d0: #bbf7d0;
  --borde-bfdbfe: #bfdbfe;
  --borde-c7d6f5: #c7d6f5;
  --borde-c7d7f5: #c7d7f5;
  --borde-c7d7fe: #c7d7fe;
  --borde-c8d3ea: #c8d3ea;
  --borde-c9d6f5: #c9d6f5;
  --borde-c9d6fb: #c9d6fb;
  --borde-cbd5e1: #cbd5e1;
  --borde-d6e0fb: #d6e0fb;
  --borde-d6e2ff: #d6e2ff;
  --borde-d97706: #d97706;
  --borde-dc2626: #dc2626;
  --borde-dce3ec: #dce3ec;
  --borde-ddd6fe: #ddd6fe;
  --borde-dde3ef: #dde3ef;
  --borde-e2e8f0: #e2e8f0;
  --borde-e2e8f4: #e2e8f4;
  --borde-e3e8f3: #e3e8f3;
  --borde-e5e7eb: #e5e7eb;
  --borde-e6b0aa: #e6b0aa;
  --borde-e6ebf5: #e6ebf5;
  --borde-e8b44a: #e8b44a;
  --borde-eef2f6: #eef2f6;
  --borde-eef2f8: #eef2f8;
  --borde-eef2fb: #eef2fb;
  --borde-f0d49a: #f0d49a;
  --borde-f1b8b2: #f1b8b2;
  --borde-f1d58e: #f1d58e;
  --borde-f1f5f9: #f1f5f9;
  --borde-f3b1b1: #f3b1b1;
  --borde-f59e0b: #f59e0b;
  --borde-f5cf4a: #f5cf4a;
  --borde-f5e3a3: #f5e3a3;
  --borde-fca5a5: #fca5a5;
  --borde-fcd34d: #fcd34d;
  --borde-fde68a: #fde68a;
  --borde-fecaca: #fecaca;
  --borde-fed7aa: #fed7aa;
  --borde-fef3c7: #fef3c7;
  --borde-ffffff: #ffffff;
  --fondo-000000: #000000;
  --fondo-01165a: #01165a;
  --fondo-021f7a: #021f7a;
  --fondo-059669: #059669;
  --fondo-0b1220: #0b1220;
  --fondo-0e2fae: #0e2fae;
  --fondo-0e6b39: #0e6b39;
  --fondo-0e7a41: #0e7a41;
  --fondo-10b981: #10b981;
  --fondo-1347d4: #1347d4;
  --fondo-146236: #146236;
  --fondo-16a34a: #16a34a;
  --fondo-1a1a2e: #1a1a2e;
  --fondo-1a4fd8: #1a4fd8;
  --fondo-1b7a43: #1b7a43;
  --fondo-1e293b: #1e293b;
  --fondo-1e40af: #1e40af;
  --fondo-34d399: #34d399;
  --fondo-475569: #475569;
  --fondo-60a5fa: #60a5fa;
  --fondo-6d28d9: #6d28d9;
  --fondo-94a3b8: #94a3b8;
  --fondo-9a3412: #9a3412;
  --fondo-a61b1b: #a61b1b;
  --fondo-b45309: #b45309;
  --fondo-b7c0cc: #b7c0cc;
  --fondo-bfdbfe: #bfdbfe;
  --fondo-cbd5e1: #cbd5e1;
  --fondo-d1fae5: #d1fae5;
  --fondo-d7deec: #d7deec;
  --fondo-d97706: #d97706;
  --fondo-dbe6ff: #dbe6ff;
  --fondo-dc2626: #dc2626;
  --fondo-dce3ec: #dce3ec;
  --fondo-dcfce7: #dcfce7;
  --fondo-ddd6fe: #ddd6fe;
  --fondo-ddf4ef: #ddf4ef;
  --fondo-e0e8ff: #e0e8ff;
  --fondo-e2e8f0: #e2e8f0;
  --fondo-e2e8f4: #e2e8f4;
  --fondo-e2e8f5: #e2e8f5;
  --fondo-e3e8f3: #e3e8f3;
  --fondo-e7f6ec: #e7f6ec;
  --fondo-e8edfb: #e8edfb;
  --fondo-eceff4: #eceff4;
  --fondo-ede9fe: #ede9fe;
  --fondo-eef1f5: #eef1f5;
  --fondo-eef2f8: #eef2f8;
  --fondo-eef2fb: #eef2fb;
  --fondo-eef7ff: #eef7ff;
  --fondo-ef4444: #ef4444;
  --fondo-eff4ff: #eff4ff;
  --fondo-eff6ff: #eff6ff;
  --fondo-f0f9ff: #f0f9ff;
  --fondo-f0fdf4: #f0fdf4;
  --fondo-f1f5f9: #f1f5f9;
  --fondo-f2fcfc: #f2fcfc;
  --fondo-f3f5f8: #f3f5f8;
  --fondo-f3f5fa: #f3f5fa;
  --fondo-f59e0b: #f59e0b;
  --fondo-f5f3ff: #f5f3ff;
  --fondo-f5f8ff: #f5f8ff;
  --fondo-f6f8fd: #f6f8fd;
  --fondo-f6f9ff: #f6f9ff;
  --fondo-f7f9fd: #f7f9fd;
  --fondo-f8fafc: #f8fafc;
  --fondo-f8faff: #f8faff;
  --fondo-fafbff: #fafbff;
  --fondo-fbfcfe: #fbfcfe;
  --fondo-fde68a: #fde68a;
  --fondo-fde8e8: #fde8e8;
  --fondo-fed7aa: #fed7aa;
  --fondo-fee2e2: #fee2e2;
  --fondo-fef2f2: #fef2f2;
  --fondo-fef3c7: #fef3c7;
  --fondo-fef9ec: #fef9ec;
  --fondo-fff3dc: #fff3dc;
  --fondo-fff4c7: #fff4c7;
  --fondo-fff4db: #fff4db;
  --fondo-fff4e0: #fff4e0;
  --fondo-fff7ed: #fff7ed;
  --fondo-fff7f7: #fff7f7;
  --fondo-fff8e8: #fff8e8;
  --fondo-fffbea: #fffbea;
  --fondo-fffbeb: #fffbeb;
  --texto-0284c7: #0284c7;
  --texto-047857: #047857;
  --texto-059669: #059669;
  --texto-065f46: #065f46;
  --texto-075985: #075985;
  --texto-0891b2: #0891b2;
  --texto-0e6b39: #0e6b39;
  --texto-0f172a: #0f172a;
  --texto-0f6b5e: #0f6b5e;
  --texto-10b981: #10b981;
  --texto-111111: #111111;
  --texto-12308f: #12308f;
  --texto-14213d: #14213d;
  --texto-14532d: #14532d;
  --texto-145a32: #145a32;
  --texto-166534: #166534;
  --texto-16a34a: #16a34a;
  --texto-1a1a1a: #1a1a1a;
  --texto-1a1a2e: #1a1a2e;
  --texto-1d4ed8: #1d4ed8;
  --texto-1e293b: #1e293b;
  --texto-1e3a8a: #1e3a8a;
  --texto-1e40af: #1e40af;
  --texto-1e50e8: #1e50e8;
  --texto-22c55e: #22c55e;
  --texto-333333: #333333;
  --texto-334155: #334155;
  --texto-34d399: #34d399;
  --texto-374151: #374151;
  --texto-3b82f6: #3b82f6;
  --texto-475569: #475569;
  --texto-4f7bf0: #4f7bf0;
  --texto-5b6676: #5b6676;
  --texto-64748b: #64748b;
  --texto-6b4600: #6b4600;
  --texto-6b7280: #6b7280;
  --texto-6d28d9: #6d28d9;
  --texto-78350f: #78350f;
  --texto-7c3aed: #7c3aed;
  --texto-8a4b00: #8a4b00;
  --texto-8b5cf6: #8b5cf6;
  --texto-8c1d18: #8c1d18;
  --texto-92400e: #92400e;
  --texto-94a3b8: #94a3b8;
  --texto-991b1b: #991b1b;
  --texto-9a3412: #9a3412;
  --texto-9ca3af: #9ca3af;
  --texto-9db4ec: #9db4ec;
  --texto-a5b4d4: #a5b4d4;
  --texto-a61b1b: #a61b1b;
  --texto-b45309: #b45309;
  --texto-b91c1c: #b91c1c;
  --texto-c3cfe6: #c3cfe6;
  --texto-cbd5e1: #cbd5e1;
  --texto-d6deea: #d6deea;
  --texto-d97706: #d97706;
  --texto-dc2626: #dc2626;
  --texto-e2e8f0: #e2e8f0;
  --texto-ea580c: #ea580c;
  --texto-ec4899: #ec4899;
  --texto-ef4444: #ef4444;
  --texto-f59e0b: #f59e0b;
  --texto-f87171: #f87171;
  --texto-fbbf24: #fbbf24;
  --velo-10: rgba(4,45,163,0.1);
  --velo-12: rgba(4,45,163,0.12);
  --velo-18: rgba(4,45,163,0.18);
  --velo-22: rgba(4,45,163,0.22);
  --velo-25: rgba(4,45,163,0.25);
  --velo-30: rgba(4,45,163,0.3);
  --velo-32: rgba(4,45,163,0.32);
  --velo-34: rgba(4,45,163,0.34);
  --velo-35: rgba(4,45,163,0.35);
  --velo-4: rgba(4,45,163,0.04);
  --velo-40: rgba(4,45,163,0.4);
  --velo-45: rgba(4,45,163,0.45);
  --velo-50: rgba(4,45,163,0.5);
  --velo-55: rgba(4,45,163,0.55);
  --velo-6: rgba(4,45,163,0.06);
  --velo-60: rgba(4,45,163,0.6);
  --velo-65: rgba(4,45,163,0.65);
  --velo-7: rgba(4,45,163,0.07);
  --velo-8: rgba(4,45,163,0.08);
  --velo-93: rgba(4,45,163,0.93);
}
html.tema-oscuro {
  --borde-039aa1: #0b5054;
  --borde-05bec6: #004b4e;
  --borde-0e2fae: #274288;
  --borde-111111: #484848;
  --borde-166534: #2b5236;
  --borde-16a34a: #0f5525;
  --borde-3b82f6: #1e4482;
  --borde-86efac: #074525;
  --borde-93c5fd: #253e5a;
  --borde-94a3b8: #3b424d;
  --borde-9aa7bd: #3b414d;
  --borde-a9d3b7: #2c4134;
  --borde-a9d8ba: #2a4133;
  --borde-b45309: #6c3717;
  --borde-b9c6e8: #353b4c;
  --borde-b9cce2: #333c47;
  --borde-bae6fd: #263b46;
  --borde-bbf7d0: #203e2c;
  --borde-bfdbfe: #2d3a4b;
  --borde-c7d6f5: #323948;
  --borde-c7d7f5: #323948;
  --borde-c7d7fe: #31394b;
  --borde-c8d3ea: #353a45;
  --borde-c9d6f5: #333948;
  --borde-c9d6fb: #32384a;
  --borde-cbd5e1: #353a40;
  --borde-d6e0fb: #333744;
  --borde-d6e2ff: #323745;
  --borde-d97706: #663604;
  --borde-dc2626: #7f211d;
  --borde-dce3ec: #34383c;
  --borde-ddd6fe: #393548;
  --borde-dde3ef: #34373d;
  --borde-e2e8f0: #34373a;
  --borde-e2e8f4: #34363c;
  --borde-e3e8f3: #34363b;
  --borde-e5e7eb: #363638;
  --borde-e6b0aa: #4f3532;
  --borde-e6ebf5: #34363b;
  --borde-e8b44a: #503905;
  --borde-eef2f6: #333537;
  --borde-eef2f8: #333538;
  --borde-eef2fb: #333539;
  --borde-f0d49a: #45371a;
  --borde-f1b8b2: #4f3331;
  --borde-f1d58e: #453712;
  --borde-f1f5f9: #333536;
  --borde-f3b1b1: #523232;
  --borde-f59e0b: #593601;
  --borde-f5cf4a: #473800;
  --borde-f5e3a3: #403716;
  --borde-fca5a5: #592f2f;
  --borde-fcd34d: #463705;
  --borde-fde68a: #423600;
  --borde-fecaca: #4a3132;
  --borde-fed7aa: #46341e;
  --borde-fef3c7: #3a3520;
  --borde-ffffff: #333333;
  --fondo-000000: #262626;
  --fondo-01165a: #041d61;
  --fondo-021f7a: #021f7a;
  --fondo-059669: #01855d;
  --fondo-0b1220: #1f2636;
  --fondo-0e2fae: #0e2fae;
  --fondo-0e6b39: #0e6b39;
  --fondo-0e7a41: #0e7a41;
  --fondo-10b981: #00855b;
  --fondo-1347d4: #1347d4;
  --fondo-146236: #146236;
  --fondo-16a34a: #0c873b;
  --fondo-1a1a2e: #242439;
  --fondo-1a4fd8: #1a4fd8;
  --fondo-1b7a43: #1b7a43;
  --fondo-1e293b: #1e293b;
  --fondo-1e40af: #1e40af;
  --fondo-34d399: #03875e;
  --fondo-475569: #475569;
  --fondo-60a5fa: #3176c7;
  --fondo-6d28d9: #6d28d9;
  --fondo-94a3b8: #68768a;
  --fondo-9a3412: #9a3412;
  --fondo-a61b1b: #a61b1b;
  --fondo-b45309: #b45309;
  --fondo-b7c0cc: #6e7781;
  --fondo-bfdbfe: #152231;
  --fondo-cbd5e1: #1e2328;
  --fondo-d1fae5: #0c1f16;
  --fondo-d7deec: #1c1f25;
  --fondo-d97706: #b36100;
  --fondo-dbe6ff: #181d27;
  --fondo-dc2626: #dc2626;
  --fondo-dce3ec: #1b1e22;
  --fondo-dcfce7: #0f1d15;
  --fondo-ddd6fe: #201d2e;
  --fondo-ddf4ef: #131d1b;
  --fondo-e0e8ff: #191c26;
  --fondo-e2e8f0: #1a1d20;
  --fondo-e2e8f4: #1a1c22;
  --fondo-e2e8f5: #1a1c22;
  --fondo-e3e8f3: #1a1c21;
  --fondo-e7f6ec: #151c17;
  --fondo-e8edfb: #191b21;
  --fondo-eceff4: #191b1d;
  --fondo-ede9fe: #1c1a22;
  --fondo-eef1f5: #191a1c;
  --fondo-eef2f8: #181a1c;
  --fondo-eef2fb: #181a1d;
  --fondo-eef7ff: #15191c;
  --fondo-ef4444: #dd3035;
  --fondo-eff4ff: #17191e;
  --fondo-eff6ff: #16191d;
  --fondo-f0f9ff: #15191b;
  --fondo-f0fdf4: #141916;
  --fondo-f1f5f9: #17191b;
  --fondo-f2fcfc: #141818;
  --fondo-f3f5f8: #18191a;
  --fondo-f3f5fa: #18191b;
  --fondo-f59e0b: #a3680c;
  --fondo-f5f3ff: #19181d;
  --fondo-f5f8ff: #17181b;
  --fondo-f6f8fd: #17181a;
  --fondo-f6f9ff: #16181a;
  --fondo-f7f9fd: #171819;
  --fondo-f8fafc: #171818;
  --fondo-f8faff: #171719;
  --fondo-fafbff: #171719;
  --fondo-fbfcfe: #161718;
  --fondo-fde68a: #241c00;
  --fondo-fde8e8: #211818;
  --fondo-fed7aa: #2c1b05;
  --fondo-fee2e2: #241819;
  --fondo-fef2f2: #1c1717;
  --fondo-fef3c7: #1e1905;
  --fondo-fef9ec: #1a1712;
  --fondo-fff3dc: #1d180e;
  --fondo-fff4c7: #1e1905;
  --fondo-fff4db: #1d180e;
  --fondo-fff4e0: #1d1810;
  --fondo-fff7ed: #1b1713;
  --fondo-fff7f7: #1a1717;
  --fondo-fff8e8: #1a1811;
  --fondo-fffbea: #191710;
  --fondo-fffbeb: #191711;
  --texto-0284c7: #52b8ff;
  --texto-047857: #6ecba5;
  --texto-059669: #53c797;
  --texto-065f46: #83cdaf;
  --texto-075985: #7dc3f5;
  --texto-0891b2: #59c7ea;
  --texto-0e6b39: #7cce96;
  --texto-0f172a: #c1cde8;
  --texto-0f6b5e: #7ac9ba;
  --texto-10b981: #42d49b;
  --texto-111111: #cfcfcf;
  --texto-12308f: #a5c0fc;
  --texto-14213d: #b7caef;
  --texto-14532d: #92cfa3;
  --texto-145a32: #8ccfa0;
  --texto-166534: #84ce97;
  --texto-16a34a: #59d579;
  --texto-1a1a1a: #cccccc;
  --texto-1a1a2e: #c7c9e5;
  --texto-1d4ed8: #93b6ff;
  --texto-1e293b: #bac8e0;
  --texto-1e3a8a: #a3bffc;
  --texto-1e40af: #9dbbfd;
  --texto-1e50e8: #91b4ff;
  --texto-22c55e: #40d870;
  --texto-333333: #c4c4c4;
  --texto-334155: #b0c1da;
  --texto-34d399: #38d59b;
  --texto-374151: #b5c1d4;
  --texto-3b82f6: #8eb8fd;
  --texto-475569: #abbbd3;
  --texto-4f7bf0: #97b6fd;
  --texto-5b6676: #aab6c8;
  --texto-64748b: #a2b3cc;
  --texto-6b4600: #deb479;
  --texto-6b7280: #aab2c1;
  --texto-6d28d9: #b9a8fd;
  --texto-78350f: #f5a782;
  --texto-7c3aed: #b6a2fe;
  --texto-8a4b00: #eca66b;
  --texto-8b5cf6: #baa9fd;
  --texto-8c1d18: #ff9e91;
  --texto-92400e: #f99e71;
  --texto-94a3b8: #a9b9ce;
  --texto-991b1b: #ff9b90;
  --texto-9a3412: #fe9a7c;
  --texto-9ca3af: #b1b8c4;
  --texto-9db4ec: #9fb6ee;
  --texto-a5b4d4: #a8b7d8;
  --texto-a61b1b: #fe988d;
  --texto-b45309: #fa9358;
  --texto-b91c1c: #fe9387;
  --texto-c3cfe6: #c3cfe6;
  --texto-cbd5e1: #cbd5e1;
  --texto-d6deea: #d6deea;
  --texto-d97706: #fe9c47;
  --texto-dc2626: #fe897c;
  --texto-e2e8f0: #e2e8f0;
  --texto-ea580c: #fd9a75;
  --texto-ec4899: #ff8dbd;
  --texto-ef4444: #ff968d;
  --texto-f59e0b: #f9a217;
  --texto-f87171: #fe9692;
  --texto-fbbf24: #fbbf24;
  --velo-10: rgba(0,0,0,0.30);
  --velo-12: rgba(0,0,0,0.32);
  --velo-18: rgba(0,0,0,0.38);
  --velo-22: rgba(0,0,0,0.42);
  --velo-25: rgba(0,0,0,0.45);
  --velo-30: rgba(0,0,0,0.50);
  --velo-32: rgba(0,0,0,0.52);
  --velo-34: rgba(0,0,0,0.54);
  --velo-35: rgba(0,0,0,0.55);
  --velo-4: rgba(0,0,0,0.24);
  --velo-40: rgba(0,0,0,0.60);
  --velo-45: rgba(0,0,0,0.65);
  --velo-50: rgba(0,0,0,0.70);
  --velo-55: rgba(0,0,0,0.75);
  --velo-6: rgba(0,0,0,0.26);
  --velo-60: rgba(0,0,0,0.75);
  --velo-65: rgba(0,0,0,0.75);
  --velo-7: rgba(0,0,0,0.27);
  --velo-8: rgba(0,0,0,0.28);
  --velo-93: rgba(0,0,0,0.75);
}
/* ── fin de colores generados ── */
/* Registro de la elección */
.elec-reg { list-style: none; margin: 0; padding: 4px 12px 8px; }
.elec-reg li { padding: 9px 0 9px 12px; border-left: 2px solid var(--border); position: relative; font-size: 0.84rem; }
.elec-reg li::before { content: ''; position: absolute; left: -5px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.elec-reg li.corr::before { background: var(--accent); }
.elec-reg li.corr .elec-reg-c b { color: var(--accent); }
.elec-reg-c { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; }
.elec-reg-c span { color: var(--text-muted); font-size: 0.76rem; font-variant-numeric: tabular-nums; }
.elec-reg-m { margin-top: 2px; font-weight: 600; }
.elec-reg-d { margin-top: 2px; color: var(--text-muted); overflow-wrap: anywhere; }
/* Check-in: delegaciones en papel */
.ckf-contador { display: flex; align-items: center; gap: 10px; }
.ckf-contador output { flex: 1; text-align: center; font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; padding: 6px; border: 2px solid var(--border); border-radius: var(--radius); background: var(--card); }
.ckf-mas { width: 48px; height: 48px; border-radius: var(--radius); border: 2px solid var(--border); background: var(--card); color: var(--text); font-size: 1.5rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.ckf-mas:focus-visible { outline: 3px solid var(--primary-light); outline-offset: 2px; }
.ckf-ayuda { font-size: 0.82rem; color: var(--text-muted); margin: 10px 0 8px; line-height: 1.45; }
.ckf-fila { display: flex; align-items: flex-start; gap: 10px; padding: 10px; margin-bottom: 8px; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--card); }
.ckf-fila.ok { border-left-color: var(--success); background: var(--success-light); }
.ckf-fila.mal { border-left-color: var(--danger); }
.ckf-n { flex-shrink: 0; width: 26px; height: 26px; margin-top: 8px; border-radius: 50%; background: var(--primary-faint); color: var(--primary); font-weight: 800; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; }
.ckf-val { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.ckf-val b { color: var(--success); }
.ckf-val span { font-size: 0.76rem; color: var(--text-muted); }
/* Delegaciones físicas registradas, agrupadas por quién las trajo */
.dfg { border: 1px solid var(--border); border-left: 4px solid var(--success); border-radius: var(--radius); background: var(--card); margin-bottom: 10px; overflow: hidden; }
.dfg-cab { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; background: var(--success-light); color: var(--text); font-size: 0.86rem; line-height: 1.4; }
.dfg-cab svg { flex-shrink: 0; margin-top: 2px; color: var(--success); }
.dfg-fila { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--border); }
.dfg-ok { flex-shrink: 0; color: var(--success); display: flex; }
.dfg-txt { flex: 1; min-width: 0; font-size: 0.88rem; }
.dfg-txt span { color: var(--text-muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.dfg-txt small { display: block; color: var(--text-muted); font-size: 0.74rem; margin-top: 1px; }
/* ── Menú lateral de la Junta por grupos plegables ── */
.jn-desk { display: none; }
#junta-nav .jn-badge { display: none; }
.sm-grupo { margin: 14px 4px 6px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); }
@media (min-width: 900px) {
  body.has-junta-nav #junta-nav .sn-inner { padding: 12px 10px; }
  .jn-desk { display: flex; flex-direction: column; gap: 1px; flex: 1; min-height: 0; }
  body.has-junta-nav #junta-nav .sn-mob { display: none; }
  #junta-nav .jn-badge:not([hidden]) { display: inline-flex; margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; align-items: center; justify-content: center; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-size: 0.7rem; font-weight: 800; font-variant-numeric: tabular-nums; }
  .jn-buscar { display: flex; align-items: center; gap: 8px; margin: 0 2px 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text-muted); font: inherit; font-size: 0.84rem; cursor: pointer; text-align: left; }
  .jn-buscar:hover { border-color: var(--border-control); }
  .jn-buscar span { flex: 1; }
  .jn-buscar kbd, .jn-paleta kbd { font-family: inherit; font-size: 0.68rem; font-weight: 700; padding: 1px 6px; border: 1px solid var(--border); border-radius: 4px; background: var(--card); color: var(--text-muted); }
  .jn-hoy { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: calc(100% - 4px); margin: 0 2px 10px; padding: 9px 12px; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--warning-light); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
  .jn-hoy-e { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
  .jn-hoy b { font-size: 0.95rem; }
  .jn-hoy span:last-child { font-size: 0.76rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .jn-grupo { margin-top: 2px; }
  .jn-gcab { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px 6px; border: 0; background: none; font: inherit; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); cursor: pointer; text-align: left; border-radius: var(--radius-sm); }
  .jn-gcab:hover { color: var(--text); }
  .jn-gcab:focus-visible { outline: 3px solid var(--primary-light); outline-offset: -2px; }
  .jn-gcab > span:first-child { flex: 1; }
  .jn-chev { flex-shrink: 0; transition: transform var(--transition); }
  .jn-gcab[aria-expanded="true"] .jn-chev { transform: rotate(90deg); }
  .jn-gcab[aria-expanded="true"] { color: var(--primary); }
  .jn-gbadge:not([hidden]) { display: inline-flex; min-width: 18px; height: 18px; padding: 0 5px; align-items: center; justify-content: center; border-radius: 999px; background: var(--primary-faint); color: var(--primary); font-size: 0.66rem; font-weight: 800; letter-spacing: 0; }
  .jn-grupo.abierto .jn-gbadge { display: none; }
  .jn-gitems { display: flex; flex-direction: column; gap: 1px; padding-bottom: 4px; }
  body.has-junta-nav #junta-nav .jn-gitems .sn-item { padding: 6px 14px 6px 16px; font-weight: 600; }
  body.has-junta-nav #junta-nav .jn-gitems .sn-item svg { width: 18px; height: 18px; }
  .jn-pie { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 1px; }
  body.has-junta-nav #junta-nav .jn-pie .sn-salir { margin-top: 0; border-top: 0; padding-top: 7px; }
  .jn-yo { display: flex; align-items: center; gap: 10px; padding: 6px 10px 8px; }
  .jn-yo-av { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--primary-faint); color: var(--primary); display: flex; align-items: center; justify-content: center; }
  .jn-yo-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
  .jn-yo-tx b { font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .jn-yo-tx span { font-size: 0.74rem; color: var(--text-muted); }
}
/* Buscador ⌘K */
.jn-paleta { position: fixed; inset: 0; z-index: 3500; background: var(--velo-50); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.jn-paleta-caja { width: 100%; max-width: 560px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.jn-paleta-in { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.jn-paleta-in input { flex: 1; border: 0 !important; outline: none !important; box-shadow: none !important; background: transparent !important; font-size: 1.02rem; padding: 4px 0; }
.jn-res { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow-y: auto; }
.jn-res li { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.jn-res li.on, .jn-res li:hover { background: var(--primary-faint); }
.jn-res li span { display: flex; flex-direction: column; min-width: 0; }
.jn-res li small { color: var(--text-muted); font-size: 0.75rem; }
.jn-res-v { color: var(--text-muted); font-size: 0.88rem; cursor: default !important; }

/* ── Buzón (Junta) ── */
.bz-cab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bz-cab-b { display: flex; flex-wrap: wrap; gap: 8px; }
.bz-cab-b .btn { display: inline-flex; align-items: center; gap: 6px; }
.bz-tabs { margin: 14px 0 12px; }
.bz-fila { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.bz-fila:hover { border-color: var(--border-control); }
.bz-fila-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bz-fila-t > span:nth-child(2) { font-size: 0.78rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.bz-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.bz-chip { font-size: 0.68rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); }
.bz-lect { flex-shrink: 0; width: 120px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.bz-lect b { font-size: 1.15rem; color: var(--primary); font-variant-numeric: tabular-nums; }
.bz-lect > span:not(.elec-barra) { font-size: 0.72rem; color: var(--text-muted); }
.bz-lect .elec-barra { width: 100%; }
.bz-canales { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 18px; }
.bz-fijo { opacity: 0.85; }
.bz-etqs { display: flex; flex-wrap: wrap; gap: 6px; }
.bz-etq input { position: absolute; opacity: 0; pointer-events: none; }
.bz-etq span { display: inline-flex; gap: 5px; align-items: center; padding: 4px 10px; border: 1px solid var(--border); border-left: 4px solid var(--etq, var(--border)); border-radius: 999px; font-size: 0.8rem; cursor: pointer; background: var(--card); }
.bz-etq input:checked + span { background: var(--primary-faint); border-color: var(--primary); color: var(--primary); font-weight: 700; }
.bz-etq input:focus-visible + span { outline: 3px solid var(--primary-light); outline-offset: 1px; }
.bz-etq small { color: var(--text-muted); }
.bz-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.bz-acciones .btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.bz-prev { position: fixed; inset: 0; z-index: 3000; background: var(--velo-50); display: flex; align-items: center; justify-content: center; padding: 16px; }
.bz-prev-caja { width: 100%; max-width: 760px; max-height: 92vh; display: flex; flex-direction: column; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.bz-prev-cab { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 16px 18px 10px; }
.bz-prev-t { font-size: 1.1rem; font-weight: 800; color: var(--primary); }
.bz-prev-s { font-size: 0.84rem; color: var(--text-muted); margin-top: 2px; }
.bz-prev .soc-tabs { padding: 0 18px; }
.bz-prev-c { flex: 1; overflow-y: auto; padding: 16px 18px; background: var(--bg); }
.bz-prev-pie { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--border); }
.bz-prev-pie .btn { display: inline-flex; align-items: center; gap: 6px; }
.bz-movil { display: flex; justify-content: center; }
.bz-movil-p { width: 100%; max-width: 390px; padding: 14px; border: 8px solid var(--border-control); border-radius: 28px; background: var(--bg); }
.bz-correo-asunto { display: flex; gap: 10px; align-items: baseline; margin-bottom: 8px; font-size: 0.88rem; }
.bz-correo-asunto span { color: var(--text-muted); font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.bz-correo-f { width: 100%; min-height: 460px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; } /* color-fijo: el correo se ve siempre claro */
.bz-push { max-width: 380px; margin: 20px auto; padding: 12px 14px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 3px; font-size: 0.88rem; }
.bz-push-app { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--text-muted); }
.bz-push-app img { width: 16px; height: 16px; border-radius: 4px; }
.bz-det-cod { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.bz-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.bz-stats > div { display: flex; flex-direction: column; gap: 3px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.bz-stats b { font-size: 1.5rem; font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; line-height: 1; }
.bz-stats span { font-size: 0.76rem; color: var(--text-muted); }
@media (max-width: 560px) { .bz-stats { grid-template-columns: repeat(2, 1fr); } .bz-lect { width: 84px; } }
.bz-dest { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.bz-dest-f { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 0.86rem; }
.bz-dest-f:last-child { border-bottom: 0; }
.bz-dest-f small { color: var(--text-muted); }
.bz-leida { color: var(--success); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.bz-noleida { color: var(--text-muted); }
.bz-auto { border: 1px solid var(--border); border-radius: var(--radius); margin-top: 14px; }
.bz-auto-f { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.bz-auto-f:last-child { border-bottom: 0; }
.bz-auto-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bz-auto-t span { font-size: 0.76rem; color: var(--text-muted); }
.bz-sw { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.bz-sw input { width: 18px; height: 18px; accent-color: var(--primary); }

/* ── Buzón (socio) ── */
.bz-stabs { margin-bottom: 10px; }
.bz-slista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.bz-slista li + li { border-top: 1px solid var(--border); }
.bz-sf { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.bz-sf:hover { background: var(--bg); }
.bz-sf:focus-visible { outline: 3px solid var(--primary-light); outline-offset: -3px; }
.bz-punto { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; background: transparent; }
.bz-sf.nueva .bz-punto { background: var(--primary); }
.bz-sf-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bz-sf-cab { display: flex; justify-content: space-between; gap: 8px; }
.bz-sf-cat { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.bz-sf.nueva .bz-sf-cat { color: var(--primary); }
.bz-sf-f { font-size: 0.74rem; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bz-sf b { font-weight: 600; font-size: 0.94rem; overflow-wrap: anywhere; }
.bz-sf.nueva b { font-weight: 800; }
.bz-sf-r { font-size: 0.82rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-nota { background: var(--card); border: 1px solid var(--border); border-top: 4px solid var(--primary); border-radius: var(--radius); padding: 16px 16px 12px; }
.bz-nota.imp { border-top-color: var(--accent); }
.bz-nota-cab { display: flex; justify-content: space-between; gap: 10px; font-size: 0.72rem; color: var(--text-muted); }
.bz-nota-cat { font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); }
.bz-nota.imp .bz-nota-cat { color: var(--accent); }
.bz-nota-t { font-size: 1.25rem; line-height: 1.25; margin: 8px 0 4px; color: var(--text); }
.bz-nota-r { color: var(--text-muted); font-size: 0.92rem; margin: 0 0 10px; }
.bz-nota-c { font-size: 0.95rem; line-height: 1.6; margin-bottom: 14px; overflow-wrap: anywhere; }
.bz-nota-pie { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 0.72rem; color: var(--text-muted); }
.iev-buzon { border-left-color: var(--primary); }
.bz-publica { max-width: 640px; margin: 0 auto; }
.jn-gitems[hidden] { display: none !important; }
#junta-nav .sn-item svg { flex-shrink: 0; }
@media (min-width: 900px) { body.has-junta-nav #junta-nav .sn-item span:not(.jn-badge) { overflow: hidden; text-overflow: ellipsis; } }
.bz-nota-c p { margin: 0 0 10px; }
.bz-nota-c ul, .bz-nota-c ol { margin: 4px 0 12px; padding-left: 1.4em; list-style-position: outside; }
.bz-nota-c li { margin-bottom: 4px; }
/* Panel de la Junta: los módulos se abren desde el menú; su «← Volver» al inicio del módulo sobra */
body.has-junta-nav button[onclick="_juntaVolver()"] { display: none !important; }
/* ── Inicio del panel de la Junta ── */
.ji-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.ji-fecha { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); }
.ji-fecha::first-letter { text-transform: uppercase; }
.ji-hola { font-size: 1.7rem; line-height: 1.15; margin: 4px 0 2px; color: var(--text); letter-spacing: -0.01em; }
.ji-sub { margin: 0; color: var(--text-muted); font-size: 0.92rem; }
.ji-atajos { display: flex; flex-wrap: wrap; gap: 8px; }
.ji-atajos .btn { display: inline-flex; align-items: center; gap: 6px; }
.ji-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 760px) { .ji-kpis { grid-template-columns: repeat(2, 1fr); } }
.ji-kpi { display: flex; flex-direction: column; gap: 4px; padding: 14px; text-align: left; border: 1px solid var(--border); border-top: 3px solid var(--primary); border-radius: var(--radius); background: var(--card); color: var(--text); font: inherit; cursor: pointer; }
.ji-kpi:hover { border-color: var(--border-control); border-top-color: var(--primary); }
.ji-kpi.aviso { border-top-color: var(--accent); }
.ji-kpi.bien { border-top-color: var(--success); }
.ji-kpi-t { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.ji-kpi b { font-size: 1.75rem; line-height: 1.05; font-weight: 800; font-variant-numeric: tabular-nums; }
.ji-kpi.aviso b { color: var(--accent); }
.ji-kpi-s { font-size: 0.76rem; color: var(--text-muted); }
.ji-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
@media (max-width: 760px) { .ji-grid { grid-template-columns: 1fr; } }
.ji-ancha { grid-column: 1 / -1; }
.ji-caja { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ji-caja h2 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--primary); }
.ji-lista { display: flex; flex-direction: column; }
.ji-fila { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 2px; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ji-fila:last-child { border-bottom: 0; }
.ji-fila:hover b { color: var(--primary); }
.ji-fila-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ji-fila-t span { font-size: 0.8rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ji-vence { flex-shrink: 0; font-size: 0.72rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--bg); color: var(--text-muted); }
.ji-vence.pronto { background: var(--warning-light); color: var(--accent); }
.ji-vence.mal { background: var(--danger-light); color: var(--danger); }
.jn-badge-in { flex-shrink: 0; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-size: 0.74rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.ji-vacio { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: var(--radius); background: var(--bg); color: var(--text-muted); font-size: 0.88rem; }
.ji-vacio svg { flex-shrink: 0; color: var(--success); }
.ji-asam { display: flex; gap: 12px; align-items: flex-start; }
.ji-asam-f { flex-shrink: 0; width: 56px; padding: 6px 0; border-radius: var(--radius); background: var(--primary-faint); color: var(--primary); display: flex; flex-direction: column; align-items: center; }
.ji-asam-f b { font-size: 1.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.ji-asam-f span { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.ji-asam-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ji-asam-t > span { font-size: 0.82rem; color: var(--text-muted); }
.ji-hoy { color: var(--accent); }
.ji-tag { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin-top: 3px; padding: 2px 8px; border-radius: 999px; background: var(--warning-light); color: var(--accent) !important; font-size: 0.72rem !important; font-weight: 700; }
.ji-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ji-mini div { padding: 8px; border-radius: var(--radius-sm); background: var(--bg); text-align: center; }
.ji-mini b { display: block; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.ji-mini span { font-size: 0.72rem; color: var(--text-muted); }
.ji-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.ji-botones .btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ji-ev, .ji-bz { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 2px; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ji-ev:last-child, .ji-bz:last-child { border-bottom: 0; }
.ji-ev-f { flex-shrink: 0; width: 44px; display: flex; flex-direction: column; align-items: center; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; color: var(--primary); }
.ji-ev-f b { font-size: 1.2rem; line-height: 1; }
.ji-ev-t, .ji-bz-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ji-ev-t > span:not(.elec-barra), .ji-bz-t span { font-size: 0.78rem; color: var(--text-muted); }
.ji-ev-t b, .ji-bz-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ji-bz-p { font-size: 1.05rem; color: var(--primary); font-variant-numeric: tabular-nums; }
.ji-cumple { display: flex; flex-wrap: wrap; gap: 6px; }
.ji-cumple button { padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text); font: inherit; font-size: 0.84rem; cursor: pointer; }
.ji-act { list-style: none; margin: 0; padding: 0; }
.ji-act li { display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 0.84rem; }
.ji-act li:last-child { border-bottom: 0; }
.ji-act-q { font-weight: 700; color: var(--primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ji-act-a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
.ji-act-a b { color: var(--text); font-weight: 600; }
.ji-act-h { font-size: 0.74rem; color: var(--text-muted); white-space: nowrap; }
@media (max-width: 560px) { .ji-act li { grid-template-columns: 1fr auto; } .ji-act-q { grid-column: 1 / -1; } }
/* Buzón: opciones del redactor y programar */
.bz-opc { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px 6px; margin: 10px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 4px 14px; }
.bz-opc legend { padding: 0 6px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.bz-opc[hidden] { display: none; }
.bz-opc-o { display: flex; align-items: flex-start; gap: 9px; padding: 6px 0; cursor: pointer; font-size: 0.88rem; }
.bz-opc-o input { width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; accent-color: var(--primary); }
.bz-opc-o span { display: flex; flex-direction: column; }
.bz-opc-o small { color: var(--text-muted); font-size: 0.76rem; }
.bz-prog { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-right: auto; }
.bz-prog label { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); }
.bz-prog input { width: auto; padding: 8px 10px; }
.bz-sw-c select { padding: 6px 8px; font-size: 0.8rem; width: auto; }
@media (max-width: 640px) { .bz-auto-f { flex-wrap: wrap; } .bz-auto-t { flex-basis: 100%; } }
.env-prog { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px; border: 1px dashed var(--border-control); border-radius: var(--radius); }
.env-prog label { font-size: 0.84rem; font-weight: 700; color: var(--text-muted); }
.env-prog input { width: auto; flex: 1; min-width: 180px; }
.env-prog .btn { display: inline-flex; align-items: center; gap: 6px; }
.bz-adj { margin-top: 12px; padding: 14px; border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius); background: var(--card); }
.bz-adj-cab { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--primary); }

/* Formulario o documentos dentro de una notificación pública */
.bz-candado { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 14px 16px; border: 1px solid var(--border); border-left: 4px solid var(--borde-d97706); border-radius: 10px; background: var(--warning-light); }
.bz-candado > span { color: var(--texto-b45309); margin-top: 2px; }
.bz-candado > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bz-candado b { font-size: 0.98rem; color: var(--texto-0f172a); }
.bz-candado div > span { font-size: 0.88rem; color: var(--text-muted); line-height: 1.45; }
.bz-candado .btn { margin-top: 8px; align-self: flex-start; }
.bz-candado-abierto { border-left-color: var(--primary); background: var(--fondo-f8faff); }
.bz-candado-abierto > span { color: var(--primary); }
.bz-candado[hidden] { display: none; }

/* «¿Avisar a los socios?» tras una acción de la Junta */
.aviso-modal { z-index: 10050; }
.aviso-modal .carga-box { max-width: 430px; text-align: left; }
.aviso-modal .av-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--velo-8); color: var(--primary); margin-bottom: 12px; }
.aviso-modal .av-tit { font-size: 1.2rem; font-weight: 800; color: var(--texto-0f172a); margin-bottom: 4px; }
.aviso-modal .av-txt { font-size: 0.92rem; color: var(--text-muted); margin: 0 0 12px; line-height: 1.5; }
.aviso-modal .av-nota { border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; background: var(--fondo-f8faff); }
.aviso-modal .av-nota b { font-size: 0.95rem; color: var(--texto-0f172a); overflow-wrap: anywhere; }
.aviso-modal .av-nota span { font-size: 0.85rem; color: var(--text-muted); }
.aviso-modal .av-dest { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-muted); margin: 10px 0 14px; }
.aviso-modal .av-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.aviso-modal .av-luego { display: block; width: 100%; margin-top: 10px; background: none; border: 0; padding: 8px; font: inherit; font-size: 0.82rem; color: var(--text-muted); text-decoration: underline; cursor: pointer; }
.bz-datos-l { font-size: 0.75rem; color: var(--text-muted); margin: 0 2px 0 4px; align-self: center; }
.rt-btn.bz-dato { width: auto; padding: 0 9px; font-size: 0.78rem; font-weight: 600; color: var(--primary); }
.bz-muestra { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-muted); margin: 0 0 10px; }
/* Mandato de la Junta: fecha de fin y aviso */
.sj-mandato { display: flex; gap: 8px; align-items: flex-start; font-size: 0.86rem; color: var(--text-muted); margin: 0 0 12px; line-height: 1.5; }
.sj-mandato > span:first-child { color: var(--primary); margin-top: 2px; }
.ji-mandato { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--border); border-left: 4px solid var(--borde-d97706); border-radius: 12px; background: var(--warning-light); font: inherit; color: var(--texto-0f172a); cursor: pointer; }
.ji-mandato > span:first-child { color: var(--texto-b45309); }
.ji-mandato > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ji-mandato > span:nth-child(2) > span { font-size: 0.84rem; color: var(--text-muted); }
.ji-mandato.mal { border-left-color: var(--danger); }
.ji-mandato.mal > span:first-child { color: var(--danger); }
.ji-mandato.suave { background: var(--card); border-left-color: var(--primary); }
.ji-mandato.suave > span:first-child { color: var(--primary); }