/* =============================================================================
 *  panel-admin.css — EL DISEÑO DEL PANEL DE ALFONSO
 *
 *  Sale tal cual de `admin-final.html` (el prototipo que hizo Alfonso en junio):
 *  lineas 8-283 de aquel fichero, copiadas sin tocar ni un color.
 *
 *  Lo que NO se ha traido: el bloque del comparador de precompras (lineas
 *  284-661), porque redefine :root entero con fondo blanco y se comeria el
 *  panel. Esa seccion no se sube todavia.
 *
 *  Al final hay un bloque "AJUSTES DEL SERVIDOR": el prototipo escondia y
 *  ensenaba secciones con JavaScript; aqui cada seccion es una pagina de
 *  verdad, asi que esas dos reglas hay que anularlas.
 * ===========================================================================*/

  /* ══════════════════════════════════════════════════════════════════════
     DE DÍA O DE NOCHE · 20-sep-2026, pedido por Alfonso

     🔴 NI UN COLOR ESCRITO A MANO POR DEBAJO DE AQUÍ. Es la misma regla que
     ya está escrita para `estilo.css` y para la landing de cumpleaños: un
     `#ff8a93` suelto se queda con el color de noche cuando el panel esté de
     día, y lo normal es que acabe ilegible sin que nadie se entere.

     Los colores se llaman por su FUNCIÓN y no por su color, porque de día
     `--navy: #f3f4f6` es una mentira que confunde — pero el nombre se
     conserva para no tocar las 280 líneas que ya lo usan.
     ══════════════════════════════════════════════════════════════════════ */
  :root {
    --navy: #1a1a2e;            /* el fondo de todo */
    --navy-light: #232342;      /* las tarjetas */
    --navy-lighter: #2c2c4d;    /* lo que está por encima de una tarjeta */
    --ilustracion: #ffffff;    /* los dibujos del blog vienen con fondo claro: NO cambia entre temas */
    --coral: #e63946;           /* LA MARCA. No cambia nunca */
    --coral-dark: #c5303c;
    --text: #ffffff;
    --text-dim: #b8b8cc;
    --border: #34345a;
    --green: #4ade80;
    --amber: #f5b041;
    /* Los que faltaban: estaban escritos a mano por toda la hoja. */
    --panel: #14142a;           /* el fondo del contenido */
    --hondo: #0d0d1a;           /* huecos y previsualizaciones */
    --borde-suave: #2a2a45;
    --coral-texto: #ff8a93;     /* CORAL cuando es LETRA. De noche aclara */
    --sobre-color: #ffffff;     /* letra encima de un botón de color */
    --mal-texto: #ffd2d6;       /* el texto de un aviso rojo */
    --ojo-texto: #ffe8b8;       /* el texto de un aviso ámbar */
    --mono-fondo: #12131a;      /* las cajas de monoespaciada */
    --mono-texto: #f2f2f7;
    --pendiente-fondo: #1b1c2b;
  }

  /* 🔴 SE LLAMA «claro» Y NO «dia», y no es indiferente: la etiqueta la
     escribe `atributoDelTema()` de `src/tema.php`, que es el mecanismo del
     club, y el club usa «claro». (El perfil del chip tiene el suyo propio y
     ahí sí es «dia» — dos puertas distintas, dos galletas distintas.)
     Con el nombre cambiado el botón funciona y no se ve ningún cambio, que es
     la peor clase de fallo. */

  /* 🔴 DE DÍA SOLO SE REDEFINEN LAS VARIABLES, nunca una regla. Y los tres
     que NO cambian: `--coral` (la marca), `--sobre-color` (letra encima de
     un botón de color, blanca siempre) y los de la ilustración. */
  :root[data-tema="claro"] {
    --navy: #eef0f4;
    --navy-light: #ffffff;
    --navy-lighter: #e6e9ef;
    --ilustracion: #ffffff;    /* los dibujos del blog vienen con fondo claro: NO cambia entre temas */
    --text: #1a1a2e;
    --text-dim: #545b6b;
    --border: #d6dae2;
    --green: #15803d;
    --amber: #92620a;
    --panel: #ffffff;
    --hondo: #f4f5f8;
    --borde-suave: #e0e3ea;
    --coral-texto: #b82a35;     /* de día OSCURECE, o no llega al contraste */
    --mal-texto: #8d1b24;
    --ojo-texto: #6b4700;
    --mono-fondo: #f2f3f7;
    --mono-texto: #1a1a2e;
    --pendiente-fondo: #f7f8fa;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    font-family: 'Roboto', Arial, sans-serif;
    background: var(--navy);
    color: var(--text);
  }
  h1, h2, h3 { font-family: 'Montserrat', Arial, sans-serif; }

  /* LOGIN */
  #login-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .login-box {
    background: var(--navy-light);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 40px 36px;
    width: 340px;
  }
  .login-box h1 { font-size: 18px; text-align: center; margin-bottom: 4px; }
  .login-box .sub { text-align: center; color: var(--text-dim); font-size: 12px; margin-bottom: 24px; text-transform: uppercase; letter-spacing: 0.5px; }

  /* APP LAYOUT */
  #app { display: none; min-height: 100vh; }
  #app.show { display: flex; }
  #sidebar {
    width: 240px;
    background: var(--panel);
    border-right: 1px solid var(--border);
    padding: 22px 0;
    flex-shrink: 0;
  }
  #sidebar .logo { padding: 0 20px 18px 20px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
  #sidebar .logo h1 { font-size: 14px; margin: 0; }
  #sidebar .logo span { font-size: 10px; color: var(--coral); text-transform: uppercase; letter-spacing: 0.5px; }
  .nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 20px; color: var(--text-dim); cursor: pointer;
    font-size: 13.5px; border-left: 3px solid transparent; transition: all 0.15s;
  }
  .nav-item:hover { background: var(--navy-light); color: var(--text); }
  .nav-item.active { background: var(--navy-light); color: var(--text); border-left-color: var(--coral); font-weight: 600; }
  .nav-footer { padding: 14px 20px; margin-top: 10px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-dim); }

  #main { flex: 1; padding: 30px 38px; max-width: 1100px; }
  .section { display: none; }
  .section.active { display: block; }
  .section-title { font-size: 21px; margin-bottom: 3px; }
  .section-sub { color: var(--text-dim); font-size: 13.5px; margin-bottom: 22px; }

  .card { background: var(--navy-light); border: 1px solid var(--border); border-radius: 12px; padding: 22px 24px; margin-bottom: 18px; }
  .card h3 { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--coral); margin: 0 0 14px 0; }

  label { display: block; font-size: 12.5px; color: var(--text-dim); margin: 12px 0 5px 0; }
  input[type=text], input[type=password], input[type=email], input[type=date], input[type=datetime-local], input[type=file], select, textarea {
    width: 100%; padding: 9px 12px; border-radius: 7px; border: 1px solid var(--border);
    background: var(--navy); color: var(--text); font-size: 13.5px; font-family: inherit;
  }
  input:focus, select:focus, textarea:focus { outline: 2px solid var(--coral); border-color: var(--coral); }

  /* El ojo para ver la contraseña. La caja y el botón los crea
     `assets/ver-password.js`; si no llega, no existe ninguno de los dos y el
     campo se ve como siempre. Mismo mecanismo que en el club, pero aquí los
     campos son más bajos (9 px de relleno frente a 12). */
  .clave-caja { position: relative; }
  .clave-caja input[type=password],
  .clave-caja input[type=text] { padding-right: 46px; }
  .clave-ojo {
    position: absolute; top: 0; right: 0; height: 100%; width: 42px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; border-radius: 0 7px 7px 0;
    color: var(--text-dim); font-size: 15px; line-height: 1; cursor: pointer;
  }
  .clave-ojo:hover { color: var(--text); }
  .clave-ojo:focus-visible { outline: 2px solid var(--coral); outline-offset: -2px; }

  .btn { background: var(--coral); color: white; border: none; padding: 10px 18px; border-radius: 7px; font-size: 13.5px; font-weight: 600; cursor: pointer; margin-top: 14px; }
  .btn:hover { background: var(--coral-dark); }
  .btn.outline { background: transparent; border: 1px solid var(--border); color: var(--text-dim); }
  .btn.outline:hover { border-color: var(--coral); color: var(--text); }
  .btn.small { padding: 6px 12px; font-size: 11.5px; margin-top: 0; }
  .btn.full { width: 100%; }
  .btn.danger { background: transparent; border: 1px solid var(--coral); color: var(--coral); }
  .btn.danger:hover { background: rgba(230,57,70,0.15); }

  .toolbar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
  .toolbar input[type=text] { flex: 1; min-width: 180px; }
  .toolbar select { width: auto; min-width: 140px; }
  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

  table { width: 100%; border-collapse: collapse; }
  th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); font-size: 13px; }
  th { color: var(--text-dim); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.4px; }
  tr.row-click { cursor: pointer; }
  tr.row-click:hover { background: var(--navy-lighter); }

  .badge { display: inline-block; font-size: 10.5px; padding: 3px 9px; border-radius: 10px; font-weight: 600; }
  .badge.green { background: rgba(74,222,128,0.15); color: var(--green); border: 1px solid rgba(74,222,128,0.4); }
  .badge.amber { background: rgba(245,176,65,0.15); color: var(--amber); border: 1px solid rgba(245,176,65,0.4); }
  .badge.red { background: rgba(230,57,70,0.15); color: var(--coral-texto); border: 1px solid rgba(230,57,70,0.4); }
  .badge.grey { background: rgba(184,184,204,0.1); color: var(--text-dim); border: 1px solid var(--border); }

  .switch { position: relative; width: 42px; height: 22px; display: inline-block; }
  .switch input { opacity: 0; width: 0; height: 0; }
  .slider { position: absolute; cursor: pointer; inset: 0; background: var(--navy-lighter); border-radius: 22px; transition: 0.2s; }
  .slider:before { content: ""; position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: 0.2s; }
  input:checked + .slider { background: var(--coral); }
  input:checked + .slider:before { transform: translateX(20px); }

  .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .stat-card { background: var(--navy-light); border: 1px solid var(--border); border-radius: 12px; padding: 20px; text-align: center; }
  .stat-card .num { font-size: 30px; font-weight: 700; color: var(--coral); }
  .stat-card .lbl { font-size: 12px; color: var(--text-dim); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.4px; }

  .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.65); align-items: center; justify-content: center; z-index: 80; }
  .modal-overlay.show { display: flex; }
  .modal { background: var(--navy-light); border: 1px solid var(--border); border-radius: 14px; padding: 28px 30px; width: 480px; max-height: 86vh; overflow-y: auto; }
  .modal h3 { color: var(--text); font-size: 16px; margin-top: 0; }
  .modal-close { float: right; cursor: pointer; color: var(--text-dim); font-size: 18px; }

  .data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
  .data-item b { display: block; font-size: 10.5px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 2px; font-weight: 600; }
  .data-item span { font-size: 13.5px; }

  .steps-mini { display: flex; gap: 8px; margin-bottom: 16px; font-size: 11px; color: var(--text-dim); }
  .steps-mini .step { padding: 5px 12px; border-radius: 14px; background: var(--navy-lighter); }
  .steps-mini .step.active { background: var(--coral); color: white; font-weight: 600; }
  .video-placeholder {
    background: var(--hondo); border: 1px dashed var(--border); border-radius: 10px; height: 200px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--text-dim); font-size: 13.5px; margin-bottom: 14px; text-align: center; padding: 10px;
  }
  .video-placeholder .play-icon {
    width: 50px; height: 50px; border-radius: 50%; background: var(--coral); color: white;
    display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 10px; cursor: pointer;
  }
  .price-box { display: flex; align-items: center; justify-content: space-between; background: var(--navy-lighter); border-radius: 10px; padding: 14px 18px; margin: 14px 0; }
  .price-box .price { font-size: 24px; font-weight: 700; color: var(--coral); }
  .price-box .price-label { font-size: 11.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
  .pay-modal-box { text-align: center; padding: 26px 10px; }
  .diagram-wrap { background: var(--navy); border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin: 10px 0; }
  .leyenda { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; font-size: 12px; color: var(--text-dim); }
  .leyenda span.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
  .col-title { text-align: center; font-weight: 600; margin-top: 14px; padding: 6px; background: var(--navy-lighter); border-radius: 6px; font-size: 13px; }
  .diff-pos { color: var(--green); } .diff-neg { color: var(--coral-texto); }
  .interpretacion { background: var(--navy); border-left: 3px solid var(--coral); padding: 9px 13px; margin-top: 6px; font-size: 13px; color: var(--text-dim); border-radius: 0 6px 6px 0; }

  .upload-box {
    border: 1px dashed var(--border); border-radius: 10px; padding: 30px; text-align: center;
    color: var(--text-dim); font-size: 13.5px; cursor: pointer;
  }
  .upload-box:hover { border-color: var(--coral); }

  .map-row { display: grid; grid-template-columns: 1fr 30px 1fr; gap: 8px; align-items: center; margin-bottom: 8px; }
  .map-row .arrow { text-align: center; color: var(--text-dim); }

  .tabs { display: flex; gap: 6px; margin-bottom: 16px; }
  .tab { padding: 8px 16px; border-radius: 8px 8px 0 0; background: var(--navy-lighter); color: var(--text-dim); cursor: pointer; font-size: 13px; }
  .tab.active { background: var(--navy-light); color: var(--text); font-weight: 600; border-bottom: 2px solid var(--coral); }

  .video-row { display: flex; align-items: center; gap: 12px; justify-content: space-between; background: var(--navy); border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; }
  .video-row .order-btns button { background: none; border: 1px solid var(--border); color: var(--text-dim); width: 26px; height: 26px; border-radius: 5px; cursor: pointer; }
  .video-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
  .thumb {
    width: 64px; height: 40px; border-radius: 6px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--navy-lighter), var(--navy));
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: var(--text-dim); border: 1px solid var(--border);
  }
  .video-titulo { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .video-meta { font-size: 11px; color: var(--text-dim); }
  .cat-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--navy-lighter); border: 1px solid var(--border); border-radius: 16px;
    padding: 5px 12px; font-size: 12px; color: var(--text-dim); cursor: pointer;
  }
  .cat-pill.active { border-color: var(--coral); color: var(--text); }
  .cat-pill .x { color: var(--coral); cursor: pointer; }
  .yt-preview-row { display: flex; align-items: center; gap: 12px; background: var(--navy); border-radius: 8px; padding: 8px 12px; margin-bottom: 6px; }
  .cat-group-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--coral); margin: 16px 0 8px 0; }
  .locked-mini { background: var(--navy); border: 1px dashed var(--border); border-radius: 8px; padding: 16px; text-align: center; color: var(--text-dim); font-size: 13px; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .email-sent { background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.4); border-radius: 10px; padding: 12px 16px; font-size: 13px; color: var(--green); }

  .hidden { display: none; }
  .note { font-size: 11.5px; color: var(--text-dim); margin-top: 6px; }
  .scale-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
  .scale-row .dots { display: flex; gap: 4px; }
  .scale-dot {
    width: 22px; height: 22px; border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; background: var(--navy); border: 1px solid var(--border); color: var(--text-dim);
    cursor: pointer;
  }
  .scale-dot.selected { background: var(--coral); color: white; border-color: var(--coral); }
  .warning-note { background: rgba(245,176,65,0.12); border: 1px solid var(--amber); border-left: 5px solid var(--amber); border-radius: 10px; padding: 14px 18px; margin-bottom: 18px; font-size: 13px; color: var(--ojo-texto); }
  .danger-note { background: rgba(230,57,70,0.15); border: 1px solid var(--coral); border-left: 5px solid var(--coral); border-radius: 10px; padding: 14px 18px; margin-bottom: 18px; font-size: 13px; color: var(--mal-texto); }
  .danger-note b { color: var(--coral-texto); }
  .admin-only-tag { display: inline-block; font-size: 10.5px; background: rgba(230,57,70,0.2); color: var(--coral-texto); border: 1px solid var(--coral); border-radius: 8px; padding: 2px 9px; margin-left: 8px; text-transform: uppercase; letter-spacing: 0.4px; }
  .ciclista-preview { background: var(--hondo); border: 1px solid var(--border); border-radius: 12px; padding: 22px; }
  .price-tag-mini { font-size: 22px; font-weight: 700; color: var(--coral); }

  /* RESPONSIVE */
  @media (max-width: 880px) {
    #app { flex-direction: column; }
    #sidebar { width: 100%; display: flex; overflow-x: auto; padding: 10px 0; border-right: none; border-bottom: 1px solid var(--border); }
    #sidebar .logo { display: none; }
    .nav-footer { display: none; }
    .nav-item { flex-shrink: 0; border-left: none; border-bottom: 3px solid transparent; padding: 10px 14px; white-space: nowrap; }
    .nav-item.active { border-left: none; border-bottom-color: var(--coral); }
    #main { padding: 20px; }
    .stat-grid { grid-template-columns: 1fr 1fr; }
    .data-grid { grid-template-columns: 1fr; }
    .two-col { grid-template-columns: 1fr; }
  }

  /* ── Vista Gestor / Cliente — botones toggle ── */
  .vc-toggle-bar { display:flex; gap:8px; margin-bottom:20px; }
  .vc-toggle-btn {
    padding:9px 22px; border-radius:8px; border:2px solid var(--border);
    background:var(--navy-lighter); color:var(--text-dim); font-size:13px;
    font-weight:600; cursor:pointer; font-family:Montserrat,Arial,sans-serif;
    transition:all 0.15s;
  }
  .vc-toggle-btn:hover { border-color:var(--coral); color:var(--text); }
  .vc-toggle-btn.active { background:var(--coral); border-color:var(--coral); color:var(--sobre-color); }

  /* ── Vista Cliente — filtros ── */
  #vc-root .vc-filters-bar {
    background:var(--navy-lighter); border:1px solid var(--border); border-radius:10px;
    padding:12px 16px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:18px;
  }
  #vc-root .vc-filters-bar select,
  #vc-root .vc-filters-bar input[type=text] {
    padding:7px 10px; border:1px solid var(--border); border-radius:7px;
    background:var(--navy); color:var(--text); font-size:13px; font-family:inherit; outline:none;
    width:auto;
  }
  #vc-root .vc-filters-bar select { min-width:130px; }
  #vc-root .vc-filters-bar select:focus,
  #vc-root .vc-filters-bar input[type=text]:focus { border-color:var(--coral); }
  #vc-root .vc-filters-bar input[type=text] { flex:1; min-width:160px; }
  #vc-root .vc-filters-bar select:disabled,
  #vc-root .vc-filters-bar input:disabled { opacity:.35; cursor:not-allowed; }

  /* ── Vista Cliente — grid y cards ── */
  #vc-root .vc-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:14px;
  }
  #vc-root .vc-card {
    background:var(--navy-lighter); border:1px solid var(--border); border-radius:10px;
    overflow:hidden; cursor:pointer;
    transition:border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  }
  #vc-root .vc-card:hover {
    border-color:var(--coral); transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.35);
  }
  #vc-root .vc-card img {
    width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:var(--navy);
  }
  #vc-root .vc-card-body { padding:10px 12px 12px; }
  #vc-root .vc-card-tags { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:5px; }
  #vc-root .vc-tag {
    font-size:0.62rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.4px; padding:2px 6px; border-radius:4px;
  }
  #vc-root .vc-tag-mat  { background:rgba(230,57,70,0.15); color:var(--coral-texto); border:1px solid rgba(230,57,70,0.4); }
  #vc-root .vc-tag-tipo { background:rgba(74,222,128,0.1); color:var(--green); border:1px solid rgba(74,222,128,0.3); }
  #vc-root .vc-tag-tipo.formativo { background:rgba(245,176,65,0.12); color:var(--amber); border:1px solid rgba(245,176,65,0.4); }
  #vc-root .vc-card-title {
    font-size:0.83rem; font-weight:600; line-height:1.3; color:var(--text); margin-bottom:5px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  #vc-root .vc-card-meta { font-size:0.72rem; color:var(--text-dim); }
  #vc-root .vc-no-results { text-align:center; padding:60px 20px; color:var(--text-dim); font-size:13.5px; }


