/* OneBizness Gym - minimal modern CSS (no external deps) */
:root{
  --bg:#f7f8fb;
  --panel:#ffffff;
  --card:#ffffff;
  --text:#1a1f2b;
  --muted:#5b677a;
  --accent:#d61f2c;
  --accent2:#d61f2c;
  --app-header-bg:rgb(247 236 236 / 85%);
  --app-header-text:var(--text);
  --h1:44px;
  --h1m:36px;
  --lead:18px;
  --border:rgba(20,30,55,.14);
  --shadow: 0 10px 24px rgba(16,24,40,.10);
  --radius:18px;
  --radius2:24px;
  --max:1100px;
  --pad:18px;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  background:
    radial-gradient(900px 600px at 20% 0%, rgba(214,31,44,.10), transparent 60%),
    radial-gradient(800px 600px at 80% 20%, rgba(214,31,44,.06), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  font-size:17px;
  line-height:1.5;
  overflow-x: clip;
}

a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:0 18px}

/* Header */
.site-header,.app-header{
  position:sticky;top:0;z-index:1200;
  background:rgb(247 236 236 / 85%);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border)
}
.app-header{
  background:var(--app-header-bg);
}
.app-header .logo,
.app-header .logo span,
.app-header .nav-link,
.app-header .user-name,
.app-header .burger,
.app-header .menu-panel-title,
.app-header .menu-panel-close{
  color:var(--app-header-text);
}
.app-header .menu a{color:color-mix(in srgb, var(--app-header-text) 78%, transparent);}
.app-header .menu a:hover{color:var(--app-header-text);}
.app-header .menu-panel a{color:color-mix(in srgb, var(--app-header-text) 82%, transparent);}
.app-header .menu-panel a:hover{color:var(--app-header-text);}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:64px;
  flex-wrap:nowrap;
}
.logo{display:flex;align-items:center;gap:10px;font-weight:700}
.menu{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.menu a{padding:10px 10px;border-radius:12px;color:var(--muted)}
.menu a:hover{background:rgba(16,24,40,.05);color:var(--text)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:14px;
  border:1px solid var(--border);
  background:rgba(16,24,40,.03);
  color:var(--text);
  font-weight:600
}
.btn:hover{background:rgba(16,24,40,.06)}
.btn.primary{
  background: linear-gradient(135deg, var(--accent), #ff6b6b);
  border:0;
  color:#fff;
}

.btn.primary:hover{
  background: #a00000; /* un poco más claro al pasar el ratón */
}

.btn.primary:hover{
  filter: brightness(0.9);
}
.btn.small{padding:7px 10px;border-radius:12px;font-size:14px}

/* Layout blocks */
.section{padding:20px 0}
.section.alt{background:linear-gradient(180deg, rgba(16,24,40,.025), transparent)}
.hero{padding:56px 0 20px}

.hero-grid{display:grid;grid-template-columns: 1.25fr .75fr;gap:22px;align-items:center}
@media (max-width: 900px){.hero-grid{grid-template-columns:1fr}.menu{gap:6px}}

h1{font-size:var(--h1);line-height:1.05;margin:10px 0 12px;letter-spacing:-0.02em}
@media (max-width: 520px){h1{font-size:var(--h1m)}}
h2{font-size:26px;margin:0 0 12px}

/* Optional theme override for section headings */
.section h2{ color: var(--section-title, var(--text)); }

.lead{color:var(--muted);font-size:var(--lead);line-height:1.5}
.pill{
  display:inline-block;padding:6px 10px;border-radius:999px;
  border:1px solid var(--border);color:var(--muted);font-size:13px
}
.pill.ok{background:rgba(36,209,143,.10); color:var(--text)}
.pill.warn{background:rgba(255,193,7,.14); color:var(--text)}
.accent{color:var(--accent2)}

/* Cards */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,1));
  border:1px solid var(--border);
  border-radius:var(--radius2);
  box-shadow: 0 10px 26px rgba(16,24,40,.08);
  padding:18px
}
.card-title{font-weight:800;margin-bottom:8px}
.hero-card{padding:0;overflow:hidden}
.hero-card-body{padding:16px 18px}
.hero-img{width:100%;height:auto;display:block;background:#fff}

.cta{display:flex;gap:12px;margin:18px 0 6px;flex-wrap:wrap}
.kpis{display:flex;gap:14px;margin-top:16px;flex-wrap:wrap}
.kpi{
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px 14px;
  background:rgba(16,24,40,.025)
}
.kpi-num{font-size:20px;font-weight:800}
.kpi-label{color:var(--muted);font-size:13px}

/* Grids */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
@media (max-width: 900px){.grid2,.grid3{grid-template-columns:1fr}}

.list{margin:10px 0 0;padding-left:18px;color:var(--muted)}
.list li{margin:6px 0}
.list.compact li{margin:4px 0}

.tag{
  display:inline-block;margin-top:10px;padding:6px 10px;border-radius:999px;
  background:rgba(214,31,44,.12);border:1px solid var(--border);
  color:var(--text);font-size:13px
}
.note{
  margin-top:12px;padding:12px 14px;border-radius:16px;border:1px solid var(--border);
  background:rgba(214,31,44,.06);color:var(--muted)
}
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media (max-width: 900px){.split{grid-template-columns:1fr}}

.small{max-width:560px}

/* Forms */
label{display:block;color:var(--muted);font-size:14px;margin:10px 0}
input,select,textarea{
  width:100%;
  margin-top:6px;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(16,24,40,.025);
  color:var(--text);
  outline:none
}
textarea{resize:vertical}
.check{display:flex;gap:10px;align-items:flex-start}
.check input{width:auto;margin-top:2px}

/* Alerts */
.alert{padding:12px 14px;border-radius:16px;border:1px solid var(--border);margin:12px 0}
.alert.ok{background:rgba(36,209,143,.10)}
.alert.err{background:rgba(255,80,120,.10)}

/* Tables (global)
   - overflow-x only to avoid "scrollbar always on" in desktop.
   - keep tables usable on mobile.
*/
.table-wrap{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;border-radius:16px;border:1px solid var(--border);max-width:100%}

/* Scroll vertical para listados largos (evita que la última fila quede tapada en móvil) */
.table-scroll{max-height:60vh;overflow:auto;-webkit-overflow-scrolling:touch}

/* En desktop evitamos que el contenedor recorte dropdowns (menú ⋯) */
@media (min-width: 980px){
  .table-scroll{max-height:none;overflow:visible}
}
@media (max-width: 720px){
  .table-scroll{max-height:55vh}
}

/* --- Compact "⋯" row actions (details dropdown) --- */
.actions-inline{position:relative;display:inline-block}
.actions-inline summary{list-style:none}
.actions-inline summary::-webkit-details-marker{display:none}
.actions-inline .dropdown{display:none;}
.actions-inline[open] > .dropdown{display:block;position:absolute;right:0;top:calc(100% + 6px);z-index:1000;min-width:170px;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:0 10px 24px rgba(0,0,0,.12);padding:8px}

.dropdown-float{position:fixed;z-index:9999;min-width:170px;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:0 10px 24px rgba(0,0,0,.12);padding:8px}
.actions-inline .dropdown .menu-btn,
.dropdown-float .menu-btn{display:block;width:100%;text-align:left;padding:10px 10px;border-radius:10px;border:0;background:transparent;font-weight:800;cursor:pointer;color:inherit;text-decoration:none}
.actions-inline .dropdown .menu-btn,
.dropdown-float .menu-btn:hover{background:rgba(0,0,0,.06)}
.actions-inline .dropdown form,
.dropdown-float form{margin:0}

/* Tablas responsive: en móvil se convierten en tarjetas por fila */
@media (max-width: 720px){
  table.rtable{display:block;width:100%}
  table.rtable thead{display:none}
  table.rtable tbody{display:block;width:100%}
  table.rtable tr{display:block;border:1px solid var(--border);border-radius:14px;padding:10px;margin:10px 0;background:var(--card)}
  table.rtable td{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border:0;width:100%}
  table.rtable td::before{content:attr(data-label);font-weight:900;color:var(--muted);flex:0 0 42%}
  table.rtable td.actions-cell{display:block}
  table.rtable td.actions-cell::before{display:none}
}
table{width:100%;border-collapse:collapse;min-width:0}
th,td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left}

