/* ============================================================
   Tareas Bahía — sistema de diseño (modo oscuro)
   Grupo Bahía Playa · paleta marca #008F2F / #84C090
   ------------------------------------------------------------
   Capa de TOKENS (única fuente de verdad) + componentes.
   ============================================================ */
:root{
  /* — Color · superficies y texto — */
  --bg:#0C120E;
  --surface:#141C17;
  --surface-2:#1C2620;
  --surface-3:#22302A;
  --border:#2A382F;
  --border-strong:#39493F;
  --ink:#E9F1EB;
  --muted:#92A597;
  --muted-2:#6F8278;
  --overlay:rgba(4,10,7,.66);

  /* — Color · marca — */
  --brand:#008F2F;          /* verde logo: acentos, puntos, foco, activo */
  --brand-mid:#00B23A;      /* tono medio para degradados de marca */
  --brand-bright:#13B244;   /* acento sobre fondo oscuro (texto/iconos) */
  --brand-light:#84C090;    /* verde claro logo */
  --brand-soft:rgba(0,143,47,.16);
  --on-brand:#FFFFFF;       /* texto sobre relleno de marca */

  /* — Color · botón primario (cumple AA con texto blanco) — */
  --btn:#007A28;            /* blanco 5.5:1 ✓ */
  --btn-hover:#006622;      /* más oscuro en hover 7.2:1 ✓ */

  /* — Color · estados/semántica — */
  --alta:#FF6B4A;
  --media:#F2B33A;
  --baja:#84C090;
  --ink-on-prio:#10140F;    /* texto oscuro sobre chips de prioridad */
  --danger:#FF6B5A;
  --danger-border:#52332F;
  --danger-bg-hover:#2A1714;

  /* — Color · chips de fecha — */
  --due-bg:#2E2716;     --due-ink:#E7C878;
  --overdue-bg:#3A1C17; --overdue-ink:#FF967F;

  /* — Color · halos sutiles de prioridad (sombras, fondos suaves) — */
  --alta-soft-5:rgba(255,107,74,.05);  --alta-soft-10:rgba(255,107,74,.10);
  --alta-soft-35:rgba(255,107,74,.35); --alta-soft-40:rgba(255,107,74,.40);
  --alta-soft-50:rgba(255,107,74,.50);
  --media-soft-40:rgba(242,179,58,.40); --media-soft-50:rgba(242,179,58,.50);

  /* — Color · scrims sobre fotos (estado "subiendo") — */
  --scrim-photo:rgba(0,0,0,.45);
  --spinner-track:rgba(255,255,255,.35);

  /* — Color · banner de alerta (por nivel) — */
  --alert-overdue-border:#5C2A22; --alert-overdue-bg-1:#241413;
  --alert-today-border:#4D3D1A;   --alert-today-bg-1:#241E12;
  --alert-urgent-border:#264A2E;  --alert-urgent-bg-1:#142019;

  /* — Color · WhatsApp — */
  --wa:#25D366;
  --wa-ink:#0A1F12;
  --wa-soft:rgba(37,211,102,.18);

  /* — Color · scrims (overlays sobre fondos oscuros / claros) — */
  --scrim-strong:rgba(0,0,0,.92);
  --scrim-soft:rgba(0,0,0,.6);
  --scrim-light-25:rgba(255,255,255,.25);
  --scrim-light-12:rgba(255,255,255,.12);

  /* — Color · degradado de login — */
  --login-1:#0D5A23; --login-2:#08361A; --login-3:#050D08;

  /* — Tipografía — */
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --display:'Outfit',var(--font);
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --fs-2xs:11px; --fs-xs:12px; --fs-sm:13px; --fs-base:14px; --fs-md:15px;
  --fs-lg:17px;  --fs-xl:18px;  --fs-2xl:20px; --fs-3xl:22px; --fs-4xl:24px;

  /* — Espaciado (escala de 2px) — */
  --sp-1:2px; --sp-2:4px; --sp-3:6px; --sp-4:8px; --sp-5:10px; --sp-6:12px;
  --sp-7:14px; --sp-8:16px; --sp-9:18px; --sp-10:20px; --sp-12:24px; --sp-14:28px;

  /* — Radios — */
  --r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:14px; --r-2xl:18px; --r-pill:999px;

  /* — Sombras y foco — */
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.45);
  --shadow-lg:0 24px 70px rgba(0,0,0,.6);
  --shadow-modal:0 28px 80px rgba(0,0,0,.7);
  --ring:0 0 0 3px var(--brand-soft);

  /* — Motion — */
  --t-fast:.12s; --t:.15s;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
.hidden{display:none !important}
::placeholder{color:var(--muted-2)}