/* ═══════════════════════════════════════════════════════════════════════════
 *  AJUSTES DEL SERVIDOR
 *  El prototipo era UN fichero con diez secciones ocultas que JavaScript iba
 *  mostrando. Aqui cada seccion es su propia pagina: ni se oculta nada ni hay
 *  pantalla de login que tapar.
 * ═══════════════════════════════════════════════════════════════════════════ */
#app { display: flex; }
.section { display: block; }

/* Los apartados del menu son enlaces de verdad (se pueden abrir en otra
   pestana y funcionan sin JavaScript), no <div> con un onclick. */
.nav-item { text-decoration: none; }

/* Enlaces dentro del panel
 *
 * 🔴 `--coral-texto` Y NO `--coral`, cambiado el 26-sep-2026 con permiso de
 * Alfonso. El coral de la marca es para RELLENAR; como letra no llega al mínimo
 * de contraste en NINGUNO de los dos temas:
 *
 *     --coral        3,62 de noche y 4,17 de día sobre una tarjeta
 *                    4,09 de noche y 3,65 de día sobre el fondo
 *     --coral-texto  6,69 · 6,14 · 7,56 · 5,38        (el mínimo es 4,5)
 *
 * 🔴 Y LA PISTA ESTABA EN LA LÍNEA DE DEBAJO: el `:hover` ya usaba el bueno
 * desde siempre. O sea que el color correcto se conocía y al estado normal se
 * le había puesto el otro.
 *
 * 🟡 Por eso el `:hover` pasa a `--text`: si los dos fueran `--coral-texto`, el
 * ratón por encima no cambiaría nada. Es el mismo gesto que ya hace
 * `.btn.outline:hover`. */
