/* =====================================================================
   Intranet Quipu — CSS único (rediseño, ver design/SPEC.md).
   Modo claro por defecto; oscuro con <html data-theme="dark">, que pinta
   el servidor según la preferencia guardada en la base (layout.php).
   Reglas de la casa:
   - Lima (--lima) SOLO en elementos accionables, siempre con texto negro.
   - Números grandes en Raleway 800, letter-spacing -.02em.
   - Íconos SVG de trazo 1.8px, sin emojis en la UI.
   ===================================================================== */

/* ---------- Tokens (copia de design/tokens.css) ---------- */
:root{
  /* Marca (fijos en ambos modos) */
  --azul:#0269A7;
  --celeste:#C4E6F8;
  --lima:#CAC612;
  --negro:#0B0C0C;
  --ok:#2EB360;

  /* Superficies y texto */
  --bg:#E4E0D8;
  --frame:#EEEBE5;
  --card:#FFFFFF;
  --surface:#F3F0EB;
  --line:#E2DED6;
  --line2:#B9B4AB;
  --ink:#0B0C0C;
  --ink2:#2B2F31;
  --muted:#5B6266;
  --muted2:#8A8F92;
  --strong:#0B0C0C;
  --track:#2A2D2F;
  --tint:#C4E6F8;
  --tint-ink:#014E7D;
  --brand-ink:#0269A7;
  --input:#FAF8F5;
  --shine:rgba(255,255,255,.75);

  /* Tipografía */
  --font-display:'Raleway',sans-serif;
  --font-body:'DM Sans',sans-serif;

  /* Forma */
  --r-frame:32px;
  --r-card:22px;
  --r-tile:16px;
  --gap:14px;
}
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#08090A;
  --frame:#111314;
  --card:#1A1D1F;
  --surface:#24282B;
  --line:#2E3236;
  --line2:#4A5055;
  --ink:#F3F0EB;
  --ink2:#D4D1CB;
  --muted:#A3A9AD;
  --muted2:#7F868A;
  --strong:#30353A;
  --track:#474D52;
  --tint:#123A55;
  --tint-ink:#9CD6F7;
  --brand-ink:#6CB9EC;
  --input:#14171A;
  --shine:rgba(255,255,255,.07);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);font-family:var(--font-body);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:var(--brand-ink);text-decoration:none}
a:hover{color:var(--tint-ink)}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%}
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--azul);outline-offset:2px}

/* ---------- Marco ---------- */
.pagina{max-width:1440px;margin:0 auto;padding:16px}
.marco{
  background:var(--frame);border-radius:var(--r-frame);padding:28px;
  display:flex;flex-direction:column;gap:24px;min-height:calc(100vh - 32px);
}
.cuerpo{display:flex;gap:20px;align-items:flex-start}
.contenido{flex:1 1 auto;min-width:0}