/* foco visible por teclado (no intrusivo con ratón) */
:focus-visible{outline:2px solid var(--brand-bright);outline-offset:2px}
.btn:focus-visible,.icon-btn:focus-visible,.user-btn:focus-visible,.mic-btn:focus-visible,
.company-item:focus-visible,.pop-item:focus-visible,.tab:focus-visible,.check:focus-visible{
  outline:2px solid var(--brand-bright);outline-offset:2px}

/* respeta la preferencia de menos movimiento */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ---------- botones / campos ---------- */
.btn{font-family:var(--font);font-size:var(--fs-base);font-weight:var(--fw-semibold);border:1px solid transparent;
  border-radius:var(--r-md);padding:var(--sp-5) var(--sp-8);cursor:pointer;transition:background var(--t),color var(--t);
  display:inline-flex;align-items:center;gap:var(--sp-3);white-space:nowrap}
.btn-primary{background:var(--btn);color:var(--on-brand)}
.btn-primary:hover{background:var(--btn-hover)}
.btn-ghost{background:transparent;color:var(--muted);border-color:var(--border)}
.btn-ghost:hover{background:var(--surface-2);color:var(--ink)}
.btn-danger{background:transparent;color:var(--danger);border-color:var(--danger-border)}
.btn-danger:hover{background:var(--danger-bg-hover)}
.btn-block{width:100%;justify-content:center;padding:var(--sp-6)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none}
.icon-btn{background:transparent;border:none;cursor:pointer;font-size:var(--fs-xl);color:var(--muted);
  width:36px;height:36px;border-radius:var(--r-md);line-height:1;transition:background var(--t),color var(--t)}
.icon-btn:hover{background:var(--surface-2);color:var(--ink)}

.field{display:flex;flex-direction:column;gap:var(--sp-3);margin-bottom:var(--sp-7)}
.field span{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--muted)}
input,select,textarea,.search{font-family:var(--font);font-size:var(--fs-base);color:var(--ink);
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-5) var(--sp-6);
  outline:none;transition:border-color var(--t),box-shadow var(--t)}
input:focus,select:focus,textarea:focus,.search:focus{border-color:var(--brand-bright);box-shadow:var(--ring)}
textarea{resize:vertical}
select option{background:var(--surface-2);color:var(--ink)}
input[type=date],input[type=time]{color-scheme:dark}
input[type=color]{padding:var(--sp-1);cursor:pointer;background:var(--surface-2)}
.form-error{color:var(--danger);font-size:var(--fs-sm);min-height:18px;margin:var(--sp-1) 0}
.form-ok{color:var(--brand-light);font-size:var(--fs-sm);min-height:18px;margin:var(--sp-1) 0}

/* ---------- login ---------- */
.login{min-height:100dvh;display:grid;place-items:center;padding:var(--sp-12);
  background:radial-gradient(130% 90% at 50% -10%, var(--login-1) 0%, var(--login-2) 50%, var(--login-3) 100%)}
.login-card{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-2xl);padding:var(--sp-14);box-shadow:var(--shadow-lg)}
.brand{display:flex;align-items:center;gap:var(--sp-7);margin-bottom:var(--sp-12)}
.brand-mark{height:52px;width:auto;flex:none;display:block}
.brand-mark.sm{height:30px}
.brand h1{font-family:var(--display);font-size:var(--fs-3xl);margin:0;letter-spacing:-.01em}
.brand p{margin:var(--sp-1) 0 0;color:var(--muted);font-size:var(--fs-sm)}
.remember{display:flex;align-items:center;gap:var(--sp-4);margin:0 0 var(--sp-7);cursor:pointer;color:var(--ink);font-size:var(--fs-sm)}
.remember input{width:18px;height:18px;accent-color:var(--brand);cursor:pointer;flex:none}
.remember:focus-within{outline:2px solid var(--brand-bright);outline-offset:4px;border-radius:var(--r-sm)}
.remember span{user-select:none}

/* ---------- topbar ---------- */
.app{min-height:100dvh;display:flex;flex-direction:column}
.topbar{min-height:60px;height:calc(60px + env(safe-area-inset-top, 0px));padding:env(safe-area-inset-top, 0px) var(--sp-9) 0;
  display:flex;align-items:center;justify-content:space-between;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:30}
.topbar-left{display:flex;align-items:center;gap:var(--sp-6)}
.topbar-title{font-family:var(--display);font-size:var(--fs-lg);letter-spacing:-.01em}
.topbar-right{display:flex;align-items:center;gap:var(--sp-3)}
.usermenu{position:relative}
.user-btn{width:36px;height:36px;border-radius:var(--r-pill);border:none;cursor:pointer;color:var(--on-brand);
  font-weight:var(--fw-bold);font-size:var(--fs-base);background:linear-gradient(135deg,var(--brand),var(--brand-light))}