#main a { color: var(--coral-texto); }
#main a:hover { color: var(--text); }
#main a.plano { color: var(--text); text-decoration: none; }
#main a.plano:hover { color: var(--coral-texto); }

/* Avisos de la pagina (guardado correcto / error). Mismo lenguaje visual que
   .email-sent y .danger-note, que ya venian del prototipo. */
.aviso-ok  { background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.4); color: var(--green); border-radius: 10px; padding: 12px 16px; font-size: 13px; margin-bottom: 18px; }
.aviso-mal { background: rgba(230,57,70,0.15); border: 1px solid var(--coral); color: var(--mal-texto); border-radius: 10px; padding: 12px 16px; font-size: 13px; margin-bottom: 18px; }

/* Secciones aun por construir. Se dice claro, no se disimula. */
.en-obras { text-align: center; padding: 46px 24px; }
.en-obras .pastilla { display: inline-block; font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; background: rgba(245,176,65,0.12); color: var(--amber); border: 1px solid var(--amber); border-radius: 10px; padding: 4px 12px; margin-bottom: 14px; }
.en-obras h3 { color: var(--text); font-size: 17px; text-transform: none; letter-spacing: 0; margin: 0 0 10px 0; }
.en-obras p { color: var(--text-dim); font-size: 13.5px; max-width: 520px; margin: 0 auto 10px auto; line-height: 1.6; }