/* ---------- Header ---------- */
.hdr{display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.hdr-logo{width:64px;display:grid;place-items:center;flex:none;color:var(--azul)}
.hdr-titulos{display:flex;flex-direction:column;gap:4px;flex:1 1 240px;min-width:0}
.hdr-titulo{margin:0;font-family:var(--font-display);font-weight:700;font-size:28px;letter-spacing:-.01em;line-height:1.15}
.hdr-acciones{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.buscador{display:flex;align-items:center;gap:8px;height:48px;padding:0 6px 0 20px;border-radius:999px;background:var(--card);min-width:260px}
.buscador input{border:0;outline:0;background:transparent;font-size:14px;color:var(--ink);flex:1;min-width:0}
.buscador button{width:36px;height:36px;border-radius:50%;background:var(--strong);color:#FFFFFF;display:grid;place-items:center;border:0;cursor:pointer;padding:0;flex:none}

/* ---------- Tipografía y utilidades ---------- */
.lbl{font-size:13px;color:var(--muted)}
.lbl-chico{font-size:11px;color:var(--muted2)}
.num{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1}
.h2{margin:0;font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink)}
.ico{width:20px;height:20px;flex:none}
.fila-entre{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}

/* ---------- Grilla y cards ---------- */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-content:start}
.s3{grid-column:span 3}.s4{grid-column:span 4}.s6{grid-column:span 6}.s8{grid-column:span 8}.s12{grid-column:span 12}
.col{display:flex;flex-direction:column;gap:var(--gap);min-width:0}
.card{background:var(--card);border-radius:var(--r-card);padding:22px;min-width:0}
.card-llena{background:var(--strong);color:#FFFFFF;border-radius:var(--r-card);padding:22px;min-width:0}
.card-azul{background:var(--azul);color:#FFFFFF;border-radius:var(--r-card);padding:22px;min-width:0}
.card-llena .lbl,.card-azul .lbl{color:#C4E6F8}
.tile{background:var(--surface);border-radius:var(--r-tile)}

/* ---------- Botones ---------- */
.round{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:0;background:var(--card);color:var(--ink);cursor:pointer;flex:none;padding:0;position:relative;
}
.round.grande{width:48px;height:48px}
.round:hover{background:var(--surface)}
.round,.chip,.ghost,.acceso,.react,.votar{transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .15s ease}
.round:active,.chip:active,.ghost:active,.acceso:active,.react:active,.votar:active{transform:scale(.94)}

/* Botón de tema: luna y sol apilados en el centro; el que no va gira y se
   achica mientras el otro entra. */
.tema-btn > span{grid-area:1/1;display:grid;place-items:center;transition:opacity .35s ease,transform .5s cubic-bezier(.22,.8,.24,1)}
.tema-btn [data-icono-tema="sol"]{opacity:0;transform:rotate(-90deg) scale(.5)}
[data-theme="dark"] .tema-btn [data-icono-tema="sol"]{opacity:1;transform:none}
[data-theme="dark"] .tema-btn [data-icono-tema="luna"]{opacity:0;transform:rotate(90deg) scale(.5)}

/* Cambio de tema: círculo desde el botón (View Transitions, ver common.js)
   o, sin soporte, un fundido corto de colores. */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
.sin-transicion *:not(.tema-btn > span){transition:none !important}
.tema-fundido,.tema-fundido *,.tema-fundido *::before,.tema-fundido *::after{
  transition:background-color .4s ease,color .4s ease,border-color .4s ease,fill .4s ease,stroke .4s ease !important;
}
/* Lima = acción. Texto negro siempre, en los dos modos. */
.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 20px;border-radius:999px;
  background:var(--lima);color:var(--negro);font-weight:700;font-size:14px;
  border:0;font-family:var(--font-body);cursor:pointer;text-decoration:none;
  transition:filter .15s ease, transform .15s ease;
}
.cta:hover{color:var(--negro);filter:brightness(1.05)}
.cta:active{transform:translateY(1px)}
.cta:disabled{opacity:.5;cursor:default;filter:none}
.cta.chico{min-height:36px;padding:0 14px;font-size:13px}
.ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 20px;border-radius:999px;
  background:var(--surface);color:var(--ink);font-weight:500;font-size:14px;
  border:0;font-family:var(--font-body);cursor:pointer;text-decoration:none;
}
.ghost:hover{color:var(--ink);background:var(--line)}
.ghost.chico{min-height:36px;padding:0 14px;font-size:13px}
.chip{
  display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 14px;
  border-radius:999px;border:1px solid var(--line);background:var(--card);
  font-size:13px;color:var(--ink);cursor:pointer;
}
.chip[aria-pressed="true"],.chip[aria-selected="true"]{background:var(--strong);border-color:var(--strong);color:#FFFFFF}
.tag{display:inline-block;font-size:12px;padding:3px 10px;border-radius:999px;background:var(--surface);color:var(--muted)}
.tag.tint{background:var(--tint);color:var(--tint-ink)}

/* ---------- Puntos y contadores ---------- */
/* Azul = novedades. Lima = pendiente de acción. */
.dot{position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;border:2px solid var(--card)}
.dot.azul{background:var(--azul)}
.dot.lima{background:var(--lima)}
.contador{
  position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--lima);color:var(--negro);font-size:11px;font-weight:700;line-height:18px;text-align:center;
  border:2px solid var(--card);box-sizing:content-box;
}

/* ---------- Avatar ---------- */
.av{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;overflow:hidden;
  background:var(--tint);color:var(--brand-ink);font-weight:700;font-size:12px;
}
.av img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Riel de navegación ---------- */
/* Un solo layout para los dos estados: cada ítem es una fila (ícono +
   etiqueta) que, con el riel a 64px, queda recortada a un círculo de 44px.
   Expandir solo anima el ancho del riel y el fundido de las etiquetas. */
.riel{
  --riel-ease:cubic-bezier(.22,.8,.24,1);
  flex:0 0 64px;background:var(--card);border-radius:32px;padding:12px 10px;
  display:flex;flex-direction:column;align-items:stretch;gap:6px;min-height:640px;
  position:sticky;top:16px;overflow:hidden;
  transition:flex-basis .38s var(--riel-ease),padding .38s var(--riel-ease);
}
.riel-grupo{display:flex;flex-direction:column;align-items:stretch;gap:6px;width:100%}
.riel-abajo{margin-top:auto}
.riel-item{
  height:44px;width:100%;border-radius:999px;display:flex;align-items:center;gap:12px;padding:0 12px;
  color:var(--muted);position:relative;border:0;background:transparent;cursor:pointer;
  font-size:14px;white-space:nowrap;text-decoration:none;
  transition:background-color .2s ease,color .2s ease,transform .15s ease;
}
.riel-item .ico{flex:none}
.riel-item:hover{background:var(--surface);color:var(--ink)}
.riel-item:active{transform:scale(.94)}
.riel-item[aria-current="page"]{background:var(--strong);color:#FFFFFF}
.riel-txt{opacity:0;transform:translateX(-6px);transition:opacity .16s ease,transform .25s var(--riel-ease)}
.riel-num{margin-left:auto;font-size:12px;font-weight:700;opacity:0;transition:opacity .16s ease}
.riel-num.azul{color:var(--brand-ink)}
.riel-num.lima{background:var(--lima);color:var(--negro);border-radius:999px;padding:1px 8px}
.riel-item .dot{left:27px;right:auto;transition:opacity .2s ease}
.riel-toggle{border:1px solid var(--line);background:var(--card);margin-top:8px;padding:0 11px}
.riel-toggle .flecha{transition:transform .38s var(--riel-ease)}
.riel-avlink{
  margin-top:6px;border-radius:50%;width:44px;max-height:44px;
  transition:opacity .2s ease,max-height .38s var(--riel-ease),margin .38s var(--riel-ease);
}
.riel-av{width:44px;height:44px;font-size:13px}

/* Expandido: 208px, ítems en píldora con etiqueta. */
.riel.expandido{flex-basis:208px;padding:12px}
.riel.expandido .riel-txt{opacity:1;transform:none;transition-delay:.08s}
.riel.expandido .riel-num{opacity:1;transition-delay:.12s}
.riel.expandido .riel-item .dot{opacity:0}
.riel.expandido .riel-toggle .flecha{transform:rotate(180deg)}
.riel.expandido .riel-avlink{opacity:0;max-height:0;margin-top:0;pointer-events:none}

/* ---------- Campanita ---------- */
.campana{position:relative}
.campana-panel{
  position:absolute;top:calc(100% + 10px);right:0;z-index:60;
  width:340px;max-width:calc(100vw - 32px);
  background:var(--card);border-radius:var(--r-card);padding:16px;
  box-shadow:0 18px 48px rgba(11,12,12,.18);
  transform-origin:top right;animation:panel-abre .22s cubic-bezier(.22,.8,.24,1);
}
@keyframes panel-abre{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.campana-lista{display:flex;flex-direction:column;gap:8px;max-height:320px;overflow-y:auto;margin:10px 0}
.campana-item{background:var(--surface);border-radius:14px;padding:10px 12px;font-size:13px;line-height:1.4}
.campana-item b{display:block;font-family:var(--font-display);font-size:13px;color:var(--brand-ink)}
.campana-item small{display:block;margin-top:4px;font-size:11px;color:var(--muted2)}
.campana-form{display:flex;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.campana-form input{flex:1;min-width:0;height:40px;border-radius:999px;border:1px solid var(--line);background:var(--input);padding:0 14px;font-size:13px;outline:0}
.campana-form input:focus{border-color:var(--azul)}

/* ---------- Formularios ---------- */
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.field input,.field select,.field textarea{
  height:46px;border-radius:14px;border:1px solid var(--line);background:var(--input);
  padding:0 14px;font-size:14px;color:var(--ink);outline:0;width:100%;
}
.field textarea{height:84px;padding:12px 14px;resize:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--azul);background:var(--card)}
.f2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.msg{font-size:13px;font-weight:500}
.msg.ok{color:var(--ok)}
.msg.err{color:#C0392B}

/* ---------- Tablas ---------- */
.tabla-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-weight:500;font-size:12px;color:var(--muted2);padding:0 12px 10px;white-space:nowrap}
.tbl td{padding:12px;border-top:1px solid var(--line);white-space:nowrap;vertical-align:middle;font-variant-numeric:tabular-nums}

/* ---------- Skeleton ---------- */
.sk{background:var(--surface);border-radius:8px;position:relative;overflow:hidden}
.sk::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,rgba(255,255,255,0),var(--shine),rgba(255,255,255,0));
  animation:sk-barrido 1.4s ease-in-out infinite;
}
@keyframes sk-barrido{to{transform:translateX(100%)}}
@keyframes sk-pulso{50%{opacity:.55}}
.sk-grupo{display:flex;flex-direction:column;gap:14px;padding:4px 0}
.sk-linea{height:12px}
.sk-fila{display:flex;gap:12px;align-items:center}
.sk-av{width:32px;height:32px;border-radius:50%;flex:none}
/* Lo que reemplaza al skeleton entra con un fundido corto. */
.aparece{animation:aparece .35s ease both}
@keyframes aparece{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:28px;z-index:200;transform:translate(-50%,12px);opacity:0;
  background:var(--negro);color:#F3F0EB;border-radius:999px;padding:12px 20px;font-size:14px;font-weight:500;
  box-shadow:0 14px 34px rgba(0,0,0,.25);pointer-events:none;transition:opacity .25s ease, transform .25s ease;
}
.toast.visible{opacity:1;transform:translate(-50%,0)}

/* ---------- Modal ---------- */
.modal-fondo{position:fixed;inset:0;z-index:150;background:rgba(11,12,12,.5);display:flex;align-items:center;justify-content:center;padding:16px}
.modal{background:var(--card);border-radius:var(--r-card);padding:24px;width:100%;max-width:440px;max-height:calc(100vh - 32px);overflow:auto}

/* =====================================================================
   PÁGINA: /login (design/Login.dc.html)
   ===================================================================== */
.login-marco{flex-direction:row;flex-wrap:wrap;gap:16px;min-height:calc(100vh - 32px)}
.login-azul{
  flex:1 1 420px;background:var(--azul);color:#FFFFFF;border-radius:26px;padding:40px;
  display:flex;flex-direction:column;justify-content:space-between;gap:40px;
  position:relative;overflow:hidden;min-height:420px;
}
.login-azul-fondo{position:absolute;right:-90px;bottom:-70px;opacity:.09;pointer-events:none}
.login-azul-txt{display:flex;flex-direction:column;gap:14px;position:relative}
.login-azul h1{margin:0;font-family:var(--font-display);font-weight:800;font-size:56px;line-height:1;letter-spacing:-.02em}
.login-azul p{margin:0;font-size:16px;color:var(--celeste);max-width:340px;line-height:1.5}
.login-copy{font-size:12px;color:var(--celeste);position:relative}

.login-card{flex:1 1 420px;background:var(--card);border-radius:26px;padding:40px;display:flex;align-items:center;justify-content:center}
.login-form{width:100%;max-width:380px;display:flex;flex-direction:column;gap:18px}
.login-form[hidden]{display:none}
.login-tit{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.login-tit h2{margin:0;font-family:var(--font-display);font-weight:700;font-size:30px}
.login-tit span{font-size:14px;color:var(--muted)}
.login-form .field input,.login-form .field textarea{height:50px;border-radius:16px;background:var(--card);font-size:15px;padding:0 16px}
.login-form .field textarea{height:80px;padding:12px 16px}
.login-pass{position:relative}
.login-pass input{padding-right:52px}
.login-ojo{position:absolute;right:4px;top:3px;width:44px;height:44px;border:0;background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center;padding:0;border-radius:50%}
.login-ojo:hover{color:var(--ink)}
.login-form .cta{width:100%;min-height:52px;font-size:15px;margin-top:6px}
.login-links{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px}
.login-links button{border:0;background:none;padding:0;cursor:pointer;font-size:13px;color:var(--brand-ink)}
.login-links button:hover{color:var(--tint-ink)}
.login-links button.apagado{color:var(--muted)}
.login-nota{background:var(--surface);border-radius:16px;padding:14px 16px;font-size:12px;line-height:1.45;color:var(--muted)}
.login-error{background:rgba(192,57,43,.1);color:#C0392B;border-radius:14px;padding:12px 14px;font-size:13px;font-weight:500}
.login-ok{background:rgba(46,179,96,.12);color:var(--ok);border-radius:14px;padding:12px 14px;font-size:13px;font-weight:500}
.campo-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Cortina azul de salida hacia /inicio (o /perfil). */
.login-cortina{position:fixed;inset:0;z-index:300;background:#04416A;opacity:0;pointer-events:none;transition:opacity .5s ease}
.login-cortina.visible{opacity:1}

@media (max-width:640px){
  .pagina.login-pagina{padding:8px}
  .login-marco{padding:8px}
  .login-azul{min-height:0;padding:28px;gap:24px}
  .login-azul h1{font-size:40px}
  .login-card{padding:28px 20px}
}

/* =====================================================================
   PÁGINA: /inicio (design/Main.dc.html + Cargando.dc.html)
   ===================================================================== */
.kpi{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:116px;position:relative}
.kpi-txt{display:flex;flex-direction:column;gap:8px;min-width:0}
.kpi .num{font-size:clamp(24px,2.1vw,30px);white-space:nowrap}

/* Hoy: card llena con contador en vivo (con segundos) y anillo de jornada. */
.hoy-lbl{font-size:13px;color:#9AA1A5;display:flex;align-items:center;gap:6px}
.hoy-punto{width:7px;height:7px;border-radius:50%;background:#6B7175;flex:none}
.hoy-punto.trabajando{background:var(--ok)}
.hoy-punto.foco{background:var(--celeste)}
.hoy-seg{font-size:16px;font-weight:700;opacity:.7;margin-left:2px}
.hoy-acciones{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.hoy-foco{
  display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border-radius:999px;
  border:0;cursor:pointer;font-size:12.5px;font-weight:700;background:var(--lima);color:var(--negro);
}
.hoy-foco[aria-pressed="true"]{background:var(--celeste);color:#014E7D}
.hoy-detalle{border:0;background:none;color:#C4E6F8;font-size:12.5px;cursor:pointer;padding:6px 2px;text-decoration:underline;text-underline-offset:3px}
.hoy-anillo{flex:none}

/* Semana pasada: barras L-V. */
.barras{display:flex;align-items:flex-end;gap:5px;height:44px;flex:none}
.barras span{width:7px;border-radius:4px;background:var(--azul);min-height:4px}
.barras span.bajo{background:var(--tint)}

.kpi-icono{width:48px;height:48px;border-radius:50%;background:var(--tint);color:var(--brand-ink);display:grid;place-items:center;flex:none}
.kpi-icono-fila{justify-content:flex-start;gap:14px}

/* Clima y hora: todo el widget es "liquid glass". Detrás, una escena según
   el clima (sol, nubes, lluvia, luna y estrellas) que se ve a través de un
   vidrio apenas esmerilado, sin recuadro: solo brillo en los bordes. */
.clima{position:relative;border-radius:var(--r-card);overflow:hidden;min-height:116px;isolation:isolate;transition:background .8s ease;background:#2F8FD0}
.clima.sol{background:linear-gradient(160deg,#4FB0EA 0%,#2F8FD0 55%,#2378B4 100%)}
.clima.lluvia{background:linear-gradient(160deg,#3C6F93 0%,#1E5F8C 50%,#16496C 100%)}
.clima.nublado{background:linear-gradient(160deg,#8EA8BA 0%,#6A8BA1 50%,#557489 100%)}
.clima.noche{background:linear-gradient(160deg,#22426A 0%,#162E4C 55%,#0E1E34 100%)}
#climaFondo{position:absolute;inset:0;z-index:0}
.clima-mancha{position:absolute;border-radius:50%;pointer-events:none}
.clima-vidrio{
  position:absolute;inset:0;z-index:1;border-radius:inherit;overflow:hidden;color:#FFFFFF;
  background:linear-gradient(125deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.05) 38%,rgba(255,255,255,0) 60%,rgba(255,255,255,.10) 100%);
  backdrop-filter:blur(2px) saturate(160%);-webkit-backdrop-filter:blur(2px) saturate(160%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(255,255,255,.18),inset 0 -30px 50px rgba(255,255,255,.06);
  text-shadow:0 1px 3px rgba(1,30,50,.45);
}
/* Reflejo curvo arriba a la izquierda, como en un vidrio grueso. */
.clima-vidrio::before{
  content:"";position:absolute;left:-10%;top:-60%;width:70%;height:120%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.22),rgba(255,255,255,0) 65%);
}
.clima-datos{position:relative;height:100%;padding:18px 22px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.clima-izq{display:flex;flex-direction:column;gap:8px}
.clima-izq span{font-size:13px;color:#EAF6FD}
.clima-izq .num{font-size:38px}
.clima-der{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.clima-der .num{font-size:28px}
.clima-der span{font-size:13px;color:#EAF6FD}
.wx{position:absolute;pointer-events:none}
.wx-sun{width:110px;height:110px;border-radius:50%;right:150px;top:-26px;background:radial-gradient(circle,#FFF8DC 0 26%,#FFD25E 48%,rgba(255,196,64,0) 70%);animation:wx-sunrise 1.6s cubic-bezier(.2,.8,.2,1) both,wx-sunglow 4s ease-in-out 1.6s infinite}
.wx-ray{width:180px;height:180px;border-radius:50%;right:115px;top:-61px;background:conic-gradient(from 0deg,rgba(255,230,150,0) 0 8%,rgba(255,230,150,.4) 10%,rgba(255,230,150,0) 12% 33%,rgba(255,230,150,.35) 35%,rgba(255,230,150,0) 37% 58%,rgba(255,230,150,.4) 60%,rgba(255,230,150,0) 62% 83%,rgba(255,230,150,.35) 85%,rgba(255,230,150,0) 87%);animation:wx-sunrise 1.6s cubic-bezier(.2,.8,.2,1) both,wx-spin 24s linear 1.6s infinite}
@keyframes wx-sunrise{from{transform:translateY(70px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes wx-sunglow{50%{transform:scale(1.07)}}
@keyframes wx-spin{to{transform:rotate(360deg)}}
/* Nube: una píldora con dos bultos; --s la escala, --o la opacidad. */
/* Nube "real": 4 capas elípticas deformadas con ruido SVG (--f, filtros
   #nubeRuidoA/B en inicio.php). La sombra gris-azulada va abajo, el cuerpo
   blanco en el medio, la copa arriba y un brillo donde pega la luz.
   --s escala, --o opacidad, --t segundos de deriva. */
.wx-nube{width:200px;height:84px;opacity:var(--o,.9);transform:scale(var(--s,1));transform-origin:left top;animation:wx-deriva var(--t,40s) ease-in-out infinite alternate}
.wx-nube i{position:absolute;border-radius:50%;filter:var(--f)}
.wx-nube .n-sombra{left:6%;right:4%;top:42%;bottom:0;background:radial-gradient(ellipse at 50% 30%,rgba(168,186,204,.95),rgba(140,160,182,.7) 55%,rgba(140,160,182,0) 72%)}
.wx-nube .n-cuerpo{left:0;right:0;top:22%;bottom:12%;background:radial-gradient(ellipse at 50% 40%,#FFFFFF 0 38%,rgba(246,249,252,.92) 55%,rgba(236,242,247,0) 71%)}
.wx-nube .n-copa{left:22%;width:48%;top:0;height:70%;background:radial-gradient(ellipse at 50% 45%,#FFFFFF 0 40%,rgba(250,252,254,.9) 56%,rgba(250,252,254,0) 71%)}
.wx-nube .n-luz{left:30%;width:30%;top:10%;height:34%;background:radial-gradient(ellipse,rgba(255,255,255,.95),rgba(255,255,255,0) 70%);filter:blur(6px)}
/* Lluvia y noche: nubes cargadas, más oscuras abajo. */
.clima.lluvia .wx-nube .n-sombra{background:radial-gradient(ellipse at 50% 30%,rgba(96,116,136,.95),rgba(80,100,122,.75) 55%,rgba(80,100,122,0) 72%)}
.clima.lluvia .wx-nube .n-cuerpo,.clima.lluvia .wx-nube .n-copa{background:radial-gradient(ellipse at 50% 40%,#D9E2EA 0 36%,rgba(190,204,216,.92) 56%,rgba(190,204,216,0) 71%)}
.clima.lluvia .wx-nube .n-luz{opacity:.5}
.clima.noche .wx-nube .n-sombra{background:radial-gradient(ellipse at 50% 30%,rgba(30,48,74,.9),rgba(30,48,74,0) 70%)}
.clima.noche .wx-nube .n-cuerpo,.clima.noche .wx-nube .n-copa{background:radial-gradient(ellipse at 50% 40%,rgba(120,140,170,.9) 0 36%,rgba(90,110,140,.7) 56%,rgba(90,110,140,0) 71%)}
.clima.noche .wx-nube .n-luz{background:radial-gradient(ellipse,rgba(244,239,216,.45),rgba(244,239,216,0) 70%)}
@keyframes wx-deriva{from{translate:-18px 0}to{translate:36px 0}}
.wx-luna{width:54px;height:54px;border-radius:50%;right:170px;top:18px;box-shadow:-12px 8px 0 0 #F4EFD8;transform:rotate(-20deg);filter:drop-shadow(0 0 14px rgba(244,239,216,.45))}
.wx-estrella{width:3px;height:3px;border-radius:50%;background:#FFFFFF;animation:wx-titila 3s ease-in-out infinite}
@keyframes wx-titila{50%{opacity:.25}}
.wx-rain{top:-30px;width:1.5px;height:26px;border-radius:2px;background:linear-gradient(rgba(255,255,255,0),rgba(234,246,253,.95));animation:wx-fall .8s linear infinite}
@keyframes wx-fall{from{transform:translateY(0) rotate(12deg)}to{transform:translateY(200px) rotate(12deg)}}
.wx-bead{border-radius:50% 50% 50% 50% / 58% 58% 42% 42%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.95) 0 12%,rgba(255,255,255,.28) 35%,rgba(255,255,255,.06) 70%);box-shadow:inset 0 -1px 2px rgba(255,255,255,.5),0 1px 2px rgba(0,30,60,.3);animation:wx-bead 7s ease-in infinite}
@keyframes wx-bead{0%{transform:translateY(0) scale(.4);opacity:0}12%{transform:translateY(0) scale(1);opacity:1}70%{transform:translateY(4px)}100%{transform:translateY(38px);opacity:0}}

/* El Hilo (preview). Compacto: la fila 2 se ajusta a esta card. */
.hilo-mini{display:flex;flex-direction:column;gap:12px;padding:18px 20px}
.nuevos{font-size:12px;color:var(--brand-ink);font-weight:700}
.composer{display:flex;align-items:center;gap:10px;background:var(--surface);border-radius:999px;padding:4px 4px 4px 16px}
.composer input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:14px;color:var(--ink)}
.composer .cta{min-height:36px;padding:0 16px}
.post-mini{display:flex;gap:10px;align-items:flex-start}
.post-mini .av{width:30px;height:30px}
.post-mini-cuerpo{flex:1;min-width:0}
.post-mini-cab{font-size:13.5px}
.post-mini-cab span{color:var(--muted);font-size:12px}
.post-mini p{margin:2px 0 0;font-size:13.5px;line-height:1.4;color:var(--ink2);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-mini-reac{font-size:12px;color:var(--muted);white-space:nowrap}
.punto-nuevo{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--azul);margin-right:4px;vertical-align:middle}
.error-linea{font-size:13px;color:#C0392B}

/* Rutina: checklist; al tildar, el texto se tacha con una línea que se dibuja. */
.rutina{display:flex;flex-direction:column;gap:8px;padding:18px 20px}
.rutina ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rutina-item{display:flex;align-items:center;gap:10px;min-height:34px;font-size:14px;color:var(--ink);cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent}
.rutina-item input{position:absolute;opacity:0;width:20px;height:20px;margin:0;cursor:pointer}
.rutina-check{
  width:20px;height:20px;border-radius:6px;border:2px solid var(--line2);flex:none;display:grid;place-items:center;color:#FFFFFF;
  transition:background-color .2s ease,border-color .2s ease,transform .15s ease;
}
.rutina-check svg{opacity:0;transform:scale(.4);transition:opacity .15s ease,transform .25s cubic-bezier(.3,1.6,.5,1)}
.rutina-item:hover .rutina-check{border-color:var(--azul)}
.rutina-item:active .rutina-check{transform:scale(.88)}
.rutina-item input:focus-visible + .rutina-check{outline:2px solid var(--azul);outline-offset:2px}
.rutina-txt{
  background:linear-gradient(currentColor,currentColor) no-repeat 0 55% / 0 1.5px;
  transition:background-size .3s cubic-bezier(.22,.8,.24,1),color .3s ease;
}
.rutina-item.hecho{color:var(--muted2)}
.rutina-item.hecho .rutina-check{background:var(--azul);border-color:var(--azul)}
.rutina-item.hecho .rutina-check svg{opacity:1;transform:none}
.rutina-item.hecho .rutina-txt{background-size:100% 1.5px}

/* Tus números: card azul, 4 placas que llenan el alto de la fila. */
.datos-mini{display:flex;padding:14px}
.perfil-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:8px;width:100%}
.perfil-stats div{display:flex;flex-direction:column;justify-content:center;gap:6px;background:rgba(255,255,255,.12);border-radius:14px;padding:12px 14px;min-height:64px}
.perfil-stats .num{font-size:26px;color:#FFFFFF}
.perfil-stats .lbl-chico{font-size:12px;color:var(--celeste)}

/* Accesos. */
.accesos-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.acceso{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 4px;border-radius:var(--r-tile);background:var(--surface);color:var(--ink);font-size:12px;text-align:center}
.acceso:hover{color:var(--ink);background:var(--line)}
.acceso-logo{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--card)}
.acceso-logo img{width:20px;height:20px;object-fit:contain}
.acceso-logo.azul{background:var(--azul)}
.acceso-logo.tint{background:var(--tint)}

/* Quién anda. */
.quien ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.quien li{display:flex;align-items:center;gap:10px;font-size:14px}
.quien-barra{width:3px;height:28px;border-radius:2px;background:var(--line);flex:none}
.quien li.trabajando .quien-barra{background:var(--ok)}
.quien li.foco .quien-barra{background:var(--azul)}
.quien li.pausa .quien-barra{background:var(--line2)}
.quien li.fuera{color:var(--muted2)}
.quien-estado{margin-left:auto;font-size:12px;color:var(--muted);text-align:right}
.quien li.fuera .quien-estado{color:var(--muted2)}


/* Panel de fichaje (detalle del día + pedir corrección). */
.fichaje-panel{
  position:absolute;top:calc(100% + 10px);left:0;z-index:60;
  width:340px;max-width:calc(100vw - 32px);color:var(--ink);
  background:var(--card);border-radius:var(--r-card);padding:18px;
  box-shadow:0 18px 48px rgba(11,12,12,.22);display:none;
}
.fichaje-panel.is-open{display:block;transform-origin:top left;animation:panel-abre .22s cubic-bezier(.22,.8,.24,1)}
.fichaje-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.fichaje-head span{font-size:13px;color:var(--muted)}
.fichaje-head b{font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--brand-ink)}
.fichaje-desglose{font-size:12.5px;color:var(--muted);margin:2px 0 0}
.fichaje-desglose .extra{color:var(--brand-ink);font-weight:700}
.fichaje-tramos{list-style:none;margin:12px 0 10px;padding:0;display:flex;flex-direction:column;gap:6px}
.fichaje-tramos li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;border-radius:12px;background:var(--surface);font-size:13px;font-variant-numeric:tabular-nums}
.fichaje-tramos .rango{font-weight:700}
.fichaje-tramos .dur{color:var(--muted);font-size:12.5px}
.fichaje-tag{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:999px;margin-left:6px;background:var(--tint);color:var(--tint-ink)}
.fichaje-tag.vivo{background:rgba(46,179,96,.15);color:var(--ok)}
.fichaje-vacio{font-size:13px;color:var(--muted);margin:12px 0}
.fichaje-nota{font-size:11.5px;color:var(--muted);line-height:1.45;margin:0 0 12px}
.fichaje-error{font-size:12.5px;color:#C0392B;font-weight:500;margin:0}
.fichaje-pedidos{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.fichaje-pedidos-titulo{font-size:11px;font-weight:700;color:var(--muted2);text-transform:uppercase;letter-spacing:.05em}
.fichaje-pedido{font-size:12px;line-height:1.4;margin:0}
.fichaje-pedido .estado{font-weight:700}
.fichaje-pedido .estado.pendiente{color:var(--muted)}
.fichaje-pedido .estado.aprobada{color:var(--ok)}
.fichaje-pedido .estado.rechazada{color:#C0392B}
.fichaje-form{display:flex;flex-direction:column;gap:10px}
.fichaje-form h3{margin:0;font-family:var(--font-display);font-size:15px;font-weight:800}
.fichaje-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.fichaje-form .fila{display:flex;gap:8px}
.fichaje-form .fila label{flex:1;min-width:0}
.fichaje-form input,.fichaje-form select,.fichaje-form textarea{font-size:13.5px;color:var(--ink);background:var(--input);border:1px solid var(--line);border-radius:10px;padding:8px 10px;width:100%}
.fichaje-form textarea{resize:vertical;min-height:62px}
.fichaje-form .ayuda{display:block;font-size:11.5px;color:var(--muted)}
.fichaje-botones{display:flex;gap:8px;margin-top:4px}
.fichaje-btn{flex:1;min-height:40px;border-radius:999px;border:0;cursor:pointer;font-weight:700;font-size:13px}
.fichaje-btn-principal{background:var(--lima);color:var(--negro)}
.fichaje-btn-secundario{background:var(--surface);color:var(--ink);font-weight:500}
.fichaje-btn:disabled{opacity:.55;cursor:default}

/* Foco: "¿Seguís ahí?". */
.foco-modal .num{font-size:40px;margin:10px 0 4px;color:var(--brand-ink)}
.foco-modal h3{margin:0;font-family:var(--font-display);font-size:20px}

@media (prefers-reduced-motion:reduce){
  .wx{animation:none !important}
}

/* =====================================================================
   PÁGINA: /hilo (design/Hilo.dc.html)
   ===================================================================== */
.feed-col{display:flex;flex-direction:column;gap:var(--gap);min-width:0}
.hilo-composer{display:flex;flex-direction:column;gap:14px}
.hilo-composer-fila{display:flex;gap:12px;align-items:flex-start}
.hilo-composer textarea{
  flex:1;min-width:0;border:0;outline:0;background:transparent;resize:none;
  font-size:15px;color:var(--ink);line-height:1.5;padding:7px 0;min-height:38px;max-height:240px;
}
.hilo-composer-pie{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hilo-composer-pie .cta{margin-left:auto}
.chip-foto input{display:none}
.chip-foto svg{width:16px;height:16px}
.foto-elegida{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.foto-elegida button{border:0;background:none;color:var(--muted);cursor:pointer;padding:4px;border-radius:50%;display:grid;place-items:center}

.filtros{display:flex;gap:8px;flex-wrap:wrap}
.semana{font-size:13px;color:var(--muted);padding:4px 4px 0}
.vacio-feed{padding:30px 22px;text-align:center;color:var(--muted);font-size:14px}

.post{display:flex;gap:14px;align-items:flex-start}
.post .av{width:40px;height:40px;font-size:13px}
.post-cuerpo{flex:1;min-width:0}
.post-cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.post-cab strong{font-size:15px}
.post-acc{margin-left:auto;display:flex;gap:4px}
.post-acc .round{width:36px;height:36px;background:transparent;color:var(--muted)}
.post-acc .round:hover{background:var(--surface);color:var(--ink)}
.post-acc .round svg{width:17px;height:17px}
.post-acc .round.peligro:hover{color:#C0392B}
.post-acc .confirmando{width:auto;padding:0 12px;border-radius:999px;background:rgba(192,57,43,.12);color:#C0392B;font-size:12px;font-weight:700}
.post-texto{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--ink2);white-space:pre-line;overflow-wrap:anywhere}
.post-editado{font-size:12px;color:var(--muted2)}
.post-img{display:block;margin-top:12px;max-width:100%;max-height:460px;border-radius:var(--r-tile);object-fit:cover}
.post-pie{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px}
.react{
  display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:999px;
  background:var(--surface);border:1.5px solid transparent;font-size:12.5px;color:var(--ink2);cursor:pointer;
}
.react svg{width:16px;height:16px}
.react:hover{border-color:var(--line2)}
.react[aria-pressed="true"]{background:var(--tint);color:var(--tint-ink);border-color:var(--tint)}
.post-comentar{margin-left:auto;border:0;background:none;color:var(--brand-ink);font-size:13px;cursor:pointer;padding:8px 4px}
.post-comentar:hover{color:var(--tint-ink)}
.votar{
  display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:999px;
  border:0;cursor:pointer;font-weight:700;font-size:13px;background:var(--lima);color:var(--negro);
}
.votar[aria-pressed="true"]{background:var(--strong);color:#FFFFFF}

.comentarios{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.comentario{font-size:13.5px;line-height:1.45}
.comentario b{margin-right:6px}
.comentario small{display:block;color:var(--muted2);font-size:11.5px;margin-top:2px}
.comentario-form{display:flex;gap:8px}
.comentario-form input{flex:1;min-width:0;height:40px;border-radius:999px;border:1px solid var(--line);background:var(--input);padding:0 14px;font-size:13.5px;outline:0;color:var(--ink)}
.comentario-form input:focus{border-color:var(--azul)}

.edicion textarea{width:100%;min-height:90px;margin-top:10px;border-radius:14px;border:1px solid var(--line);background:var(--input);padding:12px 14px;font-size:14.5px;color:var(--ink);resize:vertical;outline:0}
.edicion textarea:focus{border-color:var(--azul)}
.edicion-acc{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}

/* Columna derecha. */
.temas ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.temas li{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.4}
.temas li span{flex:1;min-width:0;overflow-wrap:anywhere}
.hace-tiempo{background:var(--tint);color:var(--tint-ink);border-radius:var(--r-card);padding:22px}
.hace-tiempo .lbl{color:var(--tint-ink);font-size:12px;font-weight:700}
.hace-tiempo p{margin:10px 0 8px;font-size:15px;line-height:1.5;color:var(--ink)}
.hace-tiempo span{font-size:13px}
.efe{display:flex;align-items:center;gap:14px;margin-top:12px}
.efe .num{font-size:28px;color:var(--brand-ink);min-width:44px;text-align:center}
.efe span{font-size:14px;line-height:1.35}
.actividad{display:flex;flex-direction:column;gap:12px}
.actividad div{display:flex;justify-content:space-between;align-items:baseline;font-size:14px}
.actividad .num{font-size:22px}

/* Modal de story. */
.compartir-overlay{position:fixed;inset:0;z-index:150;background:rgba(11,12,12,.55);display:none;align-items:center;justify-content:center;padding:16px}
.compartir-overlay.visible{display:flex}
.compartir-modal{position:relative;background:var(--card);border-radius:var(--r-card);padding:22px;width:100%;max-width:400px;max-height:calc(100vh - 32px);overflow:auto;display:flex;flex-direction:column;gap:12px}
.compartir-modal h3{margin:0;font-family:var(--font-display);font-size:17px}
.compartir-cerrar{position:absolute;top:10px;right:10px}
.compartir-preview{background:var(--surface);border-radius:var(--r-tile);min-height:200px;display:grid;place-items:center;padding:10px;overflow:hidden}
.compartir-preview img{max-width:100%;max-height:min(44vh,520px);border-radius:12px;display:block}
.compartir-aviso{margin:0;font-size:12.5px;color:var(--muted)}
.compartir-acciones{display:flex;flex-direction:column;gap:8px}
.compartir-acciones .lbl{font-size:12px;text-align:center}

/* =====================================================================
   PÁGINA: /perfil (design/Perfil.dc.html)
   ===================================================================== */
.aviso-card{background:var(--tint);color:var(--tint-ink);border-radius:var(--r-card);padding:18px 22px;font-size:14px;line-height:1.5;margin-bottom:var(--gap)}
.aviso-card strong{display:block;font-family:var(--font-display);font-size:16px;color:var(--ink);margin-bottom:2px}
.perfil-solo{max-width:720px}
.perfil-id{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:32px 24px}
.perfil-foto{position:relative}
.perfil-av{width:112px;height:112px;font-size:34px}
.perfil-camara{position:absolute;right:-2px;bottom:-2px;width:40px;height:40px;background:var(--strong);color:#FFFFFF;border:3px solid var(--card)}
.perfil-camara:hover{background:var(--strong);filter:brightness(1.3)}
.perfil-foto:has(#fotoInput:focus-visible) .perfil-camara{outline:2px solid var(--azul);outline-offset:2px}
.perfil-nombre{font-family:var(--font-display);font-size:20px;margin-top:8px}
.perfil-hora{flex:1;padding:14px;display:flex;flex-direction:column;gap:6px}
.perfil-hora .num{font-size:22px}
.perfil-form{display:flex;flex-direction:column;gap:18px}
.perfil-acciones{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.perfil-acciones .msg{margin-right:auto}
.field input:disabled{color:var(--muted2);cursor:not-allowed}

/* Selector segmentado (tema). */
.segmentado{display:inline-flex;background:var(--surface);border-radius:999px;padding:4px;gap:2px}
.segmentado button{
  min-height:36px;padding:0 14px;border-radius:999px;border:0;background:transparent;color:var(--muted);
  font-size:13px;font-weight:500;cursor:pointer;transition:background-color .25s ease,color .25s ease,box-shadow .25s ease;
}
.segmentado button:hover{color:var(--ink)}
.segmentado button[aria-checked="true"]{background:var(--card);color:var(--ink);font-weight:700;box-shadow:0 1px 4px rgba(11,12,12,.12)}

/* Fuerza de la contraseña: 4 barras. */
.fuerza{flex:1;min-width:140px;max-width:260px;display:flex;gap:4px;margin-right:auto}
.fuerza span{flex:1;height:6px;border-radius:3px;background:var(--line);transition:background-color .3s ease}
.fuerza[data-nivel="1"] span:nth-child(-n+1){background:#C0392B}
.fuerza[data-nivel="2"] span:nth-child(-n+2){background:#E2A03F}
.fuerza[data-nivel="3"] span:nth-child(-n+3){background:var(--azul)}
.fuerza[data-nivel="4"] span{background:var(--ok)}
.fuerza + .lbl{min-width:70px}
.perfil-acciones .fuerza ~ .msg{margin-right:0}

/* Recorte de la foto: se arrastra y se hace zoom; se sube 400×400 JPG. */
.recorte-visor{
  position:relative;width:300px;max-width:100%;aspect-ratio:1;margin:0 auto 14px;
  border-radius:var(--r-tile);overflow:hidden;background:#000;touch-action:none;cursor:grab;
}
.recorte-visor:active{cursor:grabbing}
.recorte-visor canvas{width:100%;height:100%;display:block}
.recorte-visor::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:50%;box-shadow:0 0 0 999px rgba(0,0,0,.35)}
.recorte-zoom{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);margin-bottom:18px}
.recorte-zoom input{flex:1;accent-color:var(--azul)}

/* =====================================================================
   PÁGINA: /horas (design/Horas.dc.html)
   ===================================================================== */
.segmentado-hdr{background:var(--card)}
.segmentado-hdr button{min-height:40px;padding:0 16px}
.segmentado-hdr button[aria-checked="true"]{background:var(--strong);color:#FFFFFF;box-shadow:none}
.kpi-col{display:flex;flex-direction:column;gap:10px;min-height:116px}
.kpi-col .num{font-size:clamp(24px,2.1vw,30px);white-space:nowrap}
.link-btn{border:0;background:none;padding:6px 0;cursor:pointer;font-size:13px;color:var(--brand-ink)}
.link-btn:hover{color:var(--tint-ink)}

.grafico-card{display:flex;flex-direction:column;gap:18px}
.leyenda{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.leyenda span{display:flex;align-items:center;gap:6px}
.ley{width:10px;height:10px;border-radius:3px;display:inline-block}
.ley.normal{background:var(--azul)}
.ley.extra{background:var(--strong)}
.ley.vacio{border:1.5px dashed var(--line2)}
.grafico{position:relative;height:222px;padding-top:12px}
.grafico-jornada{position:absolute;left:0;right:0;border-top:1.5px dashed var(--lima);transition:bottom .5s cubic-bezier(.22,.8,.24,1)}
.grafico-jornada span{position:absolute;right:0;top:-18px;font-size:11px;color:var(--muted)}
.grafico-barras{position:absolute;inset:12px 0 0;display:flex;align-items:flex-end;gap:14px}
.grafico-barras.densas{gap:5px}
.b-col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.b-col span{font-size:12px;color:var(--muted);white-space:nowrap;height:16px}
.densas .b-col span{font-size:10px}
.b-col span.b-hoy{font-weight:700;color:var(--ink)}
.b-pila,.b-vacio{width:100%;max-width:44px;border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.b-normal{background:var(--azul);transition:height .5s cubic-bezier(.22,.8,.24,1)}
.b-extra{background:var(--strong);transition:height .5s cubic-bezier(.22,.8,.24,1)}
.b-pila.hoy .b-normal{background:var(--tint);box-shadow:inset 0 0 0 2px var(--azul)}
.b-pila.hoy{border-radius:10px}
.b-vacio{border:1.5px dashed var(--line2)}
.densas .b-pila,.densas .b-vacio{border-radius:6px}

.tramos-card{display:flex;flex-direction:column;gap:16px}
.tramos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tramos li{display:flex;gap:12px;position:relative;padding-bottom:16px}
.tramos li:last-child{padding-bottom:0}
.tramos li > i{width:12px;height:12px;border-radius:50%;background:var(--azul);flex:none;margin-top:3px;position:relative;z-index:1}
.tramos li:not(:last-child)::before{content:"";position:absolute;left:5px;top:15px;bottom:0;width:2px;background:var(--tint)}
.tramos li.pausa > i{background:var(--card);border:2px solid var(--line2)}
.tramos li.pausa strong{color:var(--muted)}
.tramos li.vivo > i{background:var(--ok)}
.tramos li div{display:flex;flex-direction:column;gap:2px}
.tramos strong{font-size:14px;font-variant-numeric:tabular-nums}
.tramos .lbl{font-size:12px}
.tramos-pie{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.estado-vivo{display:inline-flex;align-items:center;gap:6px;font-size:13px}
.estado-vivo i{width:7px;height:7px;border-radius:50%;background:var(--ok)}

/* =====================================================================
   PÁGINA: /equipo (design/Equipo.dc.html)
   ===================================================================== */
.persona{display:flex;align-items:center;gap:10px}
.tag-fuerte{background:var(--strong);color:#FFFFFF}
.estado{display:inline-flex;align-items:center;gap:6px;font-size:13px}
.estado i{width:7px;height:7px;border-radius:50%;flex:none}
.estado.trabajando i{background:var(--ok)}
.estado.foco i{background:var(--azul)}
.estado.inactivo{color:var(--muted2)}
.estado.inactivo i{border:1.5px solid var(--line2)}
.estado.desactivado{color:var(--muted2)}
.estado.desactivado i{background:var(--line)}
.acciones-fila{display:flex;gap:6px;justify-content:flex-end;align-items:center}
.tbl-compacta th,.tbl-compacta td{padding-left:8px;padding-right:8px}
.tbl-compacta th:first-child,.tbl-compacta td:first-child{padding-left:0}
.tbl-compacta th:last-child,.tbl-compacta td:last-child{padding-right:0}
.chico-round{width:36px;height:36px;background:var(--surface);color:var(--muted)}
.chico-round:hover{color:var(--ink);background:var(--line)}
.agencia-campos{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:10px}
@media (max-width:1300px){.agencia-campos{grid-template-columns:1fr}}
.fila-apagada td{opacity:.55}
.celda-extra{font-size:11.5px;color:var(--brand-ink);font-weight:700}
.semana-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.semana-nav .round{width:40px;height:40px;background:var(--surface)}
.semana-nav .round:disabled{opacity:.4;cursor:default}

.pendientes{display:flex;flex-direction:column;gap:10px}
.pendiente{padding:14px;display:flex;flex-direction:column;gap:8px}
.pendiente-cab{display:flex;align-items:center;gap:10px;font-size:14px}
.pendiente-txt{font-size:13px;line-height:1.45;color:var(--ink2);overflow-wrap:anywhere}
.pendiente-acc{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.pendiente .ghost{background:var(--card)}
.av-chico{width:28px;height:28px;font-size:11px}
.av-vacio{background:var(--card);color:var(--muted);border:1px dashed var(--line2)}

.clave-card{display:flex;flex-direction:column;gap:12px;box-shadow:inset 0 0 0 2px var(--azul)}
.clave-valor{display:flex;align-items:center;gap:8px;background:var(--surface);border-radius:14px;padding:6px 6px 6px 16px}
.clave-valor code{flex:1;min-width:0;font-size:16px;letter-spacing:.06em;overflow-wrap:anywhere}
.clave-valor .ghost{background:var(--card)}

.modal-form{display:flex;flex-direction:column;gap:16px;max-width:520px}
.modal-acciones{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:4px}
.check-fila{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer}
.check-fila input{width:18px;height:18px;accent-color:var(--azul)}

/* "¿Seguís ahí?" (common.js): aviso de inactividad con cuenta de 2 min. */
#sigueModal{z-index:180}
.sigue-modal{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;max-width:400px;padding:28px}
.sigue-modal h3{margin:4px 0 0;font-family:var(--font-display);font-size:22px}
.sigue-modal .lbl{margin:0;line-height:1.5}
.sigue-icono{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--tint);color:var(--brand-ink);animation:sigue-campana 1.2s ease-in-out 2}
@keyframes sigue-campana{0%,100%{transform:rotate(0)}15%{transform:rotate(14deg)}30%{transform:rotate(-12deg)}45%{transform:rotate(8deg)}60%{transform:rotate(-4deg)}}
.sigue-cuenta{font-size:44px;color:var(--brand-ink);margin-top:6px;font-variant-numeric:tabular-nums}
.sigue-barra{width:100%;height:6px;border-radius:3px;background:var(--surface);overflow:hidden}
.sigue-barra span{display:block;height:100%;background:var(--azul);transform-origin:left;transition:transform 1s linear}
.sigue-acciones{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:10px}
.sigue-acciones .cta,.sigue-acciones .ghost{width:100%}

/* Modales: el fondo funde y la caja sube un poco. */
.modal-fondo:not([hidden]){animation:fondo-entra .2s ease}
.modal-fondo:not([hidden]) .modal{animation:panel-abre .25s cubic-bezier(.22,.8,.24,1)}
@keyframes fondo-entra{from{opacity:0}}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .s3{grid-column:span 6}
  .s4,.s6,.s8{grid-column:span 12}
}
@media (max-width:640px){
  .s3,.s4,.s6,.s8{grid-column:span 12}
  .pagina{padding:8px 8px 88px}
  .marco{padding:18px;border-radius:24px;min-height:0}
  .hdr-logo{width:auto}
  .hdr-titulo{font-size:24px}
  .hdr-acciones{flex:1 1 100%;flex-wrap:nowrap}
  .buscador{min-width:0;flex:1 1 auto}
  .f2{grid-template-columns:1fr}

  /* El riel pasa a ser una barra fija abajo. */
  .riel,.riel.expandido{
    position:fixed;left:8px;right:8px;bottom:8px;top:auto;z-index:90;
    flex-direction:row;justify-content:space-around;min-height:0;height:64px;
    padding:0 6px;border-radius:999px;box-shadow:0 10px 30px rgba(11,12,12,.18);
  }
  .riel .riel-grupo,.riel.expandido .riel-grupo{flex-direction:row;width:auto;gap:2px;align-items:center}
  .riel-abajo{margin-top:0}
  .riel .riel-item,.riel.expandido .riel-item{width:44px;padding:0;justify-content:center;border-radius:50%}
  .riel .riel-txt,.riel .riel-num{display:none !important}
  .riel.expandido .riel-item .dot{opacity:1}
  .riel .riel-item .dot{left:auto;right:9px}
  .riel-toggle,.riel-avlink{display:none !important}
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;scroll-behavior:auto !important}
  .sk::after{animation:none}
  .sk{animation:sk-pulso 1.6s ease-in-out infinite}
  .aparece,.campana-panel:not([hidden]){animation:none}
}