.popover{position:absolute;right:0;top:46px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow);min-width:230px;padding:var(--sp-4);z-index:40}
.pop-name{font-weight:var(--fw-semibold);font-size:var(--fs-base);padding:var(--sp-3) var(--sp-5) var(--sp-4);margin:0;border-bottom:1px solid var(--border)}
.pop-item{display:block;width:100%;text-align:left;background:none;border:none;padding:var(--sp-5);border-radius:var(--r-sm);
  font-size:var(--fs-base);color:var(--ink);cursor:pointer;font-family:var(--font)}
.pop-item:hover{background:var(--surface-2)}
.pop-item .mini{display:block;font-size:var(--fs-2xs);color:var(--muted)}

/* ---------- layout ---------- */
.layout{flex:1;display:flex;align-items:flex-start;max-width:1200px;width:100%;margin:0 auto}
.sidebar{width:248px;flex:none;padding:var(--sp-10) var(--sp-7);position:sticky;top:60px}
.side-label{font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 var(--sp-4) var(--sp-5)}
.company-list{display:flex;flex-direction:column;gap:var(--sp-2)}
.company-item{display:flex;align-items:center;gap:var(--sp-5);padding:var(--sp-5);border-radius:var(--r-md);cursor:pointer;border:none;
  background:transparent;width:100%;text-align:left;font-family:var(--font);font-size:var(--fs-base);color:var(--ink);transition:background var(--t-fast)}
.company-item:hover{background:var(--surface)}
.company-item.active{background:var(--surface);box-shadow:var(--shadow);font-weight:var(--fw-semibold)}
.dot{width:10px;height:10px;border-radius:var(--r-pill);flex:none}
.company-item .cname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.count{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--muted);background:var(--surface-2);border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-4);min-width:24px;text-align:center}
.company-item.active .count{background:var(--btn);color:var(--on-brand)}

.content{flex:1;min-width:0;padding:var(--sp-10) var(--sp-9) 70px}

/* ---------- captura rápida (voz/texto) ---------- */
.quickadd{display:flex;gap:var(--sp-4);align-items:center;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-7);margin-bottom:var(--sp-4);box-shadow:var(--shadow)}
.quickadd input{flex:1;border:none;background:transparent;padding:var(--sp-3) 0;font-size:var(--fs-md)}
.quickadd input:focus{box-shadow:none}
.mic-btn{width:42px;height:42px;border-radius:var(--r-lg);border:none;cursor:pointer;flex:none;font-size:var(--fs-xl);color:var(--on-brand);
  background:linear-gradient(135deg,var(--brand),var(--brand-light));display:grid;place-items:center}
.mic-btn.listening{animation:pulse 1.1s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--brand-soft)}70%{box-shadow:0 0 0 12px rgba(0,143,47,0)}100%{box-shadow:0 0 0 0 rgba(0,143,47,0)}}
.qa-hint{font-size:var(--fs-xs);color:var(--muted-2);margin:0 var(--sp-2) var(--sp-8);padding-left:var(--sp-1)}

.toolbar{display:flex;gap:var(--sp-5);flex-wrap:wrap;margin-bottom:var(--sp-8)}
.search{flex:1;min-width:160px}
.context-title{font-family:var(--display);font-size:var(--fs-2xl);margin:var(--sp-2) var(--sp-1) var(--sp-7);letter-spacing:-.01em}

/* ---------- tarjetas ---------- */
.task-list{display:flex;flex-direction:column;gap:var(--sp-5)}
.task{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:var(--sp-7) var(--sp-7) var(--sp-6) var(--sp-8);display:flex;gap:var(--sp-7);align-items:flex-start;cursor:pointer;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);position:relative;overflow:hidden}
.task:hover{border-color:var(--border-strong);box-shadow:var(--shadow)}
.task::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--prio,var(--media))}
.check{width:22px;height:22px;border-radius:var(--r-sm);border:2px solid var(--border);flex:none;margin-top:1px;cursor:pointer;
  display:grid;place-items:center;background:var(--surface-2);transition:border-color var(--t-fast),background var(--t-fast);color:var(--on-brand);font-size:var(--fs-sm);padding:0}