/* Paginacion del listado de fichas */
.paginas { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 16px; font-size: 13px; }
.paginas a, .paginas span { padding: 6px 11px; border-radius: 7px; border: 1px solid var(--border); text-decoration: none; }
.paginas a { color: var(--text-dim); }
.paginas a:hover { border-color: var(--coral); color: var(--text); }
.paginas .actual { background: var(--coral); border-color: var(--coral); color: var(--sobre-color); font-weight: 600; }

/* El campo de "escribe el email para borrar" no debe parecerse a los demas */
.zona-peligro { border-color: var(--coral); }
.zona-peligro > summary { cursor: pointer; font-weight: 600; color: var(--coral-texto); font-size: 13px; list-style: none; }
.zona-peligro > summary::-webkit-details-marker { display: none; }
.zona-peligro > summary::before { content: "▸ "; }
.zona-peligro[open] > summary::before { content: "▾ "; }

/* Las pastillas de estado se partían en dos líneas dentro de la tabla de
   clientes y parecían botones. Una pastilla es una etiqueta: va en una línea. */
.badge { white-space: nowrap; }

/* ── Seccion 6 · Gestor de Ejercicios ────────────────────────────────────────
   En el prototipo, los dos botones de arriba y las tarjetas eran <div> con un
   onclick. Aquí son enlaces de verdad —se abren en otra pestaña y funcionan sin
   JavaScript—, y la regla `#main a { color: coral }` de arriba los teñiría de
   coral entero. Estas cuatro reglas les devuelven SU color, el que les puso
   Alfonso, sin tocar ni uno de sus diseños. */
