/* ============================================================
   PaiPai App — estilos

   Identidad según el manual de marca de PAIPAI: verdes petróleo y
   esmeralda, degradado lima y tipografía geométrica (Montserrat).
   ============================================================ */

/* Montserrat vive dentro de la app (public/fuentes/, licencia OFL):
   funciona sin conexión y no hace falta abrirle la política de seguridad
   a los servidores de Google. Es variable: un solo archivo trae todos los
   gruesos, del 100 al 900. */
@font-face{
  font-family:"Montserrat";
  src:url("/fuentes/montserrat.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ============================================================
   PALETA

   Todo color vive acá. El tema oscuro solo redefine estas variables,
   así que al agregar algo nuevo hay que usar una variable, nunca un
   color escrito a mano: de lo contrario se ve bien en claro y se rompe
   en oscuro.
   ============================================================ */
:root{
  --bg:#eef3e8;
  --panel:#ffffff;        /* superficie principal (tarjetas, listas) */
  --sup:#f6f9f2;          /* superficie sutil: hover, filas alternas */
  --sup-2:#f1f6ea;        /* encabezados de grupo, barras internas */
  --ink:#0f2422;
  --ink-soft:#4c5f5c;
  --ink-faint:#5f716e;
  --line:#dde6d5;
  --linea-suave:#eef3e8;  /* separadores entre filas */
  --topbar:#0d4a45;
  --topbar-ink:#eef6e4;
  --topbar-faint:#a9c9a0;

  /* Identidad PAIPAI (manual de marca): verde petróleo #0D4A45,
     esmeralda #2D7A75 y el degradado lima #C5E86C → #73B55B */
  --brand:#0d4a45;        /* fondo con texto blanco encima */
  --brand-texto:#2d7a75;  /* marca usada como color de texto (5:1 sobre blanco) */
  --brand-dark:#0d4a45;   /* texto sobre brand-soft */
  --brand-soft:#e8f4d6;
  --brand-borde:#c3e095;

  /* La barra de la app lleva el degradado lima de las piezas de la marca.
     Sobre él, el texto va en petróleo: 5,5:1 en el extremo más oscuro. */
  --barra-fondo:linear-gradient(115deg,#c5e86c 0%,#9ccf66 100%);
  --barra-tinta:#0d4a45;
  --barra-tinta-suave:#1e5750;
  --barra-velo:rgba(13,74,69,.10);
  --barra-velo-2:rgba(13,74,69,.18);

  --green:#16a34a;  --green-soft:#e7f6ec;
  --red:#dc2626;    --red-soft:#fdeaea;   --red-borde:#f3c9c9;
  --amber:#b45309;  --amber-soft:#fdf3e3;
  --blue:#1d4ed8;   --blue-soft:#e8eefe;
  --violet:#6d28d9; --violet-soft:#f0eafe;
  --slate:#475569;  --slate-soft:#eef1f6;

  --nota-bg:#fffbeb;      /* anotaciones */
  --nota-borde:#fde68a;
  --destello:#f2f9e0;     /* resaltado momentáneo */
  --express-bg:#fef3c7;   --express-ink:#92400e;

  --shadow-sm:0 1px 2px rgba(13,40,36,.08);
  --shadow-md:0 6px 18px rgba(13,40,36,.12);
  --radius:12px;
  --det-w:340px;   /* ancho del panel de ficha en modo escritorio */
  --c1:#0ea5e9;
  --c2:#ec4899;
}

/* ── Tema oscuro ──────────────────────────────────────────────
   Se aplica de dos formas: cuando el usuario lo elige a mano
   (data-tema="oscuro") y cuando eligió "según el sistema" y el
   sistema está en oscuro (data-tema="sistema" + prefers-color-scheme). */
:root[data-tema="oscuro"],
:root[data-tema="sistema"] {
  color-scheme: dark;
  --bg:#0b1312;
  --panel:#121c1b;
  --sup:#182423;
  --sup-2:#1b2827;
  --ink:#e7f0e4;
  --ink-soft:#a7bab4;
  --ink-faint:#94aaa4;
  --line:#263533;
  --linea-suave:#1e2b2a;
  --topbar:#081715;

  --brand:#1d5f58;
  --brand-texto:#b9e46e;
  --brand-dark:#c5e86c;
  --brand-soft:#1c3024;
  --brand-borde:#2f5236;

  --barra-fondo:linear-gradient(115deg,#0d4a45 0%,#17605a 100%);
  --barra-tinta:#eaf7d2;
  --barra-tinta-suave:#b8d7a6;
  --barra-velo:rgba(197,232,108,.12);
  --barra-velo-2:rgba(197,232,108,.20);

  --green:#4ade80;  --green-soft:#12301f;
  --red:#f87171;    --red-soft:#3a1d1d;   --red-borde:#5c2b2b;
  --amber:#fbbf24;  --amber-soft:#332711;
  --blue:#60a5fa;   --blue-soft:#16243d;
  --violet:#a78bfa; --violet-soft:#251a3d;
  --slate:#94a3b8;  --slate-soft:#232b36;

  --nota-bg:#2b2413;
  --nota-borde:#5c4a1a;
  --destello:#233a1f;
  --express-bg:#3b2f10; --express-ink:#fcd34d;

  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 6px 18px rgba(0,0,0,.5);
}

/* Con "según el sistema", el tema claro se restituye si el sistema
   está en claro. Sin esto, "sistema" se vería siempre oscuro. */
@media (prefers-color-scheme: light){
  :root[data-tema="sistema"]{
    color-scheme: light;
    --bg:#eef3e8;
    --panel:#ffffff;        /* superficie principal (tarjetas, listas) */
    --sup:#f6f9f2;          /* superficie sutil: hover, filas alternas */
    --sup-2:#f1f6ea;        /* encabezados de grupo, barras internas */
    --ink:#0f2422;
    --ink-soft:#4c5f5c;
    --ink-faint:#5f716e;
    --line:#dde6d5;
    --linea-suave:#eef3e8;  /* separadores entre filas */
    --topbar:#0d4a45;
    --topbar-ink:#eef6e4;
    --topbar-faint:#a9c9a0;
  
    /* Identidad PAIPAI (manual de marca): verde petróleo #0D4A45,
       esmeralda #2D7A75 y el degradado lima #C5E86C → #73B55B */
    --brand:#0d4a45;        /* fondo con texto blanco encima */
    --brand-texto:#2d7a75;  /* marca usada como color de texto (5:1 sobre blanco) */
    --brand-dark:#0d4a45;   /* texto sobre brand-soft */
    --brand-soft:#e8f4d6;
    --brand-borde:#c3e095;
  
    /* La barra de la app lleva el degradado lima de las piezas de la marca.
       Sobre él, el texto va en petróleo: 5,5:1 en el extremo más oscuro. */
    --barra-fondo:linear-gradient(115deg,#c5e86c 0%,#9ccf66 100%);
    --barra-tinta:#0d4a45;
    --barra-tinta-suave:#1e5750;
    --barra-velo:rgba(13,74,69,.10);
    --barra-velo-2:rgba(13,74,69,.18);
  
    --green:#16a34a;  --green-soft:#e7f6ec;
    --red:#dc2626;    --red-soft:#fdeaea;   --red-borde:#f3c9c9;
    --amber:#b45309;  --amber-soft:#fdf3e3;
    --blue:#1d4ed8;   --blue-soft:#e8eefe;
    --violet:#6d28d9; --violet-soft:#f0eafe;
    --slate:#475569;  --slate-soft:#eef1f6;
  
    --nota-bg:#fffbeb;      /* anotaciones */
    --nota-borde:#fde68a;
    --destello:#f2f9e0;     /* resaltado momentáneo */
    --express-bg:#fef3c7;   --express-ink:#92400e;
  
    --shadow-sm:0 1px 2px rgba(13,40,36,.08);
    --shadow-md:0 6px 18px rgba(13,40,36,.12);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  display:flex;flex-direction:column;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------------- Topbar del navegador ---------------- */
.topbar{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 20px;background:var(--topbar);color:#fff;
}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:38px;height:38px;border-radius:10px;display:block}
.brand h1{margin:0;font-size:15px;font-weight:800;letter-spacing:.2px}
.brand p{margin:2px 0 0;font-size:11.5px;color:var(--topbar-faint)}
.topbar-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.btn{
  font:inherit;font-size:12.5px;font-weight:550;
  border-radius:999px;border:1px solid transparent;padding:8px 13px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  transition:transform .08s ease, background .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:rgba(255,255,255,.07);color:var(--topbar-ink);border-color:rgba(255,255,255,.14)}
.btn-ghost:hover{background:rgba(255,255,255,.14)}
.ico{font-size:13px;line-height:1}

/* ---------------- Layout ---------------- */
.split{
  flex:1 1 auto;display:grid;
  grid-template-columns:1fr;
  gap:14px;padding:14px;min-height:0;
}
/* En pantallas anchas la app se despliega en columnas; si la ventana
   es más angosta que el mínimo, el escenario se desliza en lugar de
   aplastar las columnas. */
.stage{min-width:0;min-height:0;display:flex;overflow:auto}

.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
  min-height:0;min-width:0;overflow:hidden;
}
.panel-head{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;border-bottom:1px solid var(--line);background:var(--sup);
}
.panel-head h2{margin:0;font-size:13.5px;font-weight:650;display:flex;align-items:center;gap:7px}
.panel-sub{font-size:11px;color:var(--ink-faint)}

/* ============================================================
   EL CONTENEDOR DE LA APP

   Ya no hay marco de teléfono: eso era del mock-up, para poder mostrar
   las dos vistas en una laptop. Acá la app ocupa el espacio que tenga,
   y el diseño lo decide el ancho de la ventana.
   ============================================================ */
.device{position:relative;width:100%;height:100%}
.device .app{border-radius:var(--radius);box-shadow:var(--shadow-sm);border:1px solid var(--line)}

.app{
  width:100%;height:100%;background:var(--panel);overflow:hidden;
  display:flex;flex-direction:column;position:relative;
}

/* ---------------- Barra de la app ---------------- */
.app-bar{
  flex:0 0 auto;background:var(--barra-fondo);color:var(--barra-tinta);
  padding:14px 16px 12px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
}

.app-id{display:flex;align-items:center;gap:10px;min-width:0}
.app-icon{
  width:34px;height:34px;border-radius:9px;flex:0 0 auto;display:block;
  box-shadow:0 0 0 1.5px var(--barra-velo-2);
}
.app-id strong{display:block;font-size:16px;font-weight:800;line-height:1.2}
.app-id small{display:block;font-size:10.5px;font-weight:600;color:var(--barra-tinta-suave);margin-top:2px}
.sync-btn{
  font:inherit;font-size:17px;line-height:1;color:var(--barra-tinta);
  background:var(--barra-velo);border:0;border-radius:8px;
  width:32px;height:32px;cursor:pointer;flex:0 0 auto;
}
.sync-btn:hover{background:var(--barra-velo-2)}
.sync-btn.spin{animation:spin .8s ease}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------------- Filtros ---------------- */
.filters{
  flex:0 0 auto;display:flex;gap:6px;padding:9px 12px;
  border-bottom:1px solid var(--line);background:var(--sup);overflow-x:auto;
}
.chip{
  font:inherit;font-size:11.5px;font-weight:600;white-space:nowrap;
  background:var(--panel);border:1px solid var(--line);color:var(--ink-soft);
  padding:5px 11px;border-radius:20px;cursor:pointer;
}
.chip:hover{border-color:var(--ink-faint)}
.chip.is-active{background:var(--brand);border-color:var(--brand);color:#fff}

/* ---------------- Lista ---------------- */
.app-body{flex:1 1 auto;overflow-y:auto;min-height:0;background:var(--panel)}

.group{border-bottom:1px solid var(--linea-suave)}
.group-head{
  position:sticky;top:0;z-index:2;
  display:flex;align-items:center;gap:9px;
  padding:8px 14px;background:var(--sup-2);
  border-bottom:1px solid var(--line);
  font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--ink-soft);cursor:pointer;user-select:none;
}
.group-head .swatch{width:8px;height:8px;border-radius:50%}
.group-head .n{
  margin-left:auto;background:var(--line);color:var(--ink-soft);
  border-radius:20px;padding:1px 8px;font-size:10.5px;letter-spacing:0;
}
.group-head .chev{font-size:9px;color:var(--ink-faint);transition:transform .15s ease}
.group-head.closed .chev{transform:rotate(-90deg)}
.group-body.closed{display:none}

.row{
  display:flex;align-items:center;gap:11px;
  padding:11px 14px;border-bottom:1px solid var(--linea-suave);cursor:pointer;
  background:var(--panel);transition:background .12s ease;
}
.row:hover{background:var(--sup)}
.row.is-sel{background:var(--brand-soft)}
.row-ico{
  width:36px;height:36px;border-radius:9px;flex:0 0 auto;
  display:grid;place-items:center;font-size:15px;background:var(--sup-2);
}
.row-main{flex:1 1 auto;min-width:0}
.row-title{font-size:13px;font-weight:600;line-height:1.3;margin-bottom:3px}
.row-sub{font-size:11px;color:var(--ink-faint);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.row-sub .cli{display:inline-flex;align-items:center;gap:4px}
.row-sub .cli i{width:7px;height:7px;border-radius:50%}
.row-go{color:var(--ink-faint);font-size:15px;flex:0 0 auto}

.pill{
  font-size:9.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  padding:2px 7px;border-radius:5px;white-space:nowrap;
}
.p-porhacer {background:var(--slate-soft); color:var(--slate)}
.p-proceso  {background:var(--blue-soft);  color:var(--blue)}
.p-revisar  {background:var(--amber-soft); color:var(--amber)}
.p-cambios  {background:var(--red-soft);   color:var(--red)}
.p-publicar {background:var(--violet-soft);color:var(--violet)}
.p-publicado{background:var(--green-soft); color:var(--green)}
.p-hoy      {background:var(--brand-soft); color:var(--brand-dark)}
.p-re       {background:var(--red-soft);   color:var(--red)}

/* interruptor de "Enviar a producción" */
.switch{
  flex:0 0 auto;width:42px;height:24px;border-radius:20px;border:0;padding:0;
  background:var(--line);cursor:pointer;position:relative;transition:background .18s ease;
}
.switch::after{
  content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:var(--panel);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s ease;
}
.switch.on{background:var(--brand)}
.switch.on::after{transform:translateX(18px)}
.switch:disabled{cursor:default}

.list-empty{padding:26px 18px;text-align:center;color:var(--ink-faint);font-size:12px}
.list-empty span{display:block;font-size:26px;margin-bottom:8px;opacity:.5}

/* ---------------- Detalle ---------------- */
.detail{background:var(--panel);display:flex;flex-direction:column;min-height:0}
.mode-phone .detail{
  position:absolute;inset:0 0 58px 0;z-index:12;
  transform:translateX(100%);transition:transform .22s ease;
  box-shadow:-8px 0 24px rgba(16,26,45,.12);
}
.mode-phone .detail.open{transform:none}
.mode-desk .detail{border-left:1px solid var(--line)}

.detail-bar{
  flex:0 0 auto;background:var(--brand-dark);color:#fff;
  padding:12px 14px;display:flex;align-items:center;gap:10px;
}

.detail-bar .back{
  font:inherit;font-size:18px;line-height:1;background:none;border:0;color:#fff;cursor:pointer;padding:0 2px;
}
.mode-desk .detail-bar .back{display:none}
.detail-bar strong{font-size:13px;font-weight:600}
.detail-body{flex:1 1 auto;overflow-y:auto;padding:14px}

.field{padding:9px 0;border-bottom:1px solid var(--linea-suave)}
.field label{display:block;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-faint);margin-bottom:4px}
.field .val{font-size:13px;font-weight:550;display:flex;align-items:center;gap:7px}
.field .val .dot{width:8px;height:8px;border-radius:50%}

.folder-nombre{
  margin-top:12px;display:flex;align-items:center;gap:7px;
  background:var(--sup-2);border:1px solid var(--line);border-radius:8px;
  padding:9px 10px;font-size:11px;color:var(--ink-soft);
}
.folder-nombre .path{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.actions{
  flex:0 0 auto;border-top:1px solid var(--line);background:var(--sup);
  padding:12px;display:flex;flex-direction:column;gap:8px;
}
.act{
  font:inherit;font-size:13px;font-weight:700;
  border:0;border-radius:999px;padding:11px 16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:filter .15s ease, transform .08s ease;
}
.act:active{transform:translateY(1px)}
.act-primary{background:var(--brand);color:#fff}
.act-primary:hover{filter:brightness(1.08)}
.act-second{background:var(--panel);color:var(--ink-soft);border:1px solid var(--line)}
.act-second:hover{border-color:var(--ink-faint);background:var(--sup)}
.act-danger{background:var(--panel);color:var(--red);border:1px solid var(--red-borde)}
.act-danger:hover{background:var(--red-soft)}
.act-note{font-size:11px;color:var(--ink-faint);text-align:center;padding:2px 0}

.detail-empty{
  flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;color:var(--ink-faint);font-size:12px;text-align:center;padding:24px;
}
.detail-empty span{font-size:30px;opacity:.45}

/* ---------------- Navegación ---------------- */
.app-nav{
  flex:0 0 auto;display:flex;border-top:1px solid var(--line);background:var(--panel);
}
.app-nav button{
  flex:1;font:inherit;font-size:10.5px;font-weight:600;
  background:none;border:0;color:var(--ink-faint);cursor:pointer;
  padding:8px 4px 9px;display:flex;flex-direction:column;align-items:center;gap:3px;
  border-top:2px solid transparent;margin-top:-1px;
}
.app-nav button span{font-size:16px;line-height:1}
.app-nav button.is-active{color:var(--brand-texto);border-top-color:var(--brand-texto)}

/* ---------------- Reacomodo en escritorio ---------------- */
.mode-desk .app{
  display:grid;
  min-width:756px;
  grid-template-columns:176px minmax(240px,1fr) var(--det-w);
  grid-template-rows:auto auto minmax(0,1fr);
  grid-template-areas:
    "nav bar     detail"
    "nav filters detail"
    "nav body    detail";
}
.mode-desk .app-bar{grid-area:bar}
.mode-desk .filters{grid-area:filters}
.mode-desk .app-body{grid-area:body;border-right:1px solid var(--line)}
.mode-desk .detail{grid-area:detail}
.mode-desk .app-nav{
  grid-area:nav;flex-direction:column;border-top:0;border-right:1px solid var(--line);
  background:var(--sup);padding:10px 8px;gap:4px;
}
.mode-desk .app-nav button{
  flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:9px;
  font-size:12.5px;padding:9px 11px;border-radius:8px;border-top:0;margin-top:0;text-align:left;
}
.mode-desk .app-nav button span{font-size:15px}
.mode-desk .app-nav button.is-active{background:var(--brand-soft);color:var(--brand-dark)}

/* ============================================================
   PANEL DE ARCHIVOS
   ============================================================ */
.drive{flex:1 1 auto;overflow:auto;padding:10px}
.folder{margin-bottom:6px}
.folder-row{
  display:flex;align-items:center;gap:8px;
  padding:7px 8px;border-radius:8px;cursor:pointer;font-size:12.5px;font-weight:550;
}
.folder-row:hover{background:var(--sup)}
.folder-row .chev{font-size:9px;color:var(--ink-faint);width:10px;transition:transform .15s ease}
.folder-row.open .chev{transform:rotate(90deg)}
.folder-row .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.folder-row .n{font-size:10.5px;color:var(--ink-faint);font-weight:600}
.add-file{
  font:inherit;font-size:10px;font-weight:650;
  background:var(--brand-soft);color:var(--brand-dark);
  border:1px solid var(--brand-borde);border-radius:5px;padding:2px 6px;cursor:pointer;
  opacity:0;transition:opacity .12s ease;
}
.folder-row:hover .add-file{opacity:1}
.add-file:hover{background:var(--brand-borde)}
.children{margin-left:16px;padding-left:10px;border-left:1px solid var(--line)}
.children.collapsed{display:none}
.lvl-1 > .folder-row{font-weight:650}
.lvl-2 > .folder-row{font-weight:500;font-size:12px}
.file-row{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:7px;font-size:11.5px;color:var(--ink-soft)}
.file-row:hover{background:var(--sup)}
.file-row .tag{margin-left:auto;font-size:9.5px;font-weight:700;color:var(--green);background:var(--green-soft);padding:1px 6px;border-radius:5px}
.drive-empty{font-size:11px;color:var(--ink-faint);padding:4px 8px;font-style:italic}

.flash{animation:flash 1.6s ease}
@keyframes flash{0%{background:var(--destello)}60%{background:var(--destello)}100%{background:transparent}}


/* ---------------- Avisos ---------------- */
.toast-stack{position:fixed;right:18px;bottom:52px;display:flex;flex-direction:column;gap:8px;z-index:50}
.toast{
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:10px;box-shadow:var(--shadow-md);padding:10px 14px;font-size:12px;max-width:330px;
  animation:slidein .25s ease;
}
.toast strong{display:block;font-size:12.5px;margin-bottom:2px}
.toast.ok{border-left-color:var(--green)}
.toast.warn{border-left-color:var(--red)}
.toast.out{animation:slideout .25s ease forwards}
@keyframes slidein{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
@keyframes slideout{to{opacity:0;transform:translateX(20px)}}

/* ============================================================
   ROLES, ACTIVIDAD, EXPRESS Y ANOTACIONES
   ============================================================ */

/* --- quién está usando la app --- */
.user-box{position:relative;flex:0 0 auto}
.user-chip{
  font:inherit;font-size:11.5px;font-weight:700;color:var(--barra-tinta);
  background:var(--barra-velo);border:0;border-radius:20px;
  padding:4px 9px 4px 4px;cursor:pointer;display:flex;align-items:center;gap:6px;max-width:150px;
}
.user-chip:hover{background:var(--barra-velo-2)}
.user-chip .uname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-chip .chev{font-size:9px;opacity:.8}
.user-menu{
  position:absolute;right:0;top:calc(100% + 7px);z-index:30;width:224px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-md);
  padding:6px;display:none;
}
.user-menu.open{display:block}
.um-head{font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-faint);padding:6px 8px 4px}
.um-item{
  width:100%;font:inherit;font-size:12.5px;font-weight:550;text-align:left;
  background:none;border:0;border-radius:7px;padding:7px 8px;cursor:pointer;
  display:flex;align-items:center;gap:8px;color:var(--ink);
}
.um-item:hover{background:var(--sup)}
.um-item.is-active{background:var(--brand-soft);color:var(--brand-dark)}
.um-item .ok{margin-left:auto;color:var(--brand-texto)}

.avatar{
  width:24px;height:24px;border-radius:50%;flex:0 0 auto;
  display:inline-grid;place-items:center;
  color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.3px;
}
.avatar.sm{width:20px;height:20px;font-size:8.5px}

/* --- responsable --- */
.resp-mini{
  font-size:9.5px;font-weight:800;letter-spacing:.4px;
  background:var(--slate-soft);color:var(--ink-soft);border-radius:5px;padding:2px 6px;white-space:nowrap;
}
.group-head .resp-mini{margin-left:auto;letter-spacing:.4px}
.group-head .n{margin-left:6px}
.row-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:0 0 auto}
.rname{font-size:12px;font-weight:550}
.field .val .rname + .avatar{margin-left:8px}
.files{font-size:10.5px;color:var(--brand-dark);background:var(--brand-soft);border-radius:5px;padding:1px 6px;font-weight:700}
.ok-files{color:var(--green);font-weight:650}
.no-files{color:var(--ink-faint);font-style:italic}
.p-exp{background:var(--express-bg);color:var(--express-ink)}

/* --- botón bloqueado --- */
.act-off{opacity:.5;cursor:not-allowed !important;filter:grayscale(.5)}
.act-note.lock{font-size:12px;line-height:1.4;color:var(--ink);background:var(--sup-2);border-left:3px solid var(--brand);border-radius:6px;padding:8px 10px;margin-top:-2px;text-align:left}

/* --- botón flotante de tarea express --- */
.fab{
  position:absolute;right:14px;bottom:72px;z-index:8;
  font:inherit;font-size:12.5px;font-weight:700;color:#fff;
  background:var(--brand);border:0;border-radius:22px;padding:11px 16px;cursor:pointer;
  box-shadow:0 6px 16px rgba(15,118,110,.34);
}
.fab:hover{filter:brightness(1.08)}
.fab.hidden{display:none}
.mode-desk .fab{bottom:18px;right:calc(var(--det-w) + 18px)}

/* --- formulario de tarea express --- */
.modal{
  position:absolute;inset:0;z-index:40;display:none;
  background:rgba(12,20,32,.42);padding:18px;
  align-items:center;justify-content:center;
}
.modal.open{display:flex}
.modal-card{
  width:100%;max-width:330px;background:var(--panel);border-radius:14px;
  box-shadow:0 18px 40px rgba(12,20,32,.3);overflow:hidden;
}
.modal-head{
  background:var(--brand);color:#fff;padding:13px 15px;font-size:14px;font-weight:800;
}
.modal-head span{display:block;font-size:10.5px;font-weight:500;color:rgba(255,255,255,.75);margin-top:2px}
.modal-body{padding:14px 15px}
.form-row{margin-bottom:11px}
.form-row label{display:block;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-faint);margin-bottom:5px}
.form-row input,.form-row select,.form-row textarea{
  width:100%;font:inherit;font-size:13px;color:var(--ink);
  border:1px solid var(--line);border-radius:8px;padding:9px 10px;background:var(--panel);
}
.form-row textarea{resize:vertical;line-height:1.5;min-height:70px}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:2px solid var(--brand-soft);border-color:var(--brand-texto)}
.form-note{font-size:11px;color:var(--ink-faint);line-height:1.45;background:var(--sup);border-radius:8px;padding:9px 10px}
.modal-actions{display:flex;gap:8px;padding:0 15px 15px}
.modal-actions .act{flex:1}

/* --- anotaciones e historial de la tarea --- */
.thread{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.th-title{display:block;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-faint);margin-bottom:10px}
.th-item{display:flex;gap:9px;padding:7px 0}
.th-main{flex:1;min-width:0}
.th-head{display:flex;align-items:baseline;gap:7px;margin-bottom:2px}
.th-head strong{font-size:12px;font-weight:650}
.th-head span{font-size:10px;color:var(--ink-faint)}
.th-txt{font-size:11.5px;color:var(--ink-soft);line-height:1.4}
.th-txt b{color:var(--ink);font-weight:650}
.th-nota{
  font-size:12px;line-height:1.45;background:var(--nota-bg);border:1px solid var(--nota-borde);
  border-radius:8px;padding:8px 10px;margin-top:2px;
}
.th-vacio{font-size:11.5px;color:var(--ink-faint);font-style:italic;padding:4px 0}
.note-box{margin-top:10px}
.note-box textarea{
  width:100%;font:inherit;font-size:12.5px;color:var(--ink);
  border:1px solid var(--line);border-radius:9px;padding:9px 10px;resize:vertical;margin-bottom:7px;
}
.note-box textarea:focus{outline:2px solid var(--brand-soft);border-color:var(--brand-texto)}
.note-box .act{width:100%;font-size:12px;padding:9px}

/* --- vista de actividad --- */
.act-item{display:flex;gap:10px;padding:11px 14px;border-bottom:1px solid var(--linea-suave);cursor:pointer}
.act-item:hover{background:var(--sup)}
.act-item.no-link{cursor:default}
.act-main{flex:1;min-width:0}
.act-line{font-size:12.5px;line-height:1.4}
.act-line strong{font-weight:650}
.act-txt b{font-weight:650}
.act-nota{
  font-size:12px;line-height:1.45;background:var(--nota-bg);border:1px solid var(--nota-borde);
  border-radius:8px;padding:7px 9px;margin-top:4px;
}
.act-meta{font-size:10.5px;color:var(--ink-faint);margin-top:4px}

/* Punto de corte único: el mismo valor que usa app.js con matchMedia.
   Si se cambia acá, hay que cambiarlo allá. */
@media (max-width:999px){
  .split{gap:10px;padding:10px}
}

/* En pantallas de teléfono, la app aprovecha todo el ancho */
@media (max-width:560px){
  .topbar{padding:10px 12px;gap:10px}
  .brand p{display:none}
  .split{gap:8px;padding:8px}
  .device .app{border-radius:10px}
  .app-bar{padding:12px 13px 10px}
  .row{padding:12px}
  /* Objetivos táctiles más grandes */
  .app-nav button{padding:10px 4px 11px}
  .act{padding:13px 14px}
}

/* El input de archivo se oculta: el que se ve es su <label>, que ya
   tiene el estilo de botón. Un input de archivo tal cual no se puede
   estilizar de forma confiable entre navegadores. */
.oculto { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
label.act { cursor: pointer; }
a.act { text-decoration: none; }


/* ---------------- Selector de apariencia ---------------- */
.um-sep{height:1px;background:var(--line);margin:6px 4px}
.um-ico{width:18px;text-align:center;flex:0 0 auto}

/* El menú de usuario crece con el bloque de temas: que pueda deslizarse
   si no cabe, en vez de quedar cortado. */
.user-menu{max-height:min(70vh,420px);overflow-y:auto}

/* ---------------- Acciones de admin / owner ---------------- */
.acciones-admin{
  margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);
  display:flex;flex-direction:column;gap:8px;
}
.admin-titulo{
  font-size:9.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:2px;
}

/* Opciones de qué hacer con la carpeta al eliminar */
.opciones{display:flex;flex-direction:column;gap:8px}
.opcion{
  display:flex;gap:9px;align-items:flex-start;cursor:pointer;
  border:1px solid var(--line);border-radius:9px;padding:10px 11px;
  font-size:12.5px;line-height:1.4;
}
.opcion:hover{border-color:var(--brand-borde);background:var(--sup)}
.opcion input{margin-top:2px;accent-color:var(--brand);flex:0 0 auto}
.opcion small{color:var(--ink-faint);font-size:11px}
.opcion:has(input:checked){border-color:var(--brand-borde);background:var(--brand-soft)}

/* El copy del post en la ficha. Va completo y conserva los saltos de línea
   del plan: es lo que el creativo tiene que tener enfrente para trabajar. */
.contenido{
  font-size:13px;line-height:1.55;color:var(--ink);white-space:pre-wrap;
  background:var(--sup);border-left:3px solid var(--brand);
  border-radius:8px;padding:10px 12px;
}
.contenido.vacio{color:var(--ink-faint);font-style:italic;border-left-color:var(--line)}

/* Alta de clientes */
.alta-cliente{padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.alta-cliente .act{width:100%}

/* --- cargar planificación --- */
.modal-card.ancha{max-width:560px;max-height:100%;display:flex;flex-direction:column}
.modal-card.ancha .modal-body{overflow-y:auto;min-height:0}
.pl-modos{display:flex;gap:6px;margin:2px 0 12px}
.pl-archivo{display:block;text-align:center;text-transform:none !important;letter-spacing:0 !important;
  font-size:13px !important;color:var(--ink) !important;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-leyendo{text-align:center;padding:26px 18px;font-size:13px;line-height:1.55;color:var(--ink-soft)}
.pl-reloj{font-size:30px;margin-bottom:8px;animation:pl-gira 2s linear infinite}
@keyframes pl-gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.pl-reloj{animation:none}}
.pl-errores,.pl-avisos{font-size:12px;line-height:1.45;border-radius:8px;padding:9px 11px;margin-bottom:10px}
.pl-errores{background:var(--red-soft);border:1px solid var(--red-borde);color:var(--ink)}
.pl-errores b{color:var(--red)}
.pl-avisos{background:var(--nota-bg);border:1px solid var(--nota-borde)}
.pl-errores ul,.pl-avisos ul{margin:4px 0 0;padding-left:18px}
.pl-avisos ul{margin:0}
.pl-formatos{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.pl-pieza{padding:9px 0;border-top:1px solid var(--linea-suave)}
.pl-fecha{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:12.5px}
.pl-fecha span{font-size:11.5px;color:var(--ink-soft)}
.pl-copy{font-size:12px;line-height:1.45;color:var(--ink-soft);margin-top:3px;white-space:pre-line}
.pl-copy.vacio{font-style:italic;color:var(--ink-faint)}
.lbl-suave{font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-faint)}
.colores{display:flex;gap:8px;flex-wrap:wrap}
.swatch-btn{
  width:28px;height:28px;border-radius:50%;border:2px solid transparent;
  cursor:pointer;padding:0;outline-offset:2px;
}
.swatch-btn.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--panel) inset}

.opcion-off{opacity:.5;cursor:not-allowed}

/* Las opciones son <label> dentro de .form-row, y heredaban el estilo de
   los títulos de campo: mayúsculas, 10px, en bloque. Se devuelven a texto
   normal. (.form-row .opcion le gana en especificidad a .form-row label) */
.form-row .opcion{
  display:flex;align-items:flex-start;gap:9px;
  text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:400;
  color:var(--ink);margin-bottom:0;
}
/* `.form-row input` les da width:100%, borde y relleno a TODOS los input,
   radios incluidos: el radio se comía la fila y el texto quedaba aplastado. */
.form-row .opcion input{width:auto;padding:0;border:0;background:none;flex:0 0 auto;margin-top:2px}

/* ---------------- Teléfonos con muesca y barra de inicio ----------------
   Con viewport-fit=cover (index.html) la página llega hasta los bordes
   físicos de la pantalla. Instalada en un iPhone, la barra de navegación
   de abajo quedaba debajo de la rayita de inicio, y en horizontal los
   costados debajo de la muesca. env() da el margen justo en cada equipo y
   vale 0 en los que no tienen nada de eso. */
body{
  box-sizing:border-box;
  padding:env(safe-area-inset-top) env(safe-area-inset-right)
          env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.toast-stack{bottom:calc(52px + env(safe-area-inset-bottom))}

/* ---------------- Acción en curso ----------------
   Mientras el servidor contesta, los botones de acción no reciben toques:
   en el teléfono un doble toque creaba la tarea o la anotación dos veces. */
body.ocupado .act, body.ocupado .switch, body.ocupado .fab{pointer-events:none;opacity:.65}
body.ocupado{cursor:progress}

/* ---------------- Teléfono: la app a pantalla completa ----------------
   Sin marco ni márgenes, y sin la barra oscura de arriba (salvo en demo,
   donde trae sus botones). Instalada, se ve como cualquier app. */
@media (max-width:560px){
  body:not(.es-demo) .topbar{display:none}
  .split{padding:0}
  .device .app{border-radius:0;border:0;box-shadow:none}
}