*{box-sizing:border-box;}
/* Los neutros de la app se TIÑEN del acento: si el coach elige violeta, sus fondos, bordes y
   textos apagados tiran a violeta, no siguen siendo azulados. Las proporciones son bajas (1,5%
   a 14%) porque lo que se busca es un tinte, no un fondo de color.
   `--accent` lo escribe applyTheme() inline en <html>; el valor de acá es el que rige en el
   instante entre que se pinta el CSS y corre el JS. Sin él, los color-mix no tendrían contra
   qué resolver y la página aparecería sin colores. */
:root{--ease-standard:.1s ease;--accent:#007AFF;}
html[data-theme="light"]{--bg:color-mix(in srgb, var(--accent) 3%, #FCFCFD);--card:color-mix(in srgb, var(--accent) 1.5%, #FFFFFF);--text:color-mix(in srgb, var(--accent) 7%, #14161A);--text2:color-mix(in srgb, var(--accent) 13%, #6A717C);--border:color-mix(in srgb, var(--accent) 11%, #E4E7EB);--track:color-mix(in srgb, var(--accent) 6%, #F3F4F7);--danger:#FF3B30;--success:#34C759;--warning:#FF9500;--heatmap-muted:color-mix(in srgb, var(--accent) 8%, #EEF0F3);--glass:color-mix(in srgb, var(--accent) 3%, rgba(255,255,255,.86));--glass-border:color-mix(in srgb, var(--accent) 14%, rgba(20,22,26,.07));--glass-blur:18px;}
html[data-theme="dark"]{--bg:color-mix(in srgb, var(--accent) 5%, #0A0C0F);--card:color-mix(in srgb, var(--accent) 7%, #14171C);--text:color-mix(in srgb, var(--accent) 5%, #E8EAEE);--text2:color-mix(in srgb, var(--accent) 12%, #98A0AA);--border:color-mix(in srgb, var(--accent) 14%, #262A31);--track:color-mix(in srgb, var(--accent) 9%, #1A1D23);--danger:#FF453A;--success:#30D158;--warning:#FF9F0A;--heatmap-muted:color-mix(in srgb, var(--accent) 9%, #1A1D23);--glass:color-mix(in srgb, var(--accent) 7%, rgba(20,23,28,.82));--glass-border:color-mix(in srgb, var(--accent) 16%, rgba(255,255,255,.09));--glass-blur:18px;}
html[data-theme="system"]{--bg:color-mix(in srgb, var(--accent) 3%, #FCFCFD);--card:color-mix(in srgb, var(--accent) 1.5%, #FFFFFF);--text:color-mix(in srgb, var(--accent) 7%, #14161A);--text2:color-mix(in srgb, var(--accent) 13%, #6A717C);--border:color-mix(in srgb, var(--accent) 11%, #E4E7EB);--track:color-mix(in srgb, var(--accent) 6%, #F3F4F7);--danger:#FF3B30;--success:#34C759;--warning:#FF9500;--heatmap-muted:color-mix(in srgb, var(--accent) 8%, #EEF0F3);--glass:color-mix(in srgb, var(--accent) 3%, rgba(255,255,255,.86));--glass-border:color-mix(in srgb, var(--accent) 14%, rgba(20,22,26,.07));--glass-blur:18px;}
@media (prefers-color-scheme: dark){html[data-theme="system"]{--bg:color-mix(in srgb, var(--accent) 5%, #0A0C0F);--card:color-mix(in srgb, var(--accent) 7%, #14171C);--text:color-mix(in srgb, var(--accent) 5%, #E8EAEE);--text2:color-mix(in srgb, var(--accent) 12%, #98A0AA);--border:color-mix(in srgb, var(--accent) 14%, #262A31);--track:color-mix(in srgb, var(--accent) 9%, #1A1D23);--danger:#FF453A;--success:#30D158;--warning:#FF9F0A;--heatmap-muted:color-mix(in srgb, var(--accent) 9%, #1A1D23);--glass:color-mix(in srgb, var(--accent) 7%, rgba(20,23,28,.82));--glass-border:color-mix(in srgb, var(--accent) 16%, rgba(255,255,255,.09));--glass-blur:18px;}}

.logo-box{background:rgba(255,255,255,0.9);border-radius:12px;display:flex;align-items:center;justify-content:center;}
.toggle-switch{position:relative;display:inline-block;width:44px;height:26px;flex-shrink:0;}
.toggle-switch input{opacity:0;width:0;height:0;position:absolute;}
.toggle-switch .toggle-slider{position:absolute;inset:0;background:var(--border);transition:background var(--ease-standard);border-radius:999px;cursor:pointer;}
.toggle-switch .toggle-slider::before{content:"";position:absolute;height:20px;width:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform var(--ease-standard);}
.toggle-switch input:checked + .toggle-slider{background:var(--accent);}
.toggle-switch input:checked + .toggle-slider::before{transform:translateX(18px);}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);touch-action:manipulation;overscroll-behavior-y:contain;}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Helvetica,Arial,sans-serif;}
input,button,select,textarea{font-family:inherit;}
button{cursor:pointer;}
a{color:var(--accent);}
::placeholder{color:var(--text2);}
@keyframes cardFadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.card{background:var(--card);border-radius:16px;padding:24px;min-width:0;}
.modal-fadeup{animation:cardFadeUp .35s ease both;}

/* ── Vidrio esmerilado ───────────────────────────────────────────────────────
   Superficies que flotan por encima del contenido: las tarjetas de los popups y el menú
   lateral cuando se abre en teléfono. El fondo se transparenta y se difumina, así se ve que
   hay algo detrás sin que compita con lo que se está leyendo.

   Solo va en lo que FLOTA. Las tarjetas del contenido siguen opacas: ahí no hay nada detrás
   que valga la pena insinuar, y el texto tiene que apoyarse en un fondo firme.

   `.modal-fadeup` la llevan las 17 tarjetas de popup de la app, así que alcanza con esto
   —sin tocar un solo archivo de JavaScript— para que todas queden iguales. */
.modal-fadeup{
  background:var(--glass);
  border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  box-shadow:0 18px 48px rgba(0,0,0,.18);
}
/* La saturación compensa lo que el desenfoque apaga: sin ella el vidrio se ve gris y sucio. */

/* Sin soporte de backdrop-filter el fondo NO se difumina, y una tarjeta translúcida sobre el
   contenido deja el texto ilegible. Ahí se vuelve opaca. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .modal-fadeup{background:var(--card);}
}
/* Quien pidió menos transparencia en su sistema operativo la recibe: no es una preferencia
   estética, suele ser una necesidad de legibilidad. */
@media (prefers-reduced-transparency: reduce){
  .modal-fadeup,.sidebar{background:var(--card);-webkit-backdrop-filter:none;backdrop-filter:none;}
  .sidebar-overlay{-webkit-backdrop-filter:none;backdrop-filter:none;}
}
/* Política/Términos vienen del editor de texto enriquecido del Admin, que a veces guarda el
   color de texto pegado en el HTML (negro) — se fuerza acá para que siempre se lea con el
   color del tema, sin importar qué haya quedado guardado. */
#termsGateBody, #termsGateBody *, #legalInfoModalBody, #legalInfoModalBody *{color:var(--text) !important;}
.muted{color:var(--text2);}
.row{display:flex;align-items:center;}
.pill-tab{font-size:16px;padding:8px 16px;border-radius:9px;cursor:pointer;user-select:none;transition:background var(--ease-standard),color var(--ease-standard),transform var(--ease-standard);}
.pill-tab:hover{background:var(--track);}
.pill-tab:active{transform:scale(.95);}
.field{width:100%;background:var(--track);border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:17px;color:var(--text);margin-bottom:10px;}
/* Todos los campos de UNA línea miden lo mismo. Sin una altura fija cada control trae la suya
   —medido en el navegador: input 42, select y fecha 44, hora 46— y una fila con dos al lado
   queda escalonada. Los `textarea` quedan afuera a propósito: crecen. */
input.field,select.field{height:42px;line-height:1.2;}
.field-counter{font-size:12px;text-align:right;margin:-6px 0 10px;}
.btn-accent{background:var(--accent);color:#fff;border:none;border-radius:10px;padding:10px 16px;font-size:17px;font-weight:600;transition:filter var(--ease-standard),transform var(--ease-standard),opacity var(--ease-standard);cursor:pointer;}
.btn-accent:hover{filter:brightness(1.1);}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text);border-radius:10px;padding:9px 16px;font-size:17px;transition:background var(--ease-standard),transform var(--ease-standard),opacity var(--ease-standard);cursor:pointer;}
.btn-outline:hover{background:var(--track);}
.btn-danger{color:var(--danger);border-color:var(--danger);}
.btn-danger:hover{background:var(--danger);color:#fff;}
.btn-add{background:transparent;border:1.5px solid var(--accent);color:var(--accent);border-radius:10px;padding:8px 16px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px;transition:background var(--ease-standard),color var(--ease-standard),transform var(--ease-standard),opacity var(--ease-standard);cursor:pointer;}
.btn-add:hover{background:var(--accent);color:#fff;}
.btn-add svg{flex-shrink:0;}
.btn-accent:active,.btn-outline:active,.btn-add:active{transform:scale(.96);}
.btn-accent:focus-visible,.btn-outline:focus-visible,.btn-add:focus-visible,.pill-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.btn-accent:disabled,.btn-outline:disabled,.btn-add:disabled{opacity:.6;cursor:default;transform:none;filter:none;}
.btn-spinner{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;vertical-align:middle;animation:btn-spin .7s linear infinite;}
.btn-outline .btn-spinner{border-color:var(--border);border-top-color:var(--text);}
@keyframes btn-spin{to{transform:rotate(360deg);}}
.swatch{width:26px;height:26px;border-radius:50%;cursor:pointer;display:inline-block;transition:transform var(--ease-standard);}
.swatch:hover{transform:scale(1.12);}
.icon-btn{transition:opacity var(--ease-standard);}
.icon-btn:hover{opacity:.6;}
.habit-check{transition:transform var(--ease-standard);}
.habit-check:hover{transform:scale(1.1);}
.scroll-x{overflow-x:auto;}
/* Scrollbar fina y redondeada para las filas con scroll horizontal — solo para quien tiene
   mouse (pointer:fine + hover:hover, o sea escritorio real). En mobile/touch no se toca nada:
   queda el scroll táctil nativo del sistema, sin barra dibujada encima. En Mac con mouse el
   navegador ya la dibujaba parecida (por eso se veía bien); en Windows por default es la barra
   gris cuadrada del sistema — scrollbar-width/scrollbar-color cubre Firefox y Chrome/Edge en
   Windows, los ::-webkit-scrollbar de abajo son el mismo resultado para Chrome/Edge/Safari. */
@media (hover:hover) and (pointer:fine){
  .scroll-x{scrollbar-width:thin;scrollbar-color:var(--border) transparent;}
  .scroll-x::-webkit-scrollbar{height:7px;}
  .scroll-x::-webkit-scrollbar-track{background:transparent;}
  .scroll-x::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px;}
  .scroll-x:hover{scrollbar-color:var(--accent) transparent;}
  .scroll-x:hover::-webkit-scrollbar-thumb{background:var(--accent);}
}
.card-title{font-size:18px;font-weight:700;margin:0 0 12px;color:var(--text);}
.nav-round{width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--accent);flex-shrink:0;}
.nav-round:hover{background:var(--track);}
.face-btn{width:42px;height:42px;border-radius:50%;border:2px solid transparent;background:var(--track);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:24px;flex-shrink:0;transition:background var(--ease-standard);}
.face-btn:hover{background:var(--border);}
.face-btn.selected{border-color:var(--accent);background:var(--card);}

/* ---------- layout con sidebar ---------- */
.app-layout{display:flex;min-height:100vh;}
.sidebar{width:272px;flex-shrink:0;background:var(--card);border-right:1px solid var(--border);padding:20px 10px max(24px, env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:space-between;position:sticky;top:0;height:100vh;overflow-y:auto;}
.sidebar-nav-item{padding:10px 12px;border-radius:10px;font-size:16px;cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--text2);margin-bottom:2px;transition:background var(--ease-standard),color var(--ease-standard);}
.sidebar-nav-item:hover:not(.soon){background:var(--track);}
.sidebar-nav-item.active{background:var(--track);color:var(--text);font-weight:600;}
.sidebar-nav-item.soon{opacity:.4;cursor:default;}
.sidebar-nav-item > span:not(.soon-badge):not(.pro-badge){white-space:nowrap;}
.soon-badge{flex-basis:100%;margin-left:24px;width:fit-content;font-size:12px;background:var(--track);padding:2px 6px;border-radius:6px;white-space:nowrap;}
.pro-badge{margin-left:auto;flex-shrink:0;font-size:10px;font-weight:700;background:var(--accent);color:#fff;padding:2px 6px;border-radius:6px;white-space:nowrap;}
.beta-badge{flex-shrink:0;font-size:9px;font-weight:700;letter-spacing:0.5px;background:var(--track);color:var(--text2);padding:2px 6px;border-radius:6px;white-space:nowrap;}
.unread-dot{margin-left:auto;flex-shrink:0;width:11px;height:11px;border-radius:50%;background:var(--danger);}
.notif-item-dot{flex-shrink:0;width:11px;height:11px;border-radius:50%;background:var(--danger);}
.main-content{flex:1;min-width:0;padding:74px 32px 60px;max-width:1500px;}
body.has-floating-timer .main-content{padding-bottom:120px;}

/* min-height fijo: si la sección real (blureada atrás) trae poco contenido — Anotaciones sin
   notas cargadas es el caso típico — el wrap quedaba tan bajo que, con overflow:hidden, la
   tarjeta del candado (ícono + título + descripción + botón) no entraba entera y se cortaba. */
.pro-lock-wrap{position:relative;overflow:hidden;min-height:60vh;}
.pro-lock-content{filter:blur(10px);pointer-events:none;user-select:none;}
.pro-lock-overlay{position:absolute;inset:0;z-index:5;display:flex;justify-content:center;align-items:flex-start;padding-top:12vh;background:color-mix(in srgb, var(--bg) 55%, transparent);}
.pro-lock-card{position:sticky;top:12vh;max-width:400px;width:100%;margin:0 16px;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,0.18);}
@media (max-width:900px){.pro-lock-overlay{padding-top:8vh;}.pro-lock-card{top:8vh;}}

.floating-timer{
  position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:50;
  background:var(--card);border-radius:16px;
  padding:12px 16px;box-shadow:0 6px 20px rgba(0,0,0,0.2);
  display:flex;align-items:center;gap:10px;cursor:pointer;
  max-width:calc(100vw - 40px);
}
.floating-alma{
  position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:49;
  width:56px;height:56px;border-radius:50%;background-size:cover;background-position:center;
  cursor:pointer;border:2px solid var(--accent);
  box-shadow:0 6px 20px rgba(0,0,0,0.25), 0 0 16px 4px color-mix(in srgb, var(--accent) 45%, transparent);
}
body.has-floating-timer .floating-alma{bottom:calc(86px + env(safe-area-inset-bottom));}
.alma-float-panel{
  position:fixed;right:20px;bottom:calc(88px + env(safe-area-inset-bottom));z-index:49;
  width:340px;max-width:calc(100vw - 40px);height:480px;max-height:calc(100vh - 140px);
  background:var(--card);border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,0.3);
  display:flex;flex-direction:column;overflow-y:auto;
}
body.has-floating-timer .alma-float-panel{bottom:calc(154px + env(safe-area-inset-bottom));}
@media (max-width:900px){
  .floating-alma{right:16px;}
  .alma-float-panel{right:16px;width:calc(100vw - 32px);}
}

.alma-chat-card{margin-top:20px;height:calc(100vh - 154px);display:flex;flex-direction:column;}
body.has-floating-timer .alma-chat-card{height:calc(100vh - 214px);}
@media (max-width:900px){
  .alma-chat-card{height:calc(100vh - 166px);}
  body.has-floating-timer .alma-chat-card{height:calc(100vh - 226px);}
}

.sidebar-toggle{display:none;position:fixed;top:14px;left:14px;z-index:22;background:var(--accent);color:#fff;border:none;border-radius:50%;width:46px;height:46px;padding:0;margin:0;box-sizing:border-box;-webkit-appearance:none;appearance:none;align-items:center;justify-content:center;transition:transform var(--ease-standard),filter var(--ease-standard);touch-action:manipulation;}
.sidebar-toggle:hover{filter:brightness(1.1);}
.sidebar-toggle svg{pointer-events:none;}
.sidebar-toggle.shifted{transform:translateX(272px);}

.topbar-actions{position:fixed;top:14px;right:14px;z-index:20;display:flex;gap:10px;}
@media (min-width:901px){.topbar-actions{right:30px;}}
.topbar-icon-btn{background:var(--card);color:var(--accent);border:1px solid var(--border);border-radius:50%;width:46px;height:46px;padding:0;margin:0;box-sizing:border-box;-webkit-appearance:none;appearance:none;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:filter var(--ease-standard);touch-action:manipulation;}
.topbar-icon-btn:hover{filter:brightness(0.96);}
.topbar-icon-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);}
.topbar-icon-btn.has-count{width:auto;border-radius:999px;padding:0 14px 0 13px;}
.topbar-icon-btn svg{pointer-events:none;}
.topbar-badge-count{font-size:14px;font-weight:700;color:var(--accent);}
.topbar-plan{cursor:default;color:var(--text);}
.topbar-plan:hover{filter:none;}
.topbar-plan-name{font-size:14px;font-weight:700;}
@media (max-width:480px){.topbar-plan-word{display:none;}}
.topbar-icon-btn.active .topbar-badge-count{color:#fff;}

/* ---------- grillas del dashboard ---------- */
/* auto-fit + minmax: las tarjetas van entrando de a una según el ancho disponible,
   en vez de saltar de golpe entre un layout de escritorio fijo y uno apilado. */
.dash-grid{display:grid;gap:30px;margin-bottom:14px;align-items:start;}
.dash-mid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}

.home-grid{display:grid;grid-template-columns:1fr;gap:30px;align-items:stretch;margin-bottom:14px;}
@media (min-width:640px){.home-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1100px){.home-grid{grid-template-columns:repeat(3,1fr);}}

.home-question-card{padding:16px;padding-top:36px;padding-bottom:36px;}

@media (max-width:900px){.home-question-card{padding-top:44px;padding-bottom:44px;}}
.obj-quarters-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}

.sidebar-overlay{display:none;position:fixed;inset:0;z-index:21;background:color-mix(in srgb, var(--bg) 45%, transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);touch-action:none;}
.sidebar-overlay.open{display:block;}

@media (max-width:900px){
  .sidebar-toggle{display:flex;}
  /* En teléfono el menú deja de ocupar lugar en la página y pasa a flotar sobre el contenido:
     ahí sí corresponde el vidrio, porque hay algo detrás que conviene insinuar. En escritorio
     sigue opaco, que es donde es una columna más de la página y no una capa. */
  .sidebar{position:fixed;left:0;top:0;z-index:22;transform:translateX(-100%);transition:transform var(--ease-standard);
    background:var(--glass);border-right:1px solid var(--glass-border);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);
    backdrop-filter:blur(var(--glass-blur)) saturate(160%);}
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .sidebar{background:var(--card);}
  }
  .sidebar.open{transform:translateX(0);}
  .main-content{padding:96px 16px 50px;}
  body.has-floating-timer .main-content{padding-bottom:110px;}
  .floating-timer{right:16px;}
  .obj-quarters-grid{grid-template-columns:1fr;}
}

.skeleton-line{background:linear-gradient(90deg, var(--track) 25%, var(--border) 37%, var(--track) 63%);background-size:400% 100%;animation:skeleton-shimmer 1.4s ease infinite;border-radius:6px;}

.emoji-option{cursor:pointer;font-size:24px;text-align:center;padding:8px 0;border-radius:8px;transition:background var(--ease-standard);}
.emoji-option:hover{background:var(--track);}

.habit-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-bottom:14px;}
@media (max-width:700px){.habit-cards-grid{grid-template-columns:repeat(2,1fr);}}

