/* ===== Navegacion entre apps ===== */
.app-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.app-btn {
  flex: 1;
  text-align: center;
  padding: 14px 20px;
  border-radius: 12px;
  border: 2px solid var(--ln);
  background: var(--sf);
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
  font-size: 16px;
  transition: 0.15s;
}
.app-btn:hover { background: var(--bg); }
.app-btn.active {
  background: var(--ac);
  border-color: var(--ac);
  color: var(--on);
}

/* ===== Variables de tema ===== */
:root{--bg:#EDF1F7;--sf:#fff;--ink:#14202E;--mu:#5A6878;--ln:#D9E0EA;--ac:#1F4FD8;--on:#fff;--AZ:#C0328A;--MS:#0B7F75;--JA:#6B7280;--PL:#5757D6;--AM:#E9A400;--RP:#5E6A77}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0E1520;--sf:#172130;--ink:#E8EDF3;--mu:#93A1B1;--ln:#293648;--ac:#8AA6FF;--on:#0E1520;--AZ:#F277BC;--MS:#2DD4BF;--JA:#9CA3AF;--PL:#9A9AFF;--AM:#F5B921;--RP:#9AA7B5}}
:root[data-theme="dark"]{--bg:#0E1520;--sf:#172130;--ink:#E8EDF3;--mu:#93A1B1;--ln:#293648;--ac:#8AA6FF;--on:#0E1520;--AZ:#F277BC;--MS:#2DD4BF;--JA:#9CA3AF;--PL:#9A9AFF;--AM:#F5B921;--RP:#9AA7B5}

/* ===== Base ===== */
html{scroll-padding-top:env(safe-area-inset-top,0px); overflow-x: hidden;}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.5 system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;padding:28px clamp(14px,4vw,48px) 40px; max-width:1240px; margin:0 auto; overflow-x: hidden;}
h1,h2,h3,.big{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; font-weight:800; letter-spacing:-.02em;}
h1{font-size:clamp(28px,4.5vw,44px);line-height:1.1; margin-top: 20px;}
h2{font-size:22px;}
h3{font-size:15px;font-weight:600;margin:0 0 10px; letter-spacing:normal;}

/* ===== Pestanas ===== */
.tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--ln);padding:0 4px; scrollbar-width: none; margin-top: 22px;}
.tabs::-webkit-scrollbar{display: none;}
.tab{font:600 14px inherit;font-family:inherit;padding:10px 20px;border:1px solid transparent;border-bottom:0;border-radius:12px 12px 0 0;background:transparent;color:var(--mu);cursor:pointer;white-space:nowrap}
.tab[aria-selected=true]{background:var(--sf);border-color:var(--ln);color:var(--ink);position:relative;top:1px;box-shadow:inset 0 3px 0 var(--ac)}
.panel{background:var(--sf);border:1px solid var(--ln);border-top:0;border-radius:0 0 16px 16px;padding:clamp(16px,3vw,28px); overflow: hidden;}
:focus-visible{outline:3px solid var(--ac);outline-offset:2px}

/* ===== Cabecera y selector de mes ===== */
.hd{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-bottom:16px}
.mos{display:flex;flex-wrap:wrap;gap:6px; align-items: center;}
.mo{font:600 13px inherit;font-family:inherit;padding:5px 12px;border-radius:99px;border:1px solid var(--ln);background:transparent;color:var(--ink);cursor:pointer}
.mo[aria-pressed=true]{background:var(--ac);border-color:var(--ac);color:var(--on)}
.yr-btn{font:800 14px inherit;font-family:inherit;padding:4px 10px;border-radius:99px;border:1px solid var(--ln);background:var(--bg);color:var(--ink);cursor:pointer; transition: 0.2s;}
.yr-btn:hover{background:var(--ln);}
.yr-label{font-weight:800; font-size: 15px; margin: 0 4px; min-width: 44px; text-align: center;}
.year-nav-btn {
  font: 800 13px inherit;
  font-family: inherit;
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid var(--ln);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: 0.2s;
}
.year-nav-btn:hover { background: var(--ln); }

/* ===== Contenedor del calendario ===== */
.sc { overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; max-width: 100%; scrollbar-width: thin; }
.sc::-webkit-scrollbar { height: 6px; }
.sc::-webkit-scrollbar-track { background: var(--bg); border-radius: 4px; }
.sc::-webkit-scrollbar-thumb { background: var(--ln); border-radius: 4px; }