.check:hover{border-color:var(--brand-light)}
.check.done{background:var(--btn);border-color:var(--btn)}
.task-main{flex:1;min-width:0}
.task-title{font-weight:var(--fw-semibold);font-size:var(--fs-md);line-height:1.35;word-break:break-word}
.task.done .task-title{text-decoration:line-through;color:var(--muted)}
.task-notes{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-2);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.task-meta{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-5);align-items:center}
.chip{font-size:var(--fs-xs);font-weight:var(--fw-semibold);border-radius:var(--r-pill);padding:var(--sp-2) var(--sp-4);display:inline-flex;align-items:center;gap:var(--sp-3)}
.chip-company{background:var(--surface-3);color:var(--ink)}
.chip-person{background:var(--brand-soft);color:var(--brand-light)}
.chip-due{background:var(--due-bg);color:var(--due-ink)}
.chip-due.overdue{background:var(--overdue-bg);color:var(--overdue-ink)}
.chip-prio{color:var(--ink-on-prio)}
.prio-alta{background:var(--alta)} .prio-media{background:var(--media)} .prio-baja{background:var(--baja)}
.chip-status{background:transparent;border:1px solid var(--border);color:var(--muted)}
.task-foot{display:flex;flex-wrap:wrap;gap:var(--sp-5);margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--border);
  font-size:var(--fs-2xs);color:var(--muted-2)}
.task-foot b{color:var(--muted);font-weight:var(--fw-semibold)}

.empty{text-align:center;color:var(--muted);padding:50px var(--sp-10);display:flex;flex-direction:column;align-items:center;gap:var(--sp-7)}

/* ---------- modales ---------- */
.modal{position:fixed;inset:0;background:var(--overlay);display:grid;place-items:center;padding:var(--sp-9);z-index:100;backdrop-filter:blur(3px)}
.modal-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2xl);width:100%;max-width:480px;
  box-shadow:var(--shadow-modal);max-height:92dvh;display:flex;flex-direction:column}
.modal-card.wide{max-width:600px}
.modal-card.xl{max-width:1100px}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-9) var(--sp-10) var(--sp-2)}
.modal-head h2{font-family:var(--display);font-size:var(--fs-xl);margin:0}
.modal-body{padding:var(--sp-7) var(--sp-10);overflow:auto}
.modal-foot{display:flex;flex-wrap:wrap;gap:var(--sp-5);align-items:center;padding:var(--sp-7) var(--sp-10) var(--sp-9);border-top:1px solid var(--border)}
.modal-foot .wa-btn{flex:0 0 auto;white-space:nowrap}
.spacer{flex:1}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6)}
.sep{border:none;border-top:1px solid var(--border);margin:var(--sp-9) 0}
.byline{font-size:var(--fs-xs);color:var(--muted-2);margin:calc(-1 * var(--sp-1)) 0 var(--sp-6);display:flex;flex-wrap:wrap;gap:var(--sp-6)}
.lock-note{color:var(--media);font-weight:var(--fw-semibold);flex-basis:100%;margin-top:var(--sp-1)}
/* Campos desactivados (cuando no eres el creador): se ven claramente "solo lectura" */
.field input:disabled, .field select:disabled, .field textarea:disabled,
input:disabled, select:disabled, textarea:disabled{opacity:.55;cursor:not-allowed;background:var(--surface-2)}
.btn:disabled{opacity:.5;cursor:not-allowed}
#modal-task.readonly .btn-photo{display:none}
.byline b{color:var(--muted);font-weight:var(--fw-semibold)}

/* En escritorio: el modal de TAREA se divide en 2 columnas
   (formulario a la izquierda, respuestas a la derecha) cuando hay sitio. */
@media(min-width:980px){
  #modal-task .modal-card{max-height:88vh}
  #modal-admin .modal-card{max-width:760px}
  #modal-task .modal-body{display:grid;grid-template-columns:minmax(420px, 1.1fr) minmax(380px, 1fr);gap:var(--sp-10);align-items:start}
  #modal-task .modal-body > .field,
  #modal-task .modal-body > .grid-2,
  #modal-task .modal-body > .byline,
  #modal-task .modal-body > .form-error{grid-column:1}
  #modal-task #replies-block{grid-column:2;grid-row:1 / span 99;margin-top:0;border-left:1px solid var(--border);padding-left:var(--sp-10);align-self:stretch}
  #modal-task #replies-block .sep{display:none}
  #modal-task #replies-block .field-label{font-size:var(--fs-base);margin-bottom:var(--sp-5)}
  #modal-task .replies{max-height:46vh;overflow:auto;padding-right:var(--sp-2)}
}

/* admin */
.tabs{display:flex;gap:var(--sp-3);padding:var(--sp-3) var(--sp-10) 0}
.tab{background:none;border:none;font-family:var(--font);font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--muted);
  padding:var(--sp-4) var(--sp-6);border-radius:var(--r-md) var(--r-md) 0 0;cursor:pointer;border-bottom:2px solid transparent}