.habit-list-grid{display:grid;grid-template-columns:1fr;gap:30px;}
@media (min-width:900px){.habit-list-grid{grid-template-columns:repeat(2,1fr);}}

.habit-day-pills{display:flex;flex-direction:row-reverse;gap:12px;flex-shrink:0;}
@media (max-width:700px){
  .habit-day-pills{
    flex-direction:row;
    flex-wrap:nowrap;
    overflow-x:auto;
    width:100%;
    max-width:180px;
  }
}

.habit-heatmap-grid{display:grid;grid-template-columns:1fr;gap:30px;}
@media (min-width:640px){.habit-heatmap-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1100px){.habit-heatmap-grid{grid-template-columns:repeat(3,1fr);}}

.training-blocks-grid{display:grid;grid-template-columns:1fr;gap:24px;margin-top:20px;}
@media (min-width:640px){.training-blocks-grid{grid-template-columns:repeat(2,1fr);gap:30px;}}
@media (min-width:1100px){.training-blocks-grid{grid-template-columns:repeat(3,1fr);}}

.training-day-cards-grid{display:grid;grid-template-columns:1fr;gap:24px;margin-top:20px;}
@media (min-width:640px){.training-day-cards-grid{grid-template-columns:repeat(2,1fr);gap:30px;}}
@media (min-width:1100px){.training-day-cards-grid{grid-template-columns:repeat(3,1fr);}}