#main a.vc-toggle-btn        { color: var(--text-dim); text-decoration: none; }
#main a.vc-toggle-btn:hover  { color: var(--text); }
#main a.vc-toggle-btn.active { color: var(--sobre-color); }
#main a.vc-card              { color: var(--text); text-decoration: none; display: block; }

/* La rejilla de la vista cliente en el móvil: dos columnas en vez de una sola
   enorme. Las miniaturas de YouTube son 16:9 y a 190 px se ven de sobra. */
@media (max-width: 880px) {
  #vc-root .vc-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  #vc-root .vc-filters-bar select,
  #vc-root .vc-filters-bar input[type=text] { min-width: 0; width: 100%; }
}

/* ── Un enlace con forma de botón ────────────────────────────────────────────
   20-sep-2026. El botón «Subir un estudio» salía ILEGIBLE: es un <a> con clase
   .btn, y `#main a { color: coral }` le ganaba al `color: white` de .btn —
   letra coral sobre fondo coral.

   Es EXACTAMENTE la misma trampa que la de los enlaces de la sección 6, ocho
   líneas más arriba. La tercera vez que muerda, la regla `#main a` debería
   dejar de teñir enlaces a ciegas.

   Lo encontró Alfonso mirando la pantalla; ni el navegador ni PHP dicen nada
   de esto. */
