/* ============================================================
   panelc-main.css — extraído de index.php (Paso 1)
   Origen: index.php líneas 305-4342 y 4346-4386
   Generado: 2026-05-05T14:32:24Z
   ============================================================ */

/* ── Bloque 1 (líneas 305-4342 de index.php) ──────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Hide browser-native input clear/reveal buttons (Edge/IE gray "×") to avoid duplicates with our own remove buttons */
input::-ms-clear,input::-ms-reveal{display:none !important;width:0 !important;height:0 !important}
input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration,input::-webkit-clear-button{-webkit-appearance:none !important;display:none !important}
:root{
  /* ── Luxury Minimal Palette ─────────────────────────────── */
  --bg1:#FFFFFF;      /* Fondo principal */
  --bg2:#FFFFFF;      /* Superficies elevadas */
  --bg3:#F3F3F3;      /* Fondo secundario / hover */
  --bg4:#EBEBEB;      /* Bordes activos / selección */
  --msg-me:#E8E8E8;   /* Burbuja propia */
  --msg-o:#F8F8F8;    /* Burbuja otro */
  --acc:#1a1a1a;      /* Acento principal (negro) */
  --acc22:rgba(26,26,26,.08);
  --acc2:#333333;
  --txt:#1a1a1a;      /* Texto principal */
  --muted:#888888;    /* Texto secundario */
  --muted2:#BBBBBB;   /* Placeholder / hint */
  --panel:#FFFFFF;
  --bor:#E8E8E8;      /* Borde suave */
  --bor2:#D0D0D0;     /* Borde marcado */
  --danger:#CC3333;
  --ok:#2D8A4E;
  --r:14px;           /* Radio de borde */
  --bnav:60px;        /* Altura bottom nav */
  --shadow:0 1px 3px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.04);
  --shadow-up:0 -1px 0 rgba(0,0,0,.06);

  /* ── Safe areas (notch / Dynamic Island / home indicator) ── */
  /* Se calculan automáticamente cuando viewport-fit=cover      */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}
html {
  height: 100%;
  height: -webkit-fill-available;
}
body {
  /* Orden de prioridad: --fill-height (calculado por JS) > dvh > vh */
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  height: 100dvh;
  height: -webkit-fill-available;
  min-height: -webkit-fill-available;
  overflow: hidden;
  background: var(--bg1); color: var(--txt);
  font-family: 'Inter','Segoe UI',system-ui,sans-serif;
  -webkit-tap-highlight-color: transparent;
  background-attachment: fixed;
}

/* ── LUXURY BOTTOM NAV OVERRIDE ─────────────────────────────── */
/* Se extiende bajo el home indicator del iPhone (--safe-bottom) */
.bnav{
  display:flex;align-items:flex-start; /* flex-start para que los botones se alineen arriba, el padding-bottom cubre el safe area */
  background:var(--bg2);
  border-top:1px solid var(--bor);
  /* Altura = zona de botones (--bnav) + home indicator (--safe-bottom) */
  height:calc(var(--bnav) + var(--safe-bottom));
  padding-bottom:var(--safe-bottom);
  position:fixed;bottom:0;left:0;right:0;z-index:200;
  padding-left:calc(.5rem + var(--safe-left));
  padding-right:calc(.5rem + var(--safe-right));
  gap:0;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.bnav-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:none;border:none;color:var(--muted);cursor:pointer;
  /* Altura fija de la zona táctil = --bnav, ignora el safe-bottom */
  height:var(--bnav);
  padding:.4rem .2rem .3rem;gap:2px;
  position:relative;transition:color .15s;
  -webkit-tap-highlight-color:transparent;
}
.bnav-btn.on{color:var(--acc)}
.bnav-btn.on::after{
  content:'';position:absolute;top:0;left:20%;right:20%;height:2px;
  background:var(--acc);border-radius:0 0 2px 2px;
}
.bnav-ico{display:flex;align-items:center;justify-content:center;width:24px;height:24px}
.bnav-ico svg{width:22px;height:22px;stroke-width:1.5}
.bnav-btn.on .bnav-ico svg{stroke-width:2}
.bnav-lbl{font-size:.65rem;font-weight:400;letter-spacing:.02em;line-height:1}
.bnav-btn.on .bnav-lbl{font-weight:600}
.bnav-sep{width:1px;background:var(--bor);margin:.8rem 0;flex-shrink:0}
/* ── Notification Badges ── */
.nbadge{position:absolute;top:4px;right:calc(50% - 22px);min-width:18px;height:18px;
  border-radius:9px;background:#b8d4ba;color:#2c4a35;font-size:.62rem;font-weight:700;
  display:none;align-items:center;justify-content:center;padding:0 5px;z-index:2;
  line-height:1;box-shadow:0 1px 3px rgba(0,0,0,.18),0 0 0 2px var(--bg1,#fff);
  letter-spacing:0;font-family:system-ui,-apple-system,sans-serif}
.nbadge.show{display:flex;animation:nbadgePop .25s ease}
@keyframes nbadgePop{
  0%{transform:scale(.6);opacity:0}
  60%{transform:scale(1.15);opacity:1}
  100%{transform:scale(1);opacity:1}
}
.bnav-btn{position:relative}


/* ── PWA INSTALL BANNER ─────────────────────────────────────── */
#pwa-banner{
  position:fixed;bottom:calc(var(--bnav) + .75rem);left:.75rem;right:.75rem;
  background:var(--acc);color:#fff;border-radius:16px;
  padding:1rem 1.2rem;display:flex;align-items:center;gap:.85rem;
  z-index:500;opacity:0;pointer-events:none;
  transform:translateY(12px);
  transition:opacity .25s,transform .25s;
  box-shadow:0 4px 24px rgba(0,0,0,.18);
}
#pwa-banner.show{opacity:1;pointer-events:auto;transform:translateY(0)}
#pwa-banner .pwa-txt{flex:1}
#pwa-banner .pwa-ttl{font-size:.85rem;font-weight:600;margin-bottom:.15rem}
#pwa-banner .pwa-sub{font-size:.72rem;opacity:.75}
#pwa-banner .btn-install{
  background:#fff;color:var(--acc);border:none;border-radius:9px;
  padding:.45rem 1rem;font-size:.8rem;font-weight:600;cursor:pointer;
  flex-shrink:0;white-space:nowrap;
}
#pwa-banner .btn-close{
  background:none;border:none;color:#fff;opacity:.6;cursor:pointer;
  padding:.2rem;font-size:1.1rem;flex-shrink:0;
}

/* ── AUTH / LANDING ─────────────────────────────────────────── */
#auth{position:fixed;inset:0;background:#fff;z-index:9999;
  display:flex;flex-direction:column;padding:0;color:#1a1a1a;
  font-family:'Inter','Segoe UI',system-ui,sans-serif;
  overflow:hidden;height:100vh;height:100dvh;box-shadow:none}
.lp-shell{display:flex;flex-direction:column;height:100%;
  max-width:1140px;width:100%;margin:0 auto;padding:0 2.5rem}
/* ── Nav ── */
.lp-nav{display:flex;align-items:center;justify-content:space-between;
  height:52px;flex-shrink:0}
.lp-brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:#1a1a1a}
.lp-brand img{width:26px;height:26px;border-radius:6px;display:block}
.lp-brand-name{font-family:'Raleway','Inter',sans-serif;font-weight:300;
  font-size:.88rem;letter-spacing:.18em;text-transform:uppercase}
.lp-nav-links{display:flex;gap:1.4rem;align-items:center}
.lp-nav-links a{color:#777;text-decoration:none;font-size:.8rem;font-weight:400;
  letter-spacing:.02em;transition:color .15s}