.tab.active{color:var(--brand-light);border-bottom-color:var(--brand)}
.admin-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-5);padding:var(--sp-5) 0;border-bottom:1px solid var(--border)}
.admin-row .grow{flex:1 1 200px;min-width:0}
.admin-row input[type=text]{padding:var(--sp-4) var(--sp-5);font-size:var(--fs-sm)}
.admin-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:flex-end;flex:1 1 auto}
.admin-actions .btn{flex:0 0 auto;white-space:nowrap;padding:var(--sp-3) var(--sp-5);font-size:var(--fs-sm);min-height:38px}
.color-swatch{width:42px;height:34px;padding:var(--sp-1);cursor:pointer;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);flex:none}
.badge{font-size:var(--fs-2xs);font-weight:var(--fw-bold);padding:var(--sp-1) var(--sp-4);border-radius:var(--r-sm);background:var(--surface-3);color:var(--muted)}
.badge.admin{background:var(--brand-soft);color:var(--brand-light)}

.toast{position:fixed;bottom:var(--sp-10);left:50%;transform:translateX(-50%);background:var(--surface-3);color:var(--ink);
  border:1px solid var(--border);padding:var(--sp-6) var(--sp-9);border-radius:var(--r-lg);font-size:var(--fs-base);z-index:200;box-shadow:var(--shadow)}

/* ---------- pancarta de alerta al abrir ---------- */
.alert-banner{display:flex;align-items:center;gap:var(--sp-5);padding:var(--sp-6) var(--sp-7);
  border-radius:var(--r-lg);border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow);
  margin-bottom:var(--sp-6);cursor:pointer;transition:transform var(--t-fast),border-color var(--t-fast)}
.alert-banner:hover{border-color:var(--border-strong);transform:translateY(-1px)}
.alert-banner.lvl-overdue{border-color:var(--alert-overdue-border);background:linear-gradient(180deg,var(--alert-overdue-bg-1), var(--surface))}
.alert-banner.lvl-today{border-color:var(--alert-today-border);background:linear-gradient(180deg,var(--alert-today-bg-1), var(--surface))}
.alert-banner.lvl-urgent{border-color:var(--alert-urgent-border);background:linear-gradient(180deg,var(--alert-urgent-bg-1), var(--surface))}
.alert-icon{font-size:var(--fs-4xl);line-height:1;flex:none}
.alert-text{flex:1;min-width:0}
.alert-title{font-weight:var(--fw-bold);font-size:var(--fs-md);color:var(--ink);line-height:1.25}
.alert-sub{font-size:var(--fs-xs);color:var(--muted);margin-top:2px;display:flex;flex-wrap:wrap;gap:var(--sp-4)}
.alert-sub b{font-weight:var(--fw-semibold)}
.alert-sub .pill-overdue{color:var(--overdue-ink)}
.alert-sub .pill-today{color:var(--due-ink)}
.alert-sub .pill-urgent{color:var(--brand-light)}
.alert-banner .icon-btn{flex:none;color:var(--muted)}

/* ---------- banner de alertas (no es pop-up, es parte de la página) ---------- */
.alerts{margin:0 0 var(--sp-7) 0}
.alerts-inner{display:flex;align-items:center;gap:var(--sp-5);
  background:linear-gradient(180deg, var(--alta-soft-10), var(--alta-soft-5));
  border:1px solid var(--alta-soft-35);border-left:4px solid var(--alta);
  border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-7)}