#main a.btn        { color: var(--sobre-color); text-decoration: none; display: inline-block; }
#main a.btn:hover  { color: var(--sobre-color); }
#main a.btn.danger { color: var(--coral); }

/* ── Sección 4 · las citas ───────────────────────────────────────────────────
   Lo que hay que hacer a mano, y el enlace de alta que Alfonso pega en
   WhatsApp. El enlace va en monoespaciada y entero a la vista: se copia con el
   ratón, así que no puede estar cortado ni llevar puntos suspensivos. */
.pendiente{
  border:1px solid var(--borde-suave); border-left:3px solid var(--coral); border-radius:10px;
  padding:14px 16px; margin-bottom:12px; background:var(--pendiente-fondo);
}
.pendiente p{ margin:8px 0 0 }
.enlace-alta{
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13.5px;
  background:var(--mono-fondo); border:1px solid var(--borde-suave); border-radius:8px;
  padding:10px 12px; margin:8px 0 0; color:var(--mono-texto);
  word-break:break-all; user-select:all;   /* un clic lo selecciona entero */
}

/* 🔴 `#main a` no llega aqui: la pantalla de entrar es #login-screen, asi que
   un enlace suelto saldria azul de navegador sobre fondo oscuro. 24-sep-2026. */
#login-screen .salidas { margin-top: 14px; }
/* 🔴 `--coral-texto` y NO `--coral`. El coral de la marca es para RELLENAR;
   como letra no llega al mínimo de contraste en NINGUNO de los dos temas —4,09
   de noche y 3,65 de día, medidos—. `--coral-texto` da 7,56 y 5,38. Es la
   pareja que está documentada desde el 15-sep y aquí se había colado la otra.
   26-sep-2026. */
#login-screen .salidas a { color: var(--coral-texto); text-decoration: none; }
#login-screen .salidas a:hover { text-decoration: underline; }

/* ── Las secciones plegables del estudio (26-sep-2026) ───────────────────────
 * 🔴 Ni un color escrito a mano: todo con var(), que es la norma de la casa
 * desde el 15-sep. `--coral` se declara una sola vez a propósito (es la marca y
 * no cambia entre día y noche); las otras tres están en los dos temas. */
/* 🔴 EL ÁREA PULSABLE, MEDIDA Y CORREGIDA. Sin el padding, las secciones
 * cuyo título y estado caben en una línea daban un objetivo de 15 px de
 * alto: por debajo del mínimo táctil cómodo de 44. Medido en Chrome a 390
 * px, no supuesto.
 * 🔴 Y EL PRIMER ARREGLO NO BASTÓ: con `min-height: 24px` más relleno salían
 * 35 px, porque esta hoja usa `box-sizing: border-box` y ahí el relleno va
 * DENTRO del min-height. Va 44 directo. Medido las dos veces. */
details.seccion > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 6px 0; min-height: 44px; }
details.seccion > summary::-webkit-details-marker { display: none; }
details.seccion > summary::before { content: "▸"; color: var(--coral); font-size: 11px; }
details.seccion[open] > summary::before { content: "▾"; }
details.seccion > summary > h3 { margin: 0; }
details.seccion[open] > summary { margin-bottom: 6px; }
.seccion-estado { font-size: 11.5px; color: var(--text-dim); text-transform: none; letter-spacing: 0; }
.seccion-estado.hecha { color: var(--green); }

/* ── SEGUIMIENTO Y CUESTIONARIOS (4 · Automatizaciones) ── 26-sep-2026 ───────
 * La lista que sustituyó a la tabla de «a los 28 días». Son fichas y no filas de
 * tabla a propósito: cada persona lleva cuatro estados, un mensaje y un botón, y
 * eso en una tabla de seis columnas no se lee en un móvil.
 * 🔴 Ni un color escrito a mano: la paleta de día vive arriba y un `#e63946`
 * suelto aquí se quedaría oscuro sobre blanco. */
.seg-resumen{
  display:flex; flex-wrap:wrap; gap:8px 20px; margin:14px 0 16px;
  font-size:12px; color:var(--text-dim);
}
.seg-resumen strong{ color:var(--text); font-size:15px; margin-right:3px }
.seg-resumen .hecho strong{ color:var(--green) }
.seg-resumen .falta strong{ color:var(--coral-texto) }
.seg-resumen .ojo   strong{ color:var(--amber) }

.seg-linea{
  display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:9px;
  font-size:11.5px; color:var(--text-dim); line-height:1.6;
}
.seg-linea b            { color:var(--text); font-weight:600 }
.seg-linea .hecho       { color:var(--green) }
.seg-linea .ojo         { color:var(--amber) }
.seg-linea .note        { margin-top:0 }
.pendiente .seg-ojo     { color:var(--amber) }

/* El mensaje, plegado. Mismo mecanismo que las secciones del estudio: <details>
 * sin una línea de JavaScript.
 * 🔴 44 px de alto en el summary, y va DIRECTO y no con relleno: esta hoja usa
 * `box-sizing: border-box`, así que el relleno iría por dentro del mínimo.
 * Medido el 26-sep en las secciones del informe, dos intentos antes de acertar. */