.lp-nav-links a:hover{color:#1a1a1a}
.lp-nav-cta{background:#1a1a1a;color:#fff;padding:.45rem 1rem;border-radius:999px;
  font-size:.78rem;font-weight:500;letter-spacing:.02em;text-decoration:none;transition:.15s}
.lp-nav-cta:hover{background:#000;color:#fff}
/* ── Main: hero left + login right ── */
.lp-main{flex:1;display:grid;grid-template-columns:1.2fr .8fr;gap:3.5rem;
  align-items:center;min-height:0}
/* Hero side */
.lp-hero{display:flex;flex-direction:column;justify-content:center;min-height:0;overflow:hidden}
/* Hero header: H1 left + sub/tags right */
.lp-hero-head{display:grid;grid-template-columns:auto 1fr;gap:0 2.5rem;align-items:start;
  margin-bottom:.6rem}
.lp-hero-left{display:flex;flex-direction:column}
.lp-kicker{display:inline-flex;align-items:center;gap:.45rem;
  font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:#64ff00;margin-bottom:.55rem}
.lp-kicker::before{content:'';width:6px;height:6px;border-radius:50%;background:#64ff00;flex-shrink:0}
.lp-hero h1{font-family:'Raleway','Inter',sans-serif;font-weight:200;
  font-size:clamp(1.8rem,3.5vw,2.8rem);line-height:1.1;letter-spacing:-.01em;
  color:#1a1a1a;margin:0;white-space:nowrap}
.lp-hero h1 strong{font-weight:500}
.lp-hero-right{display:flex;flex-direction:column;justify-content:center;padding-top:.3rem}
.lp-hero .lp-sub{font-size:.88rem;line-height:1.55;color:#666;font-weight:300;
  margin-bottom:.65rem;max-width:none}
/* Tag pills — para quién */
.lp-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:0}
.lp-tag{padding:.25rem .65rem;border-radius:999px;border:1px solid #e0e0e0;
  font-size:.68rem;font-weight:400;color:#555;letter-spacing:.02em;
  background:#fafafa;white-space:nowrap;transition:.15s}
.lp-tag:hover{border-color:#64ff00;color:#1a1a1a}
/* ── Feature tabs ── */
.lp-ftabs{display:flex;gap:0;border-bottom:1px solid #eee;margin-bottom:0;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.lp-ftabs::-webkit-scrollbar{display:none}
.lp-ftab{padding:.45rem .7rem .4rem;background:none;border:none;border-bottom:2px solid transparent;
  font-size:.72rem;font-weight:400;color:#999;letter-spacing:.01em;
  white-space:nowrap;cursor:pointer;transition:.15s;
  user-select:none;-webkit-user-select:none;font-family:inherit;flex-shrink:0}
.lp-ftab:hover{color:#555}
.lp-ftab.on{color:#1a1a1a;border-bottom-color:#64ff00;font-weight:600}
/* Preview area: image + description */
.lp-fpreview{display:flex;gap:1.2rem;align-items:stretch;padding:.6rem 0 0;
  min-height:0;flex:1;overflow:hidden;transition:opacity .15s}
.lp-fimg{flex:1;min-width:0;border-radius:10px;overflow:hidden;
  background:#f8f8f8;border:1px solid #eee;position:relative}
.lp-fimg img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block;
  transition:opacity .2s}
.lp-fimg-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;color:#ccc;font-size:.78rem;gap:.4rem}
.lp-fimg-placeholder svg{width:32px;height:32px;stroke-width:1.2;opacity:.4}
.lp-finfo{width:200px;flex-shrink:0;display:flex;flex-direction:column;gap:.4rem;justify-content:center}
.lp-finfo h3{font-size:.95rem;font-weight:600;color:#1a1a1a;line-height:1.3}
.lp-finfo p{font-size:.85rem;line-height:1.55;color:#666;font-weight:300}
/* ── Login column ── */
.lp-login-col{display:flex;align-items:center;justify-content:center;min-height:0}
.lp-login-box{background:#fff;border:1px solid #e8e8e8;border-radius:16px;
  padding:1.6rem 1.5rem;width:100%;max-width:360px;
  box-shadow:0 1px 3px rgba(0,0,0,.03),0 8px 40px rgba(0,0,0,.04)}
.lp-login-box .alogo{text-align:center;margin-bottom:1.1rem}
.lp-login-box .alogo img{width:48px;height:48px;border-radius:12px}
.lp-login-box .alogo h1{font-family:'Raleway','Inter',sans-serif;font-size:1.15rem;font-weight:200;
  letter-spacing:.18em;text-transform:uppercase;color:#1a1a1a;margin-top:.4rem;line-height:1}
.lp-login-box .alogo p{font-size:.58rem;font-weight:500;letter-spacing:.3em;color:#999;
  text-transform:uppercase;margin-top:.25rem}
.lp-login-box .atabs{border-color:#eee;margin-bottom:1rem}
.lp-login-box .atab{color:#888;font-weight:400;font-size:.82rem;padding:.5rem}
.lp-login-box .atab.on{color:#1a1a1a;border-bottom-color:#1a1a1a;font-weight:500}
.lp-login-box .fg{margin-bottom:.7rem}
.lp-login-box .fg label{color:#888;font-weight:400;font-size:.72rem;letter-spacing:.02em}
.lp-login-box .fg input{background:#fafafa;border-color:#eee;font-size:.88rem;padding:.6rem .85rem}
.lp-login-box .fg input:focus{border-color:#64ff00;background:#fff;
  box-shadow:0 0 0 2px rgba(100,255,0,.15);outline:none}
.lp-login-box .btn-p{background:#1a1a1a;color:#fff;font-weight:500;letter-spacing:.02em;
  padding:.7rem;font-size:.9rem;transition:.2s}
.lp-login-box .btn-p:hover{background:#64ff00;color:#1a1a1a}
.lp-login-box .aerr{margin-top:.5rem}
/* Input field actions (clear X + eye toggle) */
.lp-input-wrap{position:relative;display:flex;align-items:center}
.lp-input-wrap input{width:100%;padding-right:2.2rem}
.lp-input-wrap.has-eye input{padding-right:3.6rem}
.lp-input-action{position:absolute;right:0;top:0;bottom:0;display:flex;align-items:center;
  padding:0 .55rem;gap:.15rem}
.lp-input-btn{background:none;border:none;padding:0;cursor:pointer;display:none;
  color:#aaa;transition:color .15s;line-height:0;flex-shrink:0}
.lp-input-btn:hover{color:#555}
.lp-input-btn svg{width:16px;height:16px;display:block}
.lp-input-btn.lp-clear{display:none}
.lp-input-btn.lp-eye{display:flex;color:#bbb}
.lp-input-btn.lp-eye:hover{color:#555}
/* Google sign-in */
.lp-sep{display:flex;align-items:center;gap:.7rem;margin:.85rem 0 .7rem;color:#bbb;font-size:.72rem;font-weight:400}
.lp-sep::before,.lp-sep::after{content:'';flex:1;height:1px;background:#eee}
.lp-google-wrap{width:100%;display:flex;justify-content:center;min-height:44px}
.lp-google-wrap>div{width:100%!important}
.lp-google-wrap iframe{border-radius:8px!important}
.lp-gbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.65rem;border:1px solid #e0e0e0;border-radius:8px;background:#fff;cursor:pointer;
  font-size:.86rem;font-weight:500;color:#333;font-family:inherit;transition:.15s;letter-spacing:.01em}
.lp-gbtn:hover{border-color:#bbb;background:#fafafa}
.lp-gbtn svg{width:18px;height:18px;flex-shrink:0}
/* Language selector */
.lp-lang-sel{position:relative;display:inline-flex;align-items:center}
.lp-lang-btn{background:none;border:1px solid #e0e0e0;border-radius:8px;padding:.3rem .55rem;
  font-size:.72rem;color:#666;cursor:pointer;display:flex;align-items:center;gap:.35rem;
  font-family:inherit;transition:.15s;white-space:nowrap}
.lp-lang-btn:hover{border-color:#aaa;color:#333}
.lp-lang-btn svg{width:14px;height:14px;opacity:.55}
.lp-lang-dd{position:absolute;top:calc(100% + 4px);right:0;background:#fff;border:1px solid #e0e0e0;
  border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,.12);padding:.35rem 0;min-width:170px;
  max-height:280px;overflow-y:auto;z-index:100;display:none;scrollbar-width:thin}
.lp-lang-dd.show{display:block}
.lp-lang-opt{display:block;width:100%;padding:.42rem .8rem;background:none;border:none;
  text-align:left;font-size:.78rem;color:#555;cursor:pointer;transition:background .12s;
  font-family:inherit;white-space:nowrap}
.lp-lang-opt:hover{background:#f5f5f5;color:#1a1a1a}
.lp-lang-opt.active{color:#1a1a1a;font-weight:600;background:#f0fff0}
/* Image carousel */
.lp-carousel{position:relative;width:100%;height:100%;overflow:hidden}
.lp-carousel-track{display:flex;transition:transform .35s ease;height:100%}
.lp-carousel-track img{width:100%;height:100%;object-fit:cover;object-position:top left;flex-shrink:0}
.lp-carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.85);
  border:none;width:30px;height:30px;border-radius:50%;cursor:pointer;display:flex;align-items:center;
  justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.12);z-index:2;transition:.15s;opacity:0}
.lp-fimg:hover .lp-carousel-arrow{opacity:1}
.lp-carousel-arrow:hover{background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.2)}
.lp-carousel-arrow svg{width:16px;height:16px;stroke:#333;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lp-carousel-prev{left:8px}
.lp-carousel-next{right:8px}
.lp-carousel-dots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  display:flex;gap:6px;z-index:2}
.lp-carousel-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);
  border:1px solid rgba(100,255,0,.4);cursor:pointer;transition:.2s;padding:0}
.lp-carousel-dot.active{background:#64ff00;border-color:#64ff00;transform:scale(1.15)}
/* ── Footer ── */
.lp-footer{flex-shrink:0;border-top:1px solid #f0f0f0;
  padding:.65rem 0;display:flex;justify-content:space-between;align-items:center;
  font-size:.7rem;color:#aaa;font-weight:300;gap:.5rem;flex-wrap:wrap}
.lp-footer-links{display:flex;gap:1rem}
.lp-footer-links a{color:#aaa;text-decoration:none;transition:color .15s}
.lp-footer-links a:hover{color:#1a1a1a}
.lp-footer-copy{color:#bbb;font-size:.68rem}
/* ── Legal modal ── */
.lp-modal{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:10001;
  display:none;align-items:center;justify-content:center;padding:1rem}
.lp-modal.show{display:flex}
.lp-modal-box{background:#fff;border-radius:16px;max-width:580px;width:100%;
  max-height:78vh;overflow-y:auto;padding:1.8rem 1.8rem 1.4rem;position:relative;
  box-shadow:0 24px 80px rgba(0,0,0,.25)}
.lp-modal-box h2{font-family:'Raleway','Inter',sans-serif;font-weight:300;font-size:1.4rem;
  letter-spacing:.04em;margin-bottom:.8rem;color:#1a1a1a}
.lp-modal-box h3{font-weight:500;font-size:.9rem;margin:1rem 0 .35rem;color:#1a1a1a}
.lp-modal-box p,.lp-modal-box li{font-size:.85rem;line-height:1.6;color:#444;font-weight:300;margin-bottom:.5rem}
.lp-modal-box ul{padding-left:1.2rem}
.lp-modal-close{position:absolute;top:.8rem;right:.8rem;background:none;border:none;
  font-size:1.3rem;color:#888;cursor:pointer;line-height:1;padding:.3rem}
.lp-modal-close:hover{color:#1a1a1a}
/* ── Responsive ── */
@media (max-width:880px){
  .lp-shell{padding:0 1.2rem;padding-bottom:env(safe-area-inset-bottom,0)}
  .lp-main{grid-template-columns:1fr;gap:1rem;align-items:start;
    overflow-y:auto;-webkit-overflow-scrolling:touch;padding-top:.6rem;
    padding-bottom:calc(env(safe-area-inset-bottom,0) + .6rem)}
  .lp-login-col{order:-1;margin-bottom:.4rem}
  .lp-login-box{max-width:100%;padding:1.1rem 1rem 1.3rem}
  .lp-login-box .alogo{margin-bottom:.65rem}
  .lp-login-box .alogo img{width:42px;height:42px}
  .lp-login-box .alogo h1{font-size:1rem;margin-top:.3rem}
  .lp-login-box .alogo p{font-size:.56rem;margin-top:.18rem}
  .lp-login-box .atabs{margin-bottom:.65rem}
  .lp-login-box .fg{margin-bottom:.55rem}
  /* Inputs: 16px para evitar zoom automático en iOS */
  .lp-login-box .fg input{font-size:16px;padding:.7rem .85rem}
  /* Botón Entrar con área táctil generosa (min 48px) y visible */
  .lp-login-box .btn-p{min-height:48px;padding:.85rem;font-size:1rem;margin-top:.25rem;
    scroll-margin-bottom:80px}
  .lp-sep{margin:.65rem 0 .55rem}
  .lp-gbtn{min-height:46px;padding:.6rem;font-size:.92rem}
  .lp-hero-head{grid-template-columns:1fr;gap:.5rem}
  .lp-hero h1{font-size:1.6rem;white-space:normal}
  .lp-hero .lp-sub{font-size:.85rem;margin-bottom:.5rem}
  .lp-hero-right{padding-top:0}
  .lp-fpreview{flex-direction:column;gap:.5rem}
  .lp-finfo{width:100%;flex-direction:row;gap:.6rem;align-items:center}
  .lp-finfo h3{font-size:.78rem}
  .lp-finfo p{font-size:.72rem}
  .lp-nav-links .lp-nav-link-hide{display:none}
  .lp-footer{padding:.5rem 0;font-size:.65rem}
}
@media (max-width:520px){
  .lp-shell{padding:0 .8rem;padding-bottom:env(safe-area-inset-bottom,0)}
  .lp-hero h1{font-size:1.35rem}
  .lp-hero .lp-sub{font-size:.8rem;margin-bottom:.3rem}
  .lp-ftab{font-size:.66rem;padding:.35rem .5rem .3rem}
  .lp-finfo{display:none}
  .lp-login-box{padding:1rem .9rem 1.2rem}
  .lp-hero{display:none} /* móvil pequeño: solo login para que "Entrar" sea siempre visible */
  .lp-footer{font-size:.58rem;padding:.35rem 0}
  .lp-footer-links{gap:.6rem}
}
/* ── Draft mode: hide landing, show only centered login ── */
.lp-draft-only #auth .lp-hero{display:none!important}
.lp-draft-only #auth .lp-nav{display:none!important}
.lp-draft-only #auth .lp-footer{display:none!important}
.lp-draft-only #auth .lp-main{grid-template-columns:1fr!important;justify-items:center}
.lp-draft-only #auth .lp-login-col{max-width:400px}
/* Preview banner */
.lp-preview-banner{position:fixed;top:0;left:0;right:0;z-index:10002;
  background:#64ff00;color:#1a1a1a;text-align:center;padding:.35rem .8rem;
  font-size:.72rem;font-weight:600;letter-spacing:.04em}
.lp-preview-banner a{color:#1a1a1a;text-decoration:underline;margin-left:.5rem}
/* Legacy .abox — kept for fallback/JS references */
.abox{background:var(--bg2);border-radius:18px;padding:2.2rem 1.8rem;
  width:100%;max-width:360px;border:1px solid var(--bor);box-shadow:var(--shadow)}
.alogo{text-align:center;margin-bottom:1.6rem}
.alogo .circle{width:70px;height:70px;border-radius:50%;
  background:var(--acc);
  display:inline-flex;align-items:center;justify-content:center;font-size:1.9rem;margin-bottom:.5rem}
.alogo h1{
  font-family:'Raleway','Inter',sans-serif;
  font-size:2rem;
  font-weight:100;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--txt);
  margin-top:.55rem;
  line-height:1
}
.alogo p{
  font-family:'Raleway','Inter',sans-serif;
  font-size:.62rem;
  font-weight:200;
  letter-spacing:.28em;
  color:var(--muted);
  text-transform:uppercase;
  margin-top:.35rem;
}
.atabs{display:flex;border-bottom:1px solid var(--bor);margin-bottom:1.4rem}
.atab{flex:1;padding:.65rem;background:none;border:none;color:var(--muted);cursor:pointer;
  font-size:.92rem;border-bottom:2px solid transparent;transition:.2s}
.atab.on{color:var(--acc);border-bottom-color:var(--acc)}
.fg{margin-bottom:.9rem}
.fg label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:.35rem}
.fg input{width:100%;padding:.65rem .95rem;background:var(--bg1);border:1px solid var(--bor);
  border-radius:8px;color:var(--txt);font-size:.92rem;transition:.2s}
.fg input:focus{outline:none;border-color:var(--acc)}
.btn-p{width:100%;padding:.75rem;border:none;border-radius:8px;background:var(--acc);
  color:#fff;font-size:.97rem;cursor:pointer;font-weight:600;transition:.2s;margin-top:.4rem}
.btn-sec{width:100%;padding:.75rem;border:1px solid var(--bor);border-radius:8px;background:var(--panel);color:var(--txt);font-size:.97rem;cursor:pointer;font-weight:600;transition:.2s;margin-top:.4rem}
.btn-p:hover{background:#4a7ab0}
.btn-sm{padding:.4rem .9rem;border:none;border-radius:8px;background:var(--acc);
  color:#fff;font-size:.83rem;cursor:pointer;font-weight:600;transition:.2s;display:inline-flex;align-items:center;gap:.3rem}
.btn-sm:hover{background:#4a7ab0}
.btn-outline{padding:.4rem .9rem;border:1px solid var(--bor);border-radius:8px;background:none;
  color:var(--muted);font-size:.83rem;cursor:pointer;transition:.2s}
.btn-outline:hover{border-color:var(--acc);color:var(--acc)}
.aerr{background:rgba(229,57,53,.13);border:1px solid var(--danger);border-radius:8px;
  padding:.55rem .9rem;font-size:.83rem;color:#ef9a9a;margin-top:.7rem;display:none}
/* ── APP LAYOUT ── */
#app{
  display: none;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  height: 100dvh;
  height: var(--fill-height, 100dvh);
  flex-direction: column;
  overflow: hidden;
}

/* Topbar: se extiende bajo el notch / Dynamic Island con safe-area */
.topbar{
  /* En modo navegador iOS: --safe-top = 0, pero la barra de estado no tapa el contenido
     porque la app no ocupa esa zona (viewport-fit=cover solo actúa en standalone/PWA).
     En standalone: --safe-top es 47px o 59px según el modelo → el topbar crece. */
  height:calc(52px + var(--safe-top));
  padding-top:var(--safe-top);
  /* Los items del topbar se centran en los 52px de zona real */
  align-items:flex-end; /* alineados al borde inferior del área de padding-top */
  padding-bottom:6px;
  background:var(--bg2);border-bottom:1px solid var(--bor);
  display:flex;gap:.6rem;
  padding-left:calc(.9rem + var(--safe-left));
  padding-right:calc(.9rem + var(--safe-right));
  flex-shrink:0;z-index:100;position:relative;overflow:visible;
  justify-content:space-between;
}
.topbar .tlogo{width:34px;height:34px;border-radius:50%;
  background:var(--acc);
  display:flex;align-items:center;justify-content:center;font-size:1rem;cursor:pointer}
.topbar h1{font-size:1rem;font-weight:700;flex:1;text-transform:uppercase;letter-spacing:.5px}
.tbtn{background:none;border:none;color:var(--muted);cursor:pointer;padding:.4rem;
  border-radius:8px;display:flex;align-items:center;justify-content:center;transition:.15s}
.tbtn svg{width:18px;height:18px;stroke:var(--muted);transition:.15s}
.tbtn:hover{background:var(--bor);color:var(--txt)}
@media(max-width:600px){#topbar-brand{display:none!important}#topbar-np-wrap{display:none!important}}
.tbtn:hover svg{stroke:var(--txt)}
/* icoBtn – botones de acción estilo nav */
.icoBtn{background:none;border:none;color:var(--muted);cursor:pointer;
  padding:.35rem;border-radius:8px;display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s}
.icoBtn svg{width:18px;height:18px;stroke:var(--muted);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;fill:none;transition:stroke .15s}
.icoBtn:hover{background:var(--bor)}
.icoBtn:hover svg{stroke:var(--acc)}
/* mclose button */
.mclose{background:none;border:none;cursor:pointer;padding:8px;border-radius:50%;min-width:36px;min-height:36px;
  display:flex;align-items:center;justify-content:center;color:var(--muted);transition:.15s;flex-shrink:0}
.mclose svg{width:18px;height:18px;stroke:var(--muted);transition:stroke .15s}
.mclose:hover svg{stroke:var(--txt)}
/* ── Modales generales ──────────────────────────────────── */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9000;
  align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(2px)}
.modal-bg.on{display:flex}
.modal{background:var(--bg1);border-radius:16px;width:100%;max-width:420px;max-height:85vh;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.3);border:1px solid var(--bor)}
.modal.wide{max-width:600px}
/* ── VIDEOS-RS: Modal YouTube-style (fullscreen, fondo oscuro) ───────── */
#m-video{padding:0 !important;background:rgba(0,0,0,.94) !important;z-index:10000 !important}
#m-video .vid-yt-modal{
  width:100vw !important;max-width:100vw !important;
  height:100vh !important;max-height:100vh !important;
  margin:0 !important;padding:0 !important;border-radius:0 !important;
  background:#0f0f0f !important;color:#fff !important;border:none !important;
  display:flex !important;flex-direction:column !important;overflow:hidden !important
}
#m-video .vid-yt-topbar{flex-shrink:0}
#m-video .vid-yt-body{flex:1;overflow-y:auto;display:flex;flex-direction:column}
#m-video #vid-coms-list .com-item,
#m-video #vid-coms-list > div{color:#ddd}
#m-video #vid-coms-list{font-size:.82rem}

/* ══ Comentarios del visor de vídeo — diseño elegante ══ */
#m-video #vid-coms-list .vc-item{
  display:flex;gap:10px;
  padding:10px 4px;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .15s;
}
#m-video #vid-coms-list .vc-item:hover{background:rgba(255,255,255,.02)}
#m-video #vid-coms-list .vc-item:last-child{border-bottom:none}
#m-video #vid-coms-list .vc-av{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:.78rem;
  flex-shrink:0;
}
#m-video #vid-coms-list .vc-body{flex:1;min-width:0}
#m-video #vid-coms-list .vc-head{
  display:flex;align-items:baseline;gap:8px;margin-bottom:2px;
}
#m-video #vid-coms-list .vc-name{
  font-size:.78rem;font-weight:600;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#m-video #vid-coms-list .vc-date{
  font-size:.66rem;color:rgba(255,255,255,.4);flex-shrink:0;
}
#m-video #vid-coms-list .vc-text{
  font-size:.82rem;color:rgba(255,255,255,.85);line-height:1.5;
  word-wrap:break-word;
}
#m-video #vid-coms-list .vc-empty{
  font-size:.76rem;color:rgba(255,255,255,.4);
  padding:18px 4px;text-align:center;font-style:italic;
}
/* Input de comentario más elegante */
#m-video .add-comment{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:22px;
  padding:4px 6px 4px 16px !important;
  align-items:center;gap:6px !important;
  margin-bottom:18px !important;
  transition:border-color .15s;
}
#m-video .add-comment:focus-within{border-color:rgba(255,255,255,.22)}
#m-video #vid-com-input{
  border-bottom:none !important;
  background:transparent !important;
  padding:8px 2px !important;
}
#m-video .add-comment button{
  background:#39ff14 !important;color:#0a1a0a !important;
  padding:7px 16px !important;border-radius:18px !important;
  font-weight:700 !important;font-size:.78rem !important;
  transition:background .15s;
}
#m-video .add-comment button:hover{background:#2bdc10 !important}


/* ══ Fijar barra de tiempo del video JUSTO debajo del player ══ */
#m-video .vid-yt-body{
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  flex:1;
  min-height:0;
}
#m-video #vid-player-wrap{
  flex:0 0 auto !important;
  flex-shrink:0 !important;
  max-height:65vh !important;
  min-height:280px;
}
#m-video #vid-ctrl-wrap{
  flex:0 0 auto !important;
  flex-shrink:0 !important;
  position:relative !important;
  z-index:20;
}
#m-video .vid-yt-info{
  flex:1 !important;
  min-height:0;
  overflow-y:auto !important;
}

/* ══ Visores Galería y Vídeo: fondo gris claro ════════════════════════ */
#m-foto-viewer{
  background:#f5f7fa !important;
}
#m-foto-viewer .fv-stage{background:#f5f7fa}
#m-foto-viewer .fv-body{background:#ffffff;border-radius:12px;margin:10px;box-shadow:0 2px 14px rgba(0,0,0,.06)}
#m-foto-viewer .fv-img{border-radius:8px}
#m-foto-viewer .fv-arrow{background:rgba(0,0,0,.08);color:#1a1a1a}
#m-foto-viewer .fv-arrow:hover,#m-foto-viewer .fv-arrow:active{background:rgba(0,0,0,.18)}
#m-foto-viewer .fv-dots{padding:6px 0 10px}
#m-foto-viewer .fv-dot{background:rgba(0,0,0,.2)}
#m-foto-viewer .fv-dot.on{background:#1a1a1a}
/* Panel social a la derecha: blanco sobre gris */
#m-foto-viewer .fv-social{
  background:#ffffff !important;
  border-left:1px solid #e3e6ea !important;
  color:#1f2328 !important;
}
#m-foto-viewer .fvs-header{border-bottom:1px solid #e3e6ea !important}
#m-foto-viewer .fvs-user-info .fv-user{color:#1f2328 !important}
#m-foto-viewer .fvs-user-info .fv-date{color:#6b7280 !important}
#m-foto-viewer .fvs-header .fv-close{background:#f0f2f5 !important;color:#1f2328 !important;border:1px solid #e3e6ea !important}
#m-foto-viewer .fvs-header .fv-close:hover{background:#e3e6ea !important}
#m-foto-viewer .fvs-caption-box{border-bottom:1px solid #e3e6ea !important}
#m-foto-viewer .fvs-caption-box .fv-title{color:#1f2328 !important}
#m-foto-viewer .fvs-caption-box .fv-caption{color:#4a5058 !important}
#m-foto-viewer .fvs-comments-list{color:#1f2328}
#m-foto-viewer .fvs-comments-list .fvs-empty{color:#8a8f99 !important}
#m-foto-viewer .fvs-comment-name{color:#1f2328 !important}
#m-foto-viewer .fvs-comment-text{color:#2b2d31 !important}
#m-foto-viewer .fvs-comment-date{color:#8a8f99 !important}
#m-foto-viewer .fvs-comment-av{color:#fff !important}
#m-foto-viewer .fvs-actions{border-top:1px solid #e3e6ea !important}
#m-foto-viewer .fvs-actions .fv-like{background:#f0f2f5 !important;color:#1f2328 !important}
#m-foto-viewer .fvs-actions .fv-like.liked{background:rgba(255,90,107,.14) !important;color:#ff5a6b !important}
#m-foto-viewer .fvs-actions .fv-counter{color:#6b7280 !important}
#m-foto-viewer .fvs-comment-input{border-top:1px solid #e3e6ea !important}
#m-foto-viewer .fvs-comment-input input{
  background:#f0f2f5 !important;border:1px solid #e3e6ea !important;color:#1f2328 !important;
}
#m-foto-viewer .fvs-comment-input input:focus{background:#fff !important;border-color:#cfd3d8 !important}
#m-foto-viewer .fvs-comment-input input::placeholder{color:#8a8f99 !important}
#m-foto-viewer .fvs-comment-input button{background:#e0e0e0 !important;color:#333 !important;border:1px solid #c8c8c8 !important}
/* Controles de video dentro del visor Galería */
#m-foto-viewer #fv-ctrl-wrap{background:#ffffff !important;border-top:1px solid #e3e6ea}
#m-foto-viewer #fv-ctrl-wrap *{color:#1f2328}
#m-foto-viewer #fv-seek{background:rgba(0,0,0,.12) !important}
#m-foto-viewer #fv-seek-buffered{background:rgba(0,0,0,.22) !important}

/* ── Vídeo modal (s-videos) — fondo gris claro ── */
#m-video{background:rgba(0,0,0,.22) !important}
#m-video .vid-yt-modal{
  background:#f5f7fa !important;
  color:#1f2328 !important;
}
/* El player sigue en negro para contraste */
#m-video #vid-player-wrap{background:#000 !important}
#m-video #vid-ctrl-wrap{background:#ffffff !important;border-bottom:1px solid #e3e6ea !important}
#m-video #vid-ctrl-wrap *{color:#1f2328}
#m-video #vid-seek{background:rgba(0,0,0,.12) !important}
#m-video #vid-seek-buffered{background:rgba(0,0,0,.22) !important}
#m-video #vid-ctrl-time{color:#4a5058 !important}
#m-video .vid-yt-topbar{background:#ffffff !important;border-bottom:1px solid #e3e6ea !important;color:#1f2328 !important}
#m-video .vid-yt-topbar .mclose{background:#f0f2f5 !important;color:#1f2328 !important}
#m-video .vid-yt-topbar .mclose:hover{background:#e3e6ea !important}
#m-video .vid-yt-body{background:#f5f7fa !important}
#m-video .vid-yt-info{color:#1f2328 !important}
#m-video #vid-title{color:#1f2328 !important}
#m-video #vid-uploader{color:#6b7280 !important}
#m-video .vid-yt-info > div > div:first-child{border-bottom-color:#e3e6ea !important}
#m-video #vid-like-btn, #m-video #vid-sub-btn{
  background:#f0f2f5 !important;border:1px solid #e3e6ea !important;color:#1f2328 !important;
}
#m-video #vid-like-btn.liked{background:rgba(255,90,107,.14) !important;color:#ff5a6b !important}
#m-video #vid-sub-btn.suscrito{background:rgba(255,90,107,.14) !important;color:#ff5a6b !important;border-color:rgba(255,90,107,.4) !important}
#m-video .vid-yt-info span{color:#4a5058 !important}
#m-video #vid-desc{background:#ffffff !important;color:#1f2328 !important;border:1px solid #e3e6ea}
#m-video .comments-section h4{color:#1f2328 !important}
#m-video .add-comment{background:#ffffff !important;border:1px solid #e3e6ea !important}
#m-video .add-comment:focus-within{border-color:#cfd3d8 !important}
#m-video #vid-com-input{color:#1f2328 !important}
#m-video #vid-com-input::placeholder{color:#8a8f99 !important}
/* Comentarios con tema claro */
#m-video #vid-coms-list .vc-item{border-bottom-color:#e3e6ea !important}
#m-video #vid-coms-list .vc-item:hover{background:rgba(0,0,0,.03) !important}
#m-video #vid-coms-list .vc-name{color:#1f2328 !important}
#m-video #vid-coms-list .vc-date{color:#8a8f99 !important}
#m-video #vid-coms-list .vc-text{color:#2b2d31 !important}
#m-video #vid-coms-list .vc-empty{color:#8a8f99 !important}


/* ══ Fixes responsivos MÓVIL (<640px) ══════════════════════════════ */
@media(max-width:640px){
  /* CRM: el sidebar del CRM (dentro de s-chat) con overflow horizontal roto */
  #crm-sidebar{min-width:0 !important;max-width:100% !important;width:100% !important;overflow-x:hidden}
  #s-chat .chat-wrap{flex-direction:column !important}
  #s-chat .conv-sidebar{width:100% !important;max-width:100% !important;flex-basis:auto !important}
  /* Chat: conversaciones anchas */
  .csb-search-wrap{width:100% !important;box-sizing:border-box}
  /* Notas rápida: layout apilado */
  #nr-float-panel .nr-label{flex-wrap:wrap;gap:6px !important}
  /* Home/Dashboard: fuerza 1 sola columna en móvil */
  #s-dashboard > div > div:nth-child(3){
    grid-template-columns:1fr !important;
    grid-auto-rows:auto !important;
  }
  #s-dashboard > div > div:nth-child(2){
    grid-template-columns:repeat(auto-fit,minmax(100px,1fr)) !important;
    gap:6px !important;
  }
  /* Tabs asignatura: scroll horizontal suave */
  .asig-tabs{padding:0 8px}
  /* CRM específico: cards apiladas */
  #s-crm .crm-main-content,
  #s-crm .crm-inner-grid{grid-template-columns:1fr !important}
  /* Paneles CRM: padding reducido */
  #chat-crm-panel,#crm-sidebar{padding:8px !important}
  /* Modal picker proyecto/clase: más ancho */
  #chat-picker-modal > div{max-width:96% !important}
  /* Visor vídeo: controles full width */
  #vid-ctrl-wrap #vid-ctrl-inner{padding:6px 10px !important}
  #vid-ctrl-vol{width:55px !important}
  /* Modal upload vídeo */
  .uv-modal{max-width:96% !important}
  .uv-tabs{padding:10px 14px 0 !important}
  .uv-fields{padding:12px 14px 0 !important}
  .uv-actions{padding:14px 14px 14px !important}
}

.mh{display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--bor);flex-shrink:0}
.mh h3{margin:0;font-size:1rem;font-weight:700;color:var(--txt)}
.minp{display:block;width:100%;padding:.65rem .95rem;background:var(--bg2);
  border:none;border-bottom:1px solid var(--bor);color:var(--txt);font-size:.88rem;
  outline:none;box-sizing:border-box;flex-shrink:0}
.minp:focus{border-bottom-color:var(--acc);background:var(--bg1)}
.minp::placeholder{color:var(--muted)}
.user-pick-list{flex:1;overflow-y:auto;min-height:0;padding:.3rem 0}
.upi{display:flex;align-items:center;gap:10px;padding:8px 14px;cursor:pointer;transition:background .12s}
.upi:hover{background:var(--bg2)}
.upi-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:.88rem;font-weight:700;color:#fff;flex-shrink:0}
.upi-info{flex:1;min-width:0}
.upi-info .un{font-size:.87rem;font-weight:600;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upi-info .ud{font-size:.74rem;color:var(--muted)}
.upi-info .uo{font-size:.72rem;color:#4caf50;margin-top:1px}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding:.5rem 1rem;flex-shrink:0;min-height:0}
.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;
  font-size:.78rem;font-weight:600;color:#fff}
.chip button{background:none;border:none;color:rgba(255,255,255,.8);cursor:pointer;
  font-size:.9rem;line-height:1;padding:0 1px}
.chip button:hover{color:#fff}
.modal .btn-p{border-radius:0 0 16px 16px;margin:0;border-top:1px solid var(--bor);flex-shrink:0}
/* Contact Picker button (móvil) */
.btn-contact-picker{display:none;width:100%;padding:.65rem 1rem;border:none;
  background:var(--bg2);color:var(--acc);font-size:.86rem;font-weight:600;
  cursor:pointer;text-align:left;border-bottom:1px solid var(--bor);
  gap:8px;align-items:center}
.btn-contact-picker svg{flex-shrink:0}
@supports (display:flex){.btn-contact-picker{display:flex}}
.myav{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:.85rem;font-weight:700;color:#fff;cursor:pointer}
.content{flex:1;overflow:hidden;position:relative;display:flex;flex-direction:column;min-width:0;max-width:100%;box-sizing:border-box}
/* min-width:0 en .section: clave para que los hijos con flex no fuercen
   desbordamientos horizontales cuando la ventana se achica.
   overflow-x:hidden evita scroll horizontal por contenido descolocado. */
.section{display:none;flex:1;overflow-y:auto;overflow-x:hidden;flex-direction:column;min-height:0;min-width:0;max-width:100%;box-sizing:border-box;background:var(--bg1)}
.section.on{display:flex}
.chat-wrap{display:flex;flex-direction:row;height:100%;overflow:hidden}
/* Avatares redondos en conversaciones y mensajes */
.cav{border-radius:50%!important;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:1rem;flex-shrink:0}
.mbav{border-radius:50%!important;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;flex-shrink:0;width:32px;height:32px;min-width:32px;min-height:32px;font-size:.75rem;overflow:hidden}
/* ══════════════════════════════════════════
   CHAT SIDEBAR — layout mejorado
   ══════════════════════════════════════════ */
.conv-sidebar{width:300px;min-width:240px;border-right:1px solid var(--bor);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;background:var(--bg1);position:relative}
.chat-search-bar{flex-shrink:0}
.conv-list{flex:1;overflow-y:auto}
.chat-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.chat-msgs{flex:1;overflow-y:auto;padding:.75rem;display:flex;flex-direction:column;gap:8px}

/* ── Sidebar header con nombre de app y botón nuevo ── */
.csb-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 8px;flex-shrink:0}
.csb-header-title{font-weight:700;font-size:.95rem;letter-spacing:.3px;color:var(--txt)}
.csb-header-actions{display:flex;gap:4px}

/* ── Tabs Directos / Canales / Grupos ── */
.csb-tabs{display:flex;border-bottom:1px solid var(--bor);flex-shrink:0}
.csb-tab{flex:1;padding:8px 4px;background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-size:.72rem;font-weight:600;color:var(--muted);letter-spacing:.3px;transition:color .15s,border-color .15s;display:flex;align-items:center;justify-content:center;gap:4px}
.csb-tab.on{color:var(--acc);border-bottom-color:var(--acc)}
.csb-tab-badge{background:#ef5350;color:#fff;border-radius:20px;min-width:18px;height:18px;font-size:.65rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;box-shadow:0 1px 4px rgba(239,83,80,.4);animation:badge-pop .2s ease}
@keyframes badge-pop{from{transform:scale(.5)}to{transform:scale(1)}}
@keyframes slideInRight{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
/* Pin de conversación */
.conv-item.pinned{border-left:3px solid var(--acc);background:var(--bg2)}
.conv-item .ci-pin{font-size:.65rem;color:var(--acc);opacity:.7;margin-left:auto;flex-shrink:0}

/* ── Búsqueda en sidebar ── */
.csb-search{padding:8px 10px;flex-shrink:0;position:relative;display:flex;align-items:center;gap:6px}
.csb-search .csb-search-wrap{flex:1;position:relative}
.csb-search input{width:100%;padding:7px 10px 7px 32px;background:var(--bg2);border:1px solid var(--bor);border-radius:20px;font-size:.8rem;color:var(--txt);outline:none;transition:border-color .15s;box-sizing:border-box}
.csb-search input:focus{border-color:var(--acc)}
#crm-search::-webkit-search-cancel-button,#crm-search::-webkit-search-decoration{-webkit-appearance:none;display:none}
.crm-task-row:last-child{border-bottom:none !important}
.crm-reunion-row:last-child{border-bottom:none !important}
details:last-child{border-bottom:none !important}
.csb-search-ico{position:absolute;left:8px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.csb-search .csb-add-btn{width:28px;height:28px;border-radius:50%;border:1px solid var(--bor);background:var(--bg2);color:var(--txt);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;transition:background .15s,color .15s,border-color .15s}
.csb-search .csb-add-btn:hover{background:var(--acc);border-color:var(--acc);color:#fff}
.csb-search .csb-add-btn svg{width:15px;height:15px}

/* ── CRM Onboarding & Clean UI ── */
@keyframes crmFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.crm-ob-card:hover{border-color:#bbb!important;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.crm-ob-card.selected{border-color:#1a1a1a!important;background:#fafafa!important;box-shadow:0 0 0 1px #1a1a1a}
.crm-ob-role{padding:10px 18px;background:#fff;border:1.5px solid #e5e5e5;border-radius:10px;cursor:pointer;font-size:.82rem;color:#555;transition:all .15s;font-weight:500}
.crm-ob-role:hover{border-color:#bbb;background:#f9f9f9}
.crm-ob-role.selected{border-color:#1a1a1a;background:#1a1a1a;color:#fff}
.crm-ob-dot.on{background:#1a1a1a!important}
#chat-crm-panel .crm-dtab:hover{color:#1a1a1a!important}
#crm-more-menu.show{display:block!important}

/* Fix: menú ⋮ del buscador de chat siempre por encima de las convs */
#chat-more-menu.show{display:block !important;z-index:9999 !important}
#chat-more-menu{z-index:9999 !important}

#crm-contact-menu.show{display:block!important}
#crm-more-menu button:hover{background:#f7f7f7}
#crm-contact-menu button:hover{background:#f7f7f7}
#crm-ws-menu button:hover{background:#f7f7f7}
#hilos-dropdown{animation:slideUp .12s ease}
#hilos-list button{transition:background .1s}
/* HILOS dropdown mobile — evita que quede cortado y permite scroll.
   Pasamos a position:fixed (en vez de absolute dentro del wrap) para garantizar
   que el menú se ubique respecto al viewport y no se recorte por un contenedor
   padre con overflow:hidden. */
@media (max-width:640px){
  #hilos-dropdown{
    position:fixed!important;
    right:8px!important;
    left:8px!important;
    top:56px!important;
    min-width:0!important;
    max-width:none!important;
    width:auto!important;
    max-height:calc(100vh - 120px)!important;
    max-height:calc(100dvh - 120px)!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    z-index:9000!important;
  }
  #hilos-list{max-height:none!important}
}
.chat-msgs-hilo{background-color:#f0faf0!important}
.crm-ws-tipo-btn:hover{border-color:#bbb!important}

/* ── HILO: barra lateral de herramientas (rediseño 2026-05) ── */
.hilo-tools{
  flex-direction:column;
  align-items:stretch;
  gap:2px;
  padding:10px 6px;
  background:#fafbfc;
  border-right:1px solid #e6e6e6;
  flex-shrink:0;
  width:74px;
  overflow-y:auto;
}
.hilo-tool-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  width:100%;
  padding:8px 4px 6px;
  border-radius:10px;
  background:none;
  border:none;
  cursor:pointer;
  color:#7a7a7a;
  transition:background .15s,color .15s;
}
.hilo-tool-btn:hover{background:#eef0f2;color:#1a1a1a}
.hilo-tool-btn.ht-active{background:#e3f1e6;color:#1f6f3a}
.hilo-tool-btn svg{width:20px;height:20px;flex-shrink:0}
.hilo-tool-btn span{
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.2px;
  line-height:1.1;
  text-align:center;
  white-space:nowrap;
}
.hilo-tool-sep{height:1px;background:#e6e6e6;margin:6px 8px}

/* ── HILO: cabecera dentro del área de mensajes ── */
.chat-msgs.in-hilo{padding-top:0}
.hilo-header{
  position:sticky;
  top:0;
  z-index:5;
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 18px 12px;
  margin:0 0 10px;
  background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.92) 100%);
  border-bottom:1px solid #e8e8e8;
  backdrop-filter:saturate(140%) blur(6px);
  -webkit-backdrop-filter:saturate(140%) blur(6px);
}
.hilo-header-icon{
  width:42px;height:42px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#cbe6d3 0%,#b8d4ba 100%);
  font-size:1.4rem;
}
.hilo-header-info{flex:1;min-width:0}
.hilo-header-title{
  font-size:1rem;font-weight:700;color:#1a1a1a;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:.1px;line-height:1.2;
}
.hilo-header-subtitle{
  font-size:.72rem;color:#888;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hilo-header-back{
  flex-shrink:0;padding:7px 12px;border-radius:9px;
  border:1px solid #d8e6db;background:#fff;
  cursor:pointer;font-size:.74rem;font-weight:600;color:#2c4a35;
  display:flex;align-items:center;gap:5px;transition:all .15s;
}
.hilo-header-back:hover{background:#eef7f0;border-color:#b8d4ba}
.hilo-header-back svg{width:13px;height:13px}

/* ── HILO: empty state ── */
.hilo-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex:1;padding:30px 24px;color:#777;text-align:center;gap:10px;
  min-height:240px;
}
.hilo-empty-icon{
  font-size:2.6rem;opacity:.55;line-height:1;margin-bottom:4px;
}
.hilo-empty-title{font-size:.95rem;font-weight:600;color:#444}
.hilo-empty-text{font-size:.78rem;color:#888;max-width:340px;line-height:1.45}

/* Mobile: toolbar más compacta */
@media (max-width:760px){
  .hilo-tools{width:60px;padding:8px 4px}
  .hilo-tool-btn{padding:6px 2px 4px}
  .hilo-tool-btn span{font-size:.58rem}
  .hilo-tool-btn svg{width:18px;height:18px}
  .hilo-header{padding:10px 12px 9px;gap:10px}
  .hilo-header-icon{width:36px;height:36px;font-size:1.15rem}
  .hilo-header-title{font-size:.92rem}
  .hilo-header-subtitle{font-size:.68rem}
  .hilo-header-back span{display:none}
  .hilo-header-back{padding:7px 9px}
}

/* (#118) Mobile: breadcrumb compacto cuando hay hilo activo.
   Antes el breadcrumb "ADMINISTRADOR ALEX › AUDIT" empujaba el avatar y
   ocultaba el botón Volver en pantallas estrechas. Ahora en mobile
   ocultamos el nombre de la conversación y dejamos solo el del hilo,
   con un icono '‹' como pista de "vuelve" — al pulsarlo cierra el hilo. */
@media (max-width:640px){
  /* Reducir hilo header sticky para que no robe altura excesiva */
  .hilo-header{padding:8px 10px}
  .hilo-header-icon{width:30px;height:30px;font-size:1rem;border-radius:9px}
  .hilo-header-title{font-size:.85rem}
  .hilo-header-subtitle{font-size:.62rem}
  /* Breadcrumb compacto: ocultar nombre conversación, mostrar solo nombre hilo precedido por ‹ */
  .chat-hilo-bc #chat-bc-conv-name{
    width:24px;height:24px;padding:0;margin-right:4px;display:flex;align-items:center;justify-content:center;
    font-size:0!important;border-radius:6px;background:rgba(0,0,0,.05);color:transparent;
  }
  .chat-hilo-bc #chat-bc-conv-name::before{
    content:'\\2039';font-size:1.1rem;color:#666;line-height:1;font-weight:400;
  }
  /* Ocultar el chevron '›' que separaba conv del hilo */
  .chat-hilo-bc > span:nth-of-type(1){display:none}
  .chat-hilo-bc #chat-bc-hilo-name{font-size:.78rem;max-width:none;flex:1}
  /* Asegurar que el botón btn-back es siempre visible y tiene tap target */
  #btn-back{flex-shrink:0;width:36px;height:36px;display:flex !important;align-items:center;justify-content:center}
  /* (#123) Avatar del topbar en móvil — antes se recortaba por padding-right
     insuficiente del .chat-topbar y por el botón de hilos invadiendo el flex.
     Forzamos tamaño y mínimos para que el círculo nunca se vea cortado. */
  #chat-av-mobile-fix, #chat-av{
    width:34px !important;height:34px !important;
    min-width:34px !important;min-height:34px !important;
    flex-shrink:0 !important;font-size:.82rem !important;
  }
  .chat-topbar{padding:6px 10px !important;gap:6px !important;min-height:52px}
  .chat-tb-name{font-size:.88rem !important}
  .chat-tb-status{font-size:.66rem !important}
}

/* (#122) Cita del mensaje al que se está respondiendo. Aparece dentro del
   bubble del mensaje que es respuesta. Click salta al mensaje original con
   un flash visual. */
.msg-reply-quote{
  border-left:3px solid var(--acc,#4a90d9);
  background:rgba(74,144,217,.08);
  padding:5px 9px;border-radius:6px;
  margin:0 0 6px;font-size:.78rem;line-height:1.35;
  color:inherit;cursor:pointer;
  display:flex;flex-direction:column;gap:2px;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;
}
.msg-reply-quote strong{font-size:.74rem;font-weight:700;opacity:.85;display:block}
.msg-row.me .msg-reply-quote{
  background:rgba(255,255,255,.18);
  border-left-color:rgba(255,255,255,.6);
}
.msg-reply-quote:hover{background:rgba(74,144,217,.15)}

/* Barra del composer cuando estás respondiendo a un mensaje */
#chat-reply-bar{
  align-items:center;gap:8px;padding:7px 14px;
  background:var(--bg2);border-top:2px solid var(--acc,#4a90d9);
  font-size:.8rem;color:var(--muted);
}
#chat-reply-bar .crb-icon{color:var(--acc,#4a90d9);font-size:1rem;flex-shrink:0}
#chat-reply-preview{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt)}
#chat-reply-bar button{background:none;border:none;cursor:pointer;color:var(--muted);font-size:1rem;padding:2px 6px;border-radius:4px;flex-shrink:0}
#chat-reply-bar button:hover{background:var(--bor);color:var(--txt)}

/* ── Lista de conversaciones ── */
.conv-item{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;border-bottom:1px solid var(--bor);transition:background .12s;position:relative}
.conv-item:hover{background:var(--bg2)}
.conv-item.on{background:color-mix(in srgb,var(--acc) 10%,var(--bg1))}
.conv-item .cav{width:38px;height:38px;font-size:.88rem;flex-shrink:0}
.ci-info{flex:1;min-width:0}
.ci-name{font-size:.85rem;font-weight:600;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-prev{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.ci-meta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0}
.ci-time{font-size:.63rem;color:var(--muted)}
.ci-badge{background:var(--acc);color:#fff;border-radius:10px;min-width:18px;height:18px;font-size:.65rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}

/* ── Icono de tipo de conversación ── */
.ci-type-ico{font-size:.7rem;color:var(--muted);margin-left:3px}

/* ── Chat topbar mejorado ── */
.chat-topbar{display:flex;align-items:center;gap:8px;padding:.5rem .75rem;border-bottom:1px solid var(--bor);flex-shrink:0;background:var(--bg1)}
.chat-tb-info{flex:1;min-width:0;cursor:pointer}
.chat-tb-name{font-weight:700;font-size:.92rem;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-tb-status{font-size:.7rem;color:var(--muted)}

/* ── Acciones en mensaje (hover) ── */
.msg-actions{display:none;position:absolute;right:4px;top:-14px;background:var(--bg1);border:1px solid var(--bor);border-radius:20px;box-shadow:0 2px 8px rgba(0,0,0,.1);padding:2px 4px;gap:2px;z-index:20;flex-shrink:0}
.msg-wrap:hover .msg-actions{display:flex}
.msg-wrap{position:relative}
.msg-act-btn{background:none;border:none;cursor:pointer;font-size:.88rem;padding:3px 5px;border-radius:12px;transition:background .1s;color:var(--txt)}
.msg-act-btn:hover{background:var(--bg2)}

/* ── Panel de hilos ── */
.chat-thread-panel{width:300px;border-left:1px solid var(--bor);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;background:var(--bg1);transition:width .2s}
.chat-thread-panel.hidden{width:0;border:none;overflow:hidden}
.ctp-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--bor);flex-shrink:0}
.ctp-header h4{font-size:.88rem;font-weight:700;color:var(--txt);margin:0}
.ctp-msgs{flex:1;overflow-y:auto;padding:.75rem;display:flex;flex-direction:column;gap:8px}
.ctp-inp{border-top:1px solid var(--bor);padding:8px 12px;display:flex;gap:6px;align-items:center;flex-shrink:0}
.ctp-inp input{flex:1;padding:7px 12px;background:var(--bg2);border:1px solid var(--bor);border-radius:20px;font-size:.82rem;color:var(--txt);outline:none}
.ctp-inp input:focus{border-color:var(--acc)}

/* ── Contexto de acciones rápidas de mensaje ── */
.msg-context-menu{position:fixed;background:var(--bg1);border:1px solid var(--bor);border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.15);padding:6px;z-index:9999;min-width:200px;display:none}
.msg-context-menu.open{display:block}
.mcm-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;cursor:pointer;font-size:.83rem;color:var(--txt);transition:background .1s}
.mcm-item:hover{background:var(--bg2)}
.mcm-item svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0;color:var(--muted)}
.mcm-sep{height:1px;background:var(--bor);margin:4px 0}
.mcm-danger{color:#ef5350!important}
.mcm-danger svg{color:#ef5350!important}
.mcm-danger:hover{background:rgba(239,83,80,.1)!important}

@media(max-width:600px){
  .conv-sidebar{width:100%}
  .chat-area{display:none}
  .chat-area.active{display:flex;position:fixed;top:0;left:0;right:0;bottom:var(--bnav,60px);z-index:10;background:var(--bg1)}
  .chat-thread-panel{display:none}
}
/* ── BOTTOM NAV ── */
/* ── BOTTOM NAV THIN-LINE ICONS ── */
.bnav{height:calc(var(--bnav) + var(--safe-bottom,0px));background:var(--bg2);border-top:1px solid var(--bor);
  display:flex;align-items:flex-start;justify-content:space-around;
  position:fixed;bottom:0;left:0;right:0;z-index:100;
  padding-bottom:var(--safe-bottom,0px)}
.bnav-ico{width:26px;height:26px;display:flex;align-items:center;justify-content:center;margin-bottom:3px}
.bnav-ico svg{width:22px;height:22px;transition:.2s;stroke:var(--muted)}
.bnav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;color:var(--muted);padding:6px 0;
  font-family:inherit;position:relative;transition:.15s}
.bnav-btn.on{color:var(--acc)}
.bnav-btn.on .bnav-ico svg{stroke:var(--acc)}
.bnav-btn:hover .bnav-ico svg{stroke:var(--acc2)}
.bnav-sep{width:1px;height:32px;background:var(--bor)}
.bnav-lbl{font-size:.6rem;text-transform:uppercase;letter-spacing:.4px;line-height:1;
  font-weight:500}
/* ── NUEVA NAV Y TOPBAR ──────────────────────────────────── */
.top-media-btn{background:transparent!important;border-radius:8px!important;transition:.15s}
.top-media-btn:hover,.top-media-btn.on{background:var(--acc)!important;color:#fff!important}
.top-media-btn.on{background:var(--acc)!important}
/* ── CHAT SEARCH BAR ──────────────────────────────────────── */
.chat-search-bar{display:flex;align-items:center;gap:4px;padding:.5rem .6rem;border-top:1px solid var(--bor);background:var(--bg2)}
.chat-search-bar .srch{font-size:.85rem}
/* ── NOTAS LISTA CHIP ─────────────────────────────────────── */
.lista-chip{background:var(--panel);border:1px solid var(--bor);color:var(--muted);border-radius:20px;padding:2px 10px;font-size:.73rem;cursor:pointer;transition:.15s}
.lista-chip.on,.lista-chip:hover{background:var(--acc);border-color:var(--acc);color:#fff}
/* ── LLAMADAS WebRTC ──────────────────────────────────────── */
#call-overlay{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:9000;display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px}
#call-overlay.show{display:flex}
#call-local{width:120px;height:90px;border-radius:10px;background:#000;position:absolute;bottom:100px;right:20px;object-fit:cover;border:2px solid var(--acc);cursor:grab;touch-action:none;transition:opacity .2s}
#call-local.dragging{cursor:grabbing;opacity:.8}
#call-local-hide{position:absolute;bottom:100px;right:20px;z-index:9002;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.3);color:#fff;cursor:pointer;display:none;align-items:center;justify-content:center;font-size:.7rem}
#call-remote{width:100%;max-height:60vh;object-fit:cover;border-radius:12px;background:#111}
.call-name{font-size:1.4rem;font-weight:700;color:#fff;text-align:center}
.call-status{font-size:.9rem;color:rgba(255,255,255,.7)}
.call-btns{display:flex;gap:16px;margin-top:20px}
.call-btn{width:60px;height:60px;border-radius:50%;border:none;font-size:1.6rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.call-btn-end{background:#e53935}
.call-btn-mic{background:var(--panel)}
.call-btn-cam{background:var(--panel)}
/* ── INCOMING CALL ────────────────────────────────────────── */
#incoming-call{position:fixed;bottom:70px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--bor);border-radius:16px;padding:14px 20px;z-index:8000;display:none;flex-direction:column;align-items:center;gap:10px;min-width:260px;box-shadow:0 4px 30px rgba(0,0,0,.5)}
#incoming-call.show{display:flex}
@media(max-width:600px){
  #call-local{width:90px;height:68px;bottom:80px;right:12px;border-radius:8px}
  #call-remote{max-height:55vh;border-radius:8px}
  .call-btn{width:52px;height:52px}
  #incoming-call{bottom:calc(var(--bnav,60px) + 10px);min-width:auto;width:calc(100% - 32px);padding:12px 16px}
}
/* ══════════════════════════════════════════════════════════
   ESTUDIO — Classroom Style
══════════════════════════════════════════════════════════ */

/* ── Home: cabecera y grid de asignaturas ── */
#estudio-home{background:var(--bg1)}
.est-top-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--bor);flex-shrink:0;gap:8px}
.est-top-bar h2{font-size:.9rem;font-weight:700;letter-spacing:.5px;color:var(--txt);text-transform:uppercase}
.est-top-actions{display:flex;gap:6px;align-items:center}
.est-join-btn{display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:20px;border:1px solid var(--bor);background:var(--card,var(--bg2));color:var(--txt);font-size:.8rem;cursor:pointer;transition:.15s}
.est-join-btn:hover{background:var(--bg2);border-color:var(--acc)}
.est-create-btn{display:flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:none;background:var(--acc);color:#fff;font-size:.8rem;cursor:pointer;font-weight:600;transition:.15s}
.est-create-btn:hover{opacity:.88}

/* ── Grid de asignaturas ── */
.asig-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;padding:16px 20px}
@media(max-width:600px){.asig-grid{grid-template-columns:1fr 1fr;padding:12px;gap:10px}}
@media(max-width:360px){.asig-grid{grid-template-columns:1fr}}
.asig-section-hdr{grid-column:1/-1;font-size:.7rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:1px;padding:8px 2px 4px;border-bottom:2px solid var(--bor)}

/* ── Lateral study nav panel ── */
#est-lateral-panel{transition:transform .22s cubic-bezier(.4,0,.2,1)}
.est-lat-inst{border-bottom:1px solid var(--bor)}
.est-lat-inst-hdr{display:flex;align-items:center;gap:8px;padding:9px 16px;cursor:pointer;user-select:none;transition:background .12s}
.est-lat-inst-hdr:hover{background:var(--bg2)}
.est-lat-inst-ico{font-size:.95rem;flex-shrink:0}
.est-lat-inst-name{font-size:.8rem;font-weight:700;flex:1;color:var(--txt)}
.est-lat-chevron{font-size:.65rem;color:var(--muted);transition:transform .15s}
.est-lat-inst-body{padding:0 0 4px}
.est-lat-curso{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:6px 16px 3px 36px}
.est-lat-item{display:flex;align-items:center;gap:8px;padding:7px 16px 7px 28px;cursor:pointer;transition:background .1s;border-radius:0}
.est-lat-item:hover{background:var(--bg2)}
.est-lat-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.est-lat-nombre{font-size:.8rem;flex:1;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.est-lat-badge{background:#ef444420;color:#ef4444;font-size:.6rem;font-weight:700;padding:1px 5px;border-radius:8px;flex-shrink:0}

/* ── Tarjeta asignatura — estilo Classroom ── */
.asig-card{border-radius:12px;overflow:hidden;border:1px solid var(--bor);background:var(--bg1);cursor:pointer;transition:box-shadow .2s,transform .15s;display:flex;flex-direction:column}
.asig-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.12);transform:translateY(-2px)}
.ac-banner{height:88px;display:flex;flex-direction:column;justify-content:flex-end;padding:10px 14px;position:relative;overflow:hidden}
.ac-banner-pattern{position:absolute;inset:0;opacity:.12;background-image:repeating-linear-gradient(45deg,#fff 0,#fff 1px,transparent 0,transparent 50%);background-size:8px 8px}
.ac-banner-title{font-size:.95rem;font-weight:700;color:#fff;position:relative;text-shadow:0 1px 3px rgba(0,0,0,.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-banner-sub{font-size:.72rem;color:rgba(255,255,255,.8);position:relative}
.ac-body{padding:10px 14px 12px;flex:1;display:flex;flex-direction:column;gap:6px}
.ac-desc{font-size:.78rem;color:var(--muted);line-height:1.4;min-height:18px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ac-stats{display:flex;gap:10px;font-size:.72rem;color:var(--muted);margin-top:2px}
.ac-code{font-size:.7rem;color:var(--muted);background:var(--bg2);padding:2px 6px;border-radius:4px;width:fit-content;margin-top:4px;font-family:monospace;letter-spacing:.5px}
.ac-rol{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#fff;padding:2px 7px;border-radius:10px;position:absolute;top:8px;right:8px}
.ac-rol.profesor{background:rgba(0,0,0,.3)}
.ac-rol.alumno{background:rgba(255,255,255,.2);color:rgba(255,255,255,.9)}

/* ── Wizard crear clase ── */
.wiz-step{display:none;flex-direction:column;gap:14px}
.wiz-step.on{display:flex}
.wiz-label{font-size:.72rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;display:block;margin-bottom:6px}
.wiz-color-opt{transition:transform .1s}
.wiz-color-opt:hover{transform:scale(1.1)}
.wiz-color-opt.on{border-color:var(--txt)!important;box-shadow:0 0 0 2px var(--bg1),0 0 0 4px var(--txt)}
.est-cal-filter{transition:.15s}
.est-cal-filter.on{background:var(--acc)!important;color:#fff!important;border-color:var(--acc)!important}

/* ── Vista interior asignatura ── */
.asig-view{display:none;flex-direction:column;height:100%;overflow:hidden}
.asig-view.on{display:flex}
.asig-view-header{display:flex;flex-direction:column;flex-shrink:0}
.asig-banner{height:90px;display:flex;align-items:flex-end;padding:12px 14px;position:relative;overflow:hidden}
.asig-banner-pattern{position:absolute;inset:0;opacity:.1;background-image:repeating-linear-gradient(45deg,#fff 0,#fff 1px,transparent 0,transparent 50%);background-size:8px 8px}
.asig-banner-back{position:relative;background:rgba(0,0,0,.2);border:none;border-radius:50%;width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;backdrop-filter:blur(4px)}
.asig-banner-info{flex:1;padding-left:10px;position:relative}
.asig-banner-info h2{font-size:1rem;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.3)}
.asig-banner-info small{font-size:.72rem;color:rgba(255,255,255,.8)}

/* ── Tabs navegación interior ── */
.estudio-tabs-top{display:flex;gap:0;border-bottom:2px solid var(--bor);overflow-x:auto;scrollbar-width:none;background:var(--bg1);flex-shrink:0;padding:0 6px}
.estudio-tabs-top::-webkit-scrollbar{display:none}
.est-tab,.asig-tab{padding:.55rem .9rem;background:none;border:none;color:var(--muted);cursor:pointer;font-size:.79rem;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-2px;transition:.15s;font-weight:500}
.est-tab.on,.asig-tab.on{color:var(--acc);border-bottom-color:var(--acc);font-weight:700}
.est-panel{display:none;flex:1;overflow-y:auto;padding:.6rem}
.est-panel.on{display:block}
.asig-panel{display:none;flex:1;overflow-y:auto;flex-direction:column}
.asig-panel.on{display:flex}

/* ── Tablón ── */
#ap-tablón,#ap-tablon{padding:0}
.ap-tablon-actions{display:flex;gap:8px;padding:10px 12px;border-bottom:1px solid var(--bor);flex-shrink:0;flex-wrap:wrap}
.ap-quick-btn{display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:20px;border:1px solid var(--bor);background:var(--bg1);color:var(--txt);font-size:.78rem;cursor:pointer;font-weight:500;transition:.15s}
.ap-quick-btn:hover{border-color:var(--acc);color:var(--acc)}
.ap-quick-btn.primary{background:var(--acc);color:#fff;border-color:var(--acc)}
.ap-quick-btn.primary:hover{opacity:.88}
#ap-anuncios{padding:10px 12px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}

/* ── Anuncio card ── */
.anuncio-card{background:var(--bg1);border:1px solid var(--bor);border-radius:10px;overflow:hidden}
.an-header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--bor)}
.an-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.9rem;flex-shrink:0}
.an-meta{flex:1}
.an-autor{font-size:.82rem;font-weight:600;color:var(--txt)}
.an-fecha{font-size:.7rem;color:var(--muted)}
.an-tit{font-weight:700;font-size:.88rem;color:var(--txt);padding:8px 12px 4px}
.an-cont{font-size:.84rem;color:var(--txt);padding:0 12px 10px;line-height:1.5;opacity:.85}

/* ── Tarea card ── */
.tarea-card{background:var(--bg1);border:1px solid var(--bor);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.tarea-card.entregada{border-left:3px solid #4caf50}
.tarea-card.vencida{border-left:3px solid #f44336;opacity:.8}
.tc-tit{font-weight:700;font-size:.88rem;color:var(--txt)}
.tc-desc{font-size:.8rem;color:var(--muted);line-height:1.4}
.tc-footer{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.75rem;color:var(--muted);margin-top:2px}
.tc-badge{padding:2px 7px;border-radius:8px;font-size:.7rem;font-weight:700}
.tc-badge.ok{background:#e8f5e9;color:#2e7d32}
.tc-badge.warn{background:#fff3e0;color:#e65100}
[data-theme="dark"] .tc-badge.ok{background:#1b5e20;color:#a5d6a7}
[data-theme="dark"] .tc-badge.warn{background:#4e2600;color:#ffcc80}
.nota-chip{background:var(--acc);color:#fff;padding:2px 8px;border-radius:8px;font-size:.72rem;font-weight:700}
#ap-tareas-list{padding:10px 12px;display:flex;flex-direction:column;gap:8px}

/* ── Miembros ── */
.upi{display:flex;align-items:center;gap:10px;padding:.6rem .8rem;border-bottom:1px solid var(--bor)}
.upi:last-child{border-bottom:none}
.upi-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.95rem;flex-shrink:0}
.upi-info{flex:1}
.un{font-weight:600;font-size:.84rem;color:var(--txt)}
.ud{font-size:.72rem;color:var(--muted)}

/* ── Info cards informes ── */
.est-info-card{background:var(--bg2);border:1px solid var(--bor);border-radius:10px;padding:12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;transition:.15s}
.est-info-card:hover{border-color:var(--acc);background:var(--bg1)}

/* ── Empty state ── */
.est-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:50px 20px;color:var(--muted);text-align:center;gap:10px}
.est-empty-ico{font-size:3rem;opacity:.2}
.est-empty p{font-size:.86rem;line-height:1.6}
.est-empty small{font-size:.75rem}

/* ═══════════════════════════════════════════════════════
   PROYECTOS — Workspace colaborativo
═══════════════════════════════════════════════════════ */
/* Sidebar nav active state */
.proy-nav-btn { transition:background .12s, color .12s; }
.proy-nav-btn.on { background:var(--bg1) !important; color:var(--txt) !important; font-weight:600 !important; }
/* Responsive: ocultar sidebar en móvil */
@media(max-width:640px){
  #proy-sidebar { display:none !important; }
}
/* Ideas grid mínimo en móvil */
@media(max-width:400px){
  #proy-ideas-grid { grid-template-columns:1fr !important; }
}

/* ═══════════════════════════════════════════════════════
   ESTUDIO — REDESIGN MINIMALISTA / TONOS GRISES
═══════════════════════════════════════════════════════ */
/* Top bar: sin borde pesado, solo separador sutil */
.est-top-bar{padding:10px 16px;border-bottom:1px solid var(--bor);background:var(--bg1)}
.est-create-btn{background:var(--txt);color:var(--bg1);border:none;border-radius:6px;padding:6px 14px;font-size:.78rem;font-weight:600;cursor:pointer;transition:opacity .15s;letter-spacing:.2px}
.est-create-btn:hover{opacity:.75}
.est-join-btn{background:transparent;border:1px solid var(--bor);border-radius:6px;padding:6px 12px;font-size:.78rem;color:var(--txt);cursor:pointer;transition:border-color .15s,color .15s}
.est-join-btn:hover{border-color:var(--txt);color:var(--txt)}
/* Cards de asignaturas: línea lateral + minimalista */
.asig-grid{padding:12px 14px;gap:8px;display:flex!important;flex-direction:column!important;grid-template-columns:unset!important}
@media(min-width:600px){.asig-grid{padding:14px 18px}}
.asig-card{border-radius:8px;border:1px solid var(--bor);background:var(--bg1);border-left:3px solid var(--bor);box-shadow:none;transform:none!important;transition:border-color .15s,background .12s}
.asig-card:hover{background:var(--bg2);border-color:var(--muted);border-left-color:var(--txt);box-shadow:none;transform:none!important}
/* Sección header en la grid */
.asig-section-hdr{font-size:.65rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1.2px;padding:14px 2px 6px;border-bottom:1px solid var(--bor);opacity:.7;grid-column:unset}
/* (#114) Banner de clase: respeta el color de la asignatura como acento.
   El color se aplica inline desde JS (banner.style.background = color); ya no
   forzamos un background plano con !important — sólo damos altura automática
   para mostrar stats debajo del título y patrón decorativo sutil. */
.asig-banner{min-height:78px;height:auto;border-bottom:1px solid rgba(0,0,0,.08);display:flex;align-items:flex-start;padding:14px 16px;gap:12px;position:relative;overflow:hidden}
.asig-banner-pattern{position:absolute;inset:0;opacity:.08;background-image:repeating-linear-gradient(45deg,#fff 0,#fff 1px,transparent 1px,transparent 16px);pointer-events:none}
.asig-banner-back{background:rgba(255,255,255,.22);border:none;color:#fff;backdrop-filter:blur(4px);width:32px;height:32px;flex-shrink:0;margin-top:2px}
.asig-banner-back:hover{background:rgba(255,255,255,.34)}
.asig-banner-info{flex:1;min-width:0;position:relative}
.asig-banner-info h2{font-size:1.05rem;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2);margin:0;line-height:1.2}
.asig-banner-info small{font-size:.72rem;color:rgba(255,255,255,.85);letter-spacing:.3px}
/* Stats row dentro del banner (#114) */
#asig-banner-stats{color:rgba(255,255,255,.92)}
#asig-banner-stats svg{color:rgba(255,255,255,.95)}
/* Tabs de navegación: limpios, sin color fuerte */
.asig-tabs{border-bottom:1px solid var(--bor);background:var(--bg1)}
.asig-tab,.est-tab{padding:.5rem .9rem;font-size:.76rem;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;transition:color .12s,border-color .12s}
.asig-tab.on,.est-tab.on{color:var(--txt);border-bottom-color:var(--txt);font-weight:700}
.asig-tab:hover:not(.on),.est-tab:hover:not(.on){color:var(--txt)}
/* Área de acciones tablón */
.ap-tablon-actions{padding:10px 14px;border-bottom:1px solid var(--bor);background:var(--bg1);gap:6px}
.ap-quick-btn{border:1px solid var(--bor);background:transparent;color:var(--muted);border-radius:6px;padding:5px 11px;font-size:.76rem;font-weight:500;transition:color .12s,border-color .12s}
.ap-quick-btn:hover{color:var(--txt);border-color:var(--txt)}
.ap-quick-btn.primary{background:var(--txt);color:var(--bg1);border-color:var(--txt)}
.ap-quick-btn.primary:hover{opacity:.78}
/* Tarjetas de tarea: limpias, sin bordes de color llamativos */
.tarea-card{background:var(--bg1);border:1px solid var(--bor);border-radius:8px;padding:12px 14px;gap:5px;transition:border-color .12s}
.tarea-card:hover{border-color:var(--muted)}
.tarea-card.entregada{border-left:3px solid #6b7280}
.tarea-card.vencida{border-left:3px solid #9ca3af;opacity:.65}
.tc-tit{font-weight:600;font-size:.86rem;color:var(--txt)}
.tc-desc{font-size:.78rem;color:var(--muted);line-height:1.45}
.tc-footer{font-size:.73rem;color:var(--muted);gap:7px;margin-top:3px}
.tc-badge.ok{background:var(--bg2);color:var(--muted);border:1px solid var(--bor)}
.tc-badge.warn{background:var(--bg2);color:var(--muted);border:1px solid var(--bor);opacity:.8}
[data-theme="dark"] .tc-badge.ok,[data-theme="dark"] .tc-badge.warn{background:var(--bg2);color:var(--muted)}
.nota-chip{background:var(--txt);color:var(--bg1);padding:2px 7px;border-radius:5px;font-size:.7rem;font-weight:700}
/* Lista de miembros */
.upi{padding:.55rem .9rem;border-bottom:1px solid var(--bor)}
.upi-av{width:32px;height:32px;border-radius:8px;font-size:.82rem}
.upi-info .un{font-size:.84rem;font-weight:600}
.upi-info .ud{font-size:.72rem;color:var(--muted)}
/* File tabs en home */
.est-file-tab{font-size:.71rem;font-weight:500;padding:7px 11px;color:var(--muted);border-bottom:2px solid transparent;letter-spacing:.2px;transition:color .12s,border-color .12s}
.est-file-tab.on,[data-ft].on{color:var(--txt)!important;border-bottom-color:var(--txt)!important}
/* Info cards (informes) */
.est-info-card{border-radius:8px;border:1px solid var(--bor);background:var(--bg1);transition:border-color .15s}
.est-info-card:hover{border-color:var(--txt);background:var(--bg2)}

/* btn-sm inside task/grade cards — neutral tone */
.tarea-card .btn-sm, .ap-notas-list .btn-sm, #m-ver-entregas .btn-sm {
  background: var(--bg2); color: var(--txt); border: 1px solid var(--bor);
  border-radius: 6px; padding: 3px 10px; font-size:.73rem; font-weight:500;
}
.tarea-card .btn-sm:hover, .ap-notas-list .btn-sm:hover { border-color:var(--txt); background:var(--bg1); }

/* Announcement cards */
#ap-anuncios{padding:10px 14px!important;gap:8px!important}
.anuncio-card{border-radius:8px;border-left:2px solid var(--bor)}
.an-av{width:28px;height:28px;border-radius:6px;font-size:.78rem;filter:saturate(.5)}
.an-header{padding:8px 12px;border-bottom:none;background:var(--bg2)}
.an-tit{padding:8px 12px 3px;font-size:.84rem}
.an-cont{padding:0 12px 10px;font-size:.8rem;opacity:.75}
.an-autor{font-size:.78rem}
.an-fecha{font-size:.67rem}

/* ═══════════════════════════════════════════════════════ */

/* ── NOTAS CARD COMPACT ───────────────────────────────────── */
.nota-shared{background:#f5ede4!important;border-color:#d4b896!important;}
.nota-card{border-radius:8px;padding:.6rem .8rem;background:var(--panel);border:1px solid var(--bor);cursor:pointer;transition:.15s;position:relative}
.nota-card:hover{border-color:var(--acc)}
.nota-card .nc-meta{display:flex;justify-content:space-between;align-items:center;font-size:.7rem;color:var(--muted);margin-top:.3rem}
.nota-card .nc-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.85rem;padding:0 2px}
/* ── CANAL / GRUPO ────────────────────────────────────────── */
.conv-type-badge{font-size:.65rem;padding:1px 5px;border-radius:4px;margin-left:4px}
.badge-grupo{background:#1565c0;color:#fff}
.badge-canal{background:#6a1b9a;color:#fff}

/* ── ACORDEÓN PERFIL ── */
.acc-section{border-bottom:1px solid var(--bor)}
.acc-section:last-of-type{border-bottom:none}
.acc-hdr{width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:13px 16px;background:none;border:none;cursor:pointer;font-size:.9rem;
  font-weight:600;color:var(--txt);font-family:inherit;text-align:left}
.acc-hdr:hover{background:var(--bg3)}
.acc-hdr .acc-arrow.open{transform:rotate(180deg)}
.acc-body{display:none;flex-direction:column;gap:10px;padding:12px 16px}
.acc-body.open{display:flex}


/* ── MODO OSCURO ── */
[data-theme="dark"]{
  --bg1:#17212b;--bg2:#1e2c3a;--bg3:#242f3d;
  --msg-me:#2b5278;--msg-o:#1e2c3a;
  --acc:#5288c1;--acc2:#6a9fd8;
  --txt:#e8eef4;--muted:#7d9bb5;
  --panel:#1e2c3a;--bor:#2a3a4a;
}

/* (#308) ── MODO GRIS MUY CLARO ── light-soft, paleta minimalista */
[data-theme="light-soft"]{
  --bg1:#f5f6f8;     /* Fondo principal — gris muy claro neutro */
  --bg2:#ebedf0;     /* Fondo secundario */
  --bg3:#dfe1e5;     /* Fondo terciario / chips */
  --msg-me:#dde7f5;
  --msg-o:#ebedf0;
  --acc:#7a8aa3;     /* Acento gris-azulado neutro */
  --acc2:#94a4bd;
  --txt:#2c3038;     /* Texto gris oscuro */
  --muted:#6b7280;   /* Etiquetas */
  --panel:#ffffff;   /* Paneles flotantes con un toque más luminoso */
  --bor:#d4d7dc;     /* Bordes sutiles */
}


/* ── GALERÍA MOSAICO ── */
.galeria-header{display:flex;align-items:center;padding:14px 16px 10px;border-bottom:1px solid var(--bor);gap:8px;flex-shrink:0}
.galeria-header h1{font-size:.95rem;font-weight:700;letter-spacing:.8px;flex:1;margin:0;text-transform:uppercase}
.galeria-badge{font-size:.68rem;color:var(--muted);background:var(--bg2);padding:2px 8px;border-radius:20px;border:1px solid var(--bor)}
.galeria-actions{display:flex;gap:6px}
.galeria-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;padding:3px;align-content:start}
@media(max-width:640px){.galeria-grid{grid-template-columns:repeat(4,1fr);gap:2px}}
@media(max-width:380px){.galeria-grid{grid-template-columns:repeat(4,1fr);gap:1px}}
/* Gallery grid items: always square thumbnails — cross-browser safe */
/* Outer wrapper controls the 1:1 ratio via padding-bottom trick (universal) */
.galeria-item{position:relative;cursor:pointer;background:var(--bg3);border-radius:4px;width:100%;overflow:hidden}
.galeria-item::before{content:'';display:block;padding-bottom:100%}
/* Inner container fills the padded space absolutely */
.galeria-item-inner{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;border-radius:4px}
.galeria-item img{width:100%;height:100%;object-fit:cover;display:block;-webkit-transition:transform .3s ease;transition:transform .3s ease}
.galeria-item:hover .galeria-item-inner img{-webkit-transform:scale(1.07);transform:scale(1.07)}
@media(hover:none){.galeria-item-inner img{-webkit-transform:none!important;transform:none!important}}
.galeria-item-overlay{position:absolute;bottom:0;left:0;right:0;top:0;background:-webkit-linear-gradient(bottom,rgba(0,0,0,.7) 0%,transparent 50%);background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 50%);opacity:0;-webkit-transition:opacity .25s;transition:opacity .25s;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:flex-end;justify-content:flex-end;padding:8px}
.galeria-item:hover .galeria-item-overlay{opacity:1}
@media(hover:none){.galeria-item-overlay{opacity:1;background:linear-gradient(to top,rgba(0,0,0,.55) 0%,transparent 60%)}}
.galeria-item-meta{display:-webkit-flex;display:flex;gap:8px;-webkit-align-items:center;align-items:center}
.galeria-item-meta span{font-size:.65rem;color:#fff;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:3px}
/* Editor minimo del caption en el modal de publicacion de galeria */
#gpm-caption:empty:before {
  content: attr(data-ph);
  color: var(--muted);
  pointer-events: none;
}
#gpm-caption ul, #gpm-caption ol { padding-left:24px; margin:6px 0; }
#gpm-caption li { margin:2px 0; }
#gpm-caption a { color: var(--acc); text-decoration: underline; }
#gpm-caption b, #gpm-caption strong { font-weight:700; }
#gpm-caption i, #gpm-caption em { font-style:italic; }

/* Chip único de likes + comentarios para cada miniatura del mosaico.
   Diseño: corazón blanco SVG (mismo path que el visor) + contador + bocadillo
   blanco SVG + contador, en pildoras semi-transparentes redondeadas.
   Visibilidad: oculto por defecto, aparece en hover. En dispositivos táctiles
   también aparece siempre porque no hay hover. */
/* (#42) Stats ocultos en miniaturas de galería — solo aparecen al abrir
   la imagen en el visor (panelc-main: oculto en thumbnail siempre). */
.galeria-item-stats {
  display:none !important;
}
.galeria-item-stats .gis-chip {
  display:inline-flex; align-items:center; gap:3px;
  padding:3px 7px;
  background:rgba(0,0,0,.55);
  color:#fff;
  border-radius:10px;
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.02em;
  backdrop-filter:saturate(140%) blur(2px);
  -webkit-backdrop-filter:saturate(140%) blur(2px);
}
.galeria-item-stats .gis-chip svg { display:block; flex-shrink:0; }
/* (#311) Botón X de eliminar OCULTO en miniaturas — solo aparece al abrir
   la imagen en el visor. Mantenemos los estilos por si el visor lo reusa. */
.galeria-item-del{position:absolute;top:6px;right:6px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.6);border:none;color:#fff;cursor:pointer;font-size:.75rem;display:none !important;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.galeria-item:hover .galeria-item-del{display:none !important}
@media(hover:none){.galeria-item-del{display:none !important}}
/* Indicador de múltiples archivos en post */
.galeria-multi-badge{position:absolute;top:6px;left:6px;background:rgba(0,0,0,.65);color:#fff;font-size:.6rem;font-weight:700;padding:2px 6px;border-radius:10px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:3px;pointer-events:none;letter-spacing:.03em}
.galeria-video-badge{position:absolute;top:6px;left:6px;background:rgba(0,0,0,.65);color:#fff;font-size:.85rem;padding:3px 7px;border-radius:10px;pointer-events:none}
/* Carrusel dentro del visor para posts multi-archivo */
#fv-carousel{display:-webkit-flex;display:flex;gap:6px;padding:6px 12px;overflow-x:auto;-webkit-overflow-scrolling:touch;background:rgba(0,0,0,.4);flex-shrink:0}
#fv-carousel::-webkit-scrollbar{height:3px}
#fv-carousel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:2px}
.fv-thumb{width:52px;height:52px;border-radius:5px;object-fit:cover;cursor:pointer;opacity:.55;flex-shrink:0;border:2px solid transparent;-webkit-transition:opacity .15s;transition:opacity .15s}
.fv-thumb.on{opacity:1;border-color:#fff}
.fv-thumb-vid{width:52px;height:52px;border-radius:5px;background:#222;cursor:pointer;opacity:.55;flex-shrink:0;border:2px solid transparent;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;font-size:1.2rem;-webkit-transition:opacity .15s;transition:opacity .15s}
.fv-thumb-vid.on{opacity:1;border-color:#fff}
/* Visor de foto elegante — Safari/iOS compatible */
#m-foto-viewer{
  position:fixed;top:0;left:0;right:0;bottom:0;
  z-index:9999;background:rgba(0,0,0,.96);
  /* Safari: avoid display:none→flex flash */
  visibility:hidden;opacity:0;pointer-events:none;
  display:-webkit-flex;display:flex;
  -webkit-flex-direction:column;flex-direction:column;
  -webkit-transition:opacity .2s,visibility .2s;transition:opacity .2s,visibility .2s;
  -webkit-tap-highlight-color:transparent;
}
#m-foto-viewer.open{visibility:visible;opacity:1;pointer-events:auto;}
.fv-top{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;padding:14px 18px;padding-top:max(14px,env(safe-area-inset-top));-webkit-flex-shrink:0;flex-shrink:0;gap:12px}
.fv-user{font-weight:600;font-size:.9rem;color:#fff;-webkit-flex:1;flex:1}
.fv-title{font-size:.78rem;color:rgba(255,255,255,.55)}
.fv-close{background:rgba(255,255,255,.1);border:none;color:#fff;width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:1.1rem;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;-webkit-transition:background .2s;transition:background .2s;-webkit-tap-highlight-color:transparent;min-width:44px}
.fv-close:hover,.fv-close:active{background:rgba(255,255,255,.2)}
.fv-body{-webkit-flex:1;flex:1;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;position:relative;overflow:hidden;min-height:0;min-width:0}
.fv-img{max-width:100%;max-height:100%;width:auto;height:auto;-o-object-fit:contain;object-fit:contain;border-radius:4px;-webkit-transition:opacity .25s;transition:opacity .25s;display:block;-webkit-user-drag:none;user-select:none}
.fv-arrow{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:rgba(255,255,255,.12);border:none;color:#fff;width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:1.3rem;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;-webkit-transition:background .2s;transition:background .2s;z-index:10;-webkit-tap-highlight-color:transparent}
.fv-arrow:hover,.fv-arrow:active{background:rgba(255,255,255,.25)}
.fv-arrow.prev{left:8px}
.fv-arrow.next{right:8px}
@media(max-width:480px){.fv-arrow{width:38px;height:38px;font-size:1.1rem}}
.fv-bottom{padding:12px 18px;padding-bottom:max(12px,env(safe-area-inset-bottom));-webkit-flex-shrink:0;flex-shrink:0;background:-webkit-linear-gradient(top,transparent,rgba(0,0,0,.5));background:linear-gradient(transparent,rgba(0,0,0,.5))}
.fv-caption{color:rgba(255,255,255,.7);font-size:.83rem;margin-bottom:10px}
.fv-actions{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:12px}
.fv-like{background:rgba(255,255,255,.1);border:none;color:#fff;cursor:pointer;font-size:.85rem;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:5px;padding:8px 14px;border-radius:20px;-webkit-transition:.2s;transition:.2s;min-height:36px;-webkit-tap-highlight-color:transparent}
.fv-like.liked{background:rgba(220,50,50,.3);color:#ff6b6b}
.fv-like:hover,.fv-like:active{background:rgba(255,255,255,.2)}
.fv-counter{color:rgba(255,255,255,.5);font-size:.75rem;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:5px}
.fv-date{color:rgba(255,255,255,.35);font-size:.72rem;margin-left:auto}
.fv-dots{display:-webkit-flex;display:flex;gap:4px;-webkit-justify-content:center;justify-content:center;padding:8px 0}
.fv-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.25);cursor:pointer;-webkit-transition:.2s;transition:.2s}
.fv-dot.on{background:#fff;width:16px;border-radius:3px}

/* ── Nuevo layout visor Galería (2 columnas estilo red social) ── */
#m-foto-viewer{flex-direction:row !important}
.fv-stage{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  position:relative;
  padding:0;
}
.fv-stage .fv-body{padding:14px 18px}
.fv-social{
  width:380px;
  min-width:320px;
  max-width:420px;
  flex-shrink:0;
  background:#111;
  border-left:1px solid rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;
  color:#fff;
  box-sizing:border-box;
}
.fvs-header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  padding-top:max(14px, env(safe-area-inset-top));
  border-bottom:1px solid rgba(255,255,255,.08);
  flex-shrink:0;
}
.fvs-avatar{
  width:38px;height:38px;border-radius:50%;
  background:#3273dc;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.95rem;flex-shrink:0;
}
.fvs-user-info{flex:1;min-width:0}
.fvs-user-info .fv-user{font-size:.88rem;font-weight:700;color:#fff;margin:0}
.fvs-user-info .fv-date{font-size:.68rem;color:rgba(255,255,255,.5);margin-top:2px}
.fvs-header .fv-close{
  background:rgba(255,255,255,.08);border:none;color:#fff;
  width:36px;height:36px;
  min-width:36px;min-height:36px;
  max-width:36px;max-height:36px;
  border-radius:50%;cursor:pointer;font-size:1rem;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-sizing:border-box;
  padding:0;
  aspect-ratio:1/1;
}
.fvs-header .fv-close:hover{background:rgba(255,255,255,.18)}
.fvs-caption-box{
  padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
  flex-shrink:0;
}
.fvs-caption-box .fv-title{
  font-size:.82rem;font-weight:700;color:#fff;margin-bottom:4px;
  overflow-wrap:anywhere;
}
.fvs-caption-box .fv-caption{
  font-size:.78rem;color:rgba(255,255,255,.75);line-height:1.45;
  white-space:pre-wrap;overflow-wrap:anywhere;margin:0;
}
.fvs-comments-list{
  flex:1;
  overflow-y:auto;
  padding:10px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:80px;
}
.fvs-comment{
  display:flex;gap:9px;align-items:flex-start;
}
.fvs-comment-av{
  width:28px;height:28px;border-radius:50%;
  background:#555;color:#fff;font-weight:700;font-size:.72rem;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.fvs-comment-body{flex:1;min-width:0}
.fvs-comment-name{font-size:.74rem;font-weight:700;color:#fff}
.fvs-comment-text{font-size:.78rem;color:rgba(255,255,255,.85);overflow-wrap:anywhere;line-height:1.4;margin-top:1px}
.fvs-comment-date{font-size:.62rem;color:rgba(255,255,255,.4);margin-top:2px}
.fvs-comments-list .fvs-empty{
  color:rgba(255,255,255,.4);font-size:.75rem;text-align:center;
  padding:20px 10px;font-style:italic;
}
.fvs-actions{
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;
  border-top:1px solid rgba(255,255,255,.08);
  flex-shrink:0;
}
.fvs-actions .fv-like{
  background:rgba(255,255,255,.08);border:none;color:#fff;cursor:pointer;
  font-size:.82rem;display:flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:20px;transition:.2s;
}
.fvs-actions .fv-like.liked{background:rgba(220,50,50,.18);color:#ff5a6b}
/* Iconos minimalistas del visor: SVG outline, stroke fino */
.fv-ico{width:18px;height:18px;flex-shrink:0;display:block}
.fvs-actions .fv-ico{width:18px;height:18px}
.fvs-actions .fv-like svg path,
.fvs-actions .fv-like svg polyline,
.fvs-actions .fv-like svg circle{stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fvs-actions .fv-like.liked svg path{fill:#ff5a6b;stroke:#ff5a6b}
/* Like del modal de video: rellenar corazón rojo cuando liked */
#vid-like-btn.liked svg path{fill:#ff5a6b;stroke:#ff5a6b}
#vid-like-btn.liked{background:rgba(220,50,50,.18) !important}
/* Suscrito: estado activo */
#vid-sub-btn.suscrito{background:rgba(220,50,50,.18) !important;border-color:rgba(255,90,107,.4) !important;color:#ff5a6b !important}
.fvs-actions .fv-counter svg path,
.fvs-actions .fv-counter svg polyline{stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fvs-header .fv-close svg line{stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.fvs-actions .fv-like:hover{background:rgba(255,255,255,.16)}
.fvs-actions .fv-counter{
  color:rgba(255,255,255,.55);font-size:.75rem;display:flex;
  align-items:center;gap:5px;
}
.fvs-comment-input{
  display:flex;gap:8px;
  padding:10px 12px;
  padding-bottom:max(10px, env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.08);
  flex-shrink:0;
}
.fvs-comment-input input{
  flex:1;min-width:0;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  padding:8px 12px;
  border-radius:20px;
  font-size:.8rem;
  outline:none;
}
.fvs-comment-input input:focus{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.25);
}
.fvs-comment-input button{
  background:#e0e0e0;border:1px solid #c8c8c8;color:#333;padding:8px 16px;border-radius:20px;
  font-weight:600;font-size:.78rem;cursor:pointer;white-space:nowrap;
  transition:background .15s, border-color .15s;
}
.fvs-comment-input button:hover{background:#d0d0d0;border-color:#b0b0b0}
.fv-stage .fv-dots{padding:6px 0 10px}
/* Móvil: apilar vertical (imagen arriba, panel abajo) */
@media(max-width:900px){
  #m-foto-viewer{flex-direction:column !important}
  .fv-social{
    width:100%;
    max-width:100%;
    min-width:0;
    border-left:none;
    border-top:1px solid rgba(255,255,255,.08);
    max-height:55vh;
  }
  .fv-stage{min-height:45vh}
}


/* ── VIDEOS ESTILO YOUTUBE ── */
.videos-header{display:flex;align-items:center;padding:14px 16px 0;flex-shrink:0;gap:8px}
.videos-header h1{font-size:.95rem;font-weight:700;letter-spacing:.8px;flex:1;margin:0;text-transform:uppercase}
.vid-filter-bar{display:flex;gap:6px;padding:10px 16px;flex-shrink:0;overflow-x:auto;scrollbar-width:none}
.vid-filter-btn{padding:5px 14px;border-radius:20px;border:1px solid var(--bor);background:var(--bg2);color:var(--muted);font-size:.75rem;cursor:pointer;white-space:nowrap;transition:.2s;font-weight:500}
.vid-filter-btn.on{background:var(--txt);color:var(--bg1);border-color:var(--txt)}
/* ── Videos header: solo un botón de subir + el de actualizar ── */
.videos-header #vid-section-upload-btn ~ .icoBtn.vid-upload-btn,
.videos-header .vid-upload-btn:not(#vid-section-upload-btn),
.videos-header .vid-fab, .videos-header .upload-fab,
.videos-header button[onclick*="openModal('m-upload-vid')"]:not(#vid-section-upload-btn){
  display:none !important;
}

/* ── Videos: mosaico minimalista (thumbs juntos, sin play permanente) ── */
.video-mosaic{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:2px;overflow-y:auto;flex:1;align-content:start;background:var(--bg1)}
@media(max-width:1200px){.video-mosaic{grid-template-columns:repeat(4,1fr)}}
@media(max-width:900px){.video-mosaic{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.video-mosaic{grid-template-columns:repeat(2,1fr);gap:1px}}
.vm-item{cursor:pointer;overflow:hidden;background:#000;transition:opacity .15s;display:flex;flex-direction:column;border-radius:0}
.vm-item:hover{opacity:.98}
.vm-thumb-wrap{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.vm-thumb{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .2s}
/* Video que se reproduce en hover dentro de la miniatura */
.vm-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .15s;pointer-events:none;background:#000}
.vm-item:hover .vm-preview.ready{opacity:1}
.vm-item:hover .vm-thumb{opacity:0}
/* Placeholder si no hay thumbnail (no icono play) */
.vm-thumb-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.35);font-size:1.2rem;background:#141414}
.vm-duration{position:absolute;bottom:4px;right:4px;background:rgba(0,0,0,.75);color:#fff;font-size:.64rem;padding:1px 5px;border-radius:2px;font-weight:500;letter-spacing:.02em;font-variant-numeric:tabular-nums}
/* Meta debajo: compacto, sin relleno */
.vm-meta{padding:6px 8px 10px;background:var(--bg1)}
.vm-title-text{font-size:.78rem;font-weight:500;color:var(--txt);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:3px}
.vm-sub-meta{display:flex;align-items:center;gap:5px;font-size:.66rem;color:var(--muted)}
.vm-sub-meta .vm-ico{width:12px;height:12px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vm-avatar{width:18px;height:18px;border-radius:50%;background:var(--muted);display:flex;align-items:center;justify-content:center;color:var(--bg1);font-size:.58rem;font-weight:600;flex-shrink:0}

/* Ocultar FABs de panelc-video-upload-ui.js (duplicados del botón Subir) */
#panelc-vup-fab, #panelc-vup-list-fab, #panelc-vup-panel{
  display:none !important; visibility:hidden !important;
  pointer-events:none !important;
}

@media(max-width:640px){
  .vm-item{border-radius:0}
  .vm-meta{padding:6px 6px 8px}
  .vm-title-text{font-size:.76rem;-webkit-line-clamp:2}
}
/* ══ Upload video modal — minimalista elegante ═════════════════════ */
.uv-modal{
  max-width:480px;width:94%;
  background:var(--panel);
  border:1px solid var(--bor);
  border-radius:14px;
  padding:0;
  display:flex;flex-direction:column;
  max-height:90vh;
  overflow:hidden;
  box-shadow:0 12px 48px rgba(0,0,0,.28);
}
/* Hacer que las secciones intermedias (tabs, drop-zone/preview/url, fields,
   progress, status) queden dentro de un contenedor que SÍ scrollea cuando el
   contenido excede la altura disponible. Header y actions se mantienen fijos. */
.uv-modal > .uv-tabs,
.uv-modal > .uv-tabpanel,
.uv-modal > .uv-fields,
.uv-modal > .uv-progress,
.uv-modal > .uv-status{
  /* Son los siblings del modal; con esta regla pueden vivir dentro de un
     scroll virtual: las meto en un "área scroll" via flex */
  flex-shrink:0;
}
/* Crear área de scroll: usar display:contents hack NO funciona bien aquí.
   Opción más simple: poner max-height + overflow-y en el agregado de piezas.
   Truco: hacer que el modal tenga un "fake body" limitando la altura total
   y permitiendo overflow en las secciones intermedias. */
.uv-modal .uv-body-scroll{
  flex:1 1 auto;
  overflow-y:auto;
  overscroll-behavior:contain;
  min-height:0;
}
.uv-modal .uv-body-scroll > *{flex-shrink:0}
.uv-header{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:18px 22px 14px;
  gap:16px;
  border-bottom:1px solid var(--bor);
  flex-shrink:0;
}
.uv-title{font-size:1.02rem;font-weight:600;color:var(--txt);letter-spacing:-.01em}
.uv-sub{font-size:.72rem;color:var(--muted);margin-top:4px;line-height:1.45;max-width:360px}
.uv-close{
  background:transparent;border:1px solid var(--bor);border-radius:50%;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  color:var(--muted);cursor:pointer;flex-shrink:0;transition:.15s;
}
.uv-close:hover{background:var(--bg2);color:var(--txt);border-color:var(--txt)}

.uv-tabs{
  display:flex;gap:4px;
  padding:12px 22px 0;
  flex-shrink:0;
}
.uv-tab{
  background:transparent;border:none;
  color:var(--muted);font-size:.78rem;font-weight:500;cursor:pointer;
  padding:8px 12px;border-radius:8px;
  display:flex;align-items:center;gap:6px;transition:.15s;
}
.uv-tab:hover{background:var(--bg2);color:var(--txt)}
.uv-tab.on{background:var(--bg2);color:var(--txt);font-weight:600}

.uv-tabpanel{padding:14px 22px 0;flex-shrink:0;overflow-y:auto}
.uv-drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:28px 20px;
  background:var(--bg2);
  border:1.5px dashed var(--bor);
  border-radius:12px;
  cursor:pointer;
  transition:.18s;
  text-align:center;
}
.uv-drop:hover{border-color:var(--acc);background:var(--bg1)}
.uv-drop.drag-over{border-color:var(--acc);background:rgba(60,120,220,.05)}
.uv-drop-primary{font-size:.85rem;color:var(--txt);font-weight:500}
.uv-drop-sec{font-size:.7rem;color:var(--muted)}
.uv-preview{
  width:100%;max-height:220px;
  margin-top:12px;border-radius:10px;background:#000;
}

.uv-fields{padding:16px 22px 0;display:flex;flex-direction:column;gap:12px}
.uv-field-lbl{
  display:block;
  font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:600;margin-bottom:5px;
}
.uv-input{
  width:100%;box-sizing:border-box;
  background:var(--bg2);
  border:1px solid var(--bor);
  color:var(--txt);
  padding:9px 12px;border-radius:9px;
  font-size:.84rem;outline:none;
  transition:.15s;
  font-family:inherit;
}
.uv-input:focus{border-color:var(--acc);background:var(--bg1)}
.uv-input::placeholder{color:var(--muted)}
.uv-textarea{min-height:66px;resize:vertical;line-height:1.5}

.uv-progress{
  height:4px;background:var(--bor);border-radius:2px;overflow:hidden;
  margin:16px 22px 0;display:none;
}
.uv-progress.active{display:block}
.uv-progress-fill{height:100%;background:var(--acc);width:0%;transition:width .2s}
.uv-status{
  text-align:center;font-size:.75rem;color:var(--muted);
  padding:10px 22px 0;line-height:1.45;
}

.uv-actions{
  display:flex;justify-content:flex-end;gap:8px;
  padding:18px 22px 18px;
  margin-top:6px;
  border-top:1px solid var(--bor);
  flex-shrink:0;
  background:var(--bg1);
}
.uv-btn-ghost{
  background:transparent;border:1px solid var(--bor);color:var(--txt);
  padding:9px 18px;border-radius:9px;font-size:.82rem;font-weight:500;
  cursor:pointer;transition:.15s;
}
.uv-btn-ghost:hover{background:var(--bg2)}
.uv-btn-primary{
  background:var(--txt);color:var(--bg1);border:1px solid var(--txt);
  padding:9px 20px;border-radius:9px;font-size:.82rem;font-weight:600;
  cursor:pointer;transition:.15s;
}
.uv-btn-primary:hover{opacity:.88}
.uv-btn-primary:disabled{opacity:.5;cursor:not-allowed}


/* ── ÁREA DE NOTA OCUPA PANTALLA ── */
@media(max-width:640px){
  .nota-editor-full{
    position:fixed;inset:0;z-index:900;background:var(--bg2);
    display:flex;flex-direction:column;padding:0;margin:0
  }
  .nota-editor-full .nota-content-area{
    flex:1;resize:none;border:none;outline:none;padding:16px 14px;
    font-size:1rem;line-height:1.6;background:var(--bg2);color:var(--txt)
  }
}
@media(min-width:641px){
  .nota-editor-full{width:100%;max-width:700px;margin:0 auto}
  .nota-editor-full .nota-content-area{min-height:400px;padding:20px;font-size:1rem;line-height:1.7}
}


/* ── NOTA COMPARTIDA (marrón pastel) ── */
.nota-card.shared{background:#f5e6d3;border-color:#d4a574}
[data-theme="dark"] .nota-card.shared{background:#3d2b1f;border-color:#7a5c42}
.nota-card.shared .nota-card-head{color:#7a4f2a}


/* ── PADDING MAYOR EN EDITOR NOTAS ── */
.nota-editor,[contenteditable="true"].nota-body{
  padding:14px 16px !important;
  min-height:180px
}


/* ── MODAL NUEVA NOTA — estilos heredados para editNota legacy ── */
#m-nota-nueva .mhead{border-bottom:none;padding:20px 20px 10px}
#m-nota-nueva .mhead span{font-size:1.1rem;font-weight:700;letter-spacing:.3px;color:var(--txt)}


/* ── BANNER INSTALAR PWA MEJORADO ── */
#pwa-banner{position:fixed;bottom:calc(var(--bnav)+.6rem);left:.8rem;right:.8rem;
  background:var(--bg2);border:1px solid var(--bor);border-radius:14px;
  padding:12px 14px;display:none;align-items:center;gap:10px;
  box-shadow:0 4px 20px rgba(0,0,0,.1);z-index:200;
  animation:slideUp .3s ease}
#pwa-banner.show{display:flex}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}


/* ── IMAGEN CON INFO A LA IZQUIERDA (#42) ── */
.foto-detail-wrap{display:flex;gap:12px;align-items:flex-start}
.foto-detail-img{flex:1;max-height:80dvh;object-fit:contain;border-radius:10px}
.foto-detail-info{width:200px;flex-shrink:0;display:flex;flex-direction:column;gap:8px}
@media(max-width:640px){
  .foto-detail-wrap{flex-direction:column-reverse}
  .foto-detail-info{width:100%}
}


/* ── CALENDARIO VISTAS ── */
.cal-nav{display:flex;gap:0;border:1px solid var(--bor);border-radius:8px;overflow:hidden;align-self:flex-start}
.cal-nav button{background:none;border:none;padding:5px 12px;font-size:.8rem;cursor:pointer;color:var(--muted);font-family:inherit}
.cal-nav button.on{background:var(--acc);color:#fff}
.cal-grid-month{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.cal-day-header{font-size:.72rem;color:var(--muted);font-weight:600;padding:4px;text-transform:uppercase}
.cal-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border-radius:50%;font-size:.85rem;cursor:pointer;position:relative;max-width:36px;margin:auto}
.cal-day:hover{background:var(--bg3)}
.cal-day.today{background:var(--acc);color:#fff;font-weight:700}
.cal-day.has-event::after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--acc)}
.cal-day.today.has-event::after{background:#fff}



/* ── CHAT E2EE mejorado ────────────────────────────────────── */
.msg-row { display:flex; align-items:flex-end; gap:6px; margin-bottom:4px; max-width:100%; }
.msg-row.me { flex-direction:row-reverse; }
.msg-row.other .mbav { flex-shrink:0; }
.msg-row.me .me-av { flex-shrink:0; }
.msg-content { display:flex; flex-direction:column; max-width:72%; }
.msg-row.me .msg-content { align-items:flex-end; }
.msg-row.other .msg-content { align-items:flex-start; }
.msender { font-size:.68rem; font-weight:600; color:var(--acc); margin-bottom:2px; padding-left:2px; }
.mbub { position:relative; }
.msg-row.me .mbub { background:var(--acc); color:#fff; border-radius:18px 18px 4px 18px; }
.msg-row.other .mbub { background:var(--bg3,#f3f3f3); color:var(--txt); border-radius:18px 18px 18px 4px; }
.msg-text { padding:.45rem .7rem .25rem; font-size:.88rem; line-height:1.45; word-break:break-word; white-space:pre-wrap; }
.mtime { font-size:.62rem; opacity:.32; padding:0 .7rem .35rem; text-align:right; display:flex; align-items:center; justify-content:flex-end; gap:3px; }
.chat-date-sep { display:flex; align-items:center; gap:10px; margin:14px 8px 8px; user-select:none; }
.chat-date-sep::before,.chat-date-sep::after { content:''; flex:1; height:1px; background:var(--bor,#e5e7eb); }
.chat-date-sep span { font-size:.68rem; color:var(--muted,#9ca3af); font-weight:500; white-space:nowrap; padding:2px 10px; background:var(--bg,#fff); border-radius:20px; border:1px solid var(--bor,#e5e7eb); }
.msg-status { font-size:.7rem; opacity:.8; }
.msg-row.me .mbav.me-av { width:28px; height:28px; font-size:.7rem; }
/* (#115) Ocultar avatar en mis propios mensajes — estilo WhatsApp.
   Sigues siendo tú; el avatar es información redundante y aplastaba el bubble. */
.msg-row.me .mbav { display: none !important; }
.chat-e2ee-badge { display:flex; align-items:center; justify-content:center; gap:4px; padding:.25rem .6rem; background:rgba(80,200,80,.12); color:var(--ok,#22c55e); border-radius:20px; font-size:.7rem; font-weight:500; margin:.5rem auto; width:fit-content; }

/* ── MODAL RECUPERAR CONTRASEÑA ────────────────────────────── */
#m-forgot{
  position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:10000;
  display:flex;align-items:center;justify-content:center;padding:1rem;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
#m-forgot.open{opacity:1;pointer-events:auto}
.forgot-close-btn {
  position:absolute; top:.9rem; right:.9rem;
  background:none; border:none; font-size:1.1rem; line-height:1;
  cursor:pointer; color:var(--muted); padding:.2rem .4rem; border-radius:4px;
  transition:color .2s, background .2s;
}
.forgot-close-btn:hover { color:var(--text); background:var(--bg3,#f0f0f0); }
.forgot-box{ position:relative;
  background:#fff;border-radius:18px;padding:2rem 1.8rem;
  width:100%;max-width:360px;
  border:1px solid var(--bor);
  box-shadow:0 8px 40px rgba(0,0,0,.12);
}
.forgot-box h3{font-size:1.05rem;font-weight:500;margin-bottom:.4rem;color:var(--txt)}
.forgot-box p{font-size:.82rem;color:var(--muted);margin-bottom:1.2rem;line-height:1.5}
.forgot-back{background:none;border:none;color:var(--muted);cursor:pointer;
             font-size:.82rem;margin-top:.6rem;text-decoration:underline;font-family:inherit}


/* ═══ LUXURY MINIMAL — Fase 9 ════════════════════════════════════ */
:root {
  --lm-gray1: #f8f8f8;
  --lm-gray2: #efefef;
  --lm-gray3: #e0e0e0;
  --lm-accent: #1a1a1a;
  --lm-muted:  #8a8a8a;
  --lm-radius: 14px;
  --lm-font:   'Inter', 'Helvetica Neue', Arial, sans-serif;
}
body { font-family: var(--lm-font); }

/* Bottom nav — 3 botones: Chats | ─── | Estudio */
.bnav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: var(--lm-gray1);
  border-top: 1px solid var(--lm-gray3);
  padding: .45rem 1rem env(safe-area-inset-bottom,.5rem);
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
}
.bnav-btn {
  display: flex; flex-direction: column; align-items: center; gap: .18rem;
  background: none; border: none; cursor: pointer;
  color: var(--lm-muted); font-size: .7rem; font-family: var(--lm-font);
  padding: .3rem .6rem; border-radius: 10px; transition: color .2s, background .2s;
  min-width: 52px;
}
.bnav-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.bnav-btn.active { color: var(--lm-accent); }
.bnav-btn:hover  { background: var(--lm-gray2); }
.bnav-spacer     { flex: 1; }

/* Estudio — scroll lateral */
.study-tabs-scroll {
  display: flex; overflow-x: auto; gap: .5rem;
  padding: .5rem 0; scrollbar-width: none;
}
.study-tabs-scroll::-webkit-scrollbar { display: none; }
.study-tab {
  white-space: nowrap; padding: .4rem .9rem;
  border: 1px solid var(--lm-gray3); border-radius: 20px;
  background: none; cursor: pointer; font-size: .8rem; color: var(--lm-muted);
  transition: background .2s, color .2s, border-color .2s;
}
.study-tab.active {
  background: var(--lm-accent); color: #fff; border-color: var(--lm-accent);
}

/* Carpetas anidadas */
.folder-item { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem;
  border-radius: var(--lm-radius); cursor: pointer; transition: background .15s; }
.folder-item:hover { background: var(--lm-gray2); }
.folder-item .fi-icon { font-size: 1.1rem; }
.folder-children { padding-left: 1.2rem; border-left: 1px solid var(--lm-gray3); margin-left: .8rem; }

/* Google-Docs editor */
.gdocs-editor {
  min-height: 340px; padding: 1.2rem 1.4rem;
  background: #fff; border: 1px solid var(--lm-gray3);
  border-radius: var(--lm-radius); font-size: .92rem; line-height: 1.65;
  outline: none; box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.gdocs-toolbar {
  display: flex; gap: .3rem; flex-wrap: wrap; padding: .5rem;
  background: var(--lm-gray1); border: 1px solid var(--lm-gray3);
  border-bottom: none; border-radius: var(--lm-radius) var(--lm-radius) 0 0;
}
.gdocs-toolbar button {
  padding: .25rem .55rem; background: none; border: 1px solid transparent;
  border-radius: 6px; cursor: pointer; font-size: .82rem; color: var(--lm-accent);
  transition: background .15s, border-color .15s;
}
.gdocs-toolbar button:hover { background: var(--lm-gray2); border-color: var(--lm-gray3); }

/* Calificaciones tabla */
.grades-table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.grades-table th { background: var(--lm-gray2); color: var(--lm-muted);
  font-weight: 600; text-transform: uppercase; font-size: .72rem; letter-spacing: .06em;
  padding: .6rem .8rem; text-align: left; border-bottom: 1px solid var(--lm-gray3); }
.grades-table td { padding: .55rem .8rem; border-bottom: 1px solid var(--lm-gray2); }
.grades-table tr:last-child td { border-bottom: none; }

/* Control Parental — Time per Tasks */
.cparental-card {
  background: var(--lm-gray1); border: 1px solid var(--lm-gray3);
  border-radius: var(--lm-radius); padding: 1rem; margin-bottom: .7rem;
}
.cp-progress-bar { height: 6px; background: var(--lm-gray3); border-radius: 3px; overflow: hidden; margin-top: .4rem; }
.cp-progress-fill { height: 100%; background: var(--lm-accent); border-radius: 3px; transition: width .4s; }
/* ═══════════════════════════════════════════════════════════════════ */

/* AI Tutor — Fase 17 */
.ai-msg {
  max-width: 88%; padding: .55rem .8rem;
  border-radius: 14px; font-size: .86rem; line-height: 1.55;
  word-break: break-word; white-space: pre-wrap;
}
.ai-bot {
  background: var(--bg2, #f0f0f0); color: var(--txt);
  border-bottom-left-radius: 4px;
}
.ai-user {
  background: var(--acc, #1a1a1a); color: #fff;
  align-self: flex-end; border-bottom-right-radius: 4px;
}
.ai-typing {
  background: var(--bg2, #f0f0f0);
  color: var(--muted); font-style: italic;
  animation: pulse .8s ease-in-out infinite alternate;
}
@keyframes pulse { from{opacity:.5} to{opacity:1} }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ═══════════════════════════════════════════════════════════════
   NOTAS — Layout, Grid, Cards, WYSIWYG  (Bug-3 fix)
   ═══════════════════════════════════════════════════════════════ */
.notas-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.notas-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: .4rem .8rem;
  flex-shrink: 0;
  border-bottom: 1px solid var(--bor);
}
.notas-bar .srch {
  width: 100%;
  padding: .4rem .6rem .4rem 26px;
  background: var(--bg1);
  border: 1px solid var(--bor);
  border-radius: 8px;
  color: var(--txt);
  font-size: .82rem;
  outline: none;
}
.notas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  padding: .8rem;
  overflow-y: auto;
  flex: 1;
  align-content: start;
}
.notas-grid.notas-compact {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
/* Vista LISTADO (filas) — alterna con .notas-compact (miniaturas) */
.notas-grid.notas-listview {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.notas-grid.notas-listview .nota-card {
  min-height: auto;
  padding: 8px 12px;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
}
.notas-grid.notas-listview .nota-card .nota-title { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.notas-grid.notas-listview .nota-card .nota-body { display:none; }
/* Grupos de lista en la vista de notas */
.lista-group { width:100%; padding:.4rem .8rem .2rem; }
.lista-group-title {
  display:flex; align-items:center; gap:6px;
  font-size:.72rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  color:var(--acc); padding:.4rem 0 .4rem;
  border-bottom:1px solid var(--bor); margin-bottom:.5rem;
}
/* El grid interno dentro de un grupo ocupa todo el ancho */
#notas-grid .lista-group .notas-grid { padding:0; overflow:visible; }
/* Cuando notas-grid contiene grupos, no es grid él mismo */
#notas-grid:has(.lista-group) { display:block; }
.nota-card {
  background: var(--bg1);
  border: 1px solid var(--bor);
  border-radius: 12px;
  padding: .75rem .85rem;
  cursor: pointer;
  transition: box-shadow .15s, transform .1s;
  overflow: hidden;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nota-card > div:first-child { flex-shrink: 0; min-height: 1.1em; }
.nota-card > div:nth-child(2) { flex: 1 1 auto; min-height: 0; }
.nota-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  transform: translateY(-1px);
}
.nc-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 4px;
  font-size: .68rem;
  color: var(--muted);
}
/* ── Quick Notes — inline area above search bar ────────────── */
.nota-rapida-area {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* hijos se estiran al ancho completo */
  width: 100%;
  box-sizing: border-box;
  padding: .4rem .6rem;
  gap: 4px;
  flex-shrink: 0;
}
.nr-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
#nr-content {
  background: var(--bg0, var(--bg));
  border: 1px solid var(--bor);
  border-radius: 8px;
  padding: 8px 10px 32px 10px;
  font-size: .85rem;
  color: var(--txt);
  outline: none;
  line-height: 1.5;
  min-height: 200px;
  max-height: 380px;
  overflow-y: auto;
  position: relative;
}
.nr-content-wrap { position: relative; }
.nr-content-wrap #nr-save-btn {
  position: absolute; bottom: 6px; right: 6px; z-index: 2;
  background: var(--acc); color: #fff; border: none; border-radius: 50%;
  width: 28px; height: 28px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.15); transition: transform .15s, opacity .15s;
  opacity: .7;
}
.nr-content-wrap #nr-save-btn:hover { opacity: 1; transform: scale(1.1); }
.nr-lock-overlay span {
  background: var(--acc); color: #fff;
  border-radius: 20px; padding: .3rem .9rem;
  font-size: .78rem; font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  pointer-events: auto;
}
.nr-wrap { position: relative; flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 8px; }

/* ── Nota personal inline en header de Notas ────────────────── */
.np-edit-btn {
  background: none; border: none;
  border-radius: 6px; padding: 3px 5px;
  color: var(--muted); cursor: pointer;
  display: flex; align-items: center;
  transition: color .15s; flex-shrink: 0;
  opacity: .6;
}
.np-edit-btn:hover { color: var(--acc); opacity: 1; }
.np-edit-btn svg { width: 13px; height: 13px; stroke-width: 2; }
/* Texto nota personal — inline, gris suave, solo lectura */
#np-content {
  font-size: .78rem; color: var(--muted);
  outline: none; cursor: default; user-select: text;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: .75;
  text-align: center;
}
#np-content:empty:before {
  content: attr(data-placeholder);
  color: var(--muted); pointer-events: none;
  font-style: italic; opacity: .5;
}
/* Topbar np wrap hover */
#topbar-np-wrap:hover #np-content:not(.editing) { opacity: 1; }
/* ya no cambiamos el fondo del wrap completo al hacer hover */
/* Modo edición: sin recuadro, solo cursor y color normal */
#np-content.editing {
  background: none;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--acc) 40%, transparent);
  border-radius: 0;
  padding: 0 2px;
  cursor: text;
  white-space: nowrap;
  overflow: visible;
  color: var(--txt);
  opacity: 1;
  min-width: 80px;
  box-shadow: none;
}
.nota-wysiwyg {
  min-height: 140px;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--bor);
  border-radius: 0 0 8px 8px;
  padding: 10px 12px;
  font-size: .9rem;
  color: var(--txt);
  background: var(--bg0);
  outline: none;
  line-height: 1.6;
}
/* ── Listas con sangría reducida en editores ── */
.nota-wysiwyg ul, .nota-wysiwyg ol,
#nota-sec-ed ul, #nota-sec-ed ol,
#gdocs-body ul, #gdocs-body ol,
.prod-ed-doc-page ul, .prod-ed-doc-page ol {
  padding-left: 1.4em;
  margin: .25em 0;
}
.nota-wysiwyg li, #nota-sec-ed li,
#gdocs-body li, .prod-ed-doc-page li {
  margin: .1em 0;
}
.nota-wysiwyg:focus {
  border-color: var(--acc);
}
/* Placeholder para el editor rich-text de Notas DO */
#crm-ap-orientacion:empty:before,
#crm-ap-orientacion[data-empty]:before{
  content:attr(data-ph);
  color:#bbb;
  pointer-events:none;
  font-style:italic;
}
.crm-ap-rt-toolbar button:hover,
.crm-ap-rt-toolbar label:hover{
  background:#e8e8e8;
}
/* Asegurar que los editores rich-text son editables en móvil:
   - user-select:text → permite selección de texto
   - touch-action:auto → permite interacciones táctiles nativas
   - -webkit-user-select:text → iOS Safari
   Sin estas reglas, algunos WebViews/navegadores móviles pueden tratar el
   contenteditable como un área "pasiva" y no mostrar el teclado virtual. */
.nota-wysiwyg,
#nota-sec-ed,
#nota-ed,
#f33-thought-editor,
#msg-ed,
.prod-ed-doc-page,
[contenteditable="true"]{
  -webkit-user-select:text;
  user-select:text;
  touch-action:auto;
  -webkit-touch-callout:default;
}
@media (max-width:640px){
  .nota-wysiwyg, #nota-sec-ed, #nota-ed, #f33-thought-editor, #msg-ed, .prod-ed-doc-page{
    font-size:16px; /* iOS no hace zoom al enfocar si es >=16px */
  }
}
.wytb {
  display: flex;
  gap: 2px;
  padding: 4px 6px;
  background: var(--bg1);
  border-radius: 8px 8px 0 0;
  border: 1px solid var(--bor);
  border-bottom: none;
  flex-wrap: wrap;
}
.wytb button {
  background: none;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--txt);
  font-size: .88rem;
  transition: background .12s;
}
.wytb button:hover {
  background: var(--bor);
}
.lista-chip {
  background: var(--bg1);
  border: 1px solid var(--bor);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: .72rem;
  color: var(--muted);
  cursor: pointer;
  transition: all .12s;
}
.lista-chip.on {
  background: var(--acc);
  color: #fff;
  border-color: var(--acc);
}
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: var(--muted);
  text-align: center;
  flex: 1;
}
.empty .big { font-size: 2.5rem; margin-bottom: .5rem; }
/* ─────────────────────────────────────────────────────────────── */


  .mback{background:none;border:none;color:var(--accent);font-size:1.3rem;cursor:pointer;padding:0 .5rem;opacity:.85;}
  .mback:hover{opacity:1;transform:translateX(-2px);}


/* ── AI Tutor NOVA (Phase 17) ── */
.nova-chat-wrap{display:flex;flex-direction:column;flex:1;overflow:hidden;padding:1rem;}
.nova-messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.75rem;padding-bottom:.5rem;}
.nova-bubble{max-width:78%;padding:.7rem 1rem;border-radius:16px;font-size:.93rem;line-height:1.5;animation:fadeUp .2s ease;}
.nova-bubble.user{background:var(--accent);color:#fff;align-self:flex-end;border-bottom-right-radius:4px;}
.nova-bubble.ai{background:var(--card);color:var(--text);align-self:flex-start;border-bottom-left-radius:4px;border:1px solid var(--border);}
.nova-bubble.typing{opacity:.6;font-style:italic;}
.nova-input-bar{display:flex;gap:.5rem;padding:.75rem;background:var(--bg2);border-top:1px solid var(--border);}
.nova-textarea{flex:1;background:var(--card);border:1px solid var(--border);border-radius:10px;color:var(--text);padding:.6rem .9rem;resize:none;font-size:.9rem;}
.nova-send-btn{width:44px;height:44px;border-radius:50%;font-size:1.1rem;flex-shrink:0;}
.tag-beta{background:var(--accent);color:#fff;border-radius:4px;font-size:.65rem;padding:2px 6px;vertical-align:middle;margin-left:4px;}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}


/* ── Listas Menu Dropdown ── */
.listas-menu{position:absolute;z-index:9500;background:var(--bg1,#16161e);
  border:1px solid var(--bor,rgba(255,255,255,.1));border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,.55);min-width:230px;max-width:320px;overflow:hidden;}
.lm-head{display:flex;align-items:center;justify-content:space-between;
  padding:.55rem 1rem;border-bottom:1px solid var(--bor,rgba(255,255,255,.1));}
.lm-list{list-style:none;margin:0;padding:.35rem 0;max-height:210px;overflow-y:auto;}
.lm-item{display:flex;align-items:center;padding:.3rem .75rem;gap:.4rem;}
.lm-item span{flex:1;cursor:pointer;font-size:.85rem;border-radius:7px;padding:.3rem .5rem;
  transition:background .15s;color:var(--txt,#e0e0e0);}
.lm-item span:hover{background:var(--bg2,rgba(255,255,255,.07));}
.lm-del{background:none;border:none;cursor:pointer;font-size:.82rem;opacity:.45;padding:.2rem .3rem;
  border-radius:5px;transition:opacity .15s;}
.lm-del:hover{opacity:1;background:rgba(255,80,80,.12);}
.lm-empty{padding:.55rem 1rem;font-size:.82rem;color:var(--muted,#888);font-style:italic;}
.lm-new{display:flex;gap:.5rem;padding:.5rem .75rem;border-top:1px solid var(--bor,rgba(255,255,255,.1));}

/* ===== FASE 18 - Admin Panel ============================= */
/* Botón admin en topbar */
#btn-admin-panel{display:none;align-items:center;gap:5px;background:linear-gradient(135deg,#1a1a2e,#16213e);color:#c9a84c;border:1px solid #c9a84c55;border-radius:10px;padding:6px 12px;font-size:.78rem;font-weight:600;cursor:pointer;letter-spacing:.5px;transition:all .25s;font-family:inherit}
#btn-admin-panel:hover{background:linear-gradient(135deg,#c9a84c,#f0d080);color:#1a1a2e;border-color:#c9a84c}
/* Monitor KPI cards */
.mon-kpi{background:var(--bg2);border:1px solid var(--bor);border-radius:10px;padding:10px 12px;text-align:center;transition:border-color .3s}
.mon-kpi.danger{border-color:#f44336;background:#f4433610}
.mon-kpi.warning{border-color:#ff9800;background:#ff980010}
.mon-kpi.good{border-color:#4caf50;background:#4caf5010}
.mon-kpi-val{font-size:1.5rem;font-weight:800;color:var(--txt);line-height:1.1;font-variant-numeric:tabular-nums}
.mon-kpi-lbl{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-top:3px}
.monitor-event{padding:3px 8px;border-radius:4px;line-height:1.4}
.monitor-event.critical{color:#f44336;background:#f4433618}
.monitor-event.high{color:#ff9800;background:#ff980018}
.monitor-event.medium{color:#ffd700;background:#ffd70018}
.monitor-event.low{color:#4caf50;background:#4caf5018}
.monitor-event.info{color:var(--muted)}
.monitor-alert-card{padding:10px 12px;border-radius:8px;border-left:3px solid #f44336;background:var(--bg1);font-size:.78rem}
.monitor-alert-card.high{border-left-color:#ff9800}
.monitor-alert-card.medium{border-left-color:#ffd700}
#sadm-panel-monitor{animation:fadeIn .2s ease}
@keyframes monitorPulse{0%{opacity:1}50%{opacity:.4}100%{opacity:1}}
.monitor-live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#4caf50;animation:monitorPulse 2s infinite}
/* Security panel checklist */
.sec-check-item{padding:5px 8px;font-size:.76rem;color:var(--txt);border-radius:4px;margin-bottom:2px;line-height:1.4}
.sec-check-item[data-status="ok"]{background:rgba(76,175,80,.06)}
.sec-check-item[data-status="warn"]{background:rgba(255,152,0,.07)}
.sec-check-item[data-status="fail"]{background:rgba(244,67,54,.08)}
/* Modal admin */
#m-admin.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:9200;align-items:center;justify-content:center;padding:16px}
#m-admin.modal-overlay.on{display:flex}
#m-admin .adm-box{background:#fff;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.35);width:100%;max-width:860px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
#m-admin .adm-head{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);color:#c9a84c;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
#m-admin .adm-head h2{margin:0;font-size:1.15rem;font-weight:700;letter-spacing:.8px}
#m-admin .adm-close{background:none;border:none;color:#c9a84c;font-size:1.4rem;cursor:pointer;padding:2px 8px;border-radius:6px;transition:background .2s}
#m-admin .adm-close:hover{background:rgba(201,168,76,.2)}
/* Tabs */
#m-admin .adm-tabs{display:flex;background:#f8f8fa;border-bottom:1px solid #e8e8ee;flex-shrink:0}
#m-admin .adm-tab{flex:1;padding:12px;font-size:.82rem;font-weight:600;text-align:center;cursor:pointer;color:#888;border-bottom:3px solid transparent;transition:all .2s;font-family:inherit;background:none;border-top:none;border-left:none;border-right:none}
#m-admin .adm-tab.active{color:#1a1a2e;border-bottom-color:#c9a84c}
#m-admin .adm-tab:hover:not(.active){color:#333;background:#f0f0f5}
/* Contenido */
#m-admin .adm-body{flex:1;overflow-y:auto;padding:20px}
#m-admin .adm-panel{display:none}
#m-admin .adm-panel.active{display:block}
/* Tabla usuarios */
.adm-table{width:100%;border-collapse:collapse;font-size:.82rem}
.adm-table th{background:#1a1a2e;color:#c9a84c;padding:10px 12px;text-align:left;font-weight:600;letter-spacing:.4px}
.adm-table td{padding:9px 12px;border-bottom:1px solid #f0f0f5;vertical-align:middle}
.adm-table tr:hover td{background:#fafafa}
.adm-badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:.72rem;font-weight:600}
.adm-badge.admin{background:#fff3cd;color:#856404}
.adm-badge.superadmin{background:#f3e5f5;color:#6a1b9a}
.adm-badge.moderator{background:#e3f2fd;color:#1565c0}
.adm-badge.user{background:#e8f5e9;color:#2e7d32}
.adm-badge.standard_user{background:#e8f5e9;color:#2e7d32}
.adm-badge.activo{background:#e8f5e9;color:#2e7d32}
.adm-badge.suspendido{background:#fde8e8;color:#c62828}
.adm-badge.role-chip{background:#e8eaf6;color:#3949ab;font-size:.68rem}
.adm-badge.plan-free{background:#f5f5f5;color:#757575}
.adm-badge.plan-premium{background:#fff8e1;color:#f57f17}
.adm-badge.plan-pro{background:#e8f5e9;color:#2e7d32}
.adm-badge.plan-organization{background:#e3f2fd;color:#0d47a1}
.adm-role-section{padding:8px 0}
.adm-role-label{display:block;font-size:.78rem;font-weight:600;color:#555;margin-bottom:4px}
.adm-select{padding:5px 8px;border:1px solid #ddd;border-radius:6px;font-size:.82rem;min-width:160px;background:#fff}
.adm-date-input{padding:5px 8px;border:1px solid #ddd;border-radius:6px;font-size:.82rem;background:#fff}
.adm-btn-sm{padding:4px 10px;border-radius:8px;border:1px solid #ddd;font-size:.72rem;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit;background:#fff}
.adm-btn-sm.danger{border-color:#e55;color:#e55}.adm-btn-sm.danger:hover{background:#fde8e8}
.adm-btn-sm.success{border-color:#2e7d32;color:#2e7d32}.adm-btn-sm.success:hover{background:#e8f5e9}
.adm-btn-sm.gold{border-color:#c9a84c;color:#856404}.adm-btn-sm.gold:hover{background:#fff3cd}
/* Logs */
.adm-log-item{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid #f0f0f5;font-size:.79rem}
.adm-log-time{color:#999;white-space:nowrap;font-size:.72rem;min-width:130px}
.adm-log-msg{flex:1;color:#333}
.adm-log-type{font-size:.7rem;padding:1px 6px;border-radius:10px;background:#e8f5e9;color:#2e7d32;align-self:flex-start;white-space:nowrap}
.adm-log-type.error{background:#fde8e8;color:#c62828}
.adm-log-type.warn{background:#fff3cd;color:#856404}
/* Sistema */
.adm-sys-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid #f0f0f5}
.adm-sys-row:last-child{border-bottom:none}
.adm-sys-label{font-weight:600;font-size:.85rem;color:#333}
.adm-sys-desc{font-size:.76rem;color:#888;margin-top:2px}
.adm-toggle{position:relative;width:44px;height:24px;flex-shrink:0}
.adm-toggle input{opacity:0;width:0;height:0}
.adm-toggle .slider{position:absolute;inset:0;background:#ccc;border-radius:24px;transition:.3s;cursor:pointer}
.adm-toggle .slider:before{position:absolute;content:"";width:18px;height:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s}
.adm-toggle input:checked+.slider{background:#c9a84c}
.adm-toggle input:checked+.slider:before{transform:translateX(20px)}
.adm-number-input{width:90px;padding:6px 10px;border:1px solid #ddd;border-radius:8px;font-size:.83rem;font-family:inherit;text-align:center}
.adm-save-btn{background:linear-gradient(135deg,#1a1a2e,#16213e);color:#c9a84c;border:1px solid #c9a84c55;border-radius:10px;padding:10px 24px;font-weight:600;font-size:.85rem;cursor:pointer;letter-spacing:.4px;font-family:inherit;transition:all .25s;margin-top:16px}
.adm-save-btn:hover{background:linear-gradient(135deg,#c9a84c,#f0d080);color:#1a1a2e}
.adm-empty{text-align:center;color:#bbb;padding:40px;font-size:.85rem}
/* ===== FIN FASE 18 ======================================== */

/* ===== FASE 41 - Navegación y UI Estructural ===== */
/* Selector de modos en topbar */
.f41-mode-btn {
  display:flex; align-items:center; gap:4px;
  background:none; border:none; cursor:pointer;
  color:var(--lm-muted,#999); font-size:.7rem; font-family:var(--lm-font,inherit);
  padding:.28rem .55rem; border-radius:20px; transition:all .2s;
  font-weight:500; letter-spacing:.2px;
}
.f41-mode-btn span { display:none; }
@media(min-width:400px){ .f41-mode-btn span { display:inline; } }
.f41-mode-btn svg { flex-shrink:0; }
.f41-mode-btn:hover { background:var(--lm-gray2,#f0f0f0); color:var(--lm-text,#333); }
.f41-mode-btn.active {
  background:var(--lm-accent,#7BA7D4); color:#fff;
  box-shadow:0 2px 8px rgba(123,167,212,.35);
}
/* Botón de modo dinámico en bnav (igual a bnav-btn) */
#f41-dyn-btn { flex-shrink:0; }
/* Centro vacío del bnav */
.bnav-center-space { flex:1; }
/* Menú desplegable de Listados */
.f41-listados-btn {
  font-size:.75rem; padding:.28rem .65rem; border-radius:8px;
  background:var(--bg1,#f7f7f7); border:1px solid var(--bor,#e0e0e0);
  color:var(--txt,#333); cursor:pointer; transition:all .2s;
}
.f41-listados-btn:hover { background:var(--lm-gray2,#eee); }
.f41-listados-dropdown {
  position:absolute; top:calc(100% + 6px); left:0; z-index:4000;
  background:var(--panel,#fff); border:1px solid var(--bor,#e0e0e0);
  border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,.15);
  min-width:200px; overflow:hidden;
  animation:f41-drop-in .15s ease;
}
@keyframes f41-drop-in { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.f41-lista-item {
  display:flex; align-items:center; gap:8px;
  padding:.6rem 1rem; font-size:.82rem; color:var(--txt,#333);
  cursor:pointer; transition:background .15s;
}
.f41-lista-item:hover { background:var(--lm-gray2,#f5f5f5); }
.f41-lista-crear {
  border-bottom:1px solid var(--bor,#eee);
  font-weight:600; color:var(--lm-accent,#7BA7D4);
}
.f41-lista-crear:hover { background:rgba(123,167,212,.08); }
/* Nombre de contacto en topbar al abrir chat */
#top-contact-name { transition:opacity .2s; }
/* ===== FIN FASE 41 ===== */

/* ===== FASE 42: Panels dropdown + bottom nav 4 btns ===== */
@keyframes f42DropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
/* #137 — Dropdown Paneles con fondo gris claro fijo (se distingue del resto de la app tanto en modo claro como oscuro) */
.f42-panels-skin{background:#f2f3f5!important;border-color:#d8dbe0!important}
.f42-panels-skin button{color:#1c1f26!important}
.f42-panels-skin button:hover{background:#e6e8ed!important}
.f42-panels-skin>div[style*="height:1px"]{background:#d8dbe0!important}
#f42-panels-dropdown button:hover{background:var(--hover,rgba(255,255,255,.06))}
#f42-panels-wrap{display:flex;align-items:center}
/* Bottom nav 4 btns – equal width */
.bnav{display:flex;align-items:center;justify-content:space-around}
.bnav-btn{flex:1;max-width:88px}
/* Fix nc-del visibility on mobile */
.nota-card .nc-del{opacity:1!important;display:inline-flex!important;visibility:visible!important;pointer-events:auto!important}
.nota-card{cursor:pointer;-webkit-tap-highlight-color:transparent}
/* profile-menu mode buttons */
#pm-btn-estudio.active,#pm-btn-produccion.active,#pm-btn-mixto.active{background:var(--acc);color:#fff}
/* profile-menu scroll on mobile */
#profile-menu{max-height:calc(100vh - 64px)}
/* ══ Dashboard ═════════════════════════════════════════════════════ */
#s-dashboard{padding:0 !important;overflow:hidden !important}
#s-dashboard > div{padding:14px 20px 16px !important;max-width:none !important;width:100%;box-sizing:border-box;height:100%;display:flex;flex-direction:column;gap:10px;overflow:hidden}
#s-dashboard > div > div:first-child{margin-bottom:6px !important}
#s-dashboard > div > div:first-child > div:first-child > div:first-child{font-size:1.05rem !important}
#s-dashboard > div > div:first-child > div:first-child > div:nth-child(2){font-size:.7rem !important;margin-top:0 !important}
#s-dashboard > div > div:nth-child(2){margin-bottom:2px !important;gap:10px !important;grid-template-columns:repeat(auto-fit,minmax(130px,1fr)) !important}
#s-dashboard .dash-counter-card{padding:10px 14px !important;border-radius:10px !important;gap:2px !important;background:var(--panel);border:1px solid var(--bor)}
#s-dashboard .dash-counter-n{font-size:1.35rem !important;font-weight:800}
#s-dashboard .dash-counter-lbl{font-size:.6rem !important;letter-spacing:.06em}
#s-dashboard > div > div:nth-child(3){
  flex:1;
  overflow:hidden;
  min-height:0;
  /* Distribuir por todo el ancho — 4 cols desktop, 2 tablet, 1 móvil */
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important;
  gap:10px !important;
  align-content:stretch;
  grid-auto-rows:minmax(160px, 1fr);
}
@media(min-width:1400px){
  #s-dashboard > div > div:nth-child(3){
    grid-template-columns:repeat(4, 1fr) !important;
  }
}
@media(min-width:1100px) and (max-width:1399px){
  #s-dashboard > div > div:nth-child(3){
    grid-template-columns:repeat(3, 1fr) !important;
  }
}
#s-dashboard .dash-card{
  background:var(--panel);
  border:1px solid var(--bor);
  border-radius:12px;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:0;
  overflow:hidden;
  transition:border-color .15s, box-shadow .15s;
}
#s-dashboard .dash-card:hover{
  border-color:color-mix(in srgb, var(--acc) 35%, var(--bor));
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}
#s-dashboard .dash-card-h{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.72rem;
  font-weight:700;
  color:var(--txt);
  text-transform:uppercase;
  letter-spacing:.04em;
  padding-bottom:7px;
  border-bottom:1px solid var(--bor);
  flex-shrink:0;
}
#s-dashboard .dash-card-b{overflow-y:auto;min-height:0}
#s-dashboard .dash-ico{font-size:1rem}
#s-dashboard .dash-count{
  margin-left:auto;
  background:var(--acc);
  color:#fff;
  font-size:.68rem;
  padding:2px 8px;
  border-radius:10px;
  font-weight:800;
  min-width:24px;
  text-align:center;
}
#s-dashboard .dash-card-b{display:flex;flex-direction:column;gap:6px;font-size:.78rem}
#s-dashboard .dash-ph{color:var(--muted);font-size:.72rem;font-style:italic;padding:6px 0}
#s-dashboard .dash-row{
  display:flex;
  align-items:center;
  gap:6px;
  padding:3px 2px;
  border-radius:5px;
  cursor:pointer;
  transition:background .12s;
  font-size:.72rem;
  line-height:1.25;
}
#s-dashboard .dash-row:hover{background:var(--bg2)}
#s-dashboard .dash-row-ico{font-size:.9rem;flex-shrink:0}
#s-dashboard .dash-row-title{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.72rem;
  color:var(--txt);
}
#s-dashboard .dash-row-sub{font-size:.66rem;color:var(--muted);flex-shrink:0}
#s-dashboard .dash-counter-card{
  background:var(--panel);
  border:1px solid var(--bor);
  border-radius:10px;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
#s-dashboard .dash-counter-n{font-size:1.6rem;font-weight:800;color:var(--acc);line-height:1}
#s-dashboard .dash-counter-lbl{font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
/* Home/Agenda compacta — todo debe caber sin scroll */
#s-agenda #agenda-content{
  padding:10px 14px !important;
  overflow-y:auto;
}
#s-agenda #agenda-content > div:first-child{
  padding:4px 0 0 !important;
}
#s-agenda #agenda-content > div:first-child > div:first-child{
  font-size:1rem !important;
  margin:0 !important;
}
#s-agenda #agenda-content > div:first-child > div:nth-child(2){
  font-size:.72rem !important;
  margin-top:1px !important;
}
/* Counters más compactos */
#s-agenda #agenda-content > div:nth-child(2){
  padding:8px 0 !important;
  gap:6px !important;
}
#s-agenda #agenda-content > div:nth-child(2) > div{
  padding:6px 6px !important;
  border-radius:9px !important;
}
#s-agenda #agenda-content > div:nth-child(2) > div > div:nth-child(1){
  font-size:1.05rem !important;
}
#s-agenda #agenda-content > div:nth-child(2) > div > div:nth-child(2){
  font-size:.95rem !important;
  margin:2px 0 !important;
}
#s-agenda #agenda-content > div:nth-child(2) > div > div:nth-child(3){
  font-size:.6rem !important;
}
/* Secciones interiores: reducir huecos */
#s-agenda #agenda-content h3,
#s-agenda #agenda-content h2{
  font-size:.82rem !important;
  margin:8px 0 6px !important;
  font-weight:700;
}
#s-agenda #agenda-content ul,
#s-agenda #agenda-content ol{
  margin:0 !important;
  padding-left:18px !important;
}
#s-agenda #agenda-content li{
  font-size:.76rem !important;
  line-height:1.35 !important;
  margin:2px 0 !important;
}
@media(min-width:960px){
  /* En escritorio ancho: organizar en 2 columnas */
  #s-agenda #agenda-content{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-auto-rows:min-content;
    column-gap:14px;
    row-gap:8px;
  }
  #s-agenda #agenda-content > div:first-child{ grid-column:1/-1 }
  #s-agenda #agenda-content > div:nth-child(2){ grid-column:1/-1 }
}
/* Ocultar botón Instalar del topbar (redundante con el del menú usuario) */
#btn-install-topbar{display:none !important}


/* Menú de usuario: fondo gris muy claro forzado (diferenciar del fondo app).
   Redefinimos las vars locales para que botones/textos con var(--txt) sean
   oscuros y legibles sobre el gris claro, también en modo oscuro. */
.profile-menu-skin{
  --panel:#f5f7fa !important;
  --bg:#f5f7fa !important;
  --txt:#1f2328 !important;
  --muted:#6b7280 !important;
  --bor:#d8dbe0 !important;
  --acc:#3273dc !important;
  background:#f5f7fa !important;
  color:#1f2328 !important;
}
.profile-menu-skin button,
.profile-menu-skin button *{color:inherit}
.profile-menu-skin button:hover{background:rgba(0,0,0,.04)}
.profile-menu-skin .f34-streak-fire{filter:none}
.profile-menu-skin input,
.profile-menu-skin label{color:inherit}
/* Scroll reforzado por si algún estilo inline lo pisa en ventanas bajas */
.profile-menu-skin{
  overflow-y:auto !important;
  overscroll-behavior:contain;
  max-height:min(calc(100vh - 64px), calc(100dvh - 64px)) !important;
  /* Ancho controlado: que no crezca si algún contenido tira de más */
  width:240px !important;
  max-width:calc(100vw - 16px) !important;
  min-width:220px !important;
}
/* Ajustes para que los textos largos no fuercen el ancho y se recorten con ellipsis */
.profile-menu-skin button > span,
.profile-menu-skin button{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.profile-menu-skin button{white-space:normal}
.profile-menu-skin #pm-teo-section > div,
.profile-menu-skin #pm-plan-row{min-width:0}
@supports (height:100dvh){#profile-menu{max-height:calc(100dvh - 64px)}}
/* En móvil: fijamos el menú entre top:calc(52px+safe-top+4px) y bottom:8px para
   garantizar que el contenido sobrante se pueda desplazar. !important para
   ganar al inline style. Usamos position:fixed (anclaje al viewport) para
   evitar que el menú se "vaya hacia arriba" en PWA con safe-area o transforms
   en ancestros. */
/* (#190) max-height del menú avatar debe restar la altura del bnav + safe-area
   inferior, sino el último botón "Cerrar sesión" queda detrás de la barra fija. */
@media (max-width:640px){
  #profile-menu{
    position:fixed!important;
    right:calc(8px + var(--safe-right,0px))!important;
    left:calc(8px + var(--safe-left,0px))!important;
    top:calc(52px + var(--safe-top,0px) + 4px)!important;
    min-width:0!important;
    max-width:none!important;
    width:auto!important;
    /* viewport - topbar(52) - top-offset(4) - bnav(60) - safe-top - safe-bottom - aire(12) */
    max-height:calc(100vh - 56px - var(--bnav,60px) - var(--safe-top,0px) - env(safe-area-inset-bottom,0px) - 16px)!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    padding-bottom:calc(var(--bnav,60px) + env(safe-area-inset-bottom,0px) + 8px)!important;
  }
}
@supports (height:100dvh){
  @media (max-width:640px){
    #profile-menu{
      max-height:calc(100dvh - 56px - var(--bnav,60px) - var(--safe-top,0px) - env(safe-area-inset-bottom,0px) - 16px)!important;
    }
  }
}
/* También aplicamos un margen inferior aire a la lista de items dentro del menú,
   para que ningún botón quede pegado al borde inferior interno. */
#profile-menu .pm-section:last-child,
#profile-menu > div:last-child,
#profile-menu [data-umenu]:last-child{
  margin-bottom:8px;
}
/* (#190 v2) Menú avatar SIEMPRE más corto que el viewport, en todas las
   resoluciones, y dejando hueco inferior para la bnav o cualquier overlay
   fijo. Forzamos !important para sobreescribir el inline style del
   #profile-menu (que tiene max-height calculada sin el bnav). */
#profile-menu{
  max-height:min(560px, calc(100dvh - 88px - var(--bnav,60px) - env(safe-area-inset-bottom,0px))) !important;
  overflow-y:auto !important;
  padding-bottom:14px !important;
  -webkit-overflow-scrolling:touch !important;
}
/* Garantizar aire bajo el último ítem para que no quede pegado al borde
   inferior del menú o tapado por sombras. */
#profile-menu > *:last-child{ margin-bottom:6px !important; }
/* ===== FIN FASE 42 ===== */

/* ===== FASE 33: Chat UI + Thought + Premium + Minimalist ===== */
/* Chat burbujas mejoradas */
.msg-bubble{border-radius:16px;padding:8px 12px;max-width:78%;word-break:break-word;line-height:1.55;font-size:.88rem;position:relative}
.msg-bubble.mine{background:var(--acc);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.msg-bubble.theirs{background:var(--panel);color:var(--txt);border-bottom-left-radius:4px;align-self:flex-start;border:1px solid var(--bor)}
.msg-time{font-size:.65rem;opacity:.6;margin-top:3px;text-align:right}
/* (#115) Regla obsoleta — la definición real está en línea ~1843 (flex-direction:row + row-reverse para 'me'). Esta sobreescritura rompía el layout del chat haciendo que todos los mensajes acabaran en columna y el browser los alineara a la derecha por defecto. */ /* .msg-row{display:flex;flex-direction:column;gap:2px;margin-bottom:6px} */
/* Chat input mejorado */
.chat-inp{padding:8px 12px;border-top:1px solid var(--bor);background:var(--bg);display:flex;align-items:flex-end;gap:8px}
.ci-wrap{flex:1;background:var(--panel);border:1px solid var(--bor);border-radius:20px;padding:8px 14px;min-height:38px;max-height:120px;overflow-y:auto}
#msg-ed{outline:none;font-size:.9rem;line-height:1.5;color:var(--txt);min-height:22px}
#msg-ed:empty:before{content:attr(data-ph);color:var(--muted);pointer-events:none}
.btn-send{background:var(--acc);color:#fff;border:none;border-radius:50%;width:38px;height:38px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1rem;transition:transform .1s}
.btn-send:active{transform:scale(.92)}
/* ── Sistema de referencias tipo Slack ──────────────────── */
/* Panel flotante de referencias */
#chat-ref-panel{position:absolute;bottom:calc(100% + 4px);left:8px;right:8px;background:var(--bg2);border:1.5px solid var(--bor);border-radius:14px;box-shadow:0 6px 28px rgba(0,0,0,.18);z-index:999;max-height:280px;overflow:hidden;display:none;flex-direction:column}
#chat-ref-panel.open{display:flex}
.crp-header{padding:8px 14px 4px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--bor);flex-shrink:0}
.crp-header-icon{width:22px;height:22px;border-radius:6px;background:var(--acc);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.crp-header-icon svg{width:12px;height:12px;stroke:#fff;fill:none}
.crp-title{font-size:.78rem;font-weight:600;color:var(--txt);flex:1}
.crp-close{background:none;border:none;cursor:pointer;color:var(--muted);font-size:.9rem;padding:2px 6px;border-radius:5px;line-height:1}
.crp-close:hover{background:var(--bor)}
.crp-search{padding:6px 10px;flex-shrink:0}
.crp-search input{width:100%;background:var(--bg1,var(--bg));border:1px solid var(--bor);border-radius:8px;padding:5px 10px;font-size:.82rem;color:var(--txt);outline:none}
.crp-search input:focus{border-color:var(--acc)}
.crp-tabs{display:flex;gap:0;border-bottom:1px solid var(--bor);padding:0 8px;flex-shrink:0}
.crp-tab{background:none;border:none;border-bottom:2px solid transparent;padding:5px 10px;font-size:.75rem;color:var(--muted);cursor:pointer;font-weight:500;transition:color .12s,border-color .12s}
.crp-tab.on{color:var(--acc);border-bottom-color:var(--acc)}
.crp-tab:hover{color:var(--txt)}
.crp-list{overflow-y:auto;flex:1;padding:4px 0}
.crp-item{display:flex;align-items:flex-start;gap:10px;padding:7px 14px;cursor:pointer;transition:background .1s;border-radius:0}
.crp-item:hover,.crp-item.focused{background:var(--bor)}
.crp-item-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.85rem}
.crp-item-icon svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
.crp-item-body{flex:1;min-width:0}
.crp-item-title{font-size:.82rem;font-weight:500;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crp-item-sub{font-size:.7rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.crp-empty{text-align:center;color:var(--muted);font-size:.8rem;padding:20px 10px}
/* Chips de referencia dentro del msg-ed */
.ref-chip{display:inline-flex;align-items:center;gap:4px;background:rgba(var(--acc-rgb,88,101,242),.12);border:1px solid rgba(var(--acc-rgb,88,101,242),.3);color:var(--acc);border-radius:6px;padding:1px 7px 1px 5px;font-size:.78rem;font-weight:500;cursor:default;white-space:nowrap;vertical-align:middle;margin:1px 2px;user-select:none;line-height:1.6}
.ref-chip svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0}
.ref-chip .ref-chip-del{width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;margin-left:3px;cursor:pointer;opacity:.6;font-size:.7rem;line-height:1}
.ref-chip .ref-chip-del:hover{opacity:1;background:rgba(0,0,0,.1)}
/* Referencias renderizadas en mensajes recibidos/enviados */
.msg-ref-card{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.04);border:1px solid var(--bor);border-left:3px solid var(--acc);border-radius:8px;padding:6px 10px;margin:4px 0;cursor:pointer;transition:background .12s;font-size:.78rem}
.msg-ref-card:hover{background:rgba(0,0,0,.08)}
.msg-ref-card-icon{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.msg-ref-card-icon svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2}
.msg-ref-card-body{flex:1;min-width:0}
.msg-ref-card-title{font-weight:600;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.8rem}
.msg-ref-card-sub{color:var(--muted);font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Mention chip @usuario */
.mention-chip{color:var(--acc);font-weight:600;cursor:pointer}
.mention-chip:hover{text-decoration:underline}
/* Botón ref en el input — se inyecta via chat_fix2.js con clase cfix2-btn */
#ci-ref-btn{color:var(--acc,#5865f2) !important}
#ci-ref-btn:hover{color:var(--acc) !important;background:rgba(88,101,242,.12) !important}
#ci-ref-btn svg{width:17px !important;height:17px !important;stroke:currentColor !important;fill:none !important;stroke-width:2 !important}
/* Thought panel */
#f33-thought-editor:empty:before{content:attr(data-ph);color:var(--muted);pointer-events:none}
.f33-thought-item{background:var(--panel);border:1px solid var(--bor);border-radius:10px;padding:10px 14px;font-size:.85rem;line-height:1.6;color:var(--txt);position:relative}
.f33-thought-item.pinned{border-color:#f59e0b;background:linear-gradient(135deg,rgba(245,158,11,.06),transparent);padding-top:22px !important}
.f33-thought-item.pinned::before{content:'📌 Fijado';position:absolute;top:6px;left:10px;font-size:.58rem;font-weight:700;color:#d97706;background:rgba(245,158,11,.15);padding:2px 8px;border-radius:8px;letter-spacing:.04em;text-transform:uppercase;line-height:1}
.f33-thought-meta{font-size:.65rem;color:var(--muted);margin-top:4px;text-align:right;padding-right:4px}
.f33-thought-del{position:absolute;top:8px;right:8px;background:none;border:none;color:var(--muted);cursor:pointer;font-size:.8rem;opacity:.6}
.f33-thought-del:hover{opacity:1;color:#ef5350}
/* Premium badge */
.f33-premium-badge{display:inline-flex;align-items:center;gap:3px;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border-radius:6px;padding:1px 6px;font-size:.62rem;font-weight:700;letter-spacing:.3px;vertical-align:middle}
.f33-lock-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);border-radius:inherit;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;z-index:10;backdrop-filter:blur(3px)}
.f33-lock-overlay span{color:#fff;font-size:.82rem;font-weight:600}
/* Section transitions */
/* secciones: visibilidad gestionada por showSec() */
/* Minimal scrollbar */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(160,160,160,.08);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(160,160,160,.28)}
/* Firefox */
*{scrollbar-width:thin;scrollbar-color:rgba(160,160,160,.12) transparent}
/* Chat topbar (inside chat-view) */
.chat-topbar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--bor);background:var(--bg);min-height:52px}
/* ===== FIN FASE 33 ===== */

/* f25-cal-section */
#s-estudio { flex-direction:column; height:100%; overflow:hidden; }
#s-estudio.on { display:flex; }
#cal-wrap { height:100%; }


/* ═════════════════════════════════════════
   FASE 34 – Dashboard Actividad & Progreso
   ═════════════════════════════════════════ */

/* Widget racha en perfil-menu */
#pm-streak-bar {
  padding:10px 16px 8px;
  border-bottom:1px solid var(--bor);
}
.f34-streak-row {
  display:flex; align-items:center; gap:8px; margin-bottom:6px;
}
.f34-streak-fire {
  font-size:1.4rem; line-height:1; flex-shrink:0;
}
.f34-streak-info { flex:1; min-width:0; }
.f34-streak-num {
  font-size:1.1rem; font-weight:800; color:var(--acc); line-height:1;
}
.f34-streak-lbl { font-size:.62rem; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }

/* Barra XP */
.f34-xp-bar-wrap {
  display:flex; align-items:center; gap:6px;
}
.f34-xp-track {
  flex:1; height:5px; border-radius:3px;
  background:rgba(255,255,255,.1); overflow:hidden;
}
.f34-xp-fill {
  height:100%; border-radius:3px;
  background:linear-gradient(90deg,var(--acc),#a78bfa);
  transition:width .6s ease;
}
.f34-xp-lbl { font-size:.62rem; color:var(--muted); white-space:nowrap; }

/* Días de actividad (mini heatmap 7 días) */
.f34-days-row {
  display:flex; gap:3px; margin-top:6px;
}
.f34-day-dot {
  width:20px; height:20px; border-radius:4px;
  background:rgba(255,255,255,.07); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.55rem; color:var(--muted);
  position:relative;
}
.f34-day-dot.active   { background:rgba(var(--acc-rgb,99,102,241),.35); color:var(--acc); }
.f34-day-dot.today    { background:var(--acc)!important; color:#fff!important; font-weight:700; }
.f34-day-dot.streak   { background:rgba(251,146,60,.4); color:#fb923c; }

/* Badge chips en perfil */
.f34-badges-row {
  display:flex; gap:4px; flex-wrap:wrap; padding:6px 16px 8px;
  border-bottom:1px solid var(--bor);
}
.f34-badge {
  font-size:.68rem; padding:3px 8px; border-radius:10px;
  background:rgba(255,255,255,.06); border:1px solid var(--bor);
  color:var(--muted); display:inline-flex; align-items:center; gap:3px;
  transition:all .18s; cursor:default;
}
.f34-badge.earned { color:var(--txt); background:rgba(var(--acc-rgb,99,102,241),.15); border-color:var(--acc); }
.f34-badge.gold   { color:#fbbf24; background:rgba(251,191,36,.12); border-color:rgba(251,191,36,.4); }

/* Panel de progreso en s-inspire (reutilizamos para stats globales) */
#f34-progress-panel {
  padding:16px;
}
.f34-stat-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px;
}
.f34-stat-card {
  background:var(--panel); border:1px solid var(--bor); border-radius:12px;
  padding:14px; text-align:center; position:relative; overflow:hidden;
}
.f34-stat-card::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(var(--acc-rgb,99,102,241),.06),transparent);
}
.f34-stat-big   { font-size:1.6rem; font-weight:800; color:var(--acc); }
.f34-stat-title { font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-top:2px; }

/* Heatmap anual de actividad */
.f34-heatmap-wrap { overflow-x:auto; padding-bottom:6px; }
.f34-heatmap {
  display:flex; gap:2px;
  scrollbar-width:thin;
}
.f34-heatmap-col { display:flex; flex-direction:column; gap:2px; }
.f34-heatmap-cell {
  width:10px; height:10px; border-radius:2px;
  background:rgba(255,255,255,.05);
}
.f34-heatmap-cell.l1 { background:rgba(var(--acc-rgb,99,102,241),.2); }
.f34-heatmap-cell.l2 { background:rgba(var(--acc-rgb,99,102,241),.45); }
.f34-heatmap-cell.l3 { background:rgba(var(--acc-rgb,99,102,241),.7); }
.f34-heatmap-cell.l4 { background:var(--acc); }


/* ═══ MODAL NOTA — Editor limpio ════════════════════════════ */
/* Anular estilos heredados de .nota-wysiwyg dentro del nuevo modal */
#m-nota #nota-ed {
  min-height:0 !important; max-height:none !important;
  border:none !important; border-radius:0 !important;
  background:transparent !important;
  padding:.2rem 1.1rem .5rem !important;
  font-size:.93rem !important; line-height:1.7 !important;
  flex:1; overflow-y:auto; outline:none; color:var(--txt);
}
#m-nota #nota-ed:empty::before {
  content:attr(data-ph); color:var(--muted); opacity:.4; pointer-events:none;
}
#m-nota .modal {
  max-width:780px; width:100%; height:90vh; max-height:90vh;
  display:flex; flex-direction:column; border-radius:18px;
  overflow:hidden; padding:0; box-sizing:border-box;
}
#m-nota .nota-topbar {
  display:flex; align-items:center; gap:6px;
  padding:10px 14px 6px; flex-shrink:0;
  border-bottom:1px solid var(--bor);
}
#m-nota .nota-topbar .nota-lista-inp {
  flex:1; background:none; border:none; outline:none;
  font-size:.8rem; color:var(--muted); padding:4px 8px;
  border-radius:20px; transition:background .15s;
}
#m-nota .nota-topbar .nota-lista-inp:focus {
  background:var(--bg2); color:var(--txt);
}
#m-nota .nota-topbar .nota-lista-inp::placeholder { color:var(--muted); opacity:.6; }
#nota-tit-inline {
  display:block; width:100%; background:none; border:none; outline:none;
  font-size:1.3rem; font-weight:700; color:var(--txt);
  padding:.65rem 1.1rem .25rem; line-height:1.3;
  resize:none; font-family:inherit; box-sizing:border-box;
  flex-shrink:0;
}
#nota-tit-inline::placeholder { color:var(--muted); opacity:.45; }
#nota-ed-wrap {
  flex:1; overflow-y:auto; min-height:0;
  background:var(--bg2); display:flex; justify-content:center;
  padding:16px 12px;
  /* Fix Chrome rendering artifact */
  -webkit-overflow-scrolling:touch;
  will-change:scroll-position;
}
#nota-ed {
  width:100%; max-width:210mm; min-height:calc(297mm);
  background:var(--bg1); box-shadow:0 1px 8px rgba(0,0,0,.15);
  padding:20mm 18mm; /* Standard A4 margins */
  outline:none; font-size:.93rem; line-height:1.75; color:var(--txt);
  box-sizing:border-box; border-radius:3px;
  border:1px solid var(--bor);
  /* Force block-formatting in Chrome */
  display:block; word-break:break-word;
}
#nota-ed[data-page="letter"] { max-width:216mm; min-height:279mm; padding:25.4mm 25.4mm; }
#nota-ed[data-page="legal"]  { max-width:216mm; min-height:356mm; padding:25.4mm 25.4mm; }
#nota-ed[data-page="free"]   { max-width:100%; min-height:200px; padding:.5rem 1.1rem; box-shadow:none; background:transparent; }
@media(max-width:600px) {
  #nota-ed-wrap { padding:8px 4px; }
  #nota-ed { padding:15mm 12mm; min-height:auto; }
}
#nota-ed:empty::before, [contenteditable][data-ph]:empty::before {
  content:attr(data-ph); color:var(--muted); opacity:.4; pointer-events:none;
}
/* Barra wysiwyg — estilos base compartidos (modal y vista de sección) */
.nota-wytb-bottom {
  display:flex; align-items:center; gap:2px;
  padding:6px 10px; border-top:1px solid var(--bor);
  background:var(--bg1); flex-shrink:0; flex-wrap:wrap;
  position:relative;
}
.nota-wytb-bottom button {
  background:none; border:none; cursor:pointer;
  padding:5px 9px; border-radius:7px;
  font-size:.85rem; color:var(--muted);
  transition:background .12s, color .12s; line-height:1;
}
.nota-wytb-bottom button:hover { background:var(--bg2); color:var(--txt); }
.nota-wytb-bottom select { background:var(--bg1); border:1px solid var(--bor); border-radius:5px; color:var(--muted); cursor:pointer; }
.nota-wytb-bottom select:hover { background:var(--bg2); color:var(--txt); }
.nota-wytb-bottom .wytb-sep { width:1px; height:18px; background:var(--bor); margin:0 3px; }
/* Barra wysiwyg compacta pegada al fondo (modal override) */
#m-nota .nota-wytb-bottom {
  display:flex; align-items:center; gap:2px;
  padding:6px 10px; border-top:1px solid var(--bor);
  background:var(--bg1); flex-shrink:0; flex-wrap:wrap;
}
#m-nota .nota-wytb-bottom button {
  background:none; border:none; cursor:pointer;
  padding:5px 9px; border-radius:7px;
  font-size:.85rem; color:var(--muted);
  transition:background .12s, color .12s; line-height:1;
}
#m-nota .nota-wytb-bottom button:hover { background:var(--bg2); color:var(--txt); }
#m-nota .nota-wytb-bottom select:hover { background:var(--bg2); color:var(--txt); }
#m-nota .nota-wytb-bottom .wytb-sep { width:1px; height:18px; background:var(--bor); margin:0 3px; }
#nota-ed table { border-collapse:collapse; width:100%; margin:8px 0; }
#nota-ed td, #nota-ed th { border:1px solid var(--bor); padding:6px 8px; font-size:.82rem; min-width:40px; }
#nota-ed th { background:var(--bg1); font-weight:600; }
#nota-ed blockquote { border-left:3px solid var(--acc); padding-left:12px; color:var(--muted); margin:8px 0; }
#nota-ed pre { background:var(--bg1); padding:10px; border-radius:6px; font-family:monospace; font-size:.8rem; overflow-x:auto; }
#nota-ed img { max-width:100%; border-radius:6px; margin:4px 0; }
#nota-ed hr { border:none; border-top:1px solid var(--bor); margin:12px 0; }
/* (#107) Botón Guardar flotante encima de la caja de herramientas.
   Se saca del flujo normal del toolbar y se posiciona justo encima (-42px)
   alineado a la derecha, con sombra suave para que "flote" sobre el texto. */
#m-nota .nota-wytb-bottom .btn-guardar-nota {
  position:absolute;
  right:14px;
  bottom:calc(100% + 8px);
  margin-left:0;
  background:var(--acc); color:#fff;
  border:none; border-radius:999px;
  padding:7px 18px; font-size:.82rem; font-weight:700;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.08);
  z-index:10;
  letter-spacing:.01em;
  transition:transform .12s ease, opacity .12s ease, box-shadow .12s ease;
}
#m-nota .nota-wytb-bottom .btn-guardar-nota:hover {
  opacity:.95;
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.22), 0 2px 4px rgba(0,0,0,.1);
}
/* (#105) El menú "más herramientas" es solo móvil: oculto por defecto.
   Antes no tenía display:none fuera del @media, por eso en Chrome desktop
   aparecía la segunda caja de herramientas duplicada y rota debajo. */
#nota-tb-more-menu { display:none; }
#nota-tb-more-btn { display:none; }
@media(max-width:600px) {
  /* Notas: ocupa toda la pantalla como un documento nativo */
  #m-nota { padding:0 !important; align-items:stretch !important; justify-content:stretch !important; background:var(--bg1) !important; }
  #m-nota .modal-bg { background:var(--bg1) !important; }
  #m-nota .modal { height:100dvh; max-height:100dvh; border-radius:0; width:100%; max-width:100%; }
  #m-nota .nota-topbar { padding:10px 12px 0; }
  /* Ocultar botones secundarios del toolbar en móvil */
  #m-nota .nota-wytb-bottom .nota-btn-secondary { display:none; }
  #m-nota .nota-wytb-bottom .wytb-sep-secondary { display:none; }
  /* Mostrar botón de más opciones en móvil */
  #nota-tb-more-btn { display:flex !important; }
  /* Menú desplegable de herramientas extra */
  #nota-tb-more-menu {
    display:none; position:absolute; bottom:calc(100% + 4px); right:8px;
    background:var(--bg1); border:1px solid var(--bor);
    border-radius:14px; box-shadow:0 -6px 24px rgba(0,0,0,.14);
    padding:8px; z-index:6000; flex-wrap:wrap; gap:2px;
    max-width:260px; align-items:center;
  }
  #nota-tb-more-menu.open { display:flex; }
  /* Wrapper del toolbar necesita position:relative para el menú */
  #m-nota .nota-wytb-bottom { position:relative; }
  /* Toolbar de sección nota: scroll horizontal en móvil */
  #nota-sec-toolbar {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    gap: 1px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--bor) !important;
  }
  #nota-sec-toolbar::-webkit-scrollbar { display:none; }
  #nota-sec-toolbar button, #nota-sec-toolbar select {
    flex-shrink: 0;
    min-width: 28px;
    padding: 4px 6px;
    font-size: .78rem;
  }
}
/* ═══ CAMPANA – Recordatorios ════════════════════════════════ */
#s-campana { flex-direction:column; height:100%; overflow-y:auto; }
#s-campana.on { display:flex; }
.camp-wrap { max-width:520px; width:100%; margin:0 auto; padding:1rem .75rem 5rem; display:flex; flex-direction:column; gap:1rem; }
/* Escritorio: ampliar el contenedor para que la rejilla de bloques (avisos)
   muestre los bloques en una fila y salten a la siguiente cuando no caben.
   El formulario interno sigue centrado y a 520px para no deformarlo. */
@media (min-width:900px){
  .camp-wrap { max-width:1200px; }
  .camp-wrap > .camp-form,
  .camp-wrap > .camp-form-compact { max-width:560px; width:100%; margin-left:auto; margin-right:auto; box-sizing:border-box; }
  .camp-wrap > div[style*="justify-content:center"] { max-width:560px; width:100%; margin:0 auto; }
}
.camp-form { background:var(--panel); border:1px solid var(--bor); border-radius:14px; padding:1rem; display:flex; flex-direction:column; gap:.65rem; }
.camp-form textarea { background:var(--bg2); border:1px solid var(--bor); border-radius:8px; color:var(--txt); padding:.6rem .75rem; font-size:.9rem; resize:none; width:100%; box-sizing:border-box; }
.camp-form textarea:focus { outline:none; border-color:var(--acc); }
.camp-row { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.camp-row input[type=date],.camp-row input[type=time] { flex:1; min-width:120px; background:var(--bg2); border:1px solid var(--bor); border-radius:8px; color:var(--txt); padding:.5rem .65rem; font-size:.85rem; }
.camp-row input:focus { outline:none; border-color:var(--acc); }
.camp-row select { flex:1; background:var(--bg2); border:1px solid var(--bor); border-radius:8px; color:var(--txt); padding:.5rem .65rem; font-size:.85rem; }
.camp-row label { display:flex; align-items:center; gap:.4rem; font-size:.82rem; color:var(--muted); white-space:nowrap; }
.btn-camp-save { background:var(--acc); color:#fff; border:none; border-radius:8px; padding:.55rem 1.2rem; font-size:.88rem; font-weight:600; cursor:pointer; align-self:flex-end; transition:opacity .15s; }
.btn-camp-save:hover { opacity:.85; }
.camp-list-title { font-size:.7rem; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); padding:0 .25rem .25rem; }

/* ── Bloques de recordatorios: globos de color pastel ─────── */
/* Grid responsive para los bloques de tipos de recordatorios.
   - Escritorio: 2-3 columnas (se ajusta a lo que quepa, mínimo 260px por bloque).
   - Móvil (<=640px): una sola columna. */
.camp-bloques-grid {
  /* Apilado vertical: cada bloque va debajo del anterior, sin importar
     el ancho disponible. Antes era una rejilla auto-fill que ponía 2-3
     bloques por fila en escritorio. */
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:stretch;
  margin-top:8px;
}
@media (max-width:640px){
  .camp-bloques-grid { gap:8px; }
}
.camp-bloques-grid .camp-bloque { margin-top:0 !important; }
.camp-bloque {
  display:flex; flex-direction:column; gap:0;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.07);
  margin-bottom:.75rem;
}
.camp-bloque-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:.5rem .85rem .45rem;
}
.camp-bloque-hdr span { font-size:.72rem; font-weight:700; letter-spacing:.4px; text-transform:uppercase; }

/* Colores de cada bloque */
.camp-bloque.bloque-personal   { background:#ffffff; }
.camp-bloque.bloque-personal   .camp-bloque-hdr { background:#f8f8f8; border-bottom:1px solid rgba(0,0,0,.06); }
.camp-bloque.bloque-personal   .camp-bloque-hdr span { color:#555; }

.camp-bloque.bloque-estudio    { background:#faf8f2; }
.camp-bloque.bloque-estudio    .camp-bloque-hdr { background:#f5f1e4; border-bottom:1px solid rgba(180,160,80,.15); }
.camp-bloque.bloque-estudio    .camp-bloque-hdr span { color:#7a6a30; }

.camp-bloque.bloque-produccion { background:#f5f5f5; }
.camp-bloque.bloque-produccion .camp-bloque-hdr { background:#eeeeee; border-bottom:1px solid rgba(0,0,0,.07); }
.camp-bloque.bloque-produccion .camp-bloque-hdr span { color:#555; }

/* Bloques de cumpleaños por grupo */
.camp-bloque.bloque-grupo { background:#f7f5fb; }
.camp-bloque.bloque-grupo .camp-bloque-hdr { background:#ede9f7; border-bottom:1px solid rgba(100,80,160,.12); }
.camp-bloque.bloque-grupo .camp-bloque-hdr span { color:#5a4a8a; }

/* ── Backend admin · rediseño tabs 2026-04b ──────────────────
   Top-tabbar limpio: indicador de activo = underline 2px var(--acc)
   + color de texto var(--txt); iconos SVG finos heredan color
   muted cuando el tab está inactivo. Nada de emojis a color. */
.sadm-tabbar {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  border-bottom:1px solid var(--bor);
  background:var(--bg1);
  flex-shrink:0;
  overflow-x:auto;
  padding:0;
}
.sadm-tab {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:13px 6px 12px;
  background:transparent;
  border:none;
  border-bottom:2px solid transparent;
  color:var(--muted);
  font-family:inherit;
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.01em;
  cursor:pointer;
  white-space:nowrap;
  position:relative;
  transition:color .18s ease, border-color .18s ease, background .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.sadm-tab:hover          { color:var(--txt); background:var(--bg2); }
.sadm-tab.on             { color:var(--txt); font-weight:600; border-bottom-color:var(--acc); }
.sadm-tab.on .sadm-tab-ico { color:var(--acc); }
.sadm-tab-ico {
  width:15px; height:15px; flex-shrink:0;
  color:var(--muted);
  transition:color .18s ease;
}
.sadm-tab:hover .sadm-tab-ico { color:var(--txt); }
.sadm-tab-dot {
  display:none;
  position:absolute; top:8px; right:8px;
  width:6px; height:6px; border-radius:50%;
  background:#f44336; box-shadow:0 0 0 2px var(--bg1);
}

/* Sub-tabbar estilo tab clásico (underline), alineado en la misma línea.
   Misma jerarquía visual que los top-tabs pero más compacto (padding menor,
   fuente más pequeña). Indicador de activo = border-bottom 2px var(--acc)
   sobre la línea inferior del contenedor (margin-bottom:-1px para solapar). */
.sadm-subbar {
  display:none; gap:0;
  padding:0 10px;
  border-bottom:1px solid var(--bor);
  background:var(--bg2);
  flex-shrink:0;
  overflow-x:auto;
}
.sadm-subbar.is-active { display:flex; }
.sadm-subtab {
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 14px 9px;
  background:transparent;
  border:none;
  border-bottom:2px solid transparent;
  color:var(--muted);
  font-family:inherit;
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.01em;
  cursor:pointer;
  white-space:nowrap;
  margin-bottom:-1px; /* solapa la línea inferior del contenedor */
  transition:color .15s ease, border-color .15s ease;
}
.sadm-subtab .sadm-tab-ico { width:13px; height:13px; color:inherit; transition:color .15s ease; }
.sadm-subtab:hover             { color:var(--txt); }
.sadm-subtab:hover .sadm-tab-ico { color:var(--txt); }
.sadm-subtab.on                { color:var(--txt); font-weight:600; border-bottom-color:var(--acc); }
.sadm-subtab.on .sadm-tab-ico  { color:var(--acc); }


/* ── Etiqueta "asignatura" dentro de cada item del recordatorio ────
   · MAYÚSCULAS + peso fino + letterspacing para que respire.
   · Color derivado del tipo/origen del item (clase, producción, personal…). */
.camp-asig-tag {
  display:inline-block;
  text-transform:uppercase;
  font-weight:300;
  letter-spacing:.6px;
  font-size:.62rem;
  color:var(--muted);
}
.camp-asig-tag[data-origen="clase"]      { color:#7a6a30; }   /* estudio */
.camp-asig-tag[data-origen="produccion"] { color:#555;    }   /* produccion */
.camp-asig-tag[data-origen="evento"]     { color:#5a4a8a; }   /* eventos */
.camp-asig-tag[data-origen="tarea"]      { color:#7a6a30; }   /* tareas (estudio) */
.camp-asig-tag[data-origen="otro"]       { color:var(--muted); }
/* Si el item está dentro de un bloque con color conocido, hereda el color
   del header del bloque (override en cascada): */
.bloque-estudio    .camp-asig-tag { color:#7a6a30; }
.bloque-produccion .camp-asig-tag { color:#555;    }
.bloque-personal   .camp-asig-tag { color:#555;    }
.bloque-grupo      .camp-asig-tag { color:#5a4a8a; }

/* Lista de alarmas: tono pastel melocotón suave (asociación visual con
   despertador/mañana). Antes era #fff8f5 (casi blanco, apenas perceptible). */
#camp-list-a:not(:empty) {
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(190,120,80,.10);
  background:#fdf2eb;
  margin-bottom:.75rem;
}
#camp-list-a .camp-item { background:transparent; }

/* ── Items: fila con línea divisoria (sin globo propio) ───── */
.camp-item {
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(0,0,0,.06);
  border-radius:0;
  padding:.6rem .85rem;
  display:flex; align-items:center; gap:.65rem;
}
.camp-item:last-child { border-bottom:none; }
.camp-item-body { flex:1; min-width:0; overflow:hidden; }
.camp-item-txt { font-size:.87rem; color:var(--txt); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.camp-item-meta { font-size:.7rem; color:var(--muted); margin-top:.1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.camp-item-acts { display:flex; gap:.2rem; flex-shrink:0; }
.camp-item-acts button { background:none; border:none; border-radius:6px; padding:4px 5px; cursor:pointer; color:var(--muted); font-size:.75rem; transition:all .15s; }
.camp-item-acts button:hover { color:var(--txt); background:rgba(0,0,0,.06); }
.camp-item-acts .btn-del:hover { color:#ef4444; }
/* Item inactivo */
.camp-item.inactive { opacity:.45; }
.camp-item-toggle { background:none; border:none; cursor:pointer; padding:2px 2px; color:var(--muted); font-size:1rem; display:flex; align-items:center; flex-shrink:0; }

/* ── DRIVE ──────────────────────────────────────────────── */
#s-drive { display:none; }
#s-drive.on { display:flex; }
.drive-file-item { display:flex; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid var(--bor); cursor:pointer; transition:background .12s; }
.drive-file-item:hover { background:var(--bg3); }
.drive-file-icon { width:34px; height:34px; border-radius:7px; background:var(--bg3); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.1rem; }
.drive-file-info { flex:1; min-width:0; }
.drive-file-name { font-size:.82rem; font-weight:600; color:var(--txt); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.drive-file-meta { font-size:.68rem; color:var(--muted); margin-top:1px; }
.drive-file-actions { display:flex; gap:4px; flex-shrink:0; }
.drive-file-actions button { background:none; border:none; cursor:pointer; padding:4px; border-radius:5px; color:var(--muted); transition:color .12s,background .12s; }
.drive-file-actions button:hover { color:var(--acc); background:var(--bg3); }
/* Badge campana */
#btn-campana { background:none; border:none; cursor:pointer; color:var(--txt); padding:6px 8px; border-radius:8px; display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; transition:color .15s; }
#btn-campana:hover { color:var(--acc); }
#btn-campana svg { width:20px; height:20px; }
#campana-badge { position:absolute; top:3px; right:3px; min-width:16px; height:16px; background:var(--acc); color:#fff; border-radius:8px; font-size:.6rem; font-weight:700; display:none; align-items:center; justify-content:center; padding:0 3px; }
.push-status { font-size:.75rem; color:var(--muted); text-align:center; padding:.5rem; }
.push-status button { background:var(--acc); color:#fff; border:none; border-radius:7px; padding:.35rem .9rem; cursor:pointer; font-size:.78rem; margin-top:.4rem; display:block; margin-left:auto; margin-right:auto; }
/* ── Pestañas Campana ──────────────────────────────────────── */
/* ── TEO styles ── */
.teo-tab.on { color:var(--acc)!important; border-bottom-color:var(--acc)!important; }
.teo-panel { display:none; }
.teo-panel.on { display:flex!important; }
.teo-quick-btn { padding:8px 14px; border:1px solid var(--bor); border-radius:20px; background:var(--bg2); color:var(--txt); cursor:pointer; font-size:.78rem; transition:all .15s; }
.teo-quick-btn:hover { background:var(--acc); color:#fff; border-color:var(--acc); }
.teo-tool-card { padding:16px; border:1px solid var(--bor); border-radius:12px; background:var(--bg2); cursor:pointer; text-align:center; transition:all .15s; }
.teo-tool-card:hover { border-color:var(--acc); transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.08); }
.teo-msg-wrap { display:flex; flex-direction:column; max-width:86%; animation:teoMsgIn .2s ease; }
.teo-msg-wrap.teo-wrap-user { align-self:flex-end; align-items:flex-end; }
.teo-msg-wrap.teo-wrap-assistant { align-self:flex-start; align-items:flex-start; }
@keyframes teoMsgIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
@keyframes teoFloatIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes teoMicPulse { 0%,100%{box-shadow:0 0 0 3px rgba(239,68,68,.3)} 50%{box-shadow:0 0 0 6px rgba(239,68,68,.15)} }
.teo-mic-active { animation:teoMicPulse 1.2s ease-in-out infinite !important; }
.teo-dq-btn { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:14px; color:#e0e0ff; font-size:.68rem; padding:4px 9px; cursor:pointer; white-space:nowrap; flex-shrink:0; transition:background .15s; }
.teo-dq-btn:hover { background:rgba(255,255,255,.2); }
.teo-msg { padding:10px 14px; border-radius:16px; font-size:.88rem; line-height:1.55; word-break:break-word; }
.teo-msg-user { background:var(--acc); color:#fff; border-bottom-right-radius:4px; }
.teo-msg-assistant { background:var(--bg2); color:var(--txt); border-bottom-left-radius:4px; border:1px solid var(--bor); }
.teo-msg-assistant b, .teo-msg-assistant strong { font-weight:700; }
.teo-msg-assistant a { color:var(--acc); text-decoration:underline; }
.teo-msg-assistant code { background:rgba(0,0,0,.06); padding:1px 5px; border-radius:4px; font-size:.84em; font-family:monospace; }
.teo-msg-assistant pre { background:rgba(0,0,0,.05); border-radius:8px; padding:10px 12px; font-size:.82rem; overflow-x:auto; margin:6px 0; font-family:monospace; line-height:1.5; }
.teo-msg-meta { font-size:.65rem; color:var(--muted); margin-top:3px; padding:0 4px; }
.teo-msg-wrap.teo-wrap-user .teo-msg-meta { text-align:right; }
.teo-msg-avatar { width:22px; height:22px; border-radius:50%; object-fit:cover; flex-shrink:0; margin-top:2px; }
.teo-msg-row { display:flex; align-items:flex-end; gap:7px; }
.teo-msg-row.teo-row-user { flex-direction:row-reverse; }
.teo-typing { align-self:flex-start; padding:12px 16px; background:var(--bg2); border-radius:14px; border:1px solid var(--bor); border-bottom-left-radius:4px; }
.teo-typing::after { content:'⬤ ⬤ ⬤'; font-size:.5rem; color:var(--muted); animation:teoPulse 1.2s infinite; letter-spacing:3px; }
@keyframes teoPulse { 0%,100%{opacity:.3} 50%{opacity:1} }
.teo-date-sep { align-self:center; font-size:.65rem; color:var(--muted); background:var(--bg3); padding:2px 10px; border-radius:10px; margin:4px 0; }
.teo-task-item { padding:10px 14px; border:1px solid var(--bor); border-radius:10px; background:var(--bg2); display:flex; align-items:center; gap:10px; }
.teo-task-item[data-priority="urgent"] { border-left:3px solid #ef4444; }
.teo-task-item[data-priority="high"] { border-left:3px solid #f59e0b; }
.teo-task-item[data-priority="medium"] { border-left:3px solid #3b82f6; }
.teo-task-item[data-priority="low"] { border-left:3px solid #10b981; }
.teo-hist-item { padding:12px 14px; border:1px solid var(--bor); border-radius:10px; background:var(--bg2); cursor:pointer; transition:all .15s; }
.teo-hist-item:hover { border-color:var(--acc); }
/* ── TEO Estudiante ── */
.teo-est-stat-card { background:var(--bg2);border:1px solid var(--bor);border-radius:10px;padding:10px 8px;text-align:center }
.teo-est-stat-val  { font-size:1.3rem;font-weight:800;color:var(--acc);line-height:1 }
.teo-est-stat-lbl  { font-size:.62rem;color:var(--muted);margin-top:3px;text-transform:uppercase;letter-spacing:.04em }
.teo-est-perm-row  { display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:7px;cursor:pointer;transition:background .1s;font-size:.78rem;color:var(--txt) }
.teo-est-perm-row:hover { background:var(--bg3,rgba(0,0,0,.04)) }
.teo-est-perm-row input[type=checkbox] { accent-color:var(--acc);width:14px;height:14px;cursor:pointer }
#teo-estudiante-section summary::-webkit-details-marker { display:none }
#teo-estudiante-section[open] #teo-est-chevron { transform:rotate(180deg) }
/* ── TEO Prompt Dropdown (float bar) ── */
.teo-pd-cat { padding:3px 9px;border:1px solid var(--bor);border-radius:20px;background:var(--bg2);cursor:pointer;font-size:.68rem;font-weight:600;color:var(--muted);transition:all .12s }
.teo-pd-cat:hover { border-color:var(--acc);color:var(--acc) }
.teo-pd-cat.active { background:var(--acc);border-color:var(--acc);color:#fff }
.teo-pd-item { display:flex;align-items:center;gap:8px;padding:7px 12px;cursor:pointer;transition:background .1s;border:none;background:none;width:100%;text-align:left }
.teo-pd-item:hover { background:var(--bg2) }
.teo-pd-item.on { background:rgba(59,130,246,.08) }
.teo-pd-item-ico { width:24px;height:24px;border-radius:6px;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0;border:1px solid var(--bor) }
.teo-pd-item-title { font-size:.78rem;font-weight:600;color:var(--txt) }
.teo-pd-item-desc { font-size:.63rem;color:var(--muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px }
/* Chip de prompt activo sobre el textarea */
#teo-prompt-active-chip { display:none;position:absolute;top:-30px;left:0;right:0;padding:4px 10px;background:rgba(59,130,246,.1);border-bottom:1px solid rgba(59,130,246,.2);border-radius:13px 13px 0 0;font-size:.7rem;font-weight:600;color:var(--acc);display:none;align-items:center;gap:6px }
/* ── TEO Biblioteca de Prompts ── */
.teo-pcat-btn { padding:4px 10px;border:1px solid var(--bor);border-radius:20px;background:var(--bg2);cursor:pointer;font-size:.71rem;font-weight:600;color:var(--muted);transition:all .15s }
.teo-pcat-btn:hover { border-color:var(--acc);color:var(--acc) }
.teo-pcat-btn.active { background:var(--acc);border-color:var(--acc);color:#fff }
.teo-prompt-item { display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--bor);border-radius:9px;background:var(--bg2);transition:border-color .15s;cursor:default }
.teo-prompt-item:hover { border-color:rgba(59,130,246,.3) }
.teo-prompt-icon { width:28px;height:28px;border-radius:7px;background:var(--bg1);display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;border:1px solid var(--bor) }
.teo-prompt-info { flex:1;min-width:0 }
.teo-prompt-title { font-size:.78rem;font-weight:700;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.teo-prompt-desc { font-size:.65rem;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.teo-prompt-actions { display:flex;gap:4px;flex-shrink:0 }
.teo-prompt-actions button { padding:4px 7px;border:1px solid var(--bor);border-radius:6px;background:var(--bg1);cursor:pointer;font-size:.68rem;color:var(--muted);transition:all .15s }
.teo-prompt-actions button:hover { border-color:var(--acc);color:var(--acc) }
.teo-prompt-actions button.del:hover { border-color:#ef4444;color:#ef4444 }
/* ── TEO Selection Toolbar ── */
#teo-sel-toolbar { position:absolute;z-index:9999;display:none;background:var(--bg1);border:1px solid var(--bor);border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.15);padding:4px;gap:4px;align-items:center;white-space:nowrap;flex-wrap:wrap;max-width:320px }
.teo-sel-btn { padding:5px 9px;border:none;border-radius:7px;background:transparent;cursor:pointer;font-size:.72rem;font-weight:600;color:var(--txt);display:flex;align-items:center;gap:4px;transition:background .12s;white-space:nowrap }
.teo-sel-btn:hover { background:var(--bg2) }
.teo-sel-btn.primary { background:var(--acc);color:#fff }
.teo-sel-btn.primary:hover { opacity:.88 }
.teo-sel-sep { width:1px;height:18px;background:var(--bor);flex-shrink:0 }
/* ── TEO Result Panel ── */
#teo-result-panel { position:fixed;z-index:9998;max-width:400px;min-width:260px;background:var(--bg1);border:1px solid var(--bor);border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.18);overflow:hidden;display:none;flex-direction:column }
#teo-result-header { display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--bor);background:var(--bg2) }
#teo-result-header span { flex:1;font-size:.78rem;font-weight:700;color:var(--txt) }
#teo-result-content { padding:12px;font-size:.82rem;line-height:1.6;color:var(--txt);max-height:200px;overflow-y:auto;white-space:pre-wrap;word-break:break-word }
#teo-result-content.loading { color:var(--muted);font-style:italic }
#teo-result-actions { display:flex;gap:6px;padding:10px 12px;border-top:1px solid var(--bor);background:var(--bg2) }
#teo-result-actions button { flex:1;padding:7px 8px;border-radius:8px;border:1px solid var(--bor);background:var(--bg1);cursor:pointer;font-size:.75rem;font-weight:600;color:var(--txt);transition:all .15s }
#teo-result-actions .btn-replace { background:var(--acc);color:#fff;border-color:var(--acc) }
#teo-result-actions .btn-insert { color:var(--acc);border-color:var(--acc) }
#teo-result-actions .btn-discard { color:var(--muted) }
#teo-result-actions button:hover { opacity:.85 }
/* ── TEO Toolbar Customizer modal ── */
#teo-toolbar-customizer { position:fixed;inset:0;z-index:10050;background:rgba(0,0,0,.55);display:none;align-items:flex-end;justify-content:center;padding:0 0 0 0 }
#teo-toolbar-customizer.open { display:flex }
#teo-tbcust-sheet { background:var(--bg1);border-radius:18px 18px 0 0;width:100%;max-width:520px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 -8px 40px rgba(0,0,0,.22);overflow:hidden;animation:teo-sheet-up .22s cubic-bezier(.34,1.56,.64,1) }
@keyframes teo-sheet-up { from { transform:translateY(100%);opacity:0 } to { transform:translateY(0);opacity:1 } }
#teo-tbcust-head { display:flex;align-items:center;gap:10px;padding:14px 16px 10px;border-bottom:1px solid var(--bor);flex-shrink:0 }
#teo-tbcust-head h3 { flex:1;font-size:.9rem;font-weight:700;margin:0 }
#teo-tbcust-preview { padding:8px 16px;background:var(--bg2);border-bottom:1px solid var(--bor);flex-shrink:0;display:flex;align-items:center;gap:6px;overflow-x:auto;min-height:44px }
#teo-tbcust-preview-label { font-size:.63rem;color:var(--muted);white-space:nowrap;flex-shrink:0 }
.teo-tbcust-prev-btn { padding:4px 9px;border:1px solid var(--acc);border-radius:7px;background:var(--bg1);font-size:.7rem;font-weight:600;color:var(--acc);white-space:nowrap;flex-shrink:0 }
#teo-tbcust-body { flex:1;overflow-y:auto;padding:10px 16px }
#teo-tbcust-body h4 { font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin:10px 0 5px }
.teo-tbcust-item { display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;cursor:pointer;transition:background .1s;margin-bottom:3px }
.teo-tbcust-item:hover { background:var(--bg2) }
.teo-tbcust-item-ico { width:32px;height:32px;border-radius:8px;background:var(--bg2);border:1px solid var(--bor);display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0 }
.teo-tbcust-item-info { flex:1;min-width:0 }
.teo-tbcust-item-title { font-size:.78rem;font-weight:700;color:var(--txt) }
.teo-tbcust-item-desc { font-size:.63rem;color:var(--muted);margin-top:1px }
.teo-tbcust-toggle { position:relative;width:36px;height:20px;flex-shrink:0 }
.teo-tbcust-toggle input { opacity:0;width:0;height:0;position:absolute }
.teo-tbcust-toggle-track { position:absolute;inset:0;background:var(--bor);border-radius:20px;transition:background .2s }
.teo-tbcust-toggle input:checked + .teo-tbcust-toggle-track { background:var(--acc) }
.teo-tbcust-toggle-thumb { position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s }
.teo-tbcust-toggle input:checked ~ .teo-tbcust-toggle-thumb { transform:translateX(16px) }
#teo-tbcust-foot { padding:12px 16px;border-top:1px solid var(--bor);display:flex;gap:8px;flex-shrink:0 }
/* teo sel-btn customize button */
.teo-sel-btn.cust { color:var(--muted);font-size:.65rem;padding:4px 7px }
.teo-sel-btn.cust:hover { background:var(--bg2);color:var(--acc) }
/* ── TEO Estudiante — Superadmin category filter buttons ── */
.sadm-teo-cat { padding:4px 11px;border:1px solid var(--bor);border-radius:20px;background:var(--bg2);cursor:pointer;font-size:.68rem;font-weight:600;color:var(--muted);transition:all .12s;white-space:nowrap }
.sadm-teo-cat:hover { border-color:var(--acc);color:var(--acc) }
.sadm-teo-cat.active { background:var(--acc);border-color:var(--acc);color:#fff }
/* TEO Estudiante — table row hover */
#sadm-teo-tbody tr:hover td { background:var(--bg2) }
/* ── TEO Gemini Wizard — first-use onboarding ── */
#teo-gemini-wizard { position:fixed;inset:0;z-index:10100;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.6);backdrop-filter:blur(4px) }
#teo-gemini-wizard.open { display:flex }
#teo-gw-card { background:var(--bg1);border-radius:20px;width:100%;max-width:400px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:teoGwIn .28s cubic-bezier(.34,1.4,.64,1) }
@keyframes teoGwIn { from { transform:scale(.88) translateY(20px);opacity:0 } to { transform:scale(1) translateY(0);opacity:1 } }
#teo-gw-header { background:linear-gradient(135deg,#1a73e8 0%,#4285f4 50%,#0f9d58 100%);padding:24px 20px 20px;text-align:center;position:relative }
#teo-gw-header-close { position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);background:rgba(255,255,255,.15);color:#fff;cursor:pointer;font-size:.8rem;display:flex;align-items:center;justify-content:center;transition:background .15s }
#teo-gw-header-close:hover { background:rgba(255,255,255,.3) }
#teo-gw-logo { width:48px;height:48px;background:#fff;border-radius:12px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.15) }
#teo-gw-header h2 { color:#fff;font-size:1.1rem;font-weight:800;margin:0 0 4px }
#teo-gw-header p { color:rgba(255,255,255,.85);font-size:.78rem;margin:0 }
#teo-gw-body { padding:20px }
#teo-gw-pending-msg { background:var(--bg2);border:1px solid var(--bor);border-radius:10px;padding:9px 12px;font-size:.75rem;color:var(--muted);margin-bottom:16px;display:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
#teo-gw-pending-msg strong { color:var(--txt) }
.teo-gw-step-row { display:flex;gap:12px;align-items:flex-start;margin-bottom:14px }
.teo-gw-step-num { width:26px;height:26px;border-radius:50%;background:var(--acc);color:#fff;font-size:.75rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px }
.teo-gw-step-text { flex:1 }
.teo-gw-step-text b { display:block;font-size:.82rem;font-weight:700;color:var(--txt);margin-bottom:2px }
.teo-gw-step-text span { font-size:.73rem;color:var(--muted);line-height:1.5 }
#teo-gw-studio-btn { width:100%;padding:11px;background:#1a73e8;color:#fff;border:none;border-radius:11px;cursor:pointer;font-size:.85rem;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px;transition:background .15s }
#teo-gw-studio-btn:hover { background:#1557b0 }
#teo-gw-key-wrap { display:flex;gap:8px;margin-top:4px }
#teo-gw-key-input { flex:1;padding:10px 12px;border:1.5px solid var(--bor);border-radius:10px;background:var(--bg2);color:var(--txt);font-size:.85rem;font-family:monospace;transition:border-color .15s;outline:none }
#teo-gw-key-input:focus { border-color:var(--acc) }
#teo-gw-key-input.valid { border-color:#22c55e }
#teo-gw-key-input.invalid { border-color:#ef4444 }
#teo-gw-connect-btn { padding:10px 16px;background:var(--acc);color:#fff;border:none;border-radius:10px;cursor:pointer;font-size:.82rem;font-weight:700;white-space:nowrap;transition:all .15s;flex-shrink:0 }
#teo-gw-connect-btn:disabled { opacity:.4;cursor:not-allowed }
#teo-gw-connect-btn.loading { opacity:.7 }
#teo-gw-status { font-size:.73rem;margin-top:7px;padding:7px 10px;border-radius:7px;display:none }
#teo-gw-status.ok { background:#f0faf4;color:#166534;display:block }
#teo-gw-status.err { background:#fff5f5;color:#991b1b;display:block }
#teo-gw-footer { padding:12px 20px;border-top:1px solid var(--bor);display:flex;align-items:center;justify-content:space-between }
#teo-gw-footer-note { font-size:.68rem;color:var(--muted);display:flex;align-items:center;gap:4px }
/* Success state */
#teo-gw-success { display:none;text-align:center;padding:32px 20px }
#teo-gw-success-icon { width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#22c55e,#16a34a);margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;animation:teoGwPop .4s cubic-bezier(.34,1.56,.64,1) }
@keyframes teoGwPop { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }
#teo-gw-success h3 { font-size:1.1rem;font-weight:800;color:var(--txt);margin:0 0 6px }
#teo-gw-success p { font-size:.78rem;color:var(--muted);margin:0 0 20px }
/* TEO persistent bar above bnav */
#teo-sb-input:focus { border-color:var(--acc); box-shadow:0 0 0 2px rgba(59,130,246,.15); }
/* ── Combined input container (chip + textarea merged) ── */
.teo-float-input-wrap { flex:1;display:flex;align-items:flex-end;border:1px solid var(--bor);border-radius:14px;background:var(--bg2);position:relative;transition:border-color .15s,box-shadow .15s;min-width:0 }
.teo-float-input-wrap:focus-within { border-color:var(--acc);box-shadow:0 0 0 2px rgba(59,130,246,.15) }
/* ── LLM selector button inside the input ── */
.teo-llm-chip { display:flex;align-items:center;gap:4px;padding:8px 9px;border:none;border-right:1px solid var(--bor);border-radius:13px 0 0 13px;background:transparent;cursor:pointer;font-size:.72rem;font-weight:600;color:var(--txt);white-space:nowrap;flex-shrink:0;transition:background .15s;user-select:none;line-height:1.2;align-self:stretch }
.teo-llm-chip:hover { background:rgba(0,0,0,.04) }
.teo-llm-chip.active { color:var(--acc) }
.teo-llm-opt { display:flex;align-items:center;gap:9px;padding:7px 12px;cursor:pointer;font-size:.78rem;color:var(--txt);transition:background .1s;border:none;background:none;width:100%;text-align:left }
.teo-llm-opt:hover { background:var(--bg2) }
.teo-llm-opt.on { background:var(--bg2);color:var(--acc);font-weight:600 }
.teo-llm-opt-ico { width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;flex-shrink:0 }
.teo-llm-opt-sub { font-size:.65rem;color:var(--muted);margin-top:1px }
/* TEO FAB — botón circular flotante, oculto en desktop */
#teo-fab {
  display:none; position:fixed; z-index:100;
  bottom:calc(var(--bnav,60px) + 80px + env(safe-area-inset-bottom,0px));
  left:14px; width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg,#1a1a2e,#16213e);
  border:2px solid rgba(255,255,255,.15);
  box-shadow:0 4px 16px rgba(0,0,0,.35);
  cursor:pointer; align-items:center; justify-content:center;
  transition:transform .2s,box-shadow .2s,bottom .2s;
}
#teo-fab:active { transform:scale(.92); }
#teo-fab.open { box-shadow:0 2px 8px rgba(0,0,0,.2); opacity:.7; }
/* Móvil: ocultar barra TEO, mostrar FAB */
/* #140 — En móvil el FAB de TEO DEBE estar oculto por defecto y solo
   mostrarse cuando JS añade .teo-enabled (tras confirmar que el usuario
   tiene acceso real: módulo TEO activo + rol permitido, o superadmin). */
@media(max-width:600px){
  #teo-float { display:none !important; }
  #teo-float.teo-fab-open { display:flex !important; border-radius:16px 16px 0 0; box-shadow:0 -4px 20px rgba(0,0,0,.15); }
  #teo-fab { display:none !important; }
  #teo-fab.teo-enabled { display:flex !important; }
  #teo-fab.teo-enabled.fab-hidden { display:none !important; }
  /* Sin acceso a TEO: la clase teo-disabled supera cualquier .teo-enabled */
  #teo-fab.teo-disabled { display:none !important; }
  /* Cuando TEO está desplegado, el FAB sube */
  #teo-fab.open { bottom:calc(var(--bnav,60px) + 120px + env(safe-area-inset-bottom,0px)); }
}
/* Hide topbar save button & file status on mobile — already in editor toolbar */
/* (#317) Emoji button RESTAURADO en móvil — el usuario quiere el panel
   de emojis y GIFs disponible en chat también desde móvil. */
@media(max-width:600px){
  #topbar-save-btn { display:none !important; }
  #topbar-file-status { display:none !important; }
  /* .chat-emoji-btn — reactivado: NO ocultar */
}
.section { padding-bottom:var(--teo-bar-h,0px) !important; }
#s-chat.teo-in-sidebar { padding-bottom:0 !important; }
/* ── Candado de seguridad: subir arriba del input de TEO ──
   Cuando TEO está posicionado dentro del sidebar (clase teo-in-sidebar),
   los candados flotantes de chat/buzón/CRM se solapan con el input de TEO.
   Este offset empuja el candado por encima (altura aprox. del input = ~56px). */
#s-chat.teo-in-sidebar #chat-privacy-notice,
#s-chat.teo-in-sidebar #buzon-privacy-notice,
#s-chat.teo-in-sidebar #crm-sidebar .crm-privacy-wrap { bottom:62px !important; }
/* ── Títulos de sección en mayúsculas ─────────────────────── */
.galeria-header h1,.galeria-header h2,.galeria-header h3,
.mh h3,.topbar h1,.topbar h2,
.est-top-bar h1,.est-top-bar h2,.est-top-bar h3,
.crp-header h3,.prod-header h3,
.section h1,.section h2,
.camp-tab-txt { text-transform:uppercase; letter-spacing:.5px; }

/* Toggle switch for admin */
.sadm-switch { position:relative; display:inline-block; width:44px; height:24px; flex-shrink:0; }
.sadm-switch input { opacity:0; width:0; height:0; }
.sadm-slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#ccc; border-radius:24px; transition:.3s; }
.sadm-slider::before { content:''; position:absolute; height:18px; width:18px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.3s; }
.sadm-switch input:checked + .sadm-slider { background:#10b981; }
.sadm-switch input:checked + .sadm-slider::before { transform:translateX(20px); }

.camp-tabs { display:flex; gap:0; border-bottom:1px solid var(--bor); flex-shrink:0; background:var(--bg1); }
.camp-tab { flex:1; background:none; border:none; padding:.65rem .5rem; cursor:pointer; font-size:.8rem; font-weight:600; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:.35rem; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s,border-color .15s; }
.camp-tab.on { color:var(--acc); border-bottom-color:var(--acc); }
.camp-tab svg { width:15px; height:15px; }
.camp-tab-badge { background:var(--acc); color:#fff; border-radius:10px; font-size:.6rem; font-weight:700; padding:1px 5px; min-width:14px; text-align:center; display:none; }
.camp-tab-badge.show { display:inline-block; }
.camp-panel { display:none; flex:1; overflow-y:auto; }
.camp-panel.on { display:flex; flex-direction:column; }
/* Formulario compacto por pestaña */
.camp-form-compact { background:var(--panel); border:1px solid var(--bor); border-radius:12px; padding:.85rem 1rem; display:flex; flex-direction:column; gap:.6rem; margin:0 .75rem .75rem; }
.camp-form-compact input[type=text],.camp-form-compact textarea { background:var(--bg2); border:1px solid var(--bor); border-radius:8px; color:var(--txt); padding:.55rem .75rem; font-size:.87rem; resize:none; width:100%; box-sizing:border-box; }
.camp-form-compact input:focus,.camp-form-compact textarea:focus { outline:none; border-color:var(--acc); }

/* ── TOAST ─────────────────────────────────────────────────── */
#toast {
  position:fixed; bottom:80px; left:50%; transform:translateX(-50%) translateY(20px);
  background:#1e1e2e; color:#fff; padding:.7rem 1.3rem;
  border-radius:12px; font-size:.88rem; font-weight:500;
  box-shadow:0 4px 20px rgba(0,0,0,.35);
  opacity:0; pointer-events:none; z-index:9999;
  transition:opacity .25s, transform .25s;
  max-width:calc(100vw - 2rem); text-align:center; white-space:pre-line;
}
#toast.on { opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }

/* ── ALERTA CAMPANA (banner emergente) ─────────────────────── */
#camp-alert {
  position:fixed; top:0; left:0; right:0;
  background:linear-gradient(135deg,#7c3aed,#4f46e5);
  color:#fff; padding:1rem 1.25rem;
  display:flex; align-items:center; gap:.75rem;
  z-index:10000; box-shadow:0 4px 24px rgba(0,0,0,.4);
  transform:translateY(-100%); transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
#camp-alert.show { transform:translateY(0); }
#camp-alert-icon { font-size:1.6rem; flex-shrink:0; }
#camp-alert-body { flex:1; min-width:0; }
#camp-alert-title { font-size:.95rem; font-weight:700; }
#camp-alert-sub { font-size:.78rem; opacity:.85; margin-top:.1rem; }
#camp-alert-close {
  background:rgba(255,255,255,.2); border:none; color:#fff;
  border-radius:8px; padding:.4rem .8rem; cursor:pointer; font-size:.8rem; flex-shrink:0;
}
#camp-alert-close:hover { background:rgba(255,255,255,.35); }

/* ═══════════════════════════════════════════════════════════
   PWA / APP INSTALADA — Pantalla completa sin barra del navegador
   Se activa cuando el usuario añade la app a la pantalla de inicio
   o la instala como app nativa (Capacitor).
   ═══════════════════════════════════════════════════════════ */

/* Modo standalone: la app ocupa toda la pantalla física */
@media (display-mode: standalone),
       (display-mode: window-controls-overlay) {

  /* El #app ya ocupa 100dvh; aquí aseguramos que también cuenta
     el area bajo el notch gracias a viewport-fit=cover */
  html, body {
    /* Fondo negro en los bordes para que no se vea blanco bajo el notch */
    background-color: #1a1a1a;
  }

  /* Área de contenido principal: empieza después del topbar (ya con safe-top)
     y termina antes de la bnav (ya con safe-bottom) */
  .content {
    /* Asegurar que el scroll interno respeta el espacio */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  /* Evitar rebote de scroll en iOS (efecto "rubber band") en el contenedor raíz */
  #app {
    overscroll-behavior: none;
  }

  /* En landscape: respetar safe areas laterales (iPhone con notch al lado) */
  .topbar {
    padding-left:  calc(.9rem + env(safe-area-inset-left, 0px));
    padding-right: calc(.9rem + env(safe-area-inset-right, 0px));
  }
  .bnav {
    padding-left:  calc(.5rem + env(safe-area-inset-left, 0px));
    padding-right: calc(.5rem + env(safe-area-inset-right, 0px));
  }
}

/* iOS Safari: animación del banner de instalación */
@keyframes slideUp {
  from { transform: translateY(28px) scale(.96); opacity: 0; }
  to   { transform: translateY(0)    scale(1);   opacity: 1; }
}

/* ── Safari iOS en NAVEGADOR NORMAL ────────────────────────────────────
   La barra de Safari no se puede ocultar por código — es una restricción
   de Apple por seguridad. Lo máximo posible:
   - La app ocupa todo el espacio disponible (sin espacios en blanco)
   - Safari auto-oculta la barra cuando el usuario hace scroll hacia abajo
   - Al instalar como PWA desaparece completamente
   ──────────────────────────────────────────────────────────────────── */

/* En navegador (no standalone): ajustar exactamente al viewport visible */
@media not all and (display-mode: standalone) {
  body, #app {
    /* --fill-height se calcula por JS con window.innerHeight */
    height: var(--fill-height, 100dvh);
    min-height: var(--fill-height, 100dvh);
    max-height: var(--fill-height, 100dvh);
  }
}
/* Ocultar botones secundarios TEO en móvil para dar espacio al input y botón TEO */
@media(max-width:600px){
  #teo-float-history-btn{display:none!important}
  #teo-global-voice-btn{display:none!important}
  #teo-float-mic-btn{display:none!important}
  #teo-float .teo-float-input-wrap{min-width:0!important}
  #teo-float-send{min-width:56px!important;padding:9px 12px!important}
}

/* ═══ MOBILE NAV-AWARE MODALS ══════════════════════════════════
   Modales propios (Vista alumno, Menú de plantillas, _crmPublishWs) se
   posicionan como overlays con `padding:20px`. En móvil esto NO deja
   hueco para la bottom nav fija (--bnav), por lo que sus botones se
   pueden esconder detrás. Este bloque fuerza que cualquier overlay
   modal libere espacio abajo igual a la altura de la bnav + safe-area. */
@media (max-width:640px){
  #vista-modal, #tpl-modal, #crm-modal-overlay {
    padding-bottom: calc(var(--bnav,60px) + env(safe-area-inset-bottom,0px) + 8px) !important;
  }
  /* Asegurar que los inputs grandes nunca rompan el viewport horizontal */
  #crm-modal-overlay input, #vista-modal input, #tpl-modal input {
    max-width: 100% !important;
  }
}

/* ═══ RTL Support (Arabic) ════════════════════════════════════ */
[dir="rtl"] { text-align: right; }
[dir="rtl"] .sidebar, [dir="rtl"] .panel-sidebar { left: auto; right: 0; }
[dir="rtl"] .main-content, [dir="rtl"] .sec { margin-left: 0; }
[dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; direction: rtl; }
[dir="rtl"] .chat-bubble { direction: rtl; text-align: right; }
[dir="rtl"] .msg-row.me { flex-direction: row-reverse; }
[dir="rtl"] .topbar-actions { flex-direction: row-reverse; }
[dir="rtl"] .note-card, [dir="rtl"] .crm-card { text-align: right; }

/* ═══ Language Picker Overlay ═════════════════════════════════ */
#lang-picker-overlay {
  display: none; position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
  align-items: center; justify-content: center; flex-direction: column;
}
#lang-picker-overlay .lp-box {
  background: var(--bg1, #fff); border-radius: 18px; padding: 32px 28px;
  max-width: 480px; width: 90%; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
#lang-picker-overlay .lp-title {
  font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; color: var(--tx1, #111);
}
#lang-picker-overlay .lp-subtitle {
  font-size: 0.9rem; color: var(--tx2, #666); margin-bottom: 20px;
}
#lang-picker-overlay .lp-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px; max-height: 360px; overflow-y: auto;
}
#lang-picker-overlay .lp-btn {
  padding: 12px 8px; border: 2px solid var(--bg4, #ddd); border-radius: 10px;
  background: var(--bg2, #fff); cursor: pointer; font-size: 0.95rem;
  transition: all 0.2s; color: var(--tx1, #111);
}
#lang-picker-overlay .lp-btn:hover {
  border-color: var(--accent, #4A90D9); background: var(--bg3, #f5f5f5);
  transform: translateY(-1px);
}

/* ── Pestaña Calendario de asignatura: layout 2 columnas ── */
.asig-cal-wrap{max-width:100%}
@media(max-width:880px){
  .asig-cal-wrap{grid-template-columns:1fr !important}
  .asig-cal-right{position:static !important;order:-1}
  #asig-mini-cal{max-width:320px;margin:0 auto}
}
/* Mini-cal visual */
#asig-mini-cal .amc-head{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:8px}
#asig-mini-cal .amc-title{font-weight:700;font-size:.78rem;color:var(--txt);text-transform:capitalize}
#asig-mini-cal .amc-nav{display:flex;gap:4px}
#asig-mini-cal .amc-nav button{background:none;border:1px solid var(--bor);border-radius:6px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);font-size:.7rem;padding:0;transition:background .12s}
#asig-mini-cal .amc-nav button:hover{background:var(--bg2);color:var(--txt)}
#asig-mini-cal .amc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
#asig-mini-cal .amc-dow{font-size:.6rem;color:var(--muted);text-align:center;padding:4px 0;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
#asig-mini-cal .amc-day{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;font-size:.72rem;color:var(--txt);border-radius:6px;cursor:default}
#asig-mini-cal .amc-day.other{color:var(--muted);opacity:.35}
#asig-mini-cal .amc-day.today{background:var(--acc);color:#fff;font-weight:700}
#asig-mini-cal .amc-day.has-evt:not(.today){background:rgba(57,255,20,.14);color:var(--txt);font-weight:600}
#asig-mini-cal .amc-day.has-evt::after{content:"";position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:#39ff14}
#asig-mini-cal .amc-day.today.has-evt::after{background:#fff}


/* ── Mini-cal: chips bajo el número del día ── */
#asig-mini-cal .amc-grid{gap:3px}
#asig-mini-cal .amc-day{
  aspect-ratio:unset !important;
  min-height:42px;
  flex-direction:column;
  padding:3px 2px;
  gap:2px;
  justify-content:flex-start !important;
}
#asig-mini-cal .amc-day.has-evt::after{display:none !important}
#asig-mini-cal .amc-day.has-evt:not(.today){background:transparent !important}
#asig-mini-cal .amc-d-n{font-size:.72rem;line-height:1;font-weight:500}
#asig-mini-cal .amc-day.today .amc-d-n{color:#fff;font-weight:700}
#asig-mini-cal .amc-d-evts{display:flex;flex-direction:column;gap:1px;width:100%;min-width:0}
#asig-mini-cal .amc-evt-chip{
  font-size:.54rem;line-height:1;
  padding:2px 3px;border-radius:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:600;text-align:left;
}
#asig-mini-cal .amc-evt-more{
  font-size:.54rem;color:var(--muted);text-align:center;
  padding-top:1px;font-weight:600;
}

/* ── Lista Próximas fechas: filas minimalistas ── */
#ap-calendario-list{gap:0 !important}
#ap-calendario-list .cal-row{cursor:default}
#ap-calendario-list .cal-row > div:last-child{max-width:60%}
@media(max-width:560px){
  #ap-calendario-list .cal-row{flex-wrap:wrap}
  #ap-calendario-list .cal-row > div:nth-child(2){flex-basis:100%;order:-1}
  #ap-calendario-list .cal-row > div:last-child{max-width:100%;font-size:.66rem !important}
}


/* ── Visor Galería: imagen al máximo ancho en móvil ── */
@media(max-width:640px){
  #m-foto-viewer .fv-img,
  #m-foto-viewer #fv-video{
    max-width:100% !important;
    max-height:82vh !important;
    width:100%;
    object-fit:contain;
  }
  #m-foto-viewer .fv-body{ margin:4px !important; padding:2px !important; }
  #m-foto-viewer .fv-stage{ padding:0 !important; }
}


/* ── Campana: ocultar FAB "+" (funcionalidad duplicada en menú ⋮) ── */
#camp-fab-alarmas, #camp-fab-recordatorios, #camp-fab-cumpleanos,
#camp-panel-alarmas > .camp-wrap > div:has(> #camp-fab-alarmas),
#camp-panel-recordatorios > .camp-wrap > div:has(> #camp-fab-recordatorios),
#camp-panel-cumpleanos > .camp-wrap > div:has(> #camp-fab-cumpleanos){
  display:none !important;
}


/* ── Modal perfil: botones cuadrados con 4 esquinas redondeadas ── */
#m-perfil .btn-p,
#m-perfil .btn-sec{
  border-radius:10px !important;
  padding:10px 22px !important;
  width:auto !important;
  min-width:140px;
  margin:0 !important;
  border:none;
  border-top:none !important;
  font-weight:600;
  font-size:.88rem;
  cursor:pointer;
}
#m-perfil .btn-p{ background:var(--acc); color:#fff; }
#m-perfil .btn-sec{ background:var(--bg2); color:var(--txt); border:1px solid var(--bor); }
#m-perfil .btn-p:hover{ filter:brightness(1.05); }
#m-perfil > div > div:last-child > div[style*="border-top"]{
  padding:14px 16px !important;
  justify-content:flex-end !important;
  gap:10px !important;
}


/* ── Producción móvil: lateral NO flotante + documentos recientes debajo ── */
@media(max-width:640px){
  /* Forzar el panel lateral a fluir inline dentro de s-produccion */
  body.prod-mobile-inline #est-lateral-overlay{ display:none !important; }
  body.prod-mobile-inline #est-lateral-panel{
    position:static !important;
    width:100% !important;
    height:auto !important;
    min-height:auto !important;
    top:auto !important; bottom:auto !important; left:auto !important;
    box-shadow:none !important;
    z-index:auto !important;
    border-right:none !important;
    border-bottom:1px solid var(--bor);
    flex:none !important;
  }
  body.prod-mobile-inline #est-lat-close-btn{ display:none !important; }
  /* Solo cuando produccion es la sección ACTIVA. Si no, .section{display:none}
     sigue ganando y la sección queda oculta como debe. */
  body.prod-mobile-inline #s-produccion.on{
    margin-left:0 !important;
    overflow-y:auto !important;
    flex-direction:column !important;
  }
  body.prod-mobile-inline #prod-docs-recientes-mobile{
    padding:14px 16px;
    border-top:1px solid var(--bor);
    background:var(--bg1);
  }
  body.prod-mobile-inline #prod-docs-recientes-mobile h3{
    font-size:.72rem;
    font-weight:700;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.06em;
    margin:0 0 10px;
  }
  body.prod-mobile-inline #prod-docs-recientes-mobile .pdrm-row{
    display:flex;align-items:center;gap:10px;
    padding:9px 4px;
    border-bottom:1px solid var(--bor);
    cursor:pointer;
    transition:background .12s;
  }
  body.prod-mobile-inline #prod-docs-recientes-mobile .pdrm-row:last-child{ border-bottom:none; }
  body.prod-mobile-inline #prod-docs-recientes-mobile .pdrm-row:hover{ background:var(--bg2); }
  body.prod-mobile-inline #prod-docs-recientes-mobile .pdrm-icon{
    width:28px;height:28px;border-radius:6px;background:var(--bg2);
    display:flex;align-items:center;justify-content:center;
    font-size:.6rem;color:var(--muted);font-weight:700;flex-shrink:0;
  }
  body.prod-mobile-inline #prod-docs-recientes-mobile .pdrm-nom{
    flex:1;min-width:0;font-size:.82rem;color:var(--txt);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;
  }
  body.prod-mobile-inline #prod-docs-recientes-mobile .pdrm-date{
    font-size:.66rem;color:var(--muted);flex-shrink:0;
  }
  body.prod-mobile-inline #prod-docs-recientes-mobile .pdrm-empty{
    font-size:.76rem;color:var(--muted);text-align:center;padding:12px;font-style:italic;
  }
}


/* ──────────────────────────────────────────────────────────────
   PRODUCCIÓN — EDITOR DE TEXTO en pantallas estrechas (móvil/tablet)
   El editor de escritorio tiene 3 columnas (toolbar vertical 40px,
   panel Esquema ~170px, documento). En móvil esto deja el documento
   fuera de pantalla. Aquí lo recolocamos en una sola columna:
   toolbar horizontal scroll arriba, esquema oculto (icono toggle),
   documento ocupando todo el ancho.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 760px){
  /* Esquema lateral: oculto por defecto, accesible vía botón toggle */
  body:has(#prod-ed-body) .prod-ed-outline,
  body:has(#prod-ed-body) #prod-ed-outline{
    display:none !important;
  }
  /* Si el usuario lo despliega a propósito (clase .open), aparece flotando */
  body:has(#prod-ed-body) .prod-ed-outline.open,
  body:has(#prod-ed-body) #prod-ed-outline.open{
    display:flex !important;
    position:fixed !important;
    top:0;left:0;bottom:0;
    width:240px !important;min-width:240px !important;max-width:80vw !important;
    z-index:9000;background:var(--bg2,#fff);box-shadow:2px 0 12px rgba(0,0,0,.18);
  }
  /* Toolbar vertical -> horizontal con scroll en mobile */
  body:has(#prod-ed-body) .prod-ed-vtoolbar,
  body:has(#prod-ed-body) #prod-ed-toolbar{
    flex-direction:row !important;
    width:100% !important;
    max-width:100vw !important;
    height:auto !important;
    border-right:none !important;
    border-bottom:1px solid var(--bor) !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:6px !important;
    gap:2px !important;
    align-items:center !important;
    flex-shrink:0 !important;
  }
  /* Las separaciones verticales pasan a verticales (líneas finas) */
  body:has(#prod-ed-body) .prod-vtb-sep{
    width:1px !important;
    height:18px !important;
    margin:0 4px !important;
    flex-shrink:0 !important;
  }
  /* Tooltips de la toolbar: en mobile aparecen abajo en vez de a la derecha */
  body:has(#prod-ed-body) .prod-ed-vtoolbar button[title]:hover::after{
    left:50% !important; top:calc(100% + 6px) !important;
    transform:translateX(-50%) !important;
  }
  /* Documento: ancho fluido, no 210mm fijo */
  body:has(#prod-ed-body) .prod-ed-doc-page,
  body:has(#prod-ed-body) #prod-ed-body{
    width:100% !important;
    max-width:100% !important;
    min-height:60vh !important;
    height:auto !important;
    max-height:none !important;
    padding:18px 14px !important;
    box-shadow:none !important;
    font-size:1rem !important;
    line-height:1.55 !important;
    overflow:visible !important;
  }
  /* El wrap del documento sin padding extra y permitiendo scroll */
  body:has(#prod-ed-body) .prod-ed-doc-wrap,
  body:has(#prod-ed-body) #prod-ed-doc-wrap{
    padding:0 !important;
    gap:0 !important;
    background:var(--panel,#fff) !important;
  }
  body:has(#prod-ed-body) #prod-ed-pages{
    width:100% !important;
    flex-direction:column !important;
  }
  /* El contenedor que envuelve toolbar+outline+doc-wrap pasa a columna,
     pero SIN tocar la toolbar ni nada que sea un descendiente útil. */
  body:has(#prod-ed-body) #prod-root{
    flex-direction:column !important;
    width:100% !important;
    min-width:0 !important;
  }
  /* El wrapper directo del editor (hermano de prod-ed-nombre, etc.) — el div
     anónimo que contiene toolbar+outline+doc-wrap. Lo identificamos como
     "tiene a #prod-ed-toolbar como hijo directo". */
  body:has(#prod-ed-body) #prod-root > div:has(> #prod-ed-toolbar){
    flex-direction:column !important;
    width:100% !important;
    min-width:0 !important;
    height:auto !important;
  }
  /* Status bar más compacta */
  body:has(#prod-ed-body) #prod-statusbar{
    flex-wrap:wrap !important;
    gap:4px !important;
    font-size:.7rem !important;
    padding:4px 8px !important;
  }
  /* Botón toggle del Esquema: visible y flotante en mobile cuando hay editor */
  body:has(#prod-ed-body) #prod-outline-collapse-btn{
    position:fixed !important;
    top:60px !important;
    left:0 !important;
    z-index:9001 !important;
    width:28px !important;
    height:44px !important;
    border-radius:0 8px 8px 0 !important;
  }
  /* Cuando el editor abre, ocultamos la lista de documentos recientes mobile */
  body.prod-mobile-inline:has(#prod-ed-body) #prod-docs-recientes-mobile,
  body.prod-mobile-inline:has(#prod-ed-body) #est-lateral-panel{
    display:none !important;
  }
}


/* ── Editor Texto: footer de controles en el Esquema ── */
.prod-ol-label{
  font-size:.58rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  font-weight:700;
  margin-top:2px;
}
.prod-ol-sel{
  width:100%;
  padding:5px 7px;
  border:1px solid var(--bor);
  border-radius:6px;
  background:var(--bg2);
  color:var(--txt);
  font-size:.74rem;
  cursor:pointer;
  outline:none;
}
.prod-ol-sel:hover{ border-color:var(--acc); }
.prod-ol-sel:focus{ border-color:var(--acc); box-shadow:0 0 0 2px rgba(88,101,242,.12); }
#prod-outline-footer{ min-width:170px }


/* ── Editor Texto: ocultar fila de título del documento (se mueve al esquema) ── */
#workarea-title-bar{ display:none !important; }
/* Título en el Esquema */
#prod-outline-title{
  padding:8px 10px 4px;
  font-size:.85rem;font-weight:700;color:var(--txt);
  line-height:1.25;
  border-bottom:1px solid var(--bor);
  white-space:normal;
  word-break:break-word;
  cursor:pointer;
  margin-bottom:4px;
}
#prod-outline-title:hover{ background:var(--bg2); }
#prod-outline-title .pot-status{
  display:block;font-size:.64rem;font-weight:500;color:var(--muted);margin-top:2px;
}


/* Pulse animation + tamaño handle plegado */
@keyframes estLatTogPulse{
  0%,100%{ box-shadow:0 2px 10px rgba(168,222,141,.45); }
  50%    { box-shadow:0 4px 16px rgba(168,222,141,.7); }
}
.est-lat-tog-pulse{
  animation: estLatTogPulse 1.6s ease-in-out 2;
}
#est-lat-tog:not(.est-lat-tog-pulse){
  width:18px !important;
  height:56px !important;
  border-radius:10px !important;
  box-shadow:0 2px 6px rgba(0,0,0,.06) !important;
}


/* ── Editor texto: ocultar statusbar original (se reemplaza en Esquema) ── */
.prod-statusbar#prod-statusbar{ display:none !important; }
/* Mini-statusbar integrada en el footer del Esquema */
#prod-outline-sb{
  display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;
  padding:8px 8px 0;
  border-top:1px dashed var(--bor);margin-top:6px;
  font-size:.64rem;color:var(--muted);
}
#prod-outline-sb .posb-item{ white-space:nowrap; }
#prod-outline-sb .posb-sep{ color:var(--bor); }
#prod-outline-sb .posb-row{ display:flex;align-items:center;gap:6px;width:100%;margin-top:4px }
#prod-outline-sb select,
#prod-outline-sb button{
  background:var(--bg2);border:1px solid var(--bor);color:var(--txt);
  border-radius:6px;padding:3px 6px;font-size:.7rem;cursor:pointer;
}
#prod-outline-sb select{ flex:1;min-width:0 }
#prod-outline-sb button:hover{ background:var(--bg1) }
/* Ancho mínimo/máximo sensato del Esquema + selects al 100% */
.prod-ed-outline{ min-width:170px; max-width:230px }
.prod-ol-sel{ width:100% !important; box-sizing:border-box !important; max-width:100% !important; }
#prod-outline-footer{ box-sizing:border-box }


/* ── Editor texto abierto: ocultar handle flotante externo, usamos el interno del Esquema ── */
body:has(#prod-ed-body) #est-lat-tog{ display:none !important; }
/* Asegurar que el botón interno toma protagonismo */
#prod-outline-collapse-btn:hover{ background:#c1ebad !important; color:#1b5e20 !important; }


/* ── Campana: tipografía fina, color gris oscuro (no negro) ── */
#s-campana .camp-item,
#s-campana .camp-item-txt,
#s-campana .camp-item-meta,
#s-campana .camp-item-acts button,
#s-campana .camp-tab,
#s-campana .camp-tab-txt{
  color:#3b4252 !important;        /* gris oscuro elegante, no negro */
}
#s-campana .camp-item-txt{
  font-weight:400 !important;       /* más fina */
  letter-spacing:.005em;
  font-size:.86rem !important;
}
#s-campana .camp-item-meta{
  font-weight:400 !important;
  color:#6b7280 !important;         /* gris medio */
  font-size:.68rem !important;
}
#s-campana .camp-tab-txt{
  font-weight:500 !important;
  letter-spacing:.02em;
}
/* Encabezados de bloques (tareas / eventos / cumple por grupo) */
#s-campana h3,
#s-campana h4,
#s-campana .camp-group-title,
#s-campana .camp-block-head{
  font-weight:500 !important;
  color:#4b5563 !important;
  letter-spacing:.01em;
}
/* Pestañas activas un punto más marcadas, pero sin llegar a bold */
#s-campana .camp-tab.on,
#s-campana .camp-tab.on .camp-tab-txt{
  color:#1f2937 !important;
  font-weight:600 !important;
}
/* Iconos emoji dentro del texto: sin cambio, siguen del sistema */
/* Clic en título sigue marcado con cursor:pointer pero sin bold */


/* ── Campana Recordatorios: pills de tipo + fila tintada + toggle vista ── */
/* Colores canónicos por tipo (fondos pastel para fila, texto para pill) */
#s-campana .rec-by-block,
#s-campana .rec-by-date{ width:100% }
#s-campana .rec-view-toggle{
  display:flex;gap:4px;padding:6px 10px 2px;justify-content:center;
}
#s-campana .rec-view-toggle button{
  background:transparent;border:1px solid var(--bor);color:#6b7280;
  padding:5px 14px;border-radius:18px;cursor:pointer;font-size:.72rem;font-weight:500;
  transition:all .15s;
}
#s-campana .rec-view-toggle button.on{
  background:#3b4252;color:#fff;border-color:#3b4252;
}
#s-campana .rec-view-toggle button:not(.on):hover{ background:var(--bg2) }

/* Ítem de recordatorio en lista (por fecha) */
#s-campana .rec-row{
  display:flex;align-items:center;gap:10px;
  padding:7px 10px;margin-bottom:3px;
  font-size:.82rem;color:#3b4252;
  background:var(--_rec-pastel-bg,rgba(156,163,175,.08));
  border:none;border-radius:8px;
  cursor:pointer;
  transition:filter .12s, background .12s;
}
#s-campana .rec-row:hover{ filter:brightness(.96) }
#s-campana .rec-pill{
  display:inline-flex;align-items:center;gap:4px;flex-shrink:0;
  font-size:.58rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  padding:3px 8px;border-radius:999px;
  background:var(--_rec-pill-bg,#eef2f6);color:var(--_rec-pill-fg,#4b5563);
  line-height:1;
}
#s-campana .rec-title{
  flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:400;color:#3b4252;font-size:.83rem;
}
#s-campana .rec-meta{
  flex-shrink:0;font-size:.66rem;color:#6b7280;font-weight:400;
  white-space:nowrap;
}
/* Colores por tipo — versión saturada + versión pastel para fila y pastilla */
#s-campana .rec-row.t-personal   { --_rec-col:#3273dc; --_rec-pastel-bg:rgba(50,115,220,.10);  --_rec-pill-bg:#d9e6fa; --_rec-pill-fg:#1d4fb8; }
#s-campana .rec-row.t-estudio    { --_rec-col:#d97706; --_rec-pastel-bg:rgba(217,119,6,.12);   --_rec-pill-bg:#fdead0; --_rec-pill-fg:#92530a; }
#s-campana .rec-row.t-evento     { --_rec-col:#7c3aed; --_rec-pastel-bg:rgba(124,58,237,.10);  --_rec-pill-bg:#e7dffb; --_rec-pill-fg:#5b22c6; }
#s-campana .rec-row.t-produccion { --_rec-col:#64748b; --_rec-pastel-bg:rgba(100,116,139,.12); --_rec-pill-bg:#e1e6ec; --_rec-pill-fg:#4a5566; }
#s-campana .rec-row.t-reunion    { --_rec-col:#b45309; --_rec-pastel-bg:rgba(180,83,9,.12);    --_rec-pill-bg:#fbddbe; --_rec-pill-fg:#84390a; }
#s-campana .rec-row.t-hilo       { --_rec-col:#2563eb; --_rec-pastel-bg:rgba(37,99,235,.10);   --_rec-pill-bg:#dbe4fb; --_rec-pill-fg:#1d4fb8; }

/* Separador de bloques en la vista por fecha */
#s-campana .rec-day-head{
  font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:#6b7280;margin:10px 4px 6px;padding-bottom:4px;border-bottom:1px solid rgba(0,0,0,.06);
}


/* ── Recordatorios: pastilla con fondo pastel + texto del color del tipo ── */
#s-campana .rec-row .rec-pill{
  background: var(--_rec-pill-bg, #eef2f6) !important;
  color: var(--_rec-pill-fg, #4b5563) !important;
  border: 1px solid rgba(0,0,0,.04);
}
#s-campana .rec-row .rec-pill svg{ color: var(--_rec-pill-fg, #4b5563) !important; }


/* ── Iconos minimalistas en gris — regla global ── */
/* 1) SVG inline dentro de listados/menús/cabeceras → color gris muted */
#s-campana svg,
.camp-item svg,
.camp-bloque-hdr svg,
.rec-pill svg,
.rec-day-head svg,
.pdm-itm svg,
.prod-doc-menu svg,
.camp-dots-menu svg,
.est-top-actions svg{
  color:#6b7280;
}
/* 2) Emojis dentro de .camp-bloque-hdr y .rec-pill: reducidos a un gris
   gracias a grayscale + opacity. Para navegadores que no soportan filter,
   el color por defecto del emoji sigue visible. */
#s-campana .camp-bloque-hdr > span:first-child::before,
#s-campana .rec-pill::before{ content: ''; }
#s-campana .camp-bloque-hdr .emoji,
#s-campana .rec-pill .emoji,
#s-campana .rec-title .emoji{
  filter: grayscale(1) brightness(.7);
}
/* 3) Si alguien aún usa emojis sueltos en .camp-item-txt los desaturamos */
#s-campana .camp-item-txt{ /* deja el emoji pero lo enfría */ }


/* ── Bloque 2 (líneas 4346-4386 de index.php) ─────────────── */
  [hidden]{display:none !important;}

  .sec{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  .sec.on{
    display:block !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  .modal-bg{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  .modal-bg.on{
    display:flex !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

/* ── Input clear button & password toggle ───────────────── */
/* Los botones ic-clear e ic-eye se insertan como hermanos del input
   dentro del mismo padre. El padre recibe position:relative por JS. */
.ic-clear{
  position:absolute;background:none;border:none;cursor:pointer;
  color:var(--muted,#aaa);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .15s,background .12s;z-index:5;
}
.ic-clear:hover{background:var(--bg3,#eee);color:var(--txt);opacity:1!important}
.ic-eye{
  position:absolute;background:none;border:none;cursor:pointer;
  color:var(--muted,#aaa);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .15s,background .12s;z-index:5;
}
.ic-eye:hover{background:var(--bg3,#eee);color:var(--txt);opacity:1!important}



/* ══════════════════════════════════════════════════════════════
   CRM — Cursos en pantalla estrecha: navegación drill-down
   ──────────────────────────────────────────────────────────────
   En desktop la vista del curso usa 2 columnas (sidebar 240px con
   listas + main con detalle). En móvil eso parte la pantalla y
   no funciona. Aquí convertimos esa estructura en un flujo de
   pantallas completas con botón "← Volver":

     PANTALLA 1: lista (Asignaturas / Documentos / Alumnos) full
     PANTALLA 2: detalle del item seleccionado, con botón volver

   Toggle: el body añade .crm-curso-detail cuando hay detalle abierto.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 800px) {
  /* PANTALLA 1: sidebar a ancho completo, panel main oculto */
  #crm-inicio-info #crm-curso-sidebar2{
    width:100% !important;
    max-width:100% !important;
    border-right:none !important;
    transition:none !important;
  }
  #crm-inicio-info #crm-curso-main{
    display:none !important;
  }
  /* Si el body tiene .crm-curso-detail, invertimos: detalle full, sidebar oculto */
  body.crm-curso-detail #crm-inicio-info #crm-curso-sidebar2{
    display:none !important;
  }
  body.crm-curso-detail #crm-inicio-info #crm-curso-main{
    display:flex !important;
    width:100% !important;
    padding-top:48px !important; /* hueco para la cabecera con botón ← */
    position:relative;
  }
  /* Botón ← Volver flotante, fijado arriba del panel detalle */
  #crm-curso-back-btn{
    position:absolute;
    top:8px; left:8px;
    z-index:10;
    width:auto;height:34px;
    padding:0 14px;
    border:1px solid var(--bor,#ddd);
    background:var(--bg2,#fff);
    color:var(--txt,#222);
    border-radius:18px;
    font-size:.78rem;font-weight:600;
    cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.10);
    display:none;
    align-items:center;gap:6px;
    line-height:1;
  }
  body.crm-curso-detail #crm-curso-back-btn{display:inline-flex !important;}
  /* El handle de plegar el sidebar2 (en desktop) no tiene sentido en móvil */
  #crm-sb2-toggle{display:none !important;}
}


/* ══════════════════════════════════════════════════════════
   RECORDATORIO MODAL — Hilos (rediseño 2026-05)
   Calendario visual + selector de hora elegante
   ══════════════════════════════════════════════════════════ */
.rec-modal-bg{
  position:fixed; inset:0;
  background:rgba(15,18,24,.45);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  display:flex; align-items:flex-start; justify-content:center;
  padding:24px 14px;
  z-index:9999;
  opacity:0; transition:opacity .18s ease;
  overflow-y:auto;
}
.rec-modal-bg.on{ opacity:1; }
.rec-modal{
  background:#fff; width:100%; max-width:430px;
  border-radius:18px; box-shadow:0 20px 60px rgba(15,18,24,.28);
  padding:22px 22px 18px;
  transform:translateY(8px) scale(.98);
  transition:transform .22s cubic-bezier(.2,.8,.3,1);
  display:flex; flex-direction:column; gap:10px;
  margin:auto;
}
.rec-modal-bg.on .rec-modal{ transform:translateY(0) scale(1); }

.rec-header{ display:flex; align-items:center; gap:12px; margin-bottom:4px; }
.rec-header-icon{
  width:42px; height:42px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.45rem;
  background:linear-gradient(135deg,#fde68a 0%,#fbbf24 100%);
  box-shadow:0 4px 10px rgba(245,158,11,.25);
}
.rec-header-text{ flex:1; min-width:0; }
.rec-header-text h3{ margin:0; font-size:1.05rem; font-weight:700; color:#1a1a1a; line-height:1.15; }
.rec-header-text p { margin:2px 0 0; font-size:.74rem; color:#888; }
.rec-close{
  width:32px; height:32px; border-radius:50%;
  border:none; background:#f3f4f6; cursor:pointer; color:#666;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s;
}
.rec-close svg{ width:14px; height:14px; }
.rec-close:hover{ background:#e5e7eb; color:#1a1a1a; }

.rec-title-input{
  width:100%; box-sizing:border-box; padding:12px 14px;
  border:1.5px solid #e5e7eb; border-radius:11px;
  font-size:.92rem; font-weight:500; color:#1a1a1a; outline:none;
  transition:border-color .15s, box-shadow .15s;
  background:#fafbfc;
}
.rec-title-input::placeholder{ color:#9ca3af; font-weight:400; }
.rec-title-input:focus{ border-color:#fbbf24; box-shadow:0 0 0 3px rgba(251,191,36,.18); background:#fff; }

.rec-section-label{
  font-size:.62rem; font-weight:700; color:#9ca3af;
  text-transform:uppercase; letter-spacing:.5px; margin:6px 0 -2px;
}

.rec-presets{ display:flex; flex-wrap:wrap; gap:6px; }
.rec-preset{
  padding:7px 12px; border-radius:999px;
  background:#f3f4f6; border:1px solid transparent; color:#374151;
  font-size:.74rem; font-weight:600; cursor:pointer;
  transition:all .15s;
}
.rec-preset:hover{ background:#e5e7eb; color:#111; }
.rec-preset.on{ background:#fef3c7; color:#92400e; border-color:#fbbf24; }

.rec-cal{
  background:#fafbfc; border:1px solid #eef0f2; border-radius:12px;
  padding:10px 10px 8px;
}
.rec-cal-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.rec-cal-month{ font-size:.84rem; font-weight:700; color:#1a1a1a; text-transform:capitalize; }
.rec-cal-nav{
  width:28px; height:28px; border-radius:8px;
  border:none; background:#fff; cursor:pointer; color:#555;
  font-size:1.1rem; line-height:1; font-weight:700;
  box-shadow:0 1px 2px rgba(0,0,0,.04); transition:all .15s;
}
.rec-cal-nav:hover{ background:#fef3c7; color:#92400e; }
.rec-cal-weekdays{
  display:grid; grid-template-columns:repeat(7,1fr); gap:2px;
  font-size:.6rem; font-weight:700; color:#9ca3af;
  text-align:center; letter-spacing:.4px; margin-bottom:4px;
}
.rec-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.rec-cal-cell{
  height:34px; border:none; background:none; cursor:pointer;
  border-radius:8px; font-size:.78rem; font-weight:500;
  color:#1f2937; transition:all .12s;
  display:flex; align-items:center; justify-content:center;
}
.rec-cal-cell:hover{ background:#fef3c7; color:#92400e; }
.rec-cal-cell.out{ color:#d1d5db; cursor:default; pointer-events:none; }
.rec-cal-cell.past{ color:#cbd5e1; }
.rec-cal-cell.today{ background:#fff7ed; color:#c2410c; font-weight:700; }
.rec-cal-cell.on{
  background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 100%);
  color:#fff; font-weight:700;
  box-shadow:0 3px 8px rgba(245,158,11,.35);
}

.rec-time-block{
  background:#fafbfc; border:1px solid #eef0f2; border-radius:12px;
  padding:12px;
  display:flex; flex-direction:column; gap:10px; align-items:center;
}
.rec-time-display{
  display:flex; align-items:center; gap:6px;
  font-variant-numeric:tabular-nums;
}
.rec-clock-input{
  width:64px; height:54px;
  border:1.5px solid #e5e7eb; border-radius:10px;
  font-size:1.6rem; font-weight:700; text-align:center;
  color:#1a1a1a; background:#fff; outline:none;
  font-variant-numeric:tabular-nums;
  transition:border-color .15s, box-shadow .15s;
  -moz-appearance:textfield;
}
.rec-clock-input::-webkit-outer-spin-button,
.rec-clock-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.rec-clock-input:focus{ border-color:#fbbf24; box-shadow:0 0 0 3px rgba(251,191,36,.18); }
.rec-clock-up,.rec-clock-down{
  width:30px; height:24px; border:none; border-radius:6px;
  background:#f3f4f6; cursor:pointer; color:#666; font-size:.8rem;
  display:flex; align-items:center; justify-content:center;
  padding:0; transition:background .12s;
}
.rec-clock-up{ margin-right:-2px; }
.rec-clock-down{ margin-left:-2px; }
.rec-clock-up:hover,.rec-clock-down:hover{ background:#fef3c7; color:#92400e; }
.rec-clock-sep{ font-size:1.6rem; font-weight:700; color:#1a1a1a; padding:0 4px; }

.rec-time-quick{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.rec-time-chip{
  padding:6px 10px; border-radius:8px;
  background:#fff; border:1px solid #e5e7eb; color:#374151;
  font-size:.74rem; font-weight:600; cursor:pointer;
  font-variant-numeric:tabular-nums; transition:all .12s;
}
.rec-time-chip:hover{ background:#fef3c7; border-color:#fbbf24; color:#92400e; }
.rec-time-chip.on{ background:#fbbf24; border-color:#f59e0b; color:#fff; }

.rec-summary{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:11px;
  background:#fffbeb; color:#92400e;
  font-size:.78rem;
}
.rec-summary svg{ width:16px; height:16px; flex-shrink:0; }
.rec-summary strong{ color:#7c2d12; text-transform:capitalize; }

.rec-footer{ display:flex; gap:8px; margin-top:6px; }
.rec-cancel,.rec-save{
  flex:1; padding:11px 14px; border-radius:11px; border:none;
  font-size:.84rem; font-weight:600; cursor:pointer;
  transition:all .15s;
}
.rec-cancel{ background:#f3f4f6; color:#374151; }
.rec-cancel:hover{ background:#e5e7eb; }
.rec-save{
  background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 100%); color:#fff;
  box-shadow:0 4px 10px rgba(245,158,11,.25);
}
.rec-save:hover{ box-shadow:0 6px 14px rgba(245,158,11,.32); transform:translateY(-1px); }
.rec-save:active{ transform:translateY(0); }
.rec-save:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

@media (max-width:520px){
  .rec-modal{ padding:18px 16px 14px; border-radius:14px; }
  .rec-clock-input{ width:56px; height:48px; font-size:1.4rem; }
  .rec-clock-sep{ font-size:1.4rem; }
}

/* ══════════════════════════════════════════════════════════════════
   #148 — AUDITORÍA MÓVIL EXHAUSTIVA — fixes preventivos
   Cubre los problemas observados al renderizar la app a 420px:
   - Cabecera de chat (.chat-tb-status) que partía "en línea" en 2 líneas
   - Avatar #chat-av cortado por padding insuficiente
   - Topbar superior con elementos compitiendo por espacio
   - Bottom-nav que pisaba contenido en landscape
   - Placeholder "Selecciona una conversación" se desbordaba
   - Sidebar de conversaciones que no llenaba el ancho real
   - Buscador del topbar superior que rompía el layout en móvil
   - Modales que pisaban la bnav o el safe-area inferior
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Topbar superior compacto en móvil ───────────────────────── */
@media (max-width:640px){
  .topbar{ gap:.4rem !important; padding-left:calc(.6rem + var(--safe-left,0px)) !important; padding-right:calc(.6rem + var(--safe-right,0px)) !important; }
  .topbar h1{ font-size:.86rem !important; letter-spacing:.2px !important; }
  .topbar .tlogo{ width:30px !important; height:30px !important; font-size:.85rem !important; }
  .topbar .tbtn{ padding:.3rem !important; }
  .topbar .tbtn svg{ width:16px !important; height:16px !important; }
  /* Ocultar buscador del topbar superior en móvil — la app tiene buscadores
     internos por sección que cumplen mejor su función */
  #topbar-search,
  #topbar-search-wrap{ display:none !important; }
  /* Avatar del topbar superior (no confundir con #chat-av del chat-topbar) */
  .topbar .myav{ width:30px !important; height:30px !important; font-size:.78rem !important; }
}

/* ── 2. Chat topbar — status "en línea" sin partirse + ellipsis fina ── */
@media (max-width:640px){
  /* (#318) Fix: el chat-topbar quedaba 11px detrás del topbar global,
     cortando la parte alta del avatar del contacto. Empujamos hacia abajo
     con margin-top para que el avatar quede totalmente visible. */
  #chat-tb, .chat-topbar { margin-top: 12px !important; }
  .chat-tb-info{ overflow:hidden !important; min-width:0 !important; }
  .chat-tb-name{
    line-height:1.2 !important; max-width:100% !important;
    white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
  }
  .chat-tb-status{
    white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
    line-height:1.15 !important;
  }
  .chat-tb-status #chat-online{ font-size:.6rem !important; }
  /* Acciones a la derecha del topbar de chat compactas */
  .chat-topbar .tbtn,
  .chat-topbar .icoBtn{ padding:.3rem !important; }
  .chat-topbar .tbtn svg,
  .chat-topbar .icoBtn svg{ width:16px !important; height:16px !important; }
}

/* ── 3. Sidebar de conversaciones — ancho real en móvil ─────────── */
@media (max-width:640px){
  .conv-sidebar{ min-width:0 !important; width:100% !important; max-width:100% !important; }
  /* Tabs Directos/Canales/Grupos: padding más compacto y texto sin partirse */
  .csb-tab{ padding:7px 2px !important; font-size:.66rem !important; letter-spacing:.15px !important; }
  /* Header del sidebar más compacto */
  .csb-header{ padding:10px 12px 6px !important; }
  .csb-header-title{ font-size:.88rem !important; }
}

/* ── 4. Placeholder "Selecciona una conversación" centrado y legible ── */
@media (max-width:640px){
  .chat-area .chat-empty,
  .chat-area > div[id*="empty"],
  #chat-empty-state{
    padding:24px 18px !important;
    text-align:center !important;
    line-height:1.45 !important;
    font-size:.88rem !important;
  }
}

/* ── 5. Composer del chat — input más cómodo para pulgares ────── */
@media (max-width:640px){
  .chat-inp{ padding:7px 8px 7px 8px !important; gap:6px !important; }
  .ci-wrap{ padding:7px 12px !important; min-height:36px !important; }
  #msg-ed{ font-size:16px !important; line-height:1.4 !important; }
  .btn-send{ width:36px !important; height:36px !important; font-size:.95rem !important; }
}

/* ── 6. Burbujas de mensaje — respetan ancho real, nunca se desbordan ── */
@media (max-width:640px){
  .msg-bubble{ max-width:80% !important; font-size:.85rem !important; }
  .msg-bubble img,
  .msg-bubble video{ max-width:100% !important; height:auto !important; border-radius:10px !important; }
  .msg-actions{ right:2px !important; top:-12px !important; }
}

/* ── 7. Bottom-nav (.bnav) — robusta y siempre legible ─────────── */
@media (max-width:640px){
  .bnav{ height:calc(56px + env(safe-area-inset-bottom,0px)) !important; padding-bottom:env(safe-area-inset-bottom,0px) !important; }
  .bnav-btn{ font-size:.62rem !important; gap:2px !important; }
  .bnav-btn svg{ width:20px !important; height:20px !important; }
}

/* ── 8. NOTAS — grid de cards a 1 columna y card sin desbordes ─ */
@media (max-width:640px){
  #s-notas .notas-grid,
  #s-notas .notes-grid,
  .notas-grid{ grid-template-columns:1fr !important; gap:8px !important; padding:10px !important; }
  .nota-card,
  .note-card{ padding:12px !important; min-height:auto !important; }
  .nota-card .nc-title,
  .note-card .nc-title{ font-size:.92rem !important; }
}

/* ── 9. PRODUCCIÓN — tarjetas en columna y action-bar wrap ──── */
@media (max-width:640px){
  #s-produccion .prod-list,
  #s-produccion .proj-grid{ grid-template-columns:1fr !important; gap:10px !important; }
  #s-produccion .proj-card,
  .proj-card{ padding:12px !important; }
  .ed-toolbar,
  .editor-toolbar{ flex-wrap:wrap !important; gap:4px !important; padding:6px 8px !important; }
  .ed-toolbar button,
  .editor-toolbar button{ padding:5px 8px !important; font-size:.78rem !important; }
}

/* ── 10. Modales globales — respetan bnav y safe-area ────────── */
@media (max-width:640px){
  .modal-bg{ padding:12px 10px !important; align-items:flex-start !important; }
  .modal{ max-height:calc(100dvh - 80px - env(safe-area-inset-bottom,0px) - var(--safe-top,0px)) !important; margin-top:calc(var(--safe-top,0px) + 10px) !important; border-radius:14px !important; }
  .modal.wide{ max-width:100% !important; }
  .modal-bg{ z-index:9500 !important; }
}

/* ── 11. CRM — cards en columna, búsqueda full-width ─────────── */
@media (max-width:640px){
  #s-crm .crm-search,
  #s-crm .crm-search-wrap{ width:100% !important; }
  #s-crm .crm-cards,
  #s-crm .crm-grid{ grid-template-columns:1fr !important; gap:8px !important; }
  #s-crm .crm-tabs,
  .crm-dtabs{ overflow-x:auto !important; flex-wrap:nowrap !important; -webkit-overflow-scrolling:touch !important; }
  #s-crm .crm-tabs::-webkit-scrollbar,
  .crm-dtabs::-webkit-scrollbar{ display:none !important; }
}

/* ── 12. ESTUDIO — sidebar lateral colapsa y main full-width ── */
@media (max-width:640px){
  #s-estudio .est-wrap,
  #s-estudio .est-content{ flex-direction:column !important; }
  #s-estudio #est-main{ width:100% !important; }
}

/* ── 13. BUZÓN (mail) — lista y detalle drill-down ───────────── */
@media (max-width:640px){
  #s-mail .mail-wrap,
  #s-buzon .mail-wrap{ flex-direction:column !important; }
  #s-mail .mail-list,
  #s-buzon .mail-list{ width:100% !important; max-height:none !important; }
  body:not(.mail-open) #s-mail .mail-detail,
  body:not(.mail-open) #s-buzon .mail-detail{ display:none !important; }
  body.mail-open #s-mail .mail-list,
  body.mail-open #s-buzon .mail-list{ display:none !important; }
  body.mail-open #s-mail .mail-detail,
  body.mail-open #s-buzon .mail-detail{ display:flex !important; width:100% !important; }
}

/* ── 14. AGENDA / CAMPANA — eventos densos legibles ─────────── */
@media (max-width:640px){
  #s-agenda .ag-grid,
  #s-campana .ev-list{ padding:8px !important; }
  .ag-event,
  .ev-card{ font-size:.78rem !important; padding:8px 10px !important; }
}

/* ── 15. EDITOR 2D — toolbar wrap, timeline scrollable ──────── */
@media (max-width:900px){
  #a2d-toolbar{ flex-wrap:wrap !important; gap:3px !important; padding:4px !important; }
  #a2d-toolbar button{ width:32px !important; height:32px !important; }
  #a2d-timeline{ overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; }
  #a2d-rightpanel,
  #a2d-properties{ width:100% !important; max-width:100% !important; }
  #a2d-stage-wrap{ min-height:240px !important; }
}

/* ── 16. LANDSCAPE móvil (alto bajo) — bnav más compacta ────── */
@media (max-width:900px) and (max-height:480px){
  .topbar{ height:calc(44px + var(--safe-top,0px)) !important; padding-bottom:4px !important; }
  .topbar h1{ font-size:.78rem !important; }
  .bnav{ height:calc(46px + env(safe-area-inset-bottom,0px)) !important; }
  .bnav-btn{ font-size:.58rem !important; }
  .bnav-btn svg{ width:16px !important; height:16px !important; }
  .chat-topbar{ min-height:44px !important; padding:4px 8px !important; }
  .chat-tb-name{ font-size:.82rem !important; }
  .chat-tb-status{ font-size:.62rem !important; }
}

/* ── 17. Scroll touch en zonas de scroll del chat ───────────── */
@media (max-width:640px){
  .chat-msgs,
  .conv-list,
  .ctp-msgs{ -webkit-overflow-scrolling:touch !important; overscroll-behavior:contain !important; }
}

/* ── 18. Toast "Nueva versión disponible" — no pisa la bnav ──── */
@media (max-width:640px){
  #update-toast,
  .update-banner,
  #sw-update-banner{
    bottom:calc(var(--bnav,60px) + env(safe-area-inset-bottom,0px) + 8px) !important;
    right:8px !important; left:8px !important; max-width:none !important;
  }
}

/* ── 19. Hilos — sidebar drill-down full-screen en móvil ────── */
@media (max-width:640px){
  .chat-thread-panel{ position:fixed !important; inset:0 !important; width:100vw !important; max-width:100vw !important; height:100% !important; z-index:8500 !important; border-left:none !important; }
  .chat-thread-panel.hidden{ transform:translateX(100%); transition:transform .2s ease; pointer-events:none; }
  .chat-thread-panel:not(.hidden){ transform:translateX(0); transition:transform .2s ease; }
}

/* ── 20. Inputs — fuente 16px en móvil para evitar zoom iOS ───── */
@media (max-width:640px){
  input[type=text],
  input[type=search],
  input[type=email],
  input[type=password],
  input[type=number],
  input[type=tel],
  input[type=url],
  textarea,
  [contenteditable=true]{
    font-size:16px !important;
  }
}
/* ══════════════════════════════════════════════════════════════════
   FIN #148 — auditoría móvil
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   #174/#177 — TEXTO: tabla y cuadrados de color
   - Color squares con contorno fino completo en las 4 esquinas
   - Celdas solo crecen verticalmente, ancho fijo respeta drag manual
   ══════════════════════════════════════════════════════════════════ */
input[type="color"]{
  -webkit-appearance:none;
  appearance:none;
  border:1px solid var(--bor,#cfd5e0) !important;
  border-radius:4px !important;
  width:24px;height:20px;
  padding:0 !important;
  cursor:pointer;
  background:#fff;
  box-sizing:border-box;
}
input[type="color"]::-webkit-color-swatch-wrapper{padding:1px;border-radius:3px}
input[type="color"]::-webkit-color-swatch{border:none;border-radius:3px}
input[type="color"]::-moz-color-swatch{border:none;border-radius:3px}

/* Celdas de tabla en el editor: ancho fijo, texto envuelve, sin auto-grow horizontal */
#prod-ed-body table td,
#prod-ed-body table th,
.prod-ed-doc-page table td,
.prod-ed-doc-page table th,
.nota-ed table td,
.nota-ed table th{
  word-wrap:break-word !important;
  overflow-wrap:break-word !important;
  white-space:normal !important;
  vertical-align:top;
  height:auto;
  /* width definido en línea por el HTML; no ensanchar automático */
}
#prod-ed-body table,
.prod-ed-doc-page table,
.nota-ed table{
  table-layout:fixed; /* clave: respeta los anchos explícitos por columna */
}

/* ══════════════════════════════════════════════════════════════════
   #181 — TEXTO toolbar con flechas y scroll vertical cuando no cabe
   ══════════════════════════════════════════════════════════════════ */
#prod-vtb,
.prod-vtb,
.prod-vertical-toolbar{
  display:flex;flex-direction:column;align-items:center;
  max-height:calc(100vh - 120px);
  overflow-y:auto;
  scroll-behavior:smooth;
  padding-top:18px;padding-bottom:18px;
  position:relative;
}
#prod-vtb::-webkit-scrollbar,
.prod-vtb::-webkit-scrollbar,
.prod-vertical-toolbar::-webkit-scrollbar{width:0}

/* Flechas arriba/abajo flotantes pegadas al toolbar */
.prod-vtb-arrow,
.prod-vtb-arrow-up,
.prod-vtb-arrow-down{
  position:sticky;
  background:linear-gradient(to bottom, var(--bg2,#f6f6f6), var(--bg2,#f6f6f6) 70%, transparent);
  width:100%;height:18px;display:flex;align-items:center;justify-content:center;
  font-size:.72rem;color:var(--muted,#777);cursor:pointer;
  border:none;outline:none;flex-shrink:0;z-index:5;
  transition:color .12s, background .12s;
}
.prod-vtb-arrow-up{top:0}
.prod-vtb-arrow-down{bottom:0;background:linear-gradient(to top, var(--bg2,#f6f6f6), var(--bg2,#f6f6f6) 70%, transparent);}
.prod-vtb-arrow:hover{color:var(--acc,#1a73e8)}

/* (#235) Ocultar panel IA de mejora de texto si feature flag desactivado.
   Incluye el ID real del toolbar (teo-sel-toolbar) que era el que faltaba. */
body.no-text-ai #teo-sel-toolbar,
body.no-text-ai #teo-result-panel,
body.no-text-ai #prod-text-ai-popup,
body.no-text-ai .text-ai-popup,
body.no-text-ai #teo-text-improve,
body.no-text-ai .teo-improve-bubble{ display:none !important; visibility:hidden !important; pointer-events:none !important; }

/* ══════════════════════════════════════════════════════════════════
   #189 — Mobile bnav: drawer "Más" con todas las secciones extras
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  /* Ocultar el shortcut ⌘K que no aplica en móvil */
  .topbar .topbar-shortcut,
  .topbar [class*="shortcut"],
  .topbar kbd,
  #topbar-cmdk,
  .csb-search .kbd,
  .topbar input[type=text]+span:last-child{ display:none !important; }
  /* Si el placeholder dice "Buscar..." y a la derecha hay un span con ⌘K, lo ocultamos */

  /* Botón "Más" del bnav — siempre visible para abrir drawer */
  .bnav .bnav-btn.bnav-more{
    display:flex !important;
  }
}

/* Drawer "Más" — grid de secciones */
#mobile-more-drawer{
  position:fixed;inset:auto 0 0 0;background:var(--bg1,#fff);
  border-top:1px solid var(--bor,#ddd);border-radius:18px 18px 0 0;
  box-shadow:0 -8px 28px rgba(0,0,0,.14);
  padding:18px 14px calc(20px + env(safe-area-inset-bottom,0px));
  z-index:9000;
  transform:translateY(110%);transition:transform .25s ease;
  display:none;
}
#mobile-more-drawer.open{ display:block;transform:translateY(0); }
#mobile-more-drawer-bg{
  position:fixed;inset:0;background:rgba(0,0,0,.36);z-index:8999;
  opacity:0;transition:opacity .2s;pointer-events:none;display:none;
}
#mobile-more-drawer-bg.on{ display:block;opacity:1;pointer-events:auto; }
.mmd-handle{
  width:44px;height:4px;background:var(--bor,#ccc);border-radius:3px;
  margin:0 auto 14px;
}
.mmd-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px 4px;
}
.mmd-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:12px 6px;border-radius:12px;cursor:pointer;
  background:var(--bg2,#f6f6f6);border:1px solid transparent;
  font-size:.7rem;color:var(--txt,#222);transition:all .12s;
}
.mmd-item:hover,.mmd-item:active{ background:var(--bor,#e8e8e8);border-color:var(--acc,#1a73e8); }
.mmd-item svg{ width:22px;height:22px;stroke:var(--muted,#777);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round; }
.mmd-item .mmd-label{ font-size:.66rem;line-height:1.1;text-align:center; }

/* (#bnav-more eliminado por petición — ya no existe) */

/* (#193) z-index muy alto del profile-menu para que NUNCA quede detrás del
   mapa Leaflet (que usa z-index 400-700 en sus paneles internos). */
#profile-menu{ z-index:99999 !important; }

/* Botones circulares flotantes de direcciones fijadas, alineados a la derecha
   del mapa bajo los controles de zoom +/-. */
.mapas-pin-float{
  pointer-events:auto;
  width:38px;height:38px;border-radius:50%;
  border:2px solid #fff;
  background:var(--acc,#1a73e8);
  color:#fff;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  display:flex;align-items:center;justify-content:center;
  font-size:.74rem;font-weight:700;
  position:relative;
  transition:transform .12s, box-shadow .12s;
  text-transform:uppercase;
  letter-spacing:.3px;
}
.mapas-pin-float:hover{ transform:scale(1.08); box-shadow:0 4px 14px rgba(0,0,0,.35); }
.mapas-pin-float:active{ transform:scale(.95); }
.mapas-pin-float .mapas-pin-tip{
  position:absolute;right:46px;top:50%;transform:translateY(-50%);
  background:rgba(0,0,0,.85);color:#fff;padding:5px 10px;border-radius:6px;
  font-size:.72rem;font-weight:500;text-transform:none;letter-spacing:0;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;
}
.mapas-pin-float:hover .mapas-pin-tip{ opacity:1; }
.mapas-pin-float .mapas-pin-x{
  position:absolute;top:-4px;right:-4px;
  width:16px;height:16px;border-radius:50%;
  background:#ef4444;color:#fff;
  display:none;align-items:center;justify-content:center;
  font-size:.62rem;border:1px solid #fff;cursor:pointer;
}
.mapas-pin-float:hover .mapas-pin-x{ display:flex; }

/* (#194) Chips de favoritos y fijados dentro del panel "Cómo llegar" */
.mapas-route-chips{ font-size:.7rem; }
.mapas-route-chips:empty{ display:none !important; }
.mapas-route-chip{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--bg2,#f6f6f6);border:1px solid var(--bor,#ddd);
  border-radius:14px;
  padding:3px 9px;
  font-size:.7rem;color:var(--txt,#222);
  cursor:pointer;line-height:1.2;
  max-width:160px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background .1s, border-color .1s, transform .08s;
}
.mapas-route-chip:hover{
  background:color-mix(in srgb, var(--acc,#1a73e8) 12%, var(--bg2,#f6f6f6));
  border-color:var(--acc,#1a73e8);
  color:var(--acc,#1a73e8);
}
.mapas-route-chip:active{ transform:scale(.96); }
.mapas-route-chip .chip-ic{ font-size:.78rem; flex-shrink:0; }
.mapas-route-chip .chip-lbl{ flex:1; overflow:hidden; text-overflow:ellipsis; }

/* ══════════════════════════════════════════════════════════════════
   #199 — Panel "Cómo llegar" — diseño minimalista
   ══════════════════════════════════════════════════════════════════ */
.route-panel{
  display:none;
  position:absolute; top:106px; left:14px;
  width:340px; max-width:calc(100% - 28px);
  background:var(--bg1, #fff);
  border:1px solid var(--bor, #e8eaee);
  border-radius:14px;
  box-shadow:0 12px 36px rgba(15,18,24,.10), 0 1px 0 rgba(15,18,24,.04);
  z-index:8500;
  overflow:hidden;
  font-family:inherit;
}
.route-panel-head{
  display:flex; align-items:center; gap:10px;
  padding:14px 14px 10px;
  border-bottom:1px solid var(--bor, #eef0f2);
}
.route-panel-title{
  font-size:.86rem; font-weight:700; flex:1;
  color:var(--txt, #1a1a1a);
  letter-spacing:.2px;
}
.route-panel-close{
  background:none; border:none; cursor:pointer;
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted, #888);
  transition:background .14s, color .14s;
}
.route-panel-close:hover{ background:var(--bg2, #f5f6f8); color:var(--txt, #222); }

.route-panel-body{
  padding:14px;
  display:flex; flex-direction:column; gap:10px;
}

.route-row{
  display:flex; align-items:center; gap:10px;
}
.route-dot{
  width:10px; height:10px; border-radius:50%;
  flex-shrink:0;
  box-shadow:0 0 0 4px rgba(0,0,0,.04);
}
.dot-from{ background:#22c55e; }
.dot-to  { background:#ef4444; }
.dot-via { background:#a78bfa; }

.route-input{
  flex:1; min-width:0;
  padding:10px 12px;
  border:1px solid var(--bor, #e8eaee);
  border-radius:10px;
  background:var(--bg1, #fff);
  color:var(--txt, #1a1a1a);
  font-size:.82rem;
  outline:none;
  font-family:inherit;
  transition:border-color .14s, box-shadow .14s;
}
.route-input:focus{
  border-color:var(--acc, #1a73e8);
  box-shadow:0 0 0 3px rgba(26,115,232,.12);
}
.route-input::placeholder{ color:var(--muted, #98a0aa); }

.route-chips{
  display:flex; flex-wrap:wrap; gap:5px;
  margin-left:20px;
}
.route-chips:empty{ display:none; }

.route-waypoints{
  display:flex; flex-direction:column; gap:8px;
  margin:0;
}

.route-add-wp{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px;
  background:transparent;
  color:var(--acc, #1a73e8);
  border:1px dashed var(--bor, #d1d5db);
  border-radius:999px;
  cursor:pointer;
  font-size:.74rem; font-weight:500;
  transition:background .14s, border-color .14s;
  margin-top:2px;
}
.route-add-wp:hover{
  background:rgba(26,115,232,.06);
  border-color:var(--acc, #1a73e8);
}

/* Modos: pildoras flat, fondo neutral, activa con acento */
.route-modes{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:4px;
  margin-top:4px;
}
.route-mode{
  background:var(--bg2, #f5f6f8);
  border:1px solid transparent;
  color:var(--txt, #5a606b);
  padding:8px 6px;
  font-size:.74rem;
  font-weight:500;
  border-radius:8px;
  cursor:pointer;
  text-align:center;
  font-family:inherit;
  transition:background .14s, color .14s, border-color .14s;
  white-space:nowrap;
}
.route-mode:hover{
  background:var(--bg2, #ebedf0);
  color:var(--txt, #222);
}
.route-mode.on{
  background:var(--acc, #1a73e8);
  color:#fff;
  border-color:var(--acc, #1a73e8);
  box-shadow:0 1px 3px rgba(26,115,232,.32);
}

.route-actions{
  display:flex; gap:8px; margin-top:6px;
  align-items:stretch;
}
.route-secondary{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 12px;
  background:transparent;
  border:1px solid var(--bor, #e8eaee);
  color:var(--txt, #5a606b);
  border-radius:10px;
  font-size:.78rem; font-weight:500;
  cursor:pointer;
  font-family:inherit;
  transition:background .14s, border-color .14s, color .14s;
}
.route-secondary:hover{
  background:var(--bg2, #f5f6f8);
  border-color:var(--bor, #d1d5db);
  color:var(--txt, #1a1a1a);
}
.route-primary{
  flex:1;
  background:var(--acc, #1a73e8);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:11px 14px;
  font-size:.84rem; font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition:background .14s, transform .08s, box-shadow .14s;
  box-shadow:0 2px 6px rgba(26,115,232,.24);
}
.route-primary:hover{ background:#1557b0; box-shadow:0 4px 12px rgba(26,115,232,.32); }
.route-primary:active{ transform:scale(.98); }

.route-result{
  display:none;
  border-top:1px solid var(--bor, #eef0f2);
  max-height:300px;
  overflow-y:auto;
  padding:0;
}

/* Inputs de waypoints — mismo estilo que el route-input */
.route-waypoints input[type="text"]{
  flex:1; min-width:0;
  padding:10px 12px;
  border:1px solid var(--bor, #e8eaee);
  border-radius:10px;
  background:var(--bg1, #fff);
  color:var(--txt, #1a1a1a);
  font-size:.82rem;
  outline:none;
  font-family:inherit;
  transition:border-color .14s, box-shadow .14s;
}
.route-waypoints input[type="text"]:focus{
  border-color:#a78bfa;
  box-shadow:0 0 0 3px rgba(167,139,250,.18);
}

/* Mostrar el panel con animación cuando se activa */
.route-panel.is-open{
  display:block !important;
  animation:routePanelIn .2s ease-out;
}
@keyframes routePanelIn{
  from{ opacity:0; transform:translateY(-6px); }
  to  { opacity:1; transform:translateY(0); }
}

/* Modal "Más opciones" — estilo coherente */
#mapas-route-adv-modal > div{
  border:1px solid var(--bor, #e8eaee);
  box-shadow:0 18px 50px rgba(15,18,24,.18) !important;
}

/* (#200) Icono "Editar favoritos" en header del panel Cómo llegar */
.route-panel-icon{
  background:none;border:none;cursor:pointer;
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#f59e0b;
  transition:background .14s, transform .12s;
}
.route-panel-icon:hover{ background:rgba(245,158,11,.14); transform:scale(1.06); }

/* Pseudo-element ::backdrop más oscuro para el modal de gestión */
#mapas-favpin-modal .favpin-row:hover{ background:var(--bg2,#f8f9fa); }

/* (#205) Pro Drawing Pack — cursor preview + HUD */
#a2d-pro-cursor{ transition:width .12s, height .12s; will-change:left,top; }
#a2d-pro-hud{ user-select:none; transition:opacity .15s; }
#a2d-pro-hud strong{ color:#f0c040; font-weight:700; letter-spacing:.3px; }

/* Slider stabilizer minimal */
.a2d-stab-slider{
  -webkit-appearance:none;appearance:none;
  width:60px;height:4px;background:#1a3a6e;border-radius:2px;outline:none;cursor:pointer;
}
.a2d-stab-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:12px;height:12px;border-radius:50%;
  background:#f0c040;cursor:pointer;border:none;
}
.a2d-stab-slider::-moz-range-thumb{
  width:12px;height:12px;border-radius:50%;background:#f0c040;border:none;cursor:pointer;
}

/* (#205b) Toolbox 2D — todas las herramientas visibles con scroll */
#a2d-vtoolbar{
  scrollbar-width: thin;
  scrollbar-color: #1a3a6e #16213e;
}
#a2d-vtoolbar::-webkit-scrollbar{ width:4px; }
#a2d-vtoolbar::-webkit-scrollbar-thumb{ background:#1a3a6e; border-radius:2px; }
#a2d-vtoolbar::-webkit-scrollbar-track{ background:transparent; }
/* Botones del toolbox compactos pero clickables */
#a2d-vtoolbar button.a2d-tb{
  flex-shrink:0;
  width:30px !important; height:26px !important;
  margin:0;
}
#a2d-vtoolbar button.a2d-tb svg{ width:13px !important; height:13px !important; }
/* Si está en modo 2-cols (76px) los botones siguen 30px y caben dos por fila con margen */
#a2d-vtoolbar[style*="76px"] button.a2d-tb{ margin:0 1px; }

/* (#218b) Botón "Descarga PDF" — gris claro, al fondo del sidebar */
.prod-ol-pdf-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 10px;
  background:var(--bg2,#f0f1f3);
  color:var(--txt,#444);
  border:1px solid var(--bor,#d8dade);
  border-radius:8px;
  font-size:.74rem;font-weight:500;cursor:pointer;
  transition:background .12s, border-color .12s, color .12s;
  font-family:inherit;
  margin-top:8px;
  width:100%;
}
.prod-ol-pdf-btn:hover{
  background:var(--bg1,#fff);
  border-color:var(--muted,#a8aab0);
  color:var(--txt,#1a1a1a);
}
.prod-ol-pdf-btn:active{ transform:scale(.98); }
.prod-ol-pdf-btn svg{ flex-shrink:0; opacity:.7; }