/* Table hardening: prevent ugly letter-by-letter breaks */
table, th, td{
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
th{white-space:nowrap;}
/* allow wrapping by words inside cells when needed */
td{white-space:normal; overflow-wrap:break-word;}

/* Buttons should never split like Edi/tar */
.btn{white-space:nowrap;}

/* Utility: allow long emails/urls to wrap nicely */
.email-cell{overflow-wrap:anywhere; word-break:break-word;}
th{color:var(--muted);font-weight:700;background:rgba(16,24,40,.03)}
tr:hover td{background:rgba(16,24,40,.02)}

.link{cursor:pointer}
.link:hover{transform:translateY(-1px);transition:.15s}

/* Pricing */
.price{position:relative}
.pricing{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
@media (max-width: 900px){.pricing{grid-template-columns:1fr}}
.price-num{font-size:34px;font-weight:900;margin:8px 0 10px}
.price.featured{border-color:rgba(214,31,44,.35)}

/* Prose / misc */
.prose p, .prose li{color:var(--muted);line-height:1.6}
.subcard{
  margin-top:12px;padding:12px 14px;border-radius:16px;border:1px solid var(--border);
  background:rgba(16,24,40,.02)
}
.subcard-title{font-weight:800;margin-bottom:6px}

.site-footer{padding:34px 0;border-top:1px solid var(--border);background:rgba(255,255,255,.75)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
@media (max-width: 900px){.footer-grid{grid-template-columns:1fr}}
.footer-title{font-weight:800;margin-bottom:8px}
.footer-link{display:block;color:var(--muted);margin:6px 0}
.footer-link:hover{color:var(--text)}
.social-icons{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.social-icon-link{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;border:1px solid var(--border);background:rgba(16,24,40,.03);color:var(--text);text-decoration:none;transition:transform .18s ease, background .18s ease}
.social-icon-link:hover{transform:translateY(-1px);background:rgba(16,24,40,.06)}
.social-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px}
.social-icon svg{width:20px;height:20px;display:block;fill:currentColor}
.social-label{font-weight:700;font-size:14px}
.brand{font-weight:900;margin-bottom:6px}
.muted{color:var(--muted)}
.mapbox{margin-top:12px}
.map-placeholder{
  height:200px;border-radius:16px;border:1px dashed var(--border);
  display:flex;align-items:center;justify-content:center;background:rgba(16,24,40,.02)
}
.row label{margin-top:8px}

/* Header style when over dark hero (home) */
.site-header.on-hero{
  background: var(--hero-header-bg, rgba(65,8,30,.90));
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.site-header.on-hero .menu a{color: rgba(255,255,255,.78)}
.site-header.on-hero .menu a:hover{background: rgba(255,255,255,.08); color:#fff}
.site-header.on-hero .logo span{color:#fff}
.site-header.on-hero .btn{border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.06)}
.site-header.on-hero .btn:hover{background: rgba(255,255,255,.10)}

/* Dark hero */
.hero.hero-dark{
  background: var(--hero-bg,
    radial-gradient(900px 600px at 20% 0%, rgba(214,31,44,.22), transparent 60%),
    radial-gradient(800px 600px at 80% 20%, rgba(214,31,44,.14), transparent 60%),
    linear-gradient(180deg, #0b0f17, #0f172a)
  );
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.hero.hero-dark .pill{border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.78); background: rgba(255,255,255,.06)}
.hero.hero-dark h1{color: var(--hero-title, #ffffff)}
.hero.hero-dark .lead{color: var(--hero-text, rgba(255,255,255,.78))}
.hero.hero-dark .kpi{border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06)}
.hero.hero-dark .kpi-label{color: rgba(255,255,255,.70)}
.hero.hero-dark .kpi-num{color:#ffffff}
.hero.hero-dark .menu a{color: rgba(255,255,255,.78)}
.hero.hero-dark .menu a:hover{background: rgba(255,255,255,.08); color:#fff}
.hero.hero-dark .btn{border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.06)}
.hero.hero-dark .btn:hover{background: rgba(255,255,255,.10)}
.hero.hero-dark .btn.primary{
  background: var(--hero-btn-bg, linear-gradient(135deg, var(--accent), #ff6b6b));
  border:0;
  color:#fff;
}
.hero.hero-dark .btn.primary:hover{
  filter: brightness(.92);
}

.hero.hero-dark .hero-card{border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06)}
.hero.hero-dark .muted{color: rgba(255,255,255,.70)}

.hero-card{
  background: var(--accent);
  color: #bdbaba;
}

/* Gym Pro additions */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px}
.section-head p{margin:0}
@media (max-width: 720px){.section-head{flex-direction:column;align-items:flex-start}}




/* Carousel */
.carousel{position:relative}

.carousel-track{
  display:flex;
  gap:16px;
  overflow:auto;
  scroll-snap-type:x mandatory;
  padding:4px 2px 10px;
  -webkit-overflow-scrolling:touch;
}

/* =========================
   SLIDE (3/2/1 completos)
========================= */

/* Desktop → 3 tarjetas completas */
.carousel-slide{
  flex:0 0 calc((100% - 32px) / 3); /* gap=16px → 2 huecos = 32px */
  scroll-snap-align:start;

  border-radius:18px;
  border:1px solid var(--border);
  overflow:hidden;
  background:#fff;

  /* sombra más suave y “pro” */
  box-shadow: 0 8px 18px rgba(16,24,40,.08);
}

/* Tablet → 2 tarjetas completas */
@media (max-width: 1100px){
  .carousel-slide{
    flex:0 0 calc((100% - 16px) / 2); /* 1 hueco = 16px */
  }
}

/* Móvil → 1 tarjeta completa */
@media (max-width: 720px){
  .carousel-slide{
    flex:0 0 100%;
  }
}

/* =========================
   MEDIA (marco uniforme)
========================= */

.carousel-media{
  width:100%;
  aspect-ratio: 16 / 9;
  position:relative;
  overflow:hidden;

  /* si la foto no carga, se ve bien */
  background:#f3f4f6;
}

/* Imagen: rellena el marco (queda bonito) */
.carousel-media img{
  width:100%;
  height:100%;
  display:block;

  object-fit:cover;
  object-position:center;
}

/* Un toque de gradiente sutil para integrar imagen con caption */
.carousel-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(0,0,0,.18) 100%);
  pointer-events:none;
}

/* En móvil, un pelín más alto */
@media (max-width: 720px){
  .carousel-media{ aspect-ratio: 4 / 3; }
}

/* =========================
   CAPTION
========================= */

.carousel-cap{
  padding:12px 14px;
  color:var(--muted);
  font-weight:650;
  line-height:1.2;

  /* evita saltos feos si el texto es largo */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =========================
   BOTONES (más finos)
========================= */

.carousel-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);

  width:42px;
  height:42px;
  border-radius:999px;

  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(8px);

  box-shadow: 0 10px 22px rgba(16,24,40,.14);

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  z-index:10;
}

.carousel-btn:hover{
  background: rgba(255,255,255,.92);
}

/* más pegadas a los bordes, sin tapar tanto */
.carousel-btn.prev{ left:6px; }
.carousel-btn.next{ right:6px; }

/* en móvil ocultas (como ya hacías) */
@media (max-width: 720px){
  .carousel-btn{ display:none; }
}





/* Testimonials */
.testimonials{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
@media (max-width: 900px){.testimonials{grid-template-columns:1fr}}
.quote{font-size:15px;color:var(--muted);line-height:1.6}
.avatar{display:flex;align-items:center;gap:10px;margin-top:12px}
.avatar .dot{width:34px;height:34px;border-radius:999px;background:rgba(214,31,44,.16);border:1px solid rgba(214,31,44,.25)}
.avatar .name{font-weight:800}
.avatar .meta{color:var(--muted);font-size:13px}

/* ===== Mobile navigation: Drawer + overlay (consolidated) ===== */
.burger{
  display:none;
  border:1px solid var(--border);
  background:rgba(255,255,255,.80);
  border-radius:14px;
  padding:10px 12px;
  font-weight:900;
  cursor:pointer;
  position:relative;
  z-index:1300;
}

.menu.desktop{display:flex;align-items:center;gap:14px;flex-wrap:nowrap}
.menu.desktop a{white-space:nowrap}

.menu-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(11,15,23,.55);
  backdrop-filter: blur(2px);
  z-index: 1000;
}
.menu-overlay.open{display:block}

.menu-panel{
  position:fixed;
  top:64px;
  right:0;
  height:auto;
  max-height:calc(100vh - 64px);
  width:min(72vw, 320px);
  background:#fff;
  border-left:1px solid var(--border);
  box-shadow: -20px 0 40px rgba(16,24,40,.18);
  padding:16px;
  transform: translateX(102%);
  transition: transform .22s ease;
  z-index:1100;
  display:block;
  border-radius:0;
}
.menu-panel.open{ transform: translateX(0); }



.menu-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
}
.menu-panel-title{font-weight:900}
.menu-panel-close{
  border:1px solid var(--border);
  background:rgba(255,255,255,.90);
  border-radius:12px;
  padding:8px 10px;
  font-weight:900;
  cursor:pointer;
}

.menu-panel a{
  display:block;
  padding:12px 12px;
  border-radius:14px;
  color:var(--muted);
  font-weight:700;
}
.menu-panel a:hover{background:rgba(16,24,40,.04); color:var(--text)}
.menu-panel .btn{margin-top:10px; width:100%; text-align:center}

/* Prevent body scroll when menu open */
body.menu-open{ overflow:hidden; }

@media (max-width: 900px){
  .menu.desktop{display:none}
  .burger{display:inline-flex;align-items:center;justify-content:center}
}

/* Active link / meta */
.nav-link.is-active{
  background:rgba(214,31,44,.10) !important;
  color:var(--text) !important;
  border:1px solid rgba(214,31,44,.18)
}
.app-header .nav-link.is-active{
  color:var(--app-header-text) !important;
  border-color:color-mix(in srgb, var(--app-header-text) 22%, transparent);
  background:color-mix(in srgb, var(--app-header-text) 12%, transparent) !important;
}
.nav-meta{display:inline-flex;align-items:center;gap:10px;margin-left:6px}
.user-name{
  color:var(--muted);
  font-weight:700;
  font-size:14px;
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.role-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;border:1px solid var(--border);
  font-weight:900;font-size:12px;letter-spacing:.3px
}
.role-admin{background:rgba(214,31,44,.12)}
.role-coach{background:rgba(59,130,246,.12)}
.role-client{background:rgba(16,185,129,.12)}

.menu-panel-head{padding:8px 10px 10px; border-bottom:1px solid var(--border); margin-bottom:8px}
.menu-panel-title{font-weight:900}
.menu-panel-sub{margin-top:6px}

/* Menu (diet) rendering */
.menu-day{margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid rgba(20,30,55,.10)}
.menu-day:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.menu-day-title{font-weight:900;font-size:1rem;margin-bottom:6px;letter-spacing:.2px}
.menu-list{margin:0;padding-left:18px}
.menu-list li{margin-bottom:4px;line-height:1.55;color:var(--muted)}
.menu-list li strong{color:var(--text)}
.menu-fallback{white-space:pre-line;color:var(--muted)}

/* Logo */
.logo-img{
//  height: 44px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
}
@media (max-width: 520px){
  .logo-img{ height: 40px; max-width: 150px; }
  .logo span{ display:none; }
}

/* Richtext */
.richtext{ color: var(--muted); line-height: 1.7; overflow-wrap: anywhere; }
.richtext > :first-child{ margin-top:0; }
.richtext > :last-child{ margin-bottom:0; }

.richtext h1,.richtext h2,.richtext h3,.richtext h4{
  color: var(--text);
  margin: 0.9em 0 0.4em;
  line-height: 1.2;
  font-weight: 900;
}
.richtext h2{ font-size: 1.25rem; }
.richtext h3{ font-size: 1.10rem; }
.richtext h4{ font-size: 1.00rem; }

.richtext p{ margin: 0.45em 0; }
.richtext ul,.richtext ol{ margin: 0.45em 0; padding-left: 1.25em; }
.richtext li{ margin: 0.25em 0; }

.richtext blockquote{
  margin: 0.7em 0;
  padding: 10px 12px;
  border-left: 4px solid rgba(214,31,44,.35);
  background: rgba(16,24,40,.03);
  border-radius: 12px;
  color: var(--muted);
}
.richtext hr{ border:0; border-top:1px solid var(--border); margin: 14px 0; }

.richtext code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .95em;
  background: rgba(16,24,40,.04);
  border: 1px solid rgba(20,30,55,.10);
  padding: 2px 6px;
  border-radius: 10px;
  color: var(--text);
}
.richtext pre{
  overflow:auto;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(20,30,55,.12);
  background: rgba(16,24,40,.03);
  white-space: pre;
}

.richtext img,
.richtext video,
.richtext iframe{
  max-width: 100%;
  height: auto;
  border-radius: 14px;
}

/* Tables inside richtext */
.richtext table{
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow: auto;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 16px;
}
.richtext thead{ background: rgba(16,24,40,.03); }
.richtext th,.richtext td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}

/* Mobile tweaks */
@media (max-width: 520px){
  .container{ padding-left: 14px; padding-right: 14px; }
  .card{ padding: 14px; border-radius: 18px; }
  h1{ font-size: 32px; }
  table{ min-width: 0; font-size: 14px; }
  th,td{ padding: 8px 10px; }
  .btn{ width:100%; justify-content:center; }
  .btn + .btn{ margin-top:8px; }
}

/* Extra layout hardening */
input, textarea, select{ max-width:100%; width:100%; }
label > input, label > textarea, label > select{ width:100%; }
.card, .subcard, .grid2, .grid3, .richtext, .muted{ min-width:0; }

/* Prevent long tokens from breaking layout (NOT tables) */
.prose, .richtext, .muted{ overflow-wrap:anywhere; }

/* Admin previews */
.admin-preview{max-height:35vh; overflow:auto; padding-right:6px;}
@media (min-width: 901px){
  .admin-preview{max-height:none; overflow:visible;}
}

/* ===========================
   RULES PAGE (admin rules): NO scroll + NO vertical letters
   REQUIERE: <main class="section rules-page">
   =========================== */

/* En Rules: apilar antes para que la tabla tenga ancho */
@media (max-width: 1200px){
  .rules-page .grid2{ grid-template-columns: 1fr !important; }
}

/* En Rules: no queremos scroll dentro del card */
.rules-page .table-wrap{
  overflow: visible !important;
}

/* En Rules: tabla sin min-width forzado */
.rules-page .rules-table{
  width: 100% !important;
  min-width: 0 !important;
  table-layout: auto !important;
}

/* Blindaje anti “letra a letra” */
.rules-page .rules-table th,
.rules-page .rules-table td,
.rules-page .rules-table .muted{
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* Cabeceras en una línea */
.rules-page .rules-table th{
  white-space: nowrap !important;
}

/* Columnas largas: salto por palabra, nunca por letras */
.rules-page .rules-table td:nth-child(3),
.rules-page .rules-table td:nth-child(4){
  white-space: normal !important;
  overflow-wrap: break-word !important;
}


/* ===== RULES: ajustar anchos de columnas (sin scroll) ===== */
.rules-page .rules-table{
  width:100% !important;
  table-layout: fixed !important;   /* ahora sí: establecemos columnas */
}

.rules-page .rules-table th,
.rules-page .rules-table td{
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* Prioridad pequeño */
.rules-page .rules-table th:nth-child(1),
.rules-page .rules-table td:nth-child(1){
  width: 90px;
  white-space: nowrap;
}

/* Nombre: más ancho para que no parta raro */
.rules-page .rules-table th:nth-child(2),
.rules-page .rules-table td:nth-child(2){
  width: 220px;
}

/* Condición: ancho razonable */
.rules-page .rules-table th:nth-child(3),
.rules-page .rules-table td:nth-child(3){
  width: 280px;
}

/* Texto: que ocupe el resto */
.rules-page .rules-table th:nth-child(4),
.rules-page .rules-table td:nth-child(4){
  width: auto;
}

/* Acciones: fijo, sin comerse la tabla */
.rules-page .rules-table th:nth-child(5),
.rules-page .rules-table td:nth-child(5){
  width: 170px;
  white-space: nowrap;
}


/* ===== RULES: evitar recortes y hacer responsive sin scroll ===== */
.rules-page .table-wrap{
  overflow: hidden !important;   /* no scroll y no “caja rara” */
  max-width: 100% !important;
}

.rules-page .rules-table{
  width: 100% !important;
  min-width: 0 !important;       /* CLAVE: anula table{min-width:520px} */
  table-layout: auto !important;
}

/* Nunca letra a letra */
.rules-page .rules-table th,
.rules-page .rules-table td{
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* En pantallas estrechas, quitamos la columna Texto (4ª) */
@media (max-width: 1100px){
  .rules-page .rules-table th:nth-child(4),
  .rules-page .rules-table td:nth-child(4){
    display: none !important;
  }

  /* Ajuste de anchos para que Acciones no se salga */
  .rules-page .rules-table th:nth-child(5),
  .rules-page .rules-table td:nth-child(5){
    white-space: nowrap !important;
    width: 160px;
  }
}


/* =========================================================
   RULES: Tabla responsive SIN scroll (convierte filas a cards)
   Requiere: <main class="section rules-page">
   ========================================================= */

/* En Rules: nunca forzar ancho mínimo de tablas */
.rules-page table.rules-table{
  min-width: 0 !important;       /* anula table{min-width:520px} global */
  width: 100% !important;
  table-layout: auto !important;
}

/* No queremos que se recorte por el wrapper */
.rules-page .table-wrap{
  overflow: visible !important;
  max-width: 100% !important;
}

/* Blindaje anti “letra a letra” */
.rules-page .rules-table th,
.rules-page .rules-table td{
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

/* =========================
   Modo “cards” (sin scroll)
   ========================= */
@media (max-width: 1300px){
  /* Oculta cabecera tradicional */
  .rules-page .rules-table thead{
    display:none !important;
  }

  /* Convierte tabla a bloques */
  .rules-page .rules-table,
  .rules-page .rules-table tbody,
  .rules-page .rules-table tr,
  .rules-page .rules-table td{
    display:block !important;
    width:100% !important;
  }

  /* Cada regla como tarjeta */
  .rules-page .rules-table tr{
    border:1px solid var(--border);
    border-radius:16px;
    background:#fff;
    box-shadow: 0 10px 24px rgba(16,24,40,.08);
    padding:10px 12px;
    margin:10px 0;
  }

  /* Cada celda como “fila” label:valor */
  .rules-page .rules-table td{
    border:0 !important;
    padding:8px 0 !important;
    display:flex !important;
    gap:12px;
    align-items:flex-start;
  }

  /* Etiquetas */
  .rules-page .rules-table td::before{
    flex:0 0 110px;              /* ancho etiqueta */
    font-weight:800;
    color:var(--muted);
    white-space:nowrap;
  }

  /* Labels por columna (1..5) */
  .rules-page .rules-table td:nth-child(1)::before{ content:"Prioridad"; }
  .rules-page .rules-table td:nth-child(2)::before{ content:"Nombre"; }
  .rules-page .rules-table td:nth-child(3)::before{ content:"Condición"; }
  .rules-page .rules-table td:nth-child(4)::before{ content:"Texto"; }
  .rules-page .rules-table td:nth-child(5)::before{ content:"Acciones"; }

  /* Acciones: botones alineados, sin salirse */
  .rules-page .rules-table td:nth-child(5){
    padding-top:10px !important;
  }
  .rules-page .rules-table td:nth-child(5) > div{
    width:100%;
  }
}

.rules-page .rules-table td:nth-child(3){
  overflow-wrap: break-word !important;
}

.rules-page .rules-table th:nth-child(2),
.rules-page .rules-table td:nth-child(2){ width: 260px; }

.rules-page .rules-table th:nth-child(3),
.rules-page .rules-table td:nth-child(3){ width: 300px; }

/* ===== Formularios: texto más grande en inputs/textarea (rutinas/menús/reglas) ===== */
input, select, textarea{
  font-size: 15px;      /* base cómoda */
  line-height: 1.55;
}

/* Textos largos: rutina/menú/recomendación suelen ser textarea */
textarea{
  font-size: 15.5px;    /* un poco más */
  line-height: 1.6;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}



/* BOTONES EN HERO OSCURO */
.hero.hero-dark .btn{
  color:#fff;
  border-color: rgba(255,255,255,.25);
}

.hero.hero-dark .btn:not(.primary){
  background: rgba(255,255,255,.10);
}

.hero.hero-dark .btn:not(.primary):hover{
  background: rgba(255,255,255,.16);
}

/* ===== MENU MÓVIL: botón primary (Acceso) rojo ===== */
.menu-panel .btn.primary{
  background: linear-gradient(135deg, var(--accent), #ff6b6b);
  border: 0;
  color: #fff;
}

.menu-panel .btn.primary:hover{
  filter: brightness(.95);
}

/* MENU MÓVIL: evitar hover blanco del enlace y usar rojo más oscuro */
.menu-panel a.btn.primary:hover,
.menu-panel a.btn.primary:active,
.menu-panel a.btn.primary:focus{
  background: #a00000;     /* rojo oscuro en hover */
  color: #fff;
}


/* Burger: mejor visibilidad y centrado */
.burger{
  color: var(--text);
  font-size: 18px;
  line-height: 1;

  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* En header oscuro (home) -> burger claro con icono blanco */
.site-header.on-hero .burger{
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color: #fff;
}

/* Feedback al tocar */
.burger:hover{ background: rgba(16,24,40,.06); }
.site-header.on-hero .burger:hover{ background: rgba(255,255,255,.16); }
.burger:active{ transform: translateY(1px); }



.clients-layout {
  display: grid;
  grid-template-columns: 35% 65%;
  gap: 2rem;
  align-items: start;
}

/* Responsive */
@media (max-width: 900px) {
  .clients-layout {
    grid-template-columns: 1fr;
  }
}

.clients-top{
  display:grid;
  grid-template-columns: 35% 65%;
  gap: 2rem;
  align-items:start;
}

@media (max-width: 900px){
  .clients-top{ grid-template-columns: 1fr; }
}

/* Tabla */
.clients-table{
  width:100%;
  table-layout: fixed;
}

.clients-table th,
.clients-table td{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Columnas */
.clients-table .col-status{ width: 110px; white-space: nowrap; }
.clients-table .col-date{ width: 90px; white-space: nowrap; text-align:center; }
.clients-table .col-actions{ width: 220px; }

/* Email: que parta bien */
.email-cell{
  overflow-wrap:anywhere;
  word-break: break-word;
}




/* Panel edición cliente */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:10px 0 16px}
.page-title{font-size:42px;line-height:1.05;letter-spacing:-.02em;margin:0}
.page-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.card-head .card-title{margin:0}
.card-desc{color:var(--muted);font-size:13px;margin:2px 0 0}

.form-grid{display:grid;gap:14px}
.form-grid .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width: 920px){ .form-grid .row2{grid-template-columns:1fr} }

.sticky-actions{
  position:sticky;bottom:10px;z-index:5;
  background:color-mix(in oklab, var(--bg) 80%, white 20%);
  border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
  border-radius:16px;padding:10px;
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.10);

}


.btn.primary {
    padding: 18px 30px;     /* hace el botón más alto */
    font-size: 17px;        /* letras más grandes */
    text-transform: uppercase; /* convierte el texto en MAYÚSCULAS */
    font-weight: bold;      /* opcional, más visible */
}




/* Share footer v2 */
.footer-grid-clean{align-items:start;gap:28px}
.footer-meta{margin-top:10px}
.footer-share-copy{max-width:34ch;margin:0 0 14px}
.share-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.share-btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:16px;border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));color:var(--text);text-decoration:none;box-shadow:0 8px 24px rgba(15,23,42,.08);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease}
.share-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(15,23,42,.14);background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05))}
.share-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.share-btn-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.1);transition:transform .22s ease,background .22s ease}
.share-btn:hover .share-btn-icon{transform:scale(1.08) rotate(-4deg)}
.share-btn-icon svg{width:20px;height:20px;display:block;fill:currentColor}
.share-btn-text{font-weight:800;font-size:14px;letter-spacing:.01em}
.share-btn.is-whatsapp{border-color:rgba(37,211,102,.26)}
.share-btn.is-whatsapp .share-btn-icon{background:rgba(37,211,102,.14);color:#1fa855}
.share-btn.is-telegram{border-color:rgba(34,158,217,.26)}
.share-btn.is-telegram .share-btn-icon{background:rgba(34,158,217,.14);color:#1d8fc6}
.share-btn.is-facebook{border-color:rgba(24,119,242,.26)}
.share-btn.is-facebook .share-btn-icon{background:rgba(24,119,242,.14);color:#1764d8}
.share-btn.is-email{border-color:rgba(239,68,68,.22)}
.share-btn.is-email .share-btn-icon{background:rgba(239,68,68,.12);color:#dc2626}
@media (max-width: 640px){
  .share-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .share-btn{width:100%;justify-content:center;padding:12px}
  .share-btn-text{font-size:13px}
}


/* Fix definitivo: menú móvil del header logeado con texto oscuro y visible */
.app-header .menu-panel,
.app-header .menu-panel-head{
  background:#fff;
}
.app-header .menu-panel,
.app-header .menu-panel-title,
.app-header .menu-panel-close,
.app-header .menu-panel .nav-link,
.app-header .menu-panel a{
  color:var(--text) !important;
}
.app-header .menu-panel .nav-link:hover,
.app-header .menu-panel a:hover,
.app-header .menu-panel .nav-link:focus,
.app-header .menu-panel a:focus{
  color:var(--text) !important;
}
.app-header .menu-panel-close{
  background:rgba(255,255,255,.92);
  border-color:var(--border);
}
.app-header .menu-panel .btn.primary,
.app-header .menu-panel a.btn.primary{
  color:#fff !important;
}


.checkin-recommendations{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.stack-sm{display:grid;gap:10px}
.recommendation-item{padding:12px 14px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.03)}
.recommendation-item__meta{display:flex;gap:8px;align-items:center;margin-bottom:6px;flex-wrap:wrap}