details.seg-mensaje > summary{
  cursor:pointer; list-style:none; display:flex; align-items:center;
  min-height:44px; font-size:12px; color:var(--coral-texto);
}
details.seg-mensaje > summary::-webkit-details-marker{ display:none }
details.seg-mensaje > summary::before{
  content:"▸"; color:var(--coral); font-size:11px; margin-right:8px;
}
details.seg-mensaje[open] > summary::before{ content:"▾" }

.seg-texto{
  background:var(--mono-fondo); border:1px solid var(--borde-suave);
  border-left:3px solid var(--coral); border-radius:8px;
  padding:12px 14px; font-size:13.5px; line-height:1.7; color:var(--mono-texto);
}
.seg-copiar{
  background:transparent; border:1px solid var(--border); color:var(--text-dim);
  padding:9px 14px; border-radius:7px; font-size:11.5px; font-weight:600;
  cursor:pointer; margin:8px 10px 0 0; min-height:44px;
}
.seg-copiar:hover{ border-color:var(--coral); color:var(--text) }
details.seg-mensaje .btn.small{ min-height:44px; margin-top:8px }

/* ── LA PANTALLA DE ENTRAR AL PANEL, ARREGLADA ── 26-sep-2026 ────────────────
 *
 * Lo vio Alfonso en una captura: el título se salía de la caja por la derecha y
 * las dos salidas («Ir a la web · Entrar al club») aparecían FUERA, pegadas al
 * borde derecho y a media altura, encima del final del título.
 *
 * 🔴 NO ERA DE HOY. Medido con el CSS de antes de tocar nada y con el de ahora:
 * sale exactamente igual. Viene del 23-sep, cuando se añadieron esas dos
 * salidas — hasta entonces ésta era la única pantalla del sistema sin ningún
 * enlace, y al ponerlas nadie volvió a mirar la pantalla.
 *
 * 🔴 CAUSA 1 · `#login-screen` es `display:flex` SIN dirección, o sea `row`, y
 * `.salidas` es HERMANA de `.login-box`, no hija. Dos hijos en fila = uno al
 * lado del otro. Que la intención era ponerlas debajo se ve en su propia regla:
 * `#login-screen .salidas { margin-top: 14px }` — un margen superior que en una
 * fila no hace absolutamente nada.
 *
 * 🔴 CAUSA 2 · el título mide 303 px con letra de 18 y la caja deja 268 por
 * dentro (340 menos 72 de relleno). Se salía 37 px, medidos, no estimados. Y no
 * se parte solo: `admin.estudiobiomecanico.com` no tiene ni un espacio.
 */
#login-screen { flex-direction: column; }

.login-box {
  width: 360px;
  /* Y que nunca sea más ancha que la pantalla, que es lo que faltaba: con un
     ancho fijo, en un móvil de 320 px la caja se salía entera. */
  max-width: calc(100vw - 32px);
}
.login-box h1 {
  font-size: 16px;          /* 269 px de ancho, y la caja deja 288 */
  /* La red de debajo: si algún día la caja se estrecha más que el título —un
     móvil pequeño—, que se parta en dos líneas en vez de salirse. Feo es mejor
     que cortado. */
  overflow-wrap: anywhere;
}

/* En un móvil, menos relleno y una pizca menos de letra: a 360 px de pantalla
 * la caja deja 288 por dentro y el título de 16 ya no cabría con el relleno
 * grande.
 * 🔴 Va al FINAL de la hoja a propósito: una consulta de medios NO añade
 * especificidad, así que lo único que la hace ganar es el orden. Es la trampa
 * que mordió dos veces el 23-sep (la flecha del menú y el logo). */
@media (max-width: 420px) {
  .login-box { padding: 32px 22px; }
  .login-box h1 { font-size: 15px; }
}

/* 🔴 Y UN ESCALÓN MÁS PARA LOS MÓVILES PEQUEÑOS. Con 15 px, a 320 de pantalla
 * el título necesita 252 y la caja deja 244: se partía, y la red de arriba lo
 * partía por donde no hay que partir — «admin.estudiobiomecanico.co / m», con
 * una eme sola en la segunda línea. Se vio en la captura, no midiendo: los
 * números decían «0 px de desbordamiento» y tenían razón, porque envolver NO es
 * desbordar. A 13,5 px necesita 227 y cabe de sobra. */