.alerts-icon{font-size:var(--fs-xl);flex:none}
.alerts-text{flex:1;min-width:0;font-size:var(--fs-base);color:var(--ink);line-height:1.4}
.alerts-text b{font-weight:var(--fw-semibold);color:var(--alta)}
.alerts-text .a-sep{color:var(--muted-2);margin:0 var(--sp-3)}
.alerts-actions{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.alerts .a-pill{background:transparent;border:1px solid var(--border);color:var(--ink);
  padding:var(--sp-2) var(--sp-5);border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:var(--fw-semibold);cursor:pointer}
.alerts .a-pill:hover{background:var(--surface-2)}
.alerts .a-pill.danger{border-color:var(--alta-soft-50);color:var(--alta)}
.alerts .a-pill.warn{border-color:var(--media-soft-50);color:var(--media)}

/* tarjetas que requieren atención (sin pop-up, solo realce visual) */
.task.overdue{border-color:var(--alta-soft-40);background:linear-gradient(180deg, var(--alta-soft-5), transparent)}
.task.overdue::before{background:var(--alta);width:5px}
.task.today{border-color:var(--media-soft-40)}
.task.today::before{background:var(--media);width:5px}
.task.unread::after{content:"";position:absolute;top:14px;right:14px;width:9px;height:9px;border-radius:50%;background:var(--brand-bright);box-shadow:0 0 0 3px rgba(19,178,68,.18)}
.field-label{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--muted);display:block;margin-bottom:var(--sp-3)}
.btn-photo{align-self:flex-start}
.files-grid{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.files-grid:empty{display:none}
.att-item{position:relative}
/* imágenes: miniatura cuadrada */
.att-img{width:76px;height:76px;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--border);background:var(--surface-2);flex:none}
.att-img img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
/* archivos: ficha con icono, nombre y tamaño */
.att-file{flex:none;max-width:230px}
.att-link{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-8) var(--sp-3) var(--sp-3);
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);text-decoration:none;color:var(--ink)}
.att-link:hover{border-color:var(--brand-light);background:var(--surface-3)}
.att-ico{font-size:20px;line-height:1;flex:none}
.att-info{display:flex;flex-direction:column;min-width:0}
.att-name{font-size:var(--fs-xs);font-weight:var(--fw-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.att-size{font-size:var(--fs-2xs);color:var(--muted-2)}
.att-del{position:absolute;top:2px;right:2px;width:22px;height:22px;border:none;border-radius:var(--r-pill);
  background:var(--scrim-soft);color:#fff;font-size:var(--fs-sm);line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.att-del:hover{background:rgba(0,0,0,.85)}
.att-item.uploading{opacity:.65}
.att-item.uploading::before{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;
  border:2px solid var(--spinner-track);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;z-index:2}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- respuestas ---------- */
.replies-block{margin-top:var(--sp-2)}
.replies{display:flex;flex-direction:column;gap:var(--sp-4);margin-bottom:var(--sp-5)}
.replies:empty::after{content:"Sé el primero en responder.";color:var(--muted-2);font-size:var(--fs-sm)}
.reply{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-5)}
.reply-head{display:flex;gap:var(--sp-3);align-items:baseline;margin-bottom:var(--sp-2)}
.reply-author{font-weight:var(--fw-semibold);font-size:var(--fs-sm)}
.reply-time{font-size:var(--fs-2xs);color:var(--muted-2)}
.reply-body{font-size:var(--fs-sm);color:var(--ink);line-height:1.4;white-space:pre-wrap;word-break:break-word}
.reply .files-grid{margin-top:var(--sp-3)}
.reply-composer{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-4)}
.reply-composer textarea{background:var(--surface);border-color:var(--border)}
.reply-actions{display:flex;align-items:center;gap:var(--sp-3)}

/* indicadores en la tarjeta */
.task-badges{display:inline-flex;gap:var(--sp-3);align-items:center;color:var(--muted-2);font-size:var(--fs-xs);font-weight:var(--fw-semibold)}
.task-badges span{display:inline-flex;align-items:center;gap:2px}

/* ---------- visor de imágenes ---------- */
.lightbox{position:fixed;inset:0;background:var(--scrim-strong);display:flex;align-items:center;justify-content:center;z-index:300;padding:var(--sp-6)}
.lightbox img{max-width:100%;max-height:100%;border-radius:var(--r-md);object-fit:contain}
.lightbox-close{position:absolute;top:calc(var(--sp-6) + env(safe-area-inset-top,0px));right:var(--sp-6);color:#fff;background:var(--scrim-light-12);font-size:var(--fs-xl)}
.lightbox-close:hover{background:var(--scrim-light-25);color:#fff}

/* ---------- diario personal ---------- */
/* selector de vista Tareas / Diario (arriba) */
.viewswitch{display:flex;gap:2px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-pill);padding:3px}
.vs-btn{appearance:none;border:none;background:transparent;color:var(--muted);font-family:inherit;font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);padding:var(--sp-3) var(--sp-7);border-radius:var(--r-pill);cursor:pointer;white-space:nowrap;transition:background var(--t),color var(--t)}
.vs-btn:hover{color:var(--ink)}
.vs-btn.active{background:var(--brand);color:#fff}
/* vista del diario como pantalla principal */
.view-diary{flex:1;width:100%;max-width:1200px;margin:0 auto}
.diary-wrap{max-width:760px;padding:var(--sp-10) var(--sp-9) 70px;margin:0 auto}
.btn-on{background:var(--brand-soft);color:var(--brand-light);border-color:var(--brand)}
.diary-admin-bar{margin-bottom:var(--sp-6)}
.diary-intro{font-size:var(--fs-sm);color:var(--muted);margin:0 0 var(--sp-6);line-height:1.45}
.diary-composer{display:flex;flex-direction:column;gap:var(--sp-4);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-6);margin-bottom:var(--sp-8)}
.diary-composer textarea{width:100%;resize:vertical;min-height:72px}
.diary-composer-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
.diary-hint{font-size:var(--fs-2xs);color:var(--muted-2);flex:1;min-width:160px}
.diary-list{display:flex;flex-direction:column;gap:var(--sp-8)}
.diary-empty{color:var(--muted-2);font-size:var(--fs-sm);padding:var(--sp-7) 0;text-align:center}
.diary-day-head{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--ink);text-transform:capitalize;
  padding-bottom:var(--sp-3);margin-bottom:var(--sp-4);border-bottom:2px solid var(--brand-soft)}