.memento-grid{display:flex;flex-direction:column;gap:3px;}
.memento-row{display:flex;align-items:center;gap:8px;}
.memento-cells{display:grid;grid-template-columns:repeat(52,1fr);gap:4px;flex:1;min-width:0;}
.memento-label{width:22px;flex-shrink:0;font-size:12px;}
@media (max-width:900px){.memento-cells{gap:2px;}}
@media (max-width:700px){
  .memento-row{gap:4px;}
  .memento-cells{gap:1px;}
  .memento-label{width:18px;font-size:10px;}
}

.habit-card{aspect-ratio:1/1;border-radius:20px;padding:16px;display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;transition:background-color var(--ease-standard);}
.habit-card-name{transition:color var(--ease-standard);}
.habit-toggle-btn{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;transition:background-color var(--ease-standard),color var(--ease-standard);}
.habit-cat-scroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;margin-bottom:16px;}
.habit-cat-card{flex-shrink:0;width:92px;min-height:104px;border-radius:18px;background:var(--track);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px 6px;box-sizing:border-box;cursor:pointer;border:2px solid transparent;transition:background-color var(--ease-standard),border-color var(--ease-standard);}
.habit-cat-card.active{background:var(--card);border-color:var(--accent);}
.habit-cat-card-icon{width:40px;height:40px;border-radius:50%;background:var(--card);display:flex;align-items:center;justify-content:center;color:var(--text);flex-shrink:0;transition:background-color var(--ease-standard),color var(--ease-standard);}
.habit-cat-card.active .habit-cat-card-icon{background:var(--accent);color:#fff;}
.habit-cat-card-label{font-size:12px;font-weight:600;text-align:center;line-height:1.2;}
.habit-preset-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--track);border-radius:12px;padding:12px 14px;margin-bottom:8px;cursor:pointer;transition:background-color var(--ease-standard);}
.habit-day-pill{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--track);color:var(--text2);font-size:14px;font-weight:600;cursor:pointer;}
.habit-day-pill.active{background:var(--accent);color:#fff;}
.habit-row-arrow-btn{width:36px;height:36px;border-radius:50%;background:var(--track);color:var(--text2);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background-color var(--ease-standard),opacity var(--ease-standard);}
.habit-row-arrow-btn.disabled{opacity:.3;cursor:default;}
.habit-preset-row:hover{background:var(--card);}

/* Utilidad general: cualquier elemento cuyo color/fondo/borde cambia según estado (seleccionado,
   tildado, hoy, etc.) usa esta clase para que el cambio se vea con la transición estándar de 0.3s
   en vez de saltar de golpe. */
.fx-color{transition:background-color var(--ease-standard),color var(--ease-standard),border-color var(--ease-standard);}
.fx-size{transition:width var(--ease-standard),height var(--ease-standard);}

.lang-spin-icon{animation:lang-spin 1.4s linear infinite;}
@keyframes lang-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

.dream-card{
  position:relative;
  overflow:hidden;
  border:1.5px solid transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--accent) 13%, var(--card)), color-mix(in srgb, var(--accent) 13%, var(--card))) padding-box,
    linear-gradient(135deg, var(--accent), #FFD76A, var(--accent)) border-box;
  box-shadow:0 0 22px 1px color-mix(in srgb, var(--accent) 20%, transparent);
}
@keyframes skeleton-shimmer{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

.pillar-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
@media (min-width:900px){.pillar-grid{grid-template-columns:repeat(3,1fr);}}

.finance-group-grid{display:grid;grid-template-columns:1fr;gap:16px;}
@media (min-width:640px){.finance-group-grid{grid-template-columns:repeat(2,1fr);gap:30px;}}
@media (min-width:1100px){.finance-group-grid{grid-template-columns:repeat(3,1fr);}}

/* Clientes */
.clientes-grid{display:grid;grid-template-columns:1fr;gap:16px;}
@media (min-width:640px){.clientes-grid{grid-template-columns:repeat(2,1fr);gap:20px;}}
@media (min-width:1100px){.clientes-grid{grid-template-columns:repeat(3,1fr);}}
.cliente-chip{flex:none;font-size:11px;font-weight:600;letter-spacing:.02em;color:#fff;padding:3px 10px;border-radius:999px;white-space:nowrap;}
/* La ficha es alta: se le deja margen arriba y abajo para que en pantallas bajas se pueda
   scrollear dentro del fondo oscuro en vez de quedar cortada. */
.cliente-modal{width:100%;max-width:560px;margin:auto;}
/* El popup del plan es más ancho que el resto y se parte en dos columnas en escritorio: a la
   izquierda la oferta (nombre, descripción, formas de pago) y a la derecha el temario, que es
   la parte larga. A 1200px cada columna queda en ~570, suficiente para que la fila de una forma
   de pago (nombre, tipo, cantidad, monto, moneda) entre en un solo renglón. Abajo de 900px
   vuelve a una sola columna apilada. */
.plan-modal{width:100%;max-width:1200px;margin:auto;}
.plan-modal-grid{display:grid;grid-template-columns:1fr;gap:24px;}
@media (min-width:900px){.plan-modal-grid{grid-template-columns:1fr 1fr;gap:32px;align-items:start;}}
/* En el popup de sesión, lado a lado, la columna del cliente arranca con su rótulo arriba: la
   raya y el aire que lo separan en teléfono sobran cuando ya hay una columna de por medio. */
@media (min-width:900px){.sesion-col-cliente > .sesion-separador:first-child{margin-top:0;padding-top:0;border-top:none;}}
/* La ficha del cliente en escritorio: dos columnas.
     izquierda → Ficha, Anotaciones y Planes contratados
     derecha   → Sesiones, que es la lista larga y por eso tiene su columna entera
   Antes eran dos filas de dos, y la segunda fila arrancaba recién debajo de la más alta de la
   primera: si Planes crecía, quedaba un hueco arriba de Sesiones. Con las columnas
   independientes cada una fluye a su ritmo. Abajo de 1000px vuelve a una sola, apiladas. */
.cliente-detalle-grid{display:grid;grid-template-columns:1fr;gap:32px;}
@media (min-width:1000px){.cliente-detalle-grid{grid-template-columns:1fr 1fr;align-items:start;}}
/* El espacio entre secciones lo pone el layout, no márgenes en los títulos.
   Antes el aire venía de `.detalle-titulo{margin-top:28px}`, pero `.detalle-encabezado
   .detalle-titulo{margin:0}` lo anulaba — y esos son justamente los encabezados con botón
   (Anotaciones, Planes, Sesiones), que quedaban pegados al contenido de arriba. Dos reglas
   peleando por el mismo espacio: con `gap` no hay nada que anular. */
.cliente-detalle-grid > div{min-width:0;display:flex;flex-direction:column;gap:34px;}
.cliente-detalle-grid section{min-width:0;display:block;}
.detalle-titulo{font-size:20px;font-weight:700;margin:0 0 14px;}
.detalle-encabezado{justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
/* Encabezados que despliegan su sección. El chevron gira; el botón de acción de la derecha no
   despliega (corta la propagación en el JS). */
.seccion-toggle{cursor:pointer;user-select:none;}
/* El código de acceso se dicta por teléfono o se copia: grande, espaciado y en una tipografía
   donde cada carácter se distingue. */
/* Separador dentro del formulario de sesión: marca dónde empieza lo que el cliente va a leer.
   Sin esta línea, "Notas" (privadas) y "Resumen para el cliente" (públicas) se parecen
   demasiado y es cuestión de tiempo escribir una en el campo de la otra. */
.sesion-separador{margin:22px 0 10px;padding-top:16px;border-top:1px solid var(--border);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);}
/* Olas: las sesiones de cada plan contratado, agrupadas en la ficha del cliente. */
.ola-grupo + .ola-grupo{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);}
.ola-cab{display:flex;align-items:flex-start;gap:6px;margin:0 0 10px;}
/* El encabezado entero pliega: es un botón, no un texto con un click pegado, así lo entiende el
   teclado y un lector de pantalla (aria-expanded). El lápiz queda afuera del botón. */
.ola-toggle{flex:1;min-width:0;display:flex;align-items:flex-start;gap:8px;background:none;border:none;padding:2px 0;margin:0;text-align:left;cursor:pointer;color:inherit;font:inherit;}
.ola-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px;}
.ola-cab .seccion-chevron{margin-top:1px;}
.ola-cab-texto{display:flex;flex-direction:column;min-width:0;}
.ola-titulo{font-size:16px;font-weight:700;}
.ola-sub{margin-top:2px;font-size:13px;color:var(--text2);}
.ola-editar{background:none;border:none;padding:3px;margin:0;color:var(--text2);cursor:pointer;display:inline-flex;border-radius:6px;}
.ola-editar:hover{color:var(--accent);}
.ola-editar:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
.ola-editar svg{width:14px;height:14px;}
.ola-eyebrow{margin:0 0 2px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
.compartir-codigo{margin:0;font-size:30px;font-weight:800;letter-spacing:.22em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.seccion-chevron{display:flex;align-items:center;color:var(--text2);flex:none;transition:transform var(--ease-standard);}
.seccion-chevron.abierta{transform:rotate(90deg);}
.seccion-chevron svg{width:18px;height:18px;}
.detalle-encabezado .detalle-titulo{margin:0;}
/* Detalle de un evento de la agenda. Una tarjeta angosta y aireada: la barra de color arriba
   retoma el color del evento, y cada dato va en su renglón con un ícono al margen para que se
   escanee de un vistazo en vez de leerse como un párrafo. */
.agenda-detalle{width:100%;max-width:440px;position:relative;overflow:hidden;padding-top:26px;}
.agenda-det-barra{position:absolute;top:0;left:0;right:0;height:5px;}
.agenda-det-titulo{margin:0;font-size:21px;font-weight:700;line-height:1.25;letter-spacing:-.01em;}
.agenda-det-fila{display:flex;gap:12px;align-items:flex-start;padding:9px 0;}
.agenda-det-icono{flex:none;width:20px;color:var(--text2);display:flex;align-items:center;justify-content:center;padding-top:1px;}
.agenda-det-icono svg{width:17px;height:17px;}
.agenda-det-llamada{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:16px;text-decoration:none;}
.agenda-det-llamada svg{width:18px;height:18px;}
/* El check de "hecha" es un blanco grande a propósito: se toca desde el teléfono, muchas veces
   con una mano, justo al terminar la sesión. */
.agenda-det-check{display:flex;align-items:center;gap:10px;margin-top:18px;padding:12px 14px;background:var(--track);border-radius:12px;cursor:pointer;font-size:15px;font-weight:600;user-select:none;}
.agenda-det-check input{width:20px;height:20px;flex:none;accent-color:var(--accent);cursor:pointer;}
.agenda-det-bloque{margin-top:14px;padding:12px 14px;background:var(--track);border-radius:12px;}

/* ── Agenda: vista semanal ───────────────────────────────────────────────────
   Siete columnas con las horas de arriba a abajo, como un calendario de escritorio. En
   teléfono no entra: abajo de 900px se esconde y queda la lista agrupada por día. */
.agenda-semana{display:none;}
.agenda-lista{display:block;}
@media (min-width:900px){
  .agenda-semana{display:block;}
  .agenda-lista{display:none;}
}
.agenda-semana-head{display:grid;grid-template-columns:46px repeat(7,1fr);gap:2px;margin-bottom:6px;}
.agenda-col-head{text-align:center;padding:6px 0;border-radius:9px;}
.agenda-col-head i{display:block;font-style:normal;font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:.04em;}
.agenda-col-head b{display:block;font-size:17px;font-weight:700;margin-top:1px;}
.agenda-col-head.hoy{background:var(--accent);}
.agenda-col-head.hoy i,.agenda-col-head.hoy b{color:#fff;}

/* Fila de los eventos de todo el día, arriba de la grilla: no tienen hora, así que no pueden
   posicionarse contra ella. */
.agenda-todo-dia{align-items:start;padding-bottom:6px;border-bottom:1px solid var(--border);}
.agenda-todo-dia .agenda-hora-label{font-size:10px;color:var(--text2);text-align:right;padding-right:6px;padding-top:3px;}
.agenda-chip-dia{display:block;font-style:normal;font-size:11px;background:var(--track);border-radius:5px;padding:2px 6px;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.agenda-semana-body{display:grid;grid-template-columns:46px repeat(7,1fr);gap:2px;position:relative;margin-top:6px;}
.agenda-horas{position:relative;}
.agenda-horas span{position:absolute;right:6px;transform:translateY(-50%);font-size:11px;color:var(--text2);font-variant-numeric:tabular-nums;}
.agenda-col{position:relative;border-radius:8px;background:var(--card);overflow:hidden;}
.agenda-col.hoy{background:color-mix(in srgb, var(--accent) 6%, var(--card));}
.agenda-linea{position:absolute;left:0;right:0;height:1px;background:var(--border);pointer-events:none;}
.agenda-bloque{position:absolute;background:var(--track);border-radius:6px;padding:3px 6px;overflow:hidden;cursor:pointer;z-index:1;}
.agenda-bloque p{margin:0;font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25;}
.agenda-bloque span{font-size:10px;color:var(--text2);}
/* La línea del momento presente, igual que en Inicio. */
.agenda-ahora{position:absolute;left:0;right:0;height:0;border-top:1.5px dashed var(--danger);z-index:2;pointer-events:none;}
.agenda-ahora i{position:absolute;left:0;top:-3.5px;width:7px;height:7px;border-radius:50%;background:var(--danger);}

/* ── Inicio ──────────────────────────────────────────────────────────────────
   El tablero: a la izquierda en qué anda, a la derecha cuándo. La columna del calendario
   tiene ancho fijo porque su contenido (7 días de la semana) no gana nada con estirarse. */
.home-grid{display:grid;grid-template-columns:1fr;gap:24px;}
@media (min-width:1100px){.home-grid{grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start;}}

.home-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:4px;}
@media (min-width:700px){.home-stats{grid-template-columns:repeat(4,1fr);}}
.home-stat{padding:16px 18px;}

.home-cols{display:grid;grid-template-columns:1fr;gap:8px;}
@media (min-width:900px){.home-cols{grid-template-columns:1fr 1fr;gap:28px;align-items:start;}}
.home-fila{margin-bottom:10px;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:14px 16px;}

/* Calendario del mes */
.home-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center;}
.home-cal-grid.encabezado{font-size:11px;font-weight:600;margin-bottom:4px;}
.home-cal-dia{position:relative;padding:7px 0 11px;border-radius:9px;font-size:13px;cursor:pointer;transition:background var(--ease-standard);}
.home-cal-dia:hover{background:var(--track);}
.home-cal-dia.hoy{font-weight:700;color:var(--accent);}
.home-cal-dia.sel{background:var(--accent);color:#fff;font-weight:600;}
/* El punto marca que ese día tiene algo. En el día seleccionado se pinta blanco porque el
   acento sobre el acento no se vería. */
.home-cal-punto{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;}
.home-cal-dia.sel .home-cal-punto{background:#fff !important;}

/* El día, hora por hora */
.home-timeline{position:relative;}
.home-hora{position:absolute;left:0;right:0;display:flex;align-items:center;gap:8px;pointer-events:none;}
.home-hora span{font-size:11px;color:var(--text2);width:46px;flex:none;font-variant-numeric:tabular-nums;}
.home-hora i{flex:1;height:1px;background:var(--border);}
.home-evento{position:absolute;left:54px;right:0;background:var(--track);border-radius:8px;padding:5px 9px;overflow:hidden;cursor:pointer;}
.home-evento p{margin:0;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.home-evento span{font-size:11px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
/* La línea del momento presente. Va por encima de todo (z-index) y no intercepta clics. */
.home-ahora{position:absolute;left:46px;right:0;height:0;border-top:1.5px dashed var(--danger);z-index:2;pointer-events:none;}
.home-ahora i{position:absolute;left:-4px;top:-3.5px;width:7px;height:7px;border-radius:50%;background:var(--danger);}
/* El cuerpo de una nota guarda HTML con formato (negrita, listas). Sin esto, las listas pierden
   sus viñetas porque el reset del navegador no las trae dentro de una tarjeta. */
.nota-cuerpo ul,.nota-cuerpo ol{margin:6px 0;padding-left:22px;}
.nota-cuerpo p{margin:0 0 6px;}
.nota-cuerpo :last-child{margin-bottom:0;}
.cuota-chip{flex:none;font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;white-space:nowrap;cursor:pointer;transition:transform var(--ease-standard);}
.cuota-chip:active{transform:scale(.95);}
.cuota-chip-fecha{font-weight:500;opacity:.85;}
.notes-category-grid{display:grid;grid-template-columns:1fr;gap:16px;}
@media (min-width:640px){.notes-category-grid{grid-template-columns:repeat(2,1fr);gap:20px;}}
@media (min-width:1100px){.notes-category-grid{grid-template-columns:repeat(3,1fr);}}

/* Misma grilla que .finance-group-grid (mismo gap en cada breakpoint también), para que la
   tarjeta de Patrimonio (1 columna) y la de Crecimiento (2 columnas, "2/3") queden alineadas
   con las tarjetas de abajo. */
.finance-top-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:20px;}
@media (min-width:640px){.finance-top-grid{grid-template-columns:repeat(2,1fr);gap:30px;}}
@media (min-width:1100px){.finance-top-grid{grid-template-columns:repeat(3,1fr);}}
.finance-top-grid .finance-chart-card{grid-column:span 1;}
@media (min-width:1100px){.finance-top-grid .finance-chart-card{grid-column:span 2;}}

/* Popup de agregar/editar activo: 1 columna en mobile, 2 en desktop (más ancho para que entre). */
.finance-holding-modal{max-width:360px;}
@media (min-width:640px){.finance-holding-modal{max-width:580px;}}
.finance-holding-form-grid{display:grid;grid-template-columns:1fr;gap:0 16px;}
@media (min-width:640px){.finance-holding-form-grid{grid-template-columns:1fr 1fr;}}
.finance-holding-form-grid > div{margin-bottom:10px;}
.finance-holding-span2{grid-column:1/-1;}

.weekly-days-grid{display:grid;grid-template-columns:repeat(7,minmax(317px,1fr));gap:18px;overflow-x:auto;}
.weekly-mobile-nav{display:flex;}
@media (max-width:900px){
  .weekly-days-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;-webkit-overflow-scrolling:touch;}
  .weekly-day-col{flex:0 0 100%;scroll-snap-align:start;box-sizing:border-box;padding:0 8px;}
  .weekly-mobile-nav{display:flex;}
}

.reward-box{
  position:relative;
  border-radius:10px;
  border:1.5px solid transparent;
  padding:10px;
  background:
    linear-gradient(color-mix(in srgb, var(--accent) 15%, var(--card)), color-mix(in srgb, var(--accent) 15%, var(--card))) padding-box,
    linear-gradient(135deg, var(--accent), #FFD76A, var(--accent)) border-box;
  box-shadow:0 0 14px 0 color-mix(in srgb, var(--accent) 25%, transparent);
}

/* ---------- páginas de autenticación (login / registro) ---------- */
.auth-bg{position:fixed;inset:0;z-index:0;background:url('images/background-app.webp') center/cover no-repeat;}
.auth-bg-overlay{position:fixed;inset:0;z-index:0;background:linear-gradient(135deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.8) 100%);pointer-events:none;}
.auth-shell{
  min-height:100vh;width:100%;position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  padding:60px 100px;
}
.auth-card-wrap{position:relative;z-index:1;width:100%;max-width:480px;}
.auth-logo{display:block;width:56px;height:56px;margin:0 auto 18px;}

.landing-shell{
  position:relative;z-index:1;width:100%;height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:40px 24px;
}
.landing-logo{width:84px;height:84px;margin-bottom:32px;}
.landing-title{
  color:#fff;font-size:52px;font-weight:800;line-height:1.15;
  margin:0 0 40px;max-width:760px;text-shadow:0 4px 30px rgba(0,0,0,.5);
}
.landing-btn{padding:16px 52px;font-size:19px;border-radius:14px;text-decoration:none;display:inline-block;text-align:center;}
.landing-btn-secondary{background:#fff;color:var(--accent);font-weight:600;}
.landing-btn-group{display:flex;flex-direction:column;gap:14px;width:100%;max-width:340px;}

@media (max-width:700px){
  .landing-title{font-size:34px;margin-bottom:32px;}
  .landing-logo{width:68px;height:68px;margin-bottom:24px;}
  .landing-btn{width:100%;padding:15px 0;}
}
.auth-card-wrap .card{
  padding:36px;
  background:color-mix(in srgb, var(--card) 45%, transparent);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border:1px solid color-mix(in srgb, var(--border) 45%, transparent);
  box-shadow:0 24px 70px rgba(0,0,0,.4);
}

@media (max-width:900px){
  .auth-shell{justify-content:center;padding:24px;}
  .auth-card-wrap .card{padding:24px;}
}

/* ── Conversaciones ──────────────────────────────────────────────────────────
   El seguimiento de lo que se habla con cada persona: la línea de tiempo de la ficha, la
   cola de trabajo de la sección y los recordatorios de Inicio y la campana. */

/* Título de grupo. Va sobre la tarjeta, no adentro: separa sin gastar un borde más. */
.conv-grupo{
  font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text2);margin:18px 0 8px;
}

/* La urgencia se lee por COLOR antes que por texto: rojo es "ya se te pasó", naranja es
   "hoy", acento es "está agendado". Sin esto hay que leer cada fecha para saber qué mirar. */
.conv-chip{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  font-size:11.5px;font-weight:600;border-radius:999px;padding:3px 9px;
}
.conv-chip-vencido{background:color-mix(in srgb, var(--danger) 14%, transparent);color:var(--danger);}
.conv-chip-hoy{background:color-mix(in srgb, var(--warning) 16%, transparent);color:var(--warning);}
.conv-chip-prox{background:color-mix(in srgb, var(--accent) 14%, transparent);color:var(--accent);}
.conv-chip-sin{background:var(--track);color:var(--text2);}

/* ── La cola de trabajo ───────────────────────────────────────────────────── */
.conv-fila{
  display:grid;grid-template-columns:34px 1fr auto;gap:11px;align-items:start;
  padding:12px 0;border-bottom:1px solid var(--border);cursor:pointer;
}
.conv-fila:last-child{border-bottom:none;}
.conv-avatar{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  color:var(--accent);font-size:13px;font-weight:700;
}
/* Dos renglones y corta. Un evento largo no puede empujar la fila de al lado. */
.conv-recorte{
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow-wrap:anywhere;
}
.conv-fila-der{display:flex;flex-direction:column;align-items:flex-end;gap:6px;padding-top:1px;}

/* ── La línea de tiempo ───────────────────────────────────────────────────── */
.conv-tl{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;}
.conv-tl-item{display:grid;grid-template-columns:22px 1fr;gap:12px;position:relative;padding-bottom:18px;}
.conv-tl-item:last-child{padding-bottom:0;}
/* La línea baja POR DETRÁS de los puntos (z-index en .conv-dot) y se corta en el último, para
   que no quede un tramo colgando bajo el final del historial. */
.conv-tl-item:not(:last-child)::before{
  content:"";position:absolute;left:10px;top:20px;bottom:-2px;width:1.5px;background:var(--border);
}
.conv-dot{
  width:21px;height:21px;border-radius:50%;margin-top:1px;position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  background:var(--track);border:1.5px solid var(--border);
}
.conv-dot i{width:6px;height:6px;border-radius:50%;background:var(--text2);display:block;}
/* Lleno y en acento: lo único accionable de la lista. */
.conv-dot.proximo{background:var(--accent);border-color:var(--accent);}
.conv-dot.proximo i{background:#fff;}
.conv-dot.hecho{background:color-mix(in srgb, var(--success) 18%, transparent);border-color:transparent;}
.conv-dot.hecho i{background:var(--success);}
.conv-cuando{
  font-size:12px;font-weight:600;color:var(--text2);
  font-variant-numeric:tabular-nums;
}

/* ── Recordatorios (Inicio y la campana) ──────────────────────────────────── */
.conv-rem{
  display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--border);
}
.conv-rem:last-child{border-bottom:none;padding-bottom:0;}
.conv-tick{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;padding:0;
  border:1.5px solid var(--border);background:transparent;color:var(--text2);
  display:flex;align-items:center;justify-content:center;
  transition:background var(--ease-standard),color var(--ease-standard),border-color var(--ease-standard),transform var(--ease-standard);
}
.conv-tick svg{width:15px;height:15px;}
.conv-tick:hover{background:var(--success);border-color:var(--success);color:#fff;}
.conv-tick:active{transform:scale(.92);}
.conv-tick:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* Lo que aparece al encender el recordatorio. Sangrado y con su propia línea, para que se lea
   como consecuencia del interruptor y no como un campo más del alta — que es justo lo que
   separa "cuándo pasó" de "cuándo avisarme". */
.conv-reveal{
  margin-top:12px;padding-left:12px;
  border-left:2px solid color-mix(in srgb, var(--accent) 45%, transparent);
}

/* El selector de cliente del popup de Conversaciones. Es un buscador y no un <select> porque
   una cartera grande vuelve inmanejable un desplegable largo. Alto tope con scroll propio: la
   lista no puede empujar los campos de abajo fuera de la pantalla. */
.conv-cli-lista{
  margin:6px 0 14px;max-height:200px;overflow-y:auto;
  border:1px solid var(--border);border-radius:10px;background:var(--track);
}
.conv-cli-opcion{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--border);
  transition:background var(--ease-standard);
}
.conv-cli-opcion:last-child{border-bottom:none;}
.conv-cli-opcion:hover{background:var(--card);}

/* Un recordatorio de Conversaciones dentro de la grilla de la Agenda.
   NO es un evento real: nadie quedó en encontrarse a esa hora, es una nota que te dejaste vos.
   Por eso va punteado y apenas teñido, en vez del relleno sólido de una sesión — a simple
   vista se lee que ese rato de la agenda sigue libre.
   El `border-left` no se toca acá: lo pone el estilo en línea del bloque, y queda sólido a
   propósito, como ancla de color del punteado. */
.agenda-bloque.recordatorio{
  background:color-mix(in srgb, var(--warning) 12%, transparent);
  border-top:1px dashed color-mix(in srgb, var(--warning) 55%, transparent);
  border-right:1px dashed color-mix(in srgb, var(--warning) 55%, transparent);
  border-bottom:1px dashed color-mix(in srgb, var(--warning) 55%, transparent);
}
.agenda-bloque.recordatorio p{font-weight:600;}

/* Un recordatorio en Inicio o en la campana: toda la fila abre su popup. El tilde de la
   derecha corta la propagación, así darlo por hecho no abre nada. */
.conv-rem-click{cursor:pointer;border-radius:8px;transition:background var(--ease-standard);}
.conv-rem-click:hover{background:var(--track);}

/* El tilde ya dado por hecho: verde lleno y sigue siendo un botón, porque se puede destildar
   para volver el recordatorio a pendiente. El hover lo apaga un poco en vez de encenderlo —
   al revés que el vacío— para insinuar que tocarlo DESHACE en vez de completar. */
.conv-tick.hecho{background:var(--success);border-color:var(--success);color:#fff;}
.conv-tick.hecho:hover{background:color-mix(in srgb, var(--success) 62%, transparent);border-color:transparent;}

/* ── Sección Huella ──────────────────────────────────────────────────────────
   Lo que los clientes comparten desde la otra app. Los colores salen de --accent como todo
   el resto: la sección no trae una paleta propia, porque no es "otra app adentro de Huella Coach"
   sino una sección más de Huella Coach que da la casualidad de leer datos de afuera. */
.huella-tiles{display:grid;grid-template-columns:1fr;gap:12px;}
@media (min-width:620px){.huella-tiles{grid-template-columns:repeat(3,1fr);}}
.huella-tile{padding:14px 18px;}
.huella-tile-n{font-size:28px;font-weight:700;letter-spacing:-.02em;margin:0;font-variant-numeric:tabular-nums;line-height:1.1;}
.huella-tile-l{font-size:13px;color:var(--text2);margin:2px 0 0;}

.huella-stack{display:grid;gap:16px;}

/* Mapa de calor: una columna por semana, de más viejo a más nuevo. */
.huella-heat{display:grid;grid-auto-flow:column;gap:3px;justify-content:start;}
.huella-heat i{display:block;border-radius:3px;}
.huella-heat-n0{background:var(--heatmap-muted);}
.huella-heat-n1{background:color-mix(in srgb, var(--accent) 28%, var(--card));}
.huella-heat-n2{background:color-mix(in srgb, var(--accent) 60%, var(--card));}
.huella-heat-n3{background:var(--accent);}

.huella-fila{display:grid;grid-template-columns:1fr auto;gap:10px 14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--border);}
.huella-fila:last-child{border-bottom:none;}
.huella-fila.clickable{cursor:pointer;}
.huella-fila.clickable:hover{background:var(--track);border-radius:10px;padding-inline:10px;margin-inline:-10px;}
/* Sin registrar hace días: se tiñe apenas, no se pinta de rojo. Una racha cortada puede ser
   una gripe o un viaje — es un tema para la próxima sesión, no una alarma. */
.huella-fila.dormida{background:color-mix(in srgb, var(--warning) 7%, transparent);border-radius:10px;padding-inline:10px;margin-inline:-10px;}
.huella-avatar{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff;background:var(--accent);text-transform:uppercase;}

.huella-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:color-mix(in srgb, var(--accent) 8%, var(--card));border:1px solid color-mix(in srgb, var(--accent) 22%, var(--card));color:var(--accent);border-radius:12px;padding:11px 15px;margin-bottom:18px;}

.huella-bar{height:7px;border-radius:999px;background:var(--track);overflow:hidden;}
.huella-bar > i{display:block;height:100%;border-radius:999px;background:var(--accent);}

/* Rueda de la vida: dónde empezó (punto hueco) y dónde está (punto lleno), sobre 0 a 10. */
.huella-rueda-fila{display:grid;grid-template-columns:minmax(72px,110px) 1fr 34px;gap:10px;align-items:center;}
.huella-rueda-label{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.huella-rueda-track{position:relative;height:14px;background:var(--track);border-radius:999px;}
.huella-rueda-track > i{position:absolute;top:50%;display:block;}
.huella-rueda-span{height:4px;transform:translateY(-50%);border-radius:999px;}
.huella-rueda-antes{width:11px;height:11px;margin-left:-5.5px;transform:translateY(-50%);border-radius:50%;background:var(--card);border:1.6px solid var(--text2);}
.huella-rueda-ahora{width:13px;height:13px;margin-left:-6.5px;transform:translateY(-50%);border-radius:50%;background:var(--accent);}
.huella-rueda-valor{font-size:13px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;}

.huella-check{width:18px;height:18px;border-radius:50%;flex:none;border:1.5px solid var(--border);display:grid;place-items:center;font-size:11px;color:#fff;}
.huella-check.done{background:var(--success);border-color:var(--success);}

/* Lo que no está a la vista se muestra igual: saber que hay algo que el cliente no compartió
   es parte de la información. Por eso una caja de borde punteado y no un hueco. */
.huella-locked{border:1px dashed var(--border);border-radius:14px;padding:14px 16px;}

/* ── Postulaciones ───────────────────────────────────────────────────────────
   La pestaña de Conversaciones donde el coach lee a quien se postuló y decide. Reusa
   .conv-avatar y .conv-reveal: son la misma sección y tienen que verse igual. */

/* El número de postulaciones sin mirar, pegado al nombre de la solapa. Es el único lugar de
   la app donde un contador va dentro de una pestaña, y por eso es chico y no un punto rojo:
   una postulación sin leer es urgente, pero no es una alarma. */
.postu-badge{
  display:inline-block;min-width:18px;padding:1px 6px;border-radius:999px;
  background:var(--accent);color:#fff;font-size:11px;font-weight:700;text-align:center;
  vertical-align:middle;margin-left:2px;
}

.postu-chip{font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap;}
.postu-chip-nueva{background:color-mix(in srgb, var(--accent) 14%, transparent);color:var(--accent);}
.postu-chip-admitida{background:color-mix(in srgb, var(--success) 16%, transparent);color:var(--success);}
.postu-chip-rechazada{background:var(--track);color:var(--text2);}
.postu-chip-archivada{background:var(--track);color:var(--text2);}
.postu-chip-abierta{background:color-mix(in srgb, var(--success) 16%, transparent);color:var(--success);}
.postu-chip-cerrada{background:color-mix(in srgb, var(--warning) 16%, transparent);color:var(--warning);}

.postu-card{margin-bottom:14px;}

/* La dirección de la página: se lee de un vistazo y se copia, así que texto seleccionable y
   no un botón. Corta con puntos suspensivos en pantallas angostas en vez de romper la fila. */
.postu-url{
  background:var(--track);border:1px solid var(--border);border-radius:9px;
  padding:9px 12px;font-size:14px;color:var(--text);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* El mismo dato, en el popup: la parte fija apagada y solo el tramo editable como campo. */
.postu-url-edit{
  display:flex;align-items:center;gap:2px;flex-wrap:wrap;
  background:var(--track);border:1px solid var(--border);border-radius:10px;padding:4px 10px;
}
.postu-url-edit > span{font-size:13px;}
.postu-url-edit > input{
  flex:1;min-width:120px;background:transparent;border:none;outline:none;
  font-family:inherit;font-size:16px;color:var(--text);padding:8px 0;
}

.postu-pregunta{border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:10px;}

/* ── Accesos rápidos de Inicio ───────────────────────────────────────────────
   La fila de arriba del tablero: las bandejas donde el coach entra todos los días.
   Comparten la definición con las tarjetas de herramientas de la ficha (`.herr-card`): son la
   misma cosa —una tarjeta que lleva a un lado y dice si hay algo esperando— y tenerlas
   definidas juntas es lo que evita que dentro de tres meses se vean distinto sin que nadie lo
   haya decidido. Lo único propio de Inicio es el número, que las de la ficha no llevan. */
.home-accesos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:12px;margin-bottom:24px;
}
.home-acceso,
.herr-card{
  display:flex;align-items:center;gap:12px;text-align:left;
  background:var(--card);color:var(--text);
  border:1px solid var(--border);border-radius:14px;
  padding:14px 16px;font-family:inherit;cursor:pointer;
  transition:border-color var(--ease-standard),transform var(--ease-standard);
}
.home-acceso:hover,
.herr-card:hover{border-color:var(--accent);}
.home-acceso:active,
.herr-card:active{transform:scale(.99);}
.home-acceso:focus-visible,
.herr-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* El ícono en un cuadrado redondeado con el acento apenas insinuado: el color entra por el
   símbolo, no por el fondo entero, así cuatro tarjetas seguidas no saturan la pantalla. */
.home-acceso-ico,
.herr-card-ico{
  width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--accent);
}
.home-acceso-txt,
.herr-card-txt{display:flex;flex-direction:column;min-width:0;flex:1;}
.home-acceso-label,
.herr-card-nombre{font-size:15px;font-weight:700;line-height:1.25;}
.home-acceso-sub,
.herr-card-sub{font-size:12.5px;color:var(--text2);line-height:1.3;margin-top:2px;}

/* El número sí va en acento pleno: sobre una tarjeta clara es lo único que tiene que saltar,
   y es justamente lo que dice que hay algo sin responder. */
.home-acceso-badge{
  flex:none;min-width:26px;height:26px;padding:0 8px;border-radius:999px;
  background:var(--accent);color:#fff;
  font-size:14px;font-weight:700;display:grid;place-items:center;
  font-variant-numeric:tabular-nums;
}

/* En teléfono los cuatro accesos pasan a dos columnas y se acomodan en vertical: ícono arriba
   centrado y el texto abajo, también centrado. En una tarjeta de media pantalla la fila
   horizontal deja el texto contra el ícono y sin lugar para respirar; apilado entra cómodo y
   las cuatro se leen como cuatro botones iguales.
   El número se despega del flujo y se va a la esquina: en la columna del medio empujaba el
   texto y dejaba una tarjeta más alta que las otras tres. */
@media (max-width:640px){
  .home-accesos{grid-template-columns:repeat(2,minmax(0,1fr));}
  .home-acceso{
    flex-direction:column;align-items:center;text-align:center;
    gap:8px;padding:16px 12px;position:relative;
  }
  .home-acceso-txt{align-items:center;flex:none;}
  .home-acceso-badge{position:absolute;top:8px;right:8px;}
}

/* ── Recorrido del cliente ───────────────────────────────────────────────────
   La línea de tiempo de la ficha: fecha a la izquierda, la línea con su punto al medio, y el
   contenido a la derecha. La fecha va afuera y no adentro de cada tarjeta para que las fechas
   queden alineadas entre sí y el recorrido se pueda recorrer con la vista en vertical. */
.rec-tl{list-style:none;margin:0;padding:0;}
.rec-item{display:grid;grid-template-columns:62px 28px 1fr;gap:10px;}
.rec-fecha{text-align:right;padding-top:5px;}
.rec-fecha-dia{display:block;font-size:13px;font-weight:700;white-space:nowrap;}
.rec-fecha-hora{display:block;font-size:11.5px;color:var(--text2);white-space:nowrap;}

/* La línea que une los puntos se dibuja con el borde del contenedor, así crece sola con el alto
   del ítem y no hace falta calcular nada. El último no la lleva: la línea termina donde empieza
   el proceso, no colgando en el aire. */
.rec-linea{position:relative;display:flex;justify-content:center;}
.rec-linea::before{
  content:"";position:absolute;top:30px;bottom:-4px;width:2px;background:var(--border);
}
.rec-item:last-child .rec-linea::before{display:none;}
.rec-punto{
  width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  position:relative;z-index:1;
}

.rec-cuerpo{min-width:0;padding-bottom:20px;}
.rec-titulo{font-size:15px;font-weight:600;overflow-wrap:anywhere;}
.rec-tipo{font-size:10.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:2px 7px;border-radius:6px;white-space:nowrap;}
/* El ojito dice que ese hito también lo ve el cliente en su página. */
.rec-ojo{color:var(--text2);display:inline-flex;align-items:center;}
.rec-texto{margin:4px 0 0;font-size:14px;color:var(--text);line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;}

@media (max-width:600px){
  .rec-item{grid-template-columns:50px 24px 1fr;gap:8px;}
  .rec-punto{width:24px;height:24px;}
  .rec-linea::before{top:26px;}
}

/* ── Herramientas de sesión ──────────────────────────────────────────────────
   Las tres tarjetas de la ficha y el editor que abren. */
.herr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;}
/* La tarjeta en sí está definida arriba, junto a los accesos de Inicio: son la misma pieza. */
/* Cuántas veces se aplicó: el número es lo que dice que hay con qué comparar. */
.herr-card-veces{
  flex:none;min-width:24px;height:24px;padding:0 7px;border-radius:999px;
  background:var(--track);color:var(--text2);font-size:13px;font-weight:700;display:grid;place-items:center;
}

.herr-fila{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.herr-fila:last-child{border-bottom:none;}

/* El editor es más ancho que los otros popups: la Rueda necesita el gráfico y los ocho
   controles uno al lado del otro, y partidos en dos pantallas no se entiende qué mueve qué. */
.herr-modal{width:100%;max-width:820px;margin:auto;}
.herr-rueda{display:grid;grid-template-columns:1fr;gap:18px;align-items:center;}
@media (min-width:760px){.herr-rueda{grid-template-columns:auto 1fr;}}
.herr-radar{display:flex;justify-content:center;}
.herr-sliders{display:flex;flex-direction:column;gap:11px;}
.herr-slider{display:grid;grid-template-columns:96px 1fr 26px 30px;gap:10px;align-items:center;}
.herr-slider label{font-size:14px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.herr-slider input[type=range]{accent-color:var(--accent);width:100%;height:24px;}
.herr-slider-val{font-size:15px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;}
.herr-slider-delta{font-size:12.5px;font-weight:600;text-align:right;color:var(--text2);font-variant-numeric:tabular-nums;}
@media (max-width:420px){
  .herr-slider{grid-template-columns:80px 1fr 24px 26px;gap:6px;}
  .herr-slider label{font-size:13px;}
}

.herr-campos{display:grid;grid-template-columns:1fr;gap:14px;}
@media (min-width:700px){.herr-campos{grid-template-columns:1fr 1fr;}}

/* ── El informe imprimible ───────────────────────────────────────────────────
   Vive al final del <body>, escondido, y solo existe cuando se manda a imprimir. En pantalla
   nunca se ve: no es una vista previa, es el documento.

   La regla que hace todo el trabajo es `body.printing > *:not(#printRoot){display:none}`: al
   imprimir se apaga la app entera —menú, tarjetas, popups— y queda la hoja sola. */
/* El informe se imprime SIEMPRE en claro, aunque el coach tenga la app en oscuro: los neutros
   se fijan acá y los hereda todo lo de adentro, el SVG del radar incluido. Lo único que sigue
   viniendo del tema es `--accent`, que es justamente lo que hace que el informe sea suyo. */
#printRoot{
  display:none;
  --border:#E4E7EB;--text:#14161A;--text2:#6A717C;--track:#F3F4F7;--card:#FFFFFF;--bg:#FFFFFF;
}

@media print{
  body.printing > *:not(#printRoot){display:none !important;}
  body.printing #printRoot{display:block !important;}
  /* Sin esto, los navegadores tiran los fondos y el informe sale en blanco y negro: el color
     del coach es justamente lo que lo hace suyo. */
  body.printing, body.printing *{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  @page{margin:16mm 14mm;}
  /* El gráfico y cada bloque de texto no se parten entre dos hojas. */
  .pr-radar,.pr-campo,.pr-tabla,.pr-nota{break-inside:avoid;page-break-inside:avoid;}
}

.pr-hoja{max-width:720px;margin:0 auto;color:#14161A;background:#fff;font-size:13px;line-height:1.5;}
.pr-cab{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:2px solid var(--accent);margin-bottom:18px;}
.pr-logo{width:42px;height:42px;border-radius:11px;object-fit:cover;flex:none;}
.pr-logo-txt{background:var(--accent);color:#fff;display:grid;place-items:center;font-size:16px;font-weight:700;}
.pr-coach{margin:0;font-size:15px;font-weight:700;}
.pr-slogan{margin:1px 0 0;font-size:12px;color:#6A717C;}
.pr-fecha{margin:0;font-size:12px;color:#6A717C;white-space:nowrap;}
.pr-titulo{margin:0;font-size:22px;font-weight:700;letter-spacing:-0.3px;}
.pr-cliente{margin:2px 0 18px;font-size:13px;color:#6A717C;}

.pr-rueda{display:flex;gap:22px;align-items:center;flex-wrap:wrap;}
.pr-radar{flex:none;}
.pr-tabla{flex:1;min-width:230px;border-collapse:collapse;font-size:12.5px;}
.pr-tabla th{text-align:left;font-size:11px;color:#6A717C;font-weight:700;padding:5px 6px;border-bottom:1px solid #E4E7EB;white-space:nowrap;}
.pr-tabla td{padding:5px 6px;border-bottom:1px solid #F3F4F7;}
.pr-tabla .pr-num{text-align:right;font-variant-numeric:tabular-nums;width:74px;}
.pr-tabla .pr-antes{color:#6A717C;}
.pr-tabla .pr-total td{border-top:1px solid #E4E7EB;border-bottom:none;font-weight:600;}

.pr-campos{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.pr-campo h2{margin:0 0 4px;font-size:13px;font-weight:700;color:var(--accent);}
.pr-campo p{margin:0;font-size:12.5px;white-space:pre-wrap;overflow-wrap:anywhere;}

.pr-nota{margin-top:18px;padding:12px 14px;background:#F7F8FA;border-radius:8px;}
.pr-nota-label{margin:0 0 3px;font-size:11px;font-weight:700;color:#6A717C;text-transform:uppercase;letter-spacing:.4px;}
.pr-nota p{margin:0;font-size:12.5px;white-space:pre-wrap;}

.pr-pie{margin-top:26px;padding-top:10px;border-top:1px solid #E4E7EB;font-size:10.5px;color:#6A717C;}