@media (max-width: 340px) {
  .login-box h1 { font-size: 13.5px; }
}

  /* ══════════════════════════════════════════════════════════════════════
     LEER UN ARTÍCULO DEL BLOG DESDE EL PANEL · 29-sep-2026

     `blog-articulo.php` pinta el HTML del artículo tal como está guardado en
     WordPress. Ese HTML trae sus propias clases (`lbl`, `figura`, `dato`…)
     que aquí NO existen, porque su hoja es la del blog y cargarla dentro del
     panel le cambiaría el fondo a todo — es la trampa del CSS del comparador,
     documentada desde el 14-sep.

     🔴 Así que no se trae nada de fuera: se le da a lo de dentro un tamaño y
     un aire de lectura, y ya. Se lee bien aunque el artículo salga sin su
     diseño, que es de lo que se trata: saber QUÉ artículo es antes de moverlo
     o cancelarlo.
     ══════════════════════════════════════════════════════════════════════ */
  .lectura { max-width: 68ch; font-size: 15px; line-height: 1.65; color: var(--text); }
  .lectura h2 { font-size: 20px; margin: 30px 0 10px; color: var(--text); }
  .lectura h3 { font-size: 16.5px; margin: 24px 0 8px; color: var(--text); }
  .lectura h4 { font-size: 14.5px; margin: 20px 0 6px; color: var(--text-dim); }
  .lectura p { margin: 0 0 14px; }
  .lectura ul, .lectura ol { margin: 0 0 14px 20px; }
  .lectura li { margin-bottom: 6px; }
  .lectura strong { color: var(--text); }
  .lectura a { color: var(--coral-texto); }
  .lectura blockquote {
    margin: 18px 0; padding: 10px 16px;
    border-left: 3px solid var(--coral); background: var(--navy-lighter);
  }
  /* 🔴 Los dibujos del artículo traen sus colores dentro y vienen pensados
     para fondo claro. Se les pone el suyo para que se vean, en vez de dejar
     un cuadro oscuro con líneas invisibles. */
  .lectura svg { max-width: 100%; height: auto; background: var(--ilustracion); border-radius: 8px; padding: 8px; }
  .lectura img { max-width: 100%; height: auto; border-radius: 8px; }
  .lectura table { margin: 16px 0; }
  .lectura hr { border: 0; border-top: 1px solid var(--border); margin: 24px 0; }

  /* ══════════════════════════════════════════════════════════════════════
     🏋️ 10 · PLANES DE FUERZA (tanda 5). La ficha y el plan son el MISMO
     marcado que ve el socio (`src/fuerza-pantallas.php`); en el club los pinta
     `fuerza.css` con los colores del club, y aquí, con los del panel.
     «Como el comprador»: en el móvil (390 px) y en el ordenador, lado a lado.
     ══════════════════════════════════════════════════════════════════════ */
  .fz-como { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 18px; }
  .fz-movil { width: 390px; max-width: 100%; border: 1px solid var(--border); border-radius: 18px; padding: 14px; }
  .fz-ordenador { flex: 1; min-width: 320px; border: 1px solid var(--border); border-radius: 8px; padding: 18px; }
  .fz-ficha, .fz-plan { color: var(--text); font-size: 14px; }
  .fz-ej-nombre { color: var(--text); }
  .fz-ficha-cabeza { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
  .fz-ficha-cabeza h3 { color: var(--text); text-transform: none; letter-spacing: 0; font-size: 16px; }
  .fz-verificado { color: var(--green); font-size: 12.5px; }
  .fz-sin-verificar { color: var(--amber); font-size: 12.5px; }
  .fz-datos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 10px 0; font-size: 13.5px; }
  .fz-datos dt { color: var(--text-dim); }
  .fz-datos dd { margin: 0; color: var(--text); }
  .fz-partes-titulo { font-size: 13px; color: var(--text-dim); margin: 14px 0 6px; }
  .fz-partes { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
  .fz-partes li { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--border); }
  .fz-min { color: var(--text-dim); }
  .fz-trae { font-size: 12.5px; color: var(--text-dim); margin-top: 12px; }
  .fz-plan-cabecera { color: var(--coral-texto); font-size: 13px; }
  .fz-sesion h3 { color: var(--text); text-transform: none; letter-spacing: 0; }
  .fz-parte-suelta { color: var(--text-dim); font-size: 13px; margin: 8px 0; }
  .fz-bloque { border-left: 3px solid var(--coral); padding: 4px 0 4px 12px; margin: 10px 0; }
  .fz-bloque h4 { margin: 0 0 6px; font-size: 14px; color: var(--text); }
  .fz-bloque-info { color: var(--text-dim); font-weight: normal; font-size: 12.5px; }
  .fz-ejercicios { margin: 0 0 0 18px; padding: 0; font-size: 13.5px; }
  .fz-ejercicios li { margin-bottom: 5px; }
  .fz-ej-codigo { color: var(--amber); font-size: 12px; }
  .fz-ej-que { color: var(--text-dim); }
  .fz-ej-video { font-size: 12.5px; }
  /* La sesión del móvil, de muestra (`fuerzaSesionHtml()` sin formulario): lo justo para verla como la verá. */
  .fz-movil-sesion { position: relative; overflow: hidden; color: var(--text); }
  .fz-marca { position: absolute; top: 40%; left: -10%; width: 120%; margin: 0; text-align: center; font-size: 22px; font-weight: bold;
              color: var(--text); opacity: .07; transform: rotate(-24deg); pointer-events: none; }
  .fz-h2 { font-size: 16px; margin: 10px 0 6px; color: var(--text); }
  .fz-form label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-dim); }
  .fz-ej { border-bottom: 1px solid var(--border); padding: 8px 0; }
  .fz-ej-cab { margin: 0 0 6px; }
  .fz-ej-campos { display: flex; flex-wrap: wrap; gap: 6px 12px; }
  .fz-texto-ficha { font-size: 12.5px; color: var(--text-dim); }
  .fz-movil-sesion .boton { width: 100%; padding: 10px; border-radius: 8px; border: 0; background: var(--coral); color: var(--sobre-color); opacity: .6; }