.diary-open{color:var(--brand-light);font-weight:var(--fw-semibold);margin-left:var(--sp-2);font-size:var(--fs-xs)}
.diary-closed{color:var(--muted-2);margin-left:var(--sp-2);font-size:var(--fs-xs)}
.diary-entry{position:relative;display:flex;gap:var(--sp-5);padding:var(--sp-5);background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:var(--sp-3)}
.diary-entry-time{font-size:var(--fs-xs);color:var(--brand-light);font-variant-numeric:tabular-nums;font-weight:var(--fw-semibold);padding-top:1px;flex:none;min-width:46px}
.diary-entry-body{font-size:var(--fs-sm);color:var(--ink);line-height:1.5;white-space:pre-wrap;word-break:break-word;flex:1;padding-right:var(--sp-7)}
.diary-del{position:absolute;top:8px;right:8px;width:24px;height:24px;border:none;border-radius:var(--r-pill);
  background:var(--alta-soft-10);color:var(--alta);font-size:var(--fs-sm);line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.diary-del:hover{background:var(--alta-soft-35)}

/* ---------- registro de actividad ---------- */
.audit-list{display:flex;flex-direction:column;gap:var(--sp-3);max-height:60vh;overflow:auto}
.audit-empty{color:var(--muted-2);font-size:var(--fs-sm);padding:var(--sp-5) 0}
.audit-row{padding:var(--sp-4) var(--sp-5);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);border-left:3px solid var(--brand)}
.audit-row.audit-danger{border-left-color:var(--alta)}
.audit-act{font-weight:var(--fw-semibold);font-size:var(--fs-sm);color:var(--ink)}
.audit-meta{font-size:var(--fs-xs);color:var(--muted)}
.audit-meta b{color:var(--ink-2,var(--ink))}
.audit-when{font-size:var(--fs-2xs);color:var(--muted-2);margin-top:2px}

/* ---------- saludo al entrar ---------- */
.ucomps-list{display:flex;flex-direction:column;gap:var(--sp-3);max-height:55vh;overflow:auto}
.ucomp-row{display:flex;align-items:center;gap:var(--sp-5);padding:var(--sp-5);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast)}
.ucomp-row:hover{border-color:var(--brand);background:var(--surface-3)}
.ucomp-row:focus-within{border-color:var(--brand-bright);box-shadow:var(--ring)}
.ucomp-row input[type=checkbox]{width:20px;height:20px;accent-color:var(--brand);flex:none;cursor:pointer}
.ucomp-row .dot{width:12px;height:12px}
.ucomp-row .name{flex:1;color:var(--ink);font-size:var(--fs-base);font-weight:var(--fw-semibold)}
.sup-tags{font-size:var(--fs-xs);color:var(--muted-2);font-weight:var(--fw-normal);letter-spacing:1px}
.greet-msg{font-size:var(--fs-md);margin:0 0 var(--sp-6);color:var(--ink)}
.greet-msg b{color:var(--brand-light)}
#modal-greet .replies{max-height:50vh;overflow:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.greet-item{cursor:pointer;text-align:left;width:100%;border:1px solid var(--border);transition:border-color var(--t),background var(--t)}
.greet-item:hover{border-color:var(--brand);background:var(--surface-3)}
.greet-item:focus-visible{outline:2px solid var(--brand-bright);outline-offset:2px}
.greet-more{text-align:center;margin-top:var(--sp-3);font-size:var(--fs-xs);color:var(--muted-2)}

/* ---------- animación de modales (entrada/salida) ---------- */
@keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
.modal{animation:overlayIn .12s ease-out}
.modal .modal-card{animation:modalIn .14s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion: reduce){
  .modal,.modal .modal-card{animation:none}
}

/* ---------- banner de instalación PWA ---------- */
.install-banner{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--sp-7) + env(safe-area-inset-bottom,0px));
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-7);
  display:flex;align-items:center;gap:var(--sp-5);box-shadow:var(--shadow-lg);z-index:150;font-size:var(--fs-sm);max-width:calc(100% - var(--sp-9))}
.install-banner:focus-within{border-color:var(--brand-bright);box-shadow:var(--shadow-lg),var(--ring)}
.install-banner .btn{padding:var(--sp-3) var(--sp-6);border-radius:var(--r-pill)}
.install-banner .icon-btn{width:32px;height:32px;font-size:var(--fs-base)}

