/* ============================================================
   CAMPUS PS YACHTING ACADEMY — hoja de estilos · versión 7.4
   ------------------------------------------------------------
   ¿Dudas de si el hosting tiene la versión buena? Abre en el navegador
   https://psyachtingacademy.com/campus/assets/campus.css
   y mira esta primera línea: tiene que poner 7.4. Si pone otra cosa
   (o no pone nada), es que ese archivo no se ha subido todavía.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --ivory:#F4F1E9; --cream:#f2efe6; --paper:#FBF9F4;
  --navy:#173A5E; --navy-deep:#0F2942;
  --brass:#9A8353; --brass-light:#b49e71;
  --green:#2E7D4F; --red:#B4433A;
  --ink:#2b2a26; --muted:#8a8577; --line:#E3DDCD;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.campus{background:var(--ivory);color:var(--ink);font-family:'Jost',system-ui,sans-serif;font-weight:300;font-size:16px;min-height:100vh;display:flex;flex-direction:column}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;color:var(--navy);font-weight:600;line-height:1.15;margin:0 0 .4em}
h1{font-size:2.1rem} h2{font-size:1.5rem} h3{font-size:1.2rem}
a{color:var(--navy)}
.muted{color:var(--muted)}
.small{font-size:.85rem}

/* ---------- cabecera (réplica de psyachtingacademy.com) ---------- */
.landing-header{position:fixed;top:0;left:0;right:0;z-index:400;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:14px 0}
.landing-header .container{max-width:1140px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.site-brand{display:inline-flex;align-items:center;gap:14px;text-decoration:none}
.site-brand img{height:64px;width:auto;display:block}
.campus-tag{font-family:'Jost',sans-serif;font-size:.66rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--brass);border:1px solid var(--brass);border-radius:999px;padding:4px 12px;font-weight:500;white-space:nowrap}
.header-nav{display:flex;align-items:center;gap:22px}
.header-link{white-space:nowrap;color:var(--navy);text-decoration:none;font-weight:500;font-size:.9rem;font-family:'Jost',sans-serif}
.header-link:hover,.header-link.on{color:var(--brass)}
.header-access{display:inline-flex;align-items:center;gap:.5rem;color:var(--navy);text-decoration:none;font-weight:600;font-size:.85rem;letter-spacing:.02em;padding:10px 20px;border:1.5px solid var(--navy);border-radius:4px;transition:all .25s ease;font-family:'Jost',sans-serif;background:none;cursor:pointer}
.header-access svg{width:13px;height:13px}
.header-access:hover{background:var(--navy);color:#fff}
.chip-acceso{font-family:'Jost',sans-serif;font-size:.78rem;color:var(--navy);border:1px solid var(--brass);background:rgba(180,158,113,.12);padding:6px 14px;border-radius:999px;letter-spacing:.4px;white-space:nowrap}
.chip-acceso.caducado{border-color:var(--red);color:var(--red);background:rgba(180,67,58,.08)}
/* v7.5 · prueba gratuita: el chip es una cuenta atrás, no una fecha */
.chip-prueba{border-color:var(--green,#3f6b4b);color:var(--green,#3f6b4b);background:rgba(63,107,75,.10);font-variant-numeric:tabular-nums}
.chip-prueba.caducado{border-color:var(--red);color:var(--red);background:rgba(180,67,58,.08)}
.aviso-prueba{border:1px solid var(--brass);background:rgba(180,158,113,.10);border-radius:10px;padding:16px 20px;margin:0 0 22px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.aviso-prueba .ap-txt{flex:1 1 320px;min-width:0}
.aviso-prueba h3{margin:0 0 4px;font-size:1.05rem;color:var(--navy)}
.aviso-prueba p{margin:0;font-size:.9rem;color:var(--muted);line-height:1.5}
.aviso-prueba .ap-reloj{font-family:'Jost',sans-serif;font-size:1.35rem;color:var(--navy);white-space:nowrap;font-variant-numeric:tabular-nums}
.nav-toggle{display:none;background:none;border:none;color:var(--navy);cursor:pointer;padding:6px 4px;line-height:1}
.nav-toggle svg{width:22px;height:22px;display:block}
/* El menú del administrador tiene 8 entradas: por debajo de 1024px ya no caben
   en una línea y se salían por la derecha. A partir de aquí, menú desplegable. */
@media(max-width:1024px){
  .site-brand img{height:48px}
  .campus-tag{display:none}
  .nav-toggle{display:block}
  .header-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 16px 30px rgba(0,0,0,.1)}
  .header-nav.active{display:flex}
  .header-nav a.header-link{padding:16px 24px;border-bottom:1px solid var(--line);width:100%;box-sizing:border-box}
  .header-nav a.header-access,.header-nav button.header-access{margin:16px 24px;justify-content:center}
  .header-nav .chip-acceso{margin:14px 24px 0;text-align:center}
}

/* ---------- contenedor ---------- */
.shell{max-width:1080px;margin:0 auto;padding:156px 20px 60px;width:100%;flex:1}
@media(max-width:1024px){.shell{padding-top:112px}}
.shell-narrow{max-width:520px}

/* ---------- tarjetas ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 28px;margin-bottom:20px}
.card.tight{padding:18px 20px}
.kicker{font-size:.72rem;letter-spacing:3px;text-transform:uppercase;color:var(--brass);font-weight:500;margin-bottom:6px}

/* ---------- formularios ---------- */
label{display:block;font-size:.85rem;letter-spacing:.5px;color:var(--navy);margin:0 0 6px;font-weight:500}
.input, select.input, textarea.input{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:8px;background:var(--paper);font-family:'Jost',sans-serif;font-size:1rem;color:var(--ink)}
.input:focus{outline:2px solid rgba(154,131,83,.35);border-color:var(--brass)}
.field{margin-bottom:16px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.92rem}
.check input{margin-top:3px}

/* ---------- botones ---------- */
.btn{display:inline-block;background:var(--brass);color:#fff;border:none;border-radius:8px;padding:12px 26px;font-family:'Jost',sans-serif;font-size:1rem;letter-spacing:.6px;cursor:pointer;text-decoration:none;text-align:center}
.btn:hover{background:#87724a}
.btn.block{width:100%}
.btn.ghost{background:transparent;color:var(--navy);border:1px solid var(--navy)}
.btn.ghost:hover{background:var(--navy);color:#fff}
.btn.mini{padding:6px 12px;font-size:.82rem;border-radius:6px}
.btn.danger{background:transparent;color:var(--red);border:1px solid var(--red)}
.btn.danger:hover{background:var(--red);color:#fff}
.btn.navy{background:var(--navy)}
.btn.navy:hover{background:var(--navy-deep)}
/* botón bloqueado: se ve en gris de verdad (no parece pulsable) */
.btn:disabled,.btn[disabled],.btn.navy:disabled,.btn.navy[disabled]{background:#cdcabf;color:#f4f2ec;cursor:not-allowed;box-shadow:none;opacity:1}
.btn:disabled:hover,.btn[disabled]:hover,.btn.navy:disabled:hover,.btn.navy[disabled]:hover{background:#cdcabf}

/* ---------- avisos ---------- */
.flash{padding:13px 18px;border-radius:8px;margin-bottom:18px;font-size:.95rem;border:1px solid}
.flash.ok{background:#eef5ef;border-color:#bcd8c4;color:var(--green)}
.flash.error{background:#f9eeec;border-color:#e4c0bb;color:var(--red)}
.flash.info{background:#eef2f7;border-color:#c6d3e2;color:var(--navy)}

/* ---------- badges y tablas ---------- */
.badge{display:inline-block;font-size:.75rem;letter-spacing:.5px;padding:3px 10px;border-radius:999px;border:1px solid}
.badge.ok{color:var(--green);border-color:#bcd8c4;background:#eef5ef}
.badge.warn{color:#8a6d1f;border-color:#e2d3a3;background:#f8f3e3}
.badge.off{color:var(--red);border-color:#e4c0bb;background:#f9eeec}
.badge.neutro{color:var(--muted);border-color:var(--line);background:var(--paper)}
.tabla{width:100%;border-collapse:collapse;font-size:.93rem}
.tabla th{font-family:'Jost';font-weight:500;text-align:left;color:var(--muted);font-size:.78rem;letter-spacing:1.2px;text-transform:uppercase;padding:10px 10px;border-bottom:2px solid var(--line)}
.tabla td{padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tabla tr:hover td{background:var(--paper)}
.acciones{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.acciones form{display:inline}

/* ---------- rejilla de contenidos ---------- */
.seccion{margin:34px 0 10px;scroll-margin-top:140px}
.seccion .kicker{margin-bottom:2px}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:14px}
.ccard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:10px;transition:box-shadow .15s, transform .15s}
.ccard:hover{box-shadow:0 6px 22px rgba(15,41,66,.08);transform:translateY(-2px)}
.ccard h3{margin:0;font-size:1.18rem}
.ccard .tipo{font-size:.7rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--brass);font-weight:500}
.ccard .btn{margin-top:auto;align-self:flex-start}

/* ---------- login / hero ---------- */
.hero-login{max-width:440px;margin:6vh auto 0}
.hero-login .card{padding:34px 36px}
.hero-login .logo-hero{text-align:center;margin-bottom:22px}
/* El SVG no trae medidas propias: sin esta regla el navegador lo pintaría a
   300 px de ancho por defecto. Con altura fija queda igual que en la web. */
.hero-login .logo-hero img{height:72px;width:auto;display:inline-block}
.hero-login h1{text-align:center;font-size:1.8rem}
.hero-login .sub{text-align:center;color:var(--muted);margin:0 0 22px;font-size:.95rem}
.linksbajo{display:flex;justify-content:space-between;gap:10px;margin-top:16px;font-size:.88rem;flex-wrap:wrap}

/* ---------- stats admin ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:22px}
.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 20px}
.stat b{display:block;font-family:'Cormorant Garamond',serif;font-size:1.9rem;color:var(--navy);font-weight:600;line-height:1}
.stat span{font-size:.78rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}

/* ---------- utilidades ---------- */
.fila{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.espacio{flex:1}
.copiar{display:flex;gap:8px;margin-top:8px}
.copiar input{flex:1;font-size:.85rem;background:var(--paper)}
hr.sep{border:none;border-top:1px solid var(--line);margin:22px 0}
.lista-limpia{padding-left:20px;line-height:1.85;margin:10px 0}
.precio{font-family:'Cormorant Garamond',serif;font-size:2.6rem;color:var(--navy);font-weight:600}
.precio small{font-size:1rem;font-family:'Jost';color:var(--muted);font-weight:300}

/* ---------- cuenta, avatares y planes ---------- */
.avatar-mini{width:26px;height:26px;border-radius:50%;object-fit:cover;margin-right:7px;border:1px solid var(--line);background:#fff}
.cuenta-link{display:inline-flex;align-items:center}
.avatar-big{width:120px;height:120px;border-radius:50%;object-fit:cover;border:2px solid var(--line);display:block;margin:0 auto;background:#fff}
.header-badge{display:inline-block;background:var(--red);color:#fff;font-size:.68rem;border-radius:999px;padding:1px 7px;margin-left:4px;vertical-align:middle;font-weight:500}
.planes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin:22px 0 6px}
.plan-card{border:1px solid var(--line);border-radius:12px;padding:26px 24px 22px;background:#fff;display:flex;flex-direction:column;gap:10px;position:relative}
.plan-card.destacado{border:2px solid var(--brass);box-shadow:0 8px 30px rgba(154,131,83,.16)}
.plan-tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--brass);color:#fff;font-size:.66rem;letter-spacing:2px;text-transform:uppercase;padding:3px 14px;border-radius:999px;white-space:nowrap}
.plan-precio{font-family:'Cormorant Garamond',serif;font-size:2.3rem;color:var(--navy);font-weight:600;line-height:1}
.plan-precio small{font-size:.92rem;font-family:'Jost',sans-serif;color:var(--muted);font-weight:300}
.plan-card ul{margin:0;padding-left:18px;line-height:1.8;font-size:.93rem}
.plan-card .btn{margin-top:auto}
/* tarjetas de compra seleccionables (una sola opción) */
.plan-card.seleccionable{cursor:pointer;padding-right:46px;transition:border-color .15s,box-shadow .15s,background .15s}
.plan-card.seleccionable:hover{border-color:var(--brass)}
.plan-card .plan-radio{position:absolute;top:16px;right:16px;width:19px;height:19px;accent-color:var(--brass);cursor:pointer;margin:0}
.plan-card.sel{border-color:var(--brass);background:#fffdf8;box-shadow:0 8px 30px rgba(154,131,83,.18)}
.plan-card.destacado.sel{border-width:2px}

/* ---------- calendario de tutorías ---------- */
.cal-scroll{display:flex;gap:12px;overflow-x:auto;padding:6px 2px 12px;scrollbar-width:thin}
.cal-dia{min-width:126px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;flex-shrink:0}
.cal-dia h4{margin:0 0 8px;font-family:'Jost',sans-serif;font-weight:500;font-size:.8rem;color:var(--navy);letter-spacing:.4px}
.slot{display:block;width:100%;margin:5px 0;padding:7px 6px;border:1px solid var(--brass);background:var(--paper);border-radius:7px;font-family:'Jost',sans-serif;font-size:.86rem;color:var(--navy);cursor:pointer;transition:.12s}
.slot:hover{background:#efe7d6}
.slot.sel{background:var(--brass);color:#fff;font-weight:500}

/* ---------- progreso ---------- */
.hero-prog{background:linear-gradient(135deg,#fff 0%,#faf7ef 100%)}
.prog-stats{display:flex;gap:26px;flex-wrap:wrap}
.pstat b{display:block;font-family:'Cormorant Garamond',serif;font-size:1.55rem;color:var(--navy);font-weight:600;line-height:1.1}
.pstat span{font-size:.7rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.barra{height:10px;background:#e9e4d6;border:1px solid var(--line);border-radius:999px;margin-top:16px;overflow:hidden}
.barra-fill{height:100%;background:linear-gradient(90deg,var(--brass),var(--brass-light));border-radius:999px;transition:width .5s ease}
a.ccard{text-decoration:none;color:inherit}
.tema-num{font-size:.68rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--brass);font-weight:500}
.ccard.off{opacity:.55;background:var(--paper);border-style:dashed}
.ccard.off:hover{box-shadow:none;transform:none}
.fila-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.grid-temas{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}

/* ---------- asistente 24h ---------- */
/* Botón flotante: pastilla con el timón y la etiqueta «Asistente Virtual» */
#bot-btn{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 20px 0 14px;border-radius:999px;background:var(--navy-deep);border:2px solid var(--brass);color:var(--ivory);cursor:pointer;z-index:9500;box-shadow:0 6px 18px rgba(15,41,66,.35);transition:transform .15s,box-shadow .15s;font-family:'Jost',sans-serif}
#bot-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,41,66,.42)}
#bot-btn svg{width:28px;height:28px;flex-shrink:0}
#bot-btn .bot-btn-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.12;text-align:left}
#bot-btn .bot-btn-txt b{font-size:.86rem;font-weight:600;letter-spacing:.3px}
#bot-btn .bot-btn-txt small{font-size:.64rem;color:var(--brass-light);letter-spacing:1.1px;text-transform:uppercase}
#bot-btn.abierto{opacity:0;pointer-events:none}

#bot-panel{position:fixed;right:18px;bottom:calc(86px + env(safe-area-inset-bottom));width:min(392px,calc(100vw - 28px));height:min(560px,calc(100vh - 130px));background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 44px rgba(15,41,66,.28);display:none;flex-direction:column;overflow:hidden;z-index:9600}
#bot-panel.abierto{display:flex}
.bot-cab{background:var(--navy-deep);color:var(--ivory);padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.bot-cab strong{font-family:'Cormorant Garamond',serif;font-size:1.14rem;letter-spacing:.5px;display:block}
.bot-cab span{font-size:.72rem;color:var(--brass-light);display:block}
#bot-cerrar{background:none;border:none;color:rgba(244,241,233,.85);font-size:1.7rem;line-height:1;cursor:pointer;padding:2px 6px;border-radius:8px;flex-shrink:0}
#bot-cerrar:hover{color:#fff;background:rgba(255,255,255,.12)}
#bot-cerrar{background:none;border:none;color:var(--ivory);font-size:1.4rem;cursor:pointer;line-height:1}
#bot-msgs{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--paper);overscroll-behavior:contain}
.bmsg{max-width:86%;padding:10px 14px;border-radius:12px;font-size:.92rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.bmsg.bot{background:#fff;border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px}
.bmsg.yo{background:var(--navy);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.bmsg.pensando{color:var(--muted);font-style:italic}
/* Sugerencias para arrancar la conversación */
.bot-sugerencias{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.bot-sug{background:#fff;border:1px solid var(--brass-light);color:var(--navy);border-radius:999px;padding:8px 14px;font-size:.82rem;font-family:'Jost',sans-serif;cursor:pointer;line-height:1.2}
.bot-sug:hover{background:var(--brass);border-color:var(--brass);color:#fff}
#bot-form{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);background:#fff}
#bot-form input{flex:1;min-width:0;padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:var(--paper);font-family:'Jost',sans-serif;font-size:16px}
#bot-form input:focus{outline:2px solid rgba(154,131,83,.35);border-color:var(--brass)}
#bot-form button{flex-shrink:0}
.bot-pie{font-size:.68rem;color:var(--muted);padding:0 12px 10px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;background:#fff}

/* ---------- El asistente en el móvil ----------
   El panel pasa a ocupar toda la pantalla: en 390px de ancho una ventanita
   flotante no se puede usar. Se ancla con dvh (la altura real visible, sin
   contar la barra del navegador) para que el teclado no tape el campo de
   escribir, y se respetan las zonas seguras de los móviles con notch. */
@media (max-width:640px){
  #bot-btn{right:14px;bottom:calc(14px + env(safe-area-inset-bottom));height:50px;padding:0 16px 0 12px}
  #bot-btn svg{width:25px;height:25px}
  #bot-btn .bot-btn-txt b{font-size:.82rem}
  #bot-btn .bot-btn-txt small{display:none}

  #bot-panel{right:0;left:0;bottom:0;top:0;width:100%;height:100vh;height:100dvh;max-height:none;border:none;border-radius:0}
  .bot-cab{padding:calc(12px + env(safe-area-inset-top)) 14px 12px;position:sticky;top:0}
  .bot-cab strong{font-size:1.22rem}
  #bot-cerrar{font-size:2rem;padding:4px 10px}
  #bot-msgs{padding:14px 14px 6px}
  .bmsg{max-width:92%;font-size:.98rem}
  .bot-sug{font-size:.88rem;padding:10px 15px}
  #bot-form{padding:10px 12px;gap:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  #bot-form button{padding:12px 18px;font-size:.92rem}
  .bot-pie{padding:0 14px calc(10px + env(safe-area-inset-bottom));font-size:.7rem}
  /* Con el panel abierto se bloquea el fondo para no arrastrar la página detrás */
  body.bot-abierto{overflow:hidden}
}

/* ---------- pie (réplica de psyachtingacademy.com) ---------- */
.site-footer{background:var(--navy-deep);padding:56px 0;text-align:center;margin-top:70px}
.site-footer .container{max-width:1140px;margin:0 auto;padding:0 24px}
/* El pie usa el logo negativo (igual que la landing), así que ya no hace falta
   el recuadro blanco que antes hacía legible el logo oscuro sobre el azul. */
.site-footer .brand-chip{display:inline-flex;align-items:center;justify-content:center;margin-bottom:1.6rem}
.site-footer .brand-chip img{height:110px;width:auto;display:block}
@media(max-width:768px){
  .site-footer .brand-chip img{height:84px}
}
.site-footer p{color:rgba(255,255,255,.6);font-size:.87rem;margin:0 0 1.2rem;font-family:'Jost',sans-serif}
.site-footer-links{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap}
.site-footer-links a{color:rgba(255,255,255,.75);text-decoration:none;font-size:.87rem;transition:color .2s;font-family:'Jost',sans-serif}
.site-footer-links a:hover{color:var(--brass-light)}

/* ============================================================
   TABLAS EN FORMATO TARJETA
   ------------------------------------------------------------
   Cada fila se convierte en una tarjeta con «Etiqueta: valor», en vez de una
   tabla ancha que hay que arrastrar de lado. El data-label lo pone solo ui.php
   leyendo la cabecera de cada tabla.

   El corte estaba en 640px, pero las tablas del panel miden entre 750 y 1100px:
   con el móvil en horizontal (~845px) o en una tablet seguían saliéndose y
   había que arrastrarlas dentro de la tarjeta, que es justo lo que se veía mal.
   Subido a 1024px, que es también donde el menú pasa a desplegable.
   ============================================================ */
@media (max-width:1024px){
  .tabla-movil, .tabla-movil tbody{display:block;width:100%}
  .tabla-movil thead, .tabla-movil .fila-cabecera{display:none}
  .tabla-movil tr{display:block;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 16px 10px;margin-bottom:12px}
  .tabla-movil tr:hover td{background:none}
  .tabla-movil td{display:block;min-width:0 !important;border:none;border-bottom:1px dashed var(--line);padding:9px 0;text-align:left;overflow-wrap:anywhere}
  .tabla-movil tr td:last-child{border-bottom:none}
  .tabla-movil td:empty{display:none}                 /* celdas vacías no dejan huecos */
  .tabla-movil td[data-label]::before{content:attr(data-label);display:block;margin-bottom:3px;font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.9px;color:var(--muted)}
  .tabla-movil td .acciones,.tabla-movil td form.fila{margin-top:2px}
  .tabla-movil td .btn.mini{padding:9px 14px}          /* objetivos táctiles más cómodos */
  /* Los botones de acción de cada fila, en línea y con espacio para el dedo */
  .tabla-movil td .fila{flex-wrap:wrap;gap:8px}
  .tabla-movil td form{display:inline-block}
  /* Campos con min-width en línea: dentro de una ficha, nunca más anchos que ella */
  .tabla-movil td input,.tabla-movil td select,.tabla-movil td textarea{min-width:0 !important;max-width:100%;width:100%}
  .tabla-movil td form.fila{width:100%}
  .tabla-movil td *{max-width:100%}   /* pantallas muy estrechas: nada se sale de la ficha */
  /* El contenedor con scroll ya no hace falta cuando la tabla es una tarjeta */
  .tabla-movil{min-width:0}

  /* Tablas sin cabecera detectable: que se desplacen sin romper la página */
  .tabla:not(.tabla-movil){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

@media (max-width:640px){
  .shell{padding:104px 14px 50px}
  .card{padding:20px 16px}
  .card.tight{padding:16px 14px}
  h1{font-size:1.7rem}
  h2{font-size:1.32rem}

  /* Nada puede empujar la página a lo ancho */
  .card, .flash, .tabla-movil tr{max-width:100%}
  h1,h2,h3{overflow-wrap:anywhere}   /* un email largo en un título ensanchaba la página */
  img,table{max-width:100%}
  .fila{gap:10px}
  .fila > form{max-width:100%}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stat b{font-size:1.35rem}
  /* Campos y botones cómodos con el pulgar; 16px evita que iOS haga zoom al escribir */
  .input, select.input, textarea.input{font-size:16px;padding:12px 14px}
  .btn{padding:13px 22px}
  .btn.mini{padding:9px 14px;font-size:.85rem}
  /* Correos y códigos largos parten de línea en vez de ensanchar la tarjeta */
  td a[href^="mailto:"], .small a[href^="mailto:"], .muted{overflow-wrap:anywhere}
}

/* ============================================================
   v7.0 · Paneles con scroll propio e indicadores clicables
   Estas mismas reglas viajan dentro de lib/ui.php (ui_css_paneles),
   junto al JavaScript que las acompaña. Aquí están por coherencia:
   si algún día se toca el diseño, se toca en los dos sitios.
   ============================================================ */
.stat.clic{display:block;text-decoration:none;color:inherit;cursor:pointer;position:relative;padding-right:36px;
  transition:border-color .15s, box-shadow .15s, transform .15s}
.stat.clic:hover,.stat.clic:focus-visible{border-color:var(--brass);box-shadow:0 8px 20px rgba(15,41,66,.10);transform:translateY(-1px)}
.stat.clic:focus-visible{outline:2px solid rgba(154,131,83,.55);outline-offset:2px}
.stat.clic::after{content:"";position:absolute;right:16px;top:22px;width:7px;height:7px;
  border-right:1.6px solid var(--brass);border-bottom:1.6px solid var(--brass);
  transform:rotate(-45deg);opacity:.5;transition:opacity .15s, right .15s}
.stat.clic:hover::after{opacity:1;right:13px}

.scroll-marco{position:relative;margin:0 0 4px}
.scroll-caja{position:relative;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  max-height:var(--alto,420px);border:1px solid var(--line);border-radius:10px;background:#fff}
.scroll-caja.alto-max{max-height:78vh}
.scroll-caja>table.tabla,.scroll-caja>form>table.tabla{margin:0}
.scroll-caja table.tabla th{position:sticky;top:0;z-index:3;background:#fff;border-bottom:none;
  box-shadow:inset 0 -2px 0 var(--line)}
.scroll-caja table.tabla th:first-child,.scroll-caja table.tabla td:first-child{padding-left:14px}
.scroll-caja table.tabla th:last-child,.scroll-caja table.tabla td:last-child{padding-right:14px}
.scroll-caja table.tabla tr:last-child td{border-bottom:none}
.scroll-caja>.lista-fichas{padding:4px 14px}
.scroll-marco::after{content:"";position:absolute;left:1px;right:1px;bottom:1px;height:38px;border-radius:0 0 10px 10px;
  background:linear-gradient(to top,#fff 15%,rgba(255,255,255,0));opacity:0;transition:opacity .2s;pointer-events:none}
.scroll-marco.hay-mas::after{opacity:1}
.scroll-barra{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 8px;
  font-size:.76rem;letter-spacing:.6px;color:var(--muted)}
.scroll-barra .espacio{flex:1}
.scroll-toggle{background:none;border:1px solid var(--line);border-radius:999px;padding:4px 12px;
  font-family:inherit;font-size:.74rem;letter-spacing:.6px;color:var(--navy);cursor:pointer}
.scroll-toggle:hover{border-color:var(--brass);color:var(--brass)}

.card[id],.scroll-marco[id],[data-ancla]{scroll-margin-top:104px}
@keyframes psa-destaca{0%{box-shadow:0 0 0 0 rgba(154,131,83,.5)}100%{box-shadow:0 0 0 16px rgba(154,131,83,0)}}
.destacado{animation:psa-destaca 1.1s ease-out 2}

@media (max-width:1024px){
  .scroll-caja{max-height:var(--alto-movil,var(--alto,420px))}
  .scroll-caja.tabla-envoltorio{overflow-x:hidden !important}
  .scroll-caja table.tabla-movil tr{border-left:none;border-right:none;border-radius:0;margin-bottom:0;
    border-top:none;border-bottom:1px solid var(--line)}
  .scroll-caja table.tabla-movil tr:last-child{border-bottom:none}
  .scroll-caja table.tabla:not(.tabla-movil){display:table;overflow-x:visible}
}
@media (prefers-reduced-motion:reduce){
  .destacado{animation:none;outline:2px solid var(--brass);outline-offset:3px}
  .stat.clic{transition:none}
}

/* v7.1 · Selector de meses (Facturas y Economía) y desplegable «Más» del panel.
   Igual que el resto de la v7.0, estas reglas viajan también dentro de lib/ui.php. */
.meses-rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(136px,1fr));gap:8px}
.mes-chip{display:flex;align-items:center;gap:7px;margin:0;padding:9px 10px;border:1px solid var(--line);
  border-radius:9px;background:var(--paper);cursor:pointer;font-size:.88rem;color:var(--navy);
  transition:border-color .15s, background .15s}
.mes-chip:hover{border-color:var(--brass)}
.mes-chip input{margin:0;accent-color:var(--brass);flex:0 0 auto}
.mes-chip .mes-nombre{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mes-chip .mes-n{font-size:.7rem;color:var(--muted);background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:1px 8px;flex:0 0 auto}
.mes-chip.vacio{opacity:.5}
.mes-chip:has(input:checked){background:#fff;border-color:var(--brass);box-shadow:inset 0 0 0 1px var(--brass)}
.mes-chip:has(input:focus-visible){outline:2px solid rgba(154,131,83,.5);outline-offset:2px}
details.card>summary{cursor:pointer;list-style:revert}
details.card>summary::marker{color:var(--brass)}
.nav-sub-toggle.nav-mas{display:inline-flex;align-items:center;gap:5px;padding:0;line-height:inherit;
  font-family:'Jost',sans-serif;font-size:.9rem;font-weight:500;color:var(--navy);white-space:nowrap;border-radius:0}
.nav-sub-toggle.nav-mas:hover,.nav-sub-toggle.nav-mas.on{color:var(--brass);background:none}
.nav-sub-toggle.nav-mas svg{width:11px;height:11px}
.nav-sub a.on{color:var(--brass);background:var(--paper)}
@media(max-width:1024px){.nav-sub-toggle,.nav-sub-toggle.nav-mas{display:none}}