/* ===== Grid del calendario ===== */
.cal { display: grid; gap: 3px; align-items: center; width: calc(70px + var(--n) * 32px); min-width: 100%; }
.cal{grid-template-columns:70px repeat(var(--n), minmax(26px, 1fr));}
.cl{font-size:12px;font-weight:700;color:var(--mu)}
.d{text-align:center;font-size:11px;color:var(--mu);border-radius:5px;padding:1px 0}
.d.t{background:var(--ac);color:var(--on);font-weight:700}
.d.we{background:color-mix(in srgb,var(--ln) 60%,transparent);color:var(--mu);font-weight:700}

/* ===== Celdas ===== */
.ch,.e{height:30px;border-radius:7px;display:grid;place-items:center;font-size:11px;font-weight:700}
.e{background:var(--bg);opacity:.7}
.ch{background:var(--c);color:var(--on)}

/* Colores de las personas (OPS) */
.AZ{--c:var(--AZ)}.MS{--c:var(--MS)}.JA{--c:var(--JA)}.ch.JA{color:#fff}.PL{--c:var(--PL)}.AM{--c:var(--AM)}.ch.AM{color:#241800}.RP{--c:var(--RP)}.X{--c:var(--mu)}

/* Festivo rayado (OPS) */
.ch.F{background:repeating-linear-gradient(45deg,var(--ln) 0 4px,transparent 4px 8px);color:var(--mu)}

/* Vacaciones en OPS (fondo transparente + texto blanco) */
.ch.V{
  color:#fff;
  background:color-mix(in srgb,var(--c) 30%,var(--sf));
  box-shadow:inset 0 0 0 2px var(--c);
  outline:2px dashed color-mix(in srgb,var(--c) 70%,#fff);
  outline-offset:-2px;
}

/* ===== Layout de dos columnas ===== */
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:22px}
.cd{border:1px solid var(--ln);border-radius:14px;padding:16px}

/* ===== Leyendas ===== */
.lg{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:16px;font-size:13px}
.lg span{display:flex;align-items:center;gap:7px}
.lg .ch{width:28px;height:24px}
.rr{display:flex;align-items:center;gap:4px;margin:5px 0;font-size:13px}
.rr b{width:56px;color:var(--mu)}.rr .ch{width:30px;height:26px}

/* ===== Resumen del mes ===== */
.sum-list{list-style:none;padding:0;margin:0}
.sum-item{display:flex;align-items:flex-start;gap:10px;font-size:13px;margin-bottom:8px; line-height: 1.4;}
.sum-day{font-weight:700;color:var(--ac);min-width:24px;text-align:right}
.sum-txt{color:var(--ink)}
.sum-txt b{color:var(--mu);font-weight:400}
.sum-empty{font-size:13px;color:var(--mu);font-style:italic}
.sum-sec{margin-bottom:18px;}
.sum-sec:last-child{margin-bottom:0;}

/* ===== Planificacion / Operaciones ===== */
.ops{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.op{border:1px solid var(--ln);border-radius:14px;padding:16px;border-top:5px solid var(--ac)}
.op .big{font-size:28px;font-weight:800;line-height:1; letter-spacing:normal;}
.op small{display:block;color:var(--mu);margin:2px 0 12px}
.tag{display:inline-block;padding:3px 10px;margin:0 6px 6px 0;border-radius:99px;background:var(--bg);font-size:13px;font-weight:600}
.sec{margin-top:28px}

/* ===== Franjas horarias ===== */
.trk{position:relative;height:28px;background:var(--bg);border-radius:8px}
.seg{position:absolute;top:3px;bottom:3px;border-radius:6px;background:var(--ac);color:var(--on);font-size:11px;font-weight:700;display:grid;place-items:center}
.hr{display:grid;grid-template-columns:130px 1fr;gap:12px;align-items:center;margin:8px 0;font-size:13px}
.tk{display:grid;grid-template-columns:130px 1fr;gap:12px;font-size:11px;color:var(--mu)}
.tk div{display:flex;justify-content:space-between}

/* ===== Informes ===== */
.inf{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.pc{border:1px solid var(--ln);border-radius:14px;padding:16px;border-top:5px solid var(--c)}
.pc h3{display:flex;justify-content:space-between}
.pc h3 span{color:var(--mu);font-weight:400}

/* ===== Nota de carga ===== */
#loadNote{color:var(--mu);font-size:12px;margin:0 0 14px}
#loadNote .err{color:var(--AZ);font-weight:600}

/* ===== Responsive ===== */
@media (max-width:600px){.hr,.tk{grid-template-columns:90px 1fr}}