/* ---------- botón WhatsApp en usuarios ---------- */
.wa-btn{background:var(--wa);color:var(--wa-ink);border:none;border-radius:var(--r-md);padding:var(--sp-3) var(--sp-5);
  font-weight:var(--fw-semibold);font-size:var(--fs-sm);cursor:pointer;display:inline-flex;align-items:center;gap:var(--sp-2);
  transition:filter var(--t)}
.wa-btn:hover{filter:brightness(1.1)}
.wa-btn:focus-visible{outline:2px solid var(--brand-light);outline-offset:2px}
.wa-btn:disabled{background:var(--surface-3);color:var(--muted-2);cursor:not-allowed;opacity:.7}
.admin-row .user-meta{font-size:var(--fs-xs);color:var(--muted-2)}

/* ---------- móvil ---------- */
@media(max-width:760px){
  .layout{flex-direction:column}
  .sidebar{width:100%;position:static;padding:var(--sp-6) var(--sp-6) 0}
  .side-label{display:none}
  .company-list{flex-direction:row;overflow-x:auto;gap:var(--sp-4);padding-bottom:var(--sp-2);-webkit-overflow-scrolling:touch}
  .company-item{flex:none;background:var(--surface);border:1px solid var(--border);width:auto;padding:var(--sp-4) var(--sp-5)}
  .company-item.active{border-color:var(--brand)}
  .company-item .cname{max-width:140px}
  .content{padding:var(--sp-7) var(--sp-6) calc(80px + env(safe-area-inset-bottom, 0px))}

  /* notch: que la barra superior no quede bajo la cámara/estado */
  .topbar{padding-top:env(safe-area-inset-top, 0px);height:calc(60px + env(safe-area-inset-top, 0px));padding-left:var(--sp-5);padding-right:var(--sp-5)}
  .brand-mark{height:46px}
  .brand-mark.sm{height:28px}
  .topbar-title{display:none}                 /* en móvil deja sitio al selector */
  .vs-btn{padding:var(--sp-3) var(--sp-5)}
  .diary-wrap{padding:var(--sp-8) var(--sp-6) 70px}

  /* evita el zoom automático de iOS al enfocar un campo (necesita ≥16px) */
  /* 16px (no tokenizado a propósito: iPhone hace zoom si baja de 16) */
  input,select,textarea,.search,.quickadd input{font-size:16px}

  /* zonas táctiles más cómodas (mín. 44px, guía de Apple) */
  .btn{min-height:44px}
  .toolbar .btn{flex:1}
  .icon-btn,.user-btn{width:42px;height:42px}
  .mic-btn{width:46px;height:46px}
  .check{width:26px;height:26px}
  .pop-item{padding:var(--sp-6) var(--sp-5)}

  /* tarjetas y títulos un punto más compactos */
  .context-title{font-size:var(--fs-xl);margin-top:0}
  .quickadd{padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-6)}

  /* modales a pantalla casi completa y con respeto del área segura */
  .modal{padding:var(--sp-4);align-items:flex-end}
  .modal-card{max-width:100%;max-height:94dvh;border-bottom-left-radius:0;border-bottom-right-radius:0}
  .modal-foot{padding-bottom:calc(var(--sp-9) + env(safe-area-inset-bottom, 0px));flex-wrap:wrap}
  .modal-foot .wa-btn{order:5;width:100%;justify-content:center;margin-top:var(--sp-3)}
  .grid-2{grid-template-columns:1fr}
  .toast{bottom:calc(var(--sp-10) + env(safe-area-inset-bottom, 0px));width:calc(100% - var(--sp-10));text-align:center}

  /* Ajustes (Administración): que los botones de cada fila no se salgan;
     se reordenan en varias líneas en pantallas estrechas. */
  .tabs{padding-left:var(--sp-6);padding-right:var(--sp-6)}
  .modal-body{padding-left:var(--sp-6);padding-right:var(--sp-6)}
  .modal-head{padding-left:var(--sp-6);padding-right:var(--sp-6)}
  .modal-foot{padding-left:var(--sp-6);padding-right:var(--sp-6)}
  .admin-row{flex-wrap:wrap;gap:var(--sp-4)}
  .admin-row div.grow{flex-basis:100%;margin-bottom:var(--sp-1)}     /* nombre del usuario en su propia línea */
  .admin-row input.grow{flex:1 1 auto;min-width:50%}                  /* nombre de empresa junto al color */
  .admin-actions{flex-basis:100%;justify-content:flex-start;gap:var(--sp-3)}
  .admin-actions .btn{flex:1 1 calc(50% - var(--sp-3));min-height:40px;padding:var(--sp-4) var(--sp-3);font-size:var(--fs-sm)}
}

/* en pantallas muy estrechas, el menú de usuario no se sale */
@media(max-width:380px){
  .popover{position:fixed;left:var(--sp-4);right:var(--sp-4);top:auto;min-width:0}
}