@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&display=swap');

/* STAZ OS — tipografía provisional (Barlow) hasta que se fijen las del manual de marca */
:root{
  --ui: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ink:#0c0c0e;          /* fondo del escritorio */
  --panel:#17171b;        /* chrome de ventanas y barra */
  --panel-2:#202027;
  --line:#2f2f37;
  --paper:#ffffff;        /* área de contenido */
  --text:#15151a;
  --text-dim:#6d6d78;
  --on-dark:#f0f0f2;
  --on-dark-dim:#9d9da7;
  --red:#BC0309;
  --red-hi:#e33a40;
  --ok:#2f8f52;
  --radius:10px;
  --bar:52px;
  --shadow:0 18px 48px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
[hidden]{display:none !important}   /* gana a las reglas de display de los paneles */
html,body{height:100%}
body{margin:0;font-family:var(--ui);color:var(--on-dark);background:var(--ink);
     -webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit;font-size:inherit}
:focus-visible{outline:2px solid var(--red-hi);outline-offset:2px}

/* ---------- acceso ---------- */
.login-body{display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(900px 500px at 50% 8%, #1c1c22 0%, transparent 70%),
    var(--ink);}
.login-stage{width:min(380px,100%);text-align:center}
.login-mark{width:132px;height:132px;margin-bottom:18px;
  filter:drop-shadow(0 10px 26px rgba(188,3,9,.35))}
.login-title{font-size:23px;font-weight:600;letter-spacing:.02em;margin:0}
.login-sub{margin:2px 0 26px;color:var(--on-dark-dim);font-size:15px}
.login-form{text-align:left}
.login-form label{display:block;font-size:13px;color:var(--on-dark-dim);margin:14px 0 5px}
.login-form input{width:100%;padding:11px 13px;border-radius:8px;border:1px solid var(--line);
  background:#121216;color:var(--on-dark)}
.login-form input:focus{border-color:var(--red)}
.code-input{letter-spacing:.5em;text-align:center;font-size:20px}
.login-form button{width:100%;margin-top:22px;padding:12px;border:0;border-radius:8px;
  background:var(--red);color:#fff;font-size:16px;font-weight:600;cursor:pointer}
.login-form button:hover{background:var(--red-hi)}
.login-error{background:#2c1013;border:1px solid #6d1a1f;color:#ffb9bc;
  padding:10px 12px;border-radius:8px;font-size:14px;text-align:left}
.login-back{display:block;text-align:center;margin-top:14px;color:var(--on-dark-dim);font-size:14px}

/* ---------- escritorio ---------- */
.os{overflow:hidden}
.desktop{position:fixed;inset:0 0 var(--bar) 0;
  background:
    radial-gradient(1200px 700px at 78% 18%, rgba(188,3,9,.18), transparent 62%),
    linear-gradient(180deg,#101014,#0a0a0c);}
body[data-wallpaper="liso"] .desktop{background:#0a0a0c}
body[data-wallpaper="rojo"] .desktop{background:linear-gradient(160deg,#2a0507,#0a0a0c 60%)}
.desktop::after{ /* emblema como marca de agua, discreto */
  content:'';position:absolute;right:-80px;bottom:-70px;width:520px;height:520px;pointer-events:none;
  background:url("../img/staz-logo.png") no-repeat center/contain;opacity:.055}
@media (max-width:760px){.desktop::after{width:300px;height:300px;right:-60px;bottom:-50px}}

.icons{position:absolute;inset:0;pointer-events:none}
.icons .icon{pointer-events:auto}
/* Colocación libre: cada icono lleva su posición en línea */
.icon{position:absolute;width:88px;padding:10px 6px;border:0;background:transparent;
  color:var(--on-dark);border-radius:8px;cursor:pointer;text-align:center;
  font-size:12.5px;line-height:1.25;touch-action:none;user-select:none}
.icon.arrastrando{opacity:.85;z-index:50;background:rgba(255,255,255,.14);
  box-shadow:0 8px 22px rgba(0,0,0,.4);cursor:grabbing}
/* En móvil vuelven a fluir en rejilla y no se arrastran */
.icons.flujo{position:absolute;inset:14px 10px auto 10px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:4px}
.icons.flujo .icon{position:static;width:auto;touch-action:manipulation}
.icon:hover{background:rgba(255,255,255,.08)}
.icon .gl{display:block;font-size:30px;line-height:1;margin-bottom:7px}
.icon span{display:block;word-break:break-word}

/* ---------- barra de tareas ---------- */
.taskbar{position:fixed;left:0;right:0;bottom:0;height:var(--bar);display:flex;align-items:center;
  gap:6px;padding:0 8px;background:rgba(18,18,22,.92);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);z-index:900}
.startbtn{height:38px;padding:0 10px;border:0;border-radius:8px;background:transparent;cursor:pointer;
  display:flex;align-items:center}
.startbtn img{width:28px;height:28px;display:block}
.startbtn:hover,.startbtn[aria-expanded="true"]{background:rgba(188,3,9,.22)}
.tasks{display:flex;gap:5px;flex:1;overflow:hidden}
.task{height:38px;max-width:210px;padding:0 12px;border:0;border-radius:8px;cursor:pointer;
  background:rgba(255,255,255,.06);color:var(--on-dark);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;border-bottom:2px solid transparent;font-size:14px}
.task:hover{background:rgba(255,255,255,.12)}
.task.active{background:rgba(255,255,255,.14);border-bottom-color:var(--red)}
.tray{display:flex;align-items:center;gap:4px}
.tray-btn{position:relative;height:38px;padding:0 11px;border:0;border-radius:8px;background:transparent;
  color:var(--on-dark);cursor:pointer;font-size:13px}
.tray-btn:hover{background:rgba(255,255,255,.1)}
.clock{text-align:right;line-height:1.15;font-variant-numeric:tabular-nums}
.clock small{display:block;color:var(--on-dark-dim);font-size:11px}
.bell{display:block;width:16px;height:16px;border:2px solid currentColor;border-radius:8px 8px 3px 3px;
  border-bottom-width:3px}
.dot{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--red)}

/* ---------- menú de inicio ---------- */
.startmenu{position:fixed;left:8px;bottom:calc(var(--bar) + 8px);width:340px;max-height:70vh;
  background:rgba(23,23,27,.97);backdrop-filter:blur(18px);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);z-index:950;display:flex;flex-direction:column;
  overflow:hidden}
.start-head{display:flex;gap:12px;align-items:center;padding:16px;border-bottom:1px solid var(--line)}
.start-mark{width:46px;height:46px;flex:0 0 auto}
.start-head strong{display:block;font-size:15px}
.start-head span{color:var(--on-dark-dim);font-size:12.5px}
.start-search{margin:12px 14px 6px;padding:9px 12px;border-radius:8px;border:1px solid var(--line);
  background:#121216;color:var(--on-dark)}
.start-apps{overflow:auto;padding:6px 8px 10px;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.start-app{display:flex;align-items:center;gap:9px;padding:10px;border:0;border-radius:8px;
  background:transparent;color:var(--on-dark);cursor:pointer;text-align:left;font-size:13.5px}
.start-app:hover{background:rgba(255,255,255,.09)}
.start-app .gl{font-size:19px}
.start-foot{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--line)}
.ghost{flex:1;padding:9px;border:1px solid var(--line);border-radius:8px;background:transparent;
  color:var(--on-dark);cursor:pointer;text-align:center;text-decoration:none;font-size:14px}
.ghost:hover{background:rgba(255,255,255,.08)}
.ghost.danger{color:#ff7b80;border-color:#5c1a1e}

/* ---------- avisos ---------- */
.notifpanel{position:fixed;right:8px;bottom:calc(var(--bar) + 8px);width:330px;max-height:60vh;overflow:auto;
  background:rgba(23,23,27,.97);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);z-index:950;padding:14px}
.notifpanel h3{margin:0 0 10px;font-size:15px;font-weight:600}
.notiflist{display:grid;gap:8px}
.notif{background:rgba(255,255,255,.05);border-left:3px solid var(--red);border-radius:6px;padding:9px 11px;
  font-size:13.5px}
.notif b{display:block;font-weight:600}
.notif span{color:var(--on-dark-dim)}
.empty{color:var(--on-dark-dim);font-size:13.5px;padding:8px 2px}

/* ---------- ventanas ---------- */
.win{position:absolute;min-width:320px;min-height:200px;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden}
.win.max{border-radius:0}
.win.min{display:none}
.win-bar{height:40px;display:flex;align-items:center;gap:8px;padding:0 6px 0 12px;cursor:grab;
  background:var(--panel-2);border-bottom:1px solid var(--line);user-select:none}
.win.active .win-bar{background:#26262e}
.win.active{border-color:#3d3d47}
.win-title{flex:1;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-title .gl{margin-right:7px}
.win-btns{display:flex}
.win-btns button{width:34px;height:30px;border:0;border-radius:6px;background:transparent;
  color:var(--on-dark-dim);cursor:pointer;font-size:15px;line-height:1}
.win-btns button:hover{background:rgba(255,255,255,.1);color:var(--on-dark)}
.win-btns .close:hover{background:var(--red);color:#fff}
.win-body{flex:1;overflow:auto;background:var(--paper);color:var(--text)}
.win-resize{position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize}

/* ---------- componentes de aplicación ---------- */
.pad{padding:16px}
.bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:9px 12px;
  border-bottom:1px solid #e6e6ea;background:#f6f6f8}
.btn{padding:7px 13px;border:1px solid #d5d5dc;border-radius:7px;background:#fff;color:var(--text);
  cursor:pointer;font-size:14px}
.btn:hover{background:#f0f0f3}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff}
.btn.primary:hover{background:var(--red-hi);border-color:var(--red-hi)}
.btn.danger{color:var(--red);border-color:#eccbcc}
.btn:disabled{opacity:.45;cursor:not-allowed}
.spacer{flex:1}
.crumbs{display:flex;gap:4px;align-items:center;font-size:13.5px;color:var(--text-dim);flex-wrap:wrap}
.crumbs a{color:var(--red);cursor:pointer;text-decoration:none}

.field{display:block;margin:0 0 12px}
.field > span{display:block;font-size:13px;color:var(--text-dim);margin-bottom:4px}
.field input,.field select,.field textarea{width:100%;padding:9px 11px;border:1px solid #d5d5dc;
  border-radius:7px;background:#fff;color:var(--text)}
/* Las casillas y los radios no deben estirarse al 100 %: se comían la etiqueta */
.field input[type=checkbox],.field input[type=radio],
.bar input[type=checkbox],label input[type=checkbox],label input[type=radio]{
  width:auto;min-width:0;padding:0;margin:0 7px 0 0;vertical-align:-2px;accent-color:var(--red)}
.field input[type=color]{height:40px;padding:4px 6px;cursor:pointer}
.field input[type=date],.field input[type=datetime-local]{min-height:40px}
.field textarea{min-height:120px;resize:vertical}
.row{display:flex;gap:12px}
.row > *{flex:1}
.hint{font-size:12.5px;color:var(--text-dim);margin:-6px 0 12px}
h2.sec{font-size:16px;font-weight:600;margin:22px 0 12px;padding-bottom:6px;border-bottom:1px solid #e6e6ea}
h2.sec:first-child{margin-top:0}

.grid-files{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px;padding:14px}
.fitem{padding:12px 6px;border-radius:9px;border:1px solid transparent;cursor:pointer;text-align:center;
  font-size:12.5px;word-break:break-word;background:transparent}
.fitem:hover{background:#f1f1f5}
.fitem.sel{background:#fbe9ea;border-color:#e9c3c5}
.fitem .gl{display:block;font-size:30px;margin-bottom:6px}
.fitem em{display:block;color:var(--text-dim);font-style:normal;font-size:11.5px;margin-top:2px}

table.list{width:100%;border-collapse:collapse;font-size:14px}
table.list th{text-align:left;font-weight:600;color:var(--text-dim);font-size:12.5px;
  border-bottom:1px solid #e6e6ea;padding:8px 10px}
table.list td{padding:9px 10px;border-bottom:1px solid #f0f0f3}
table.list tr:hover td{background:#fafafc}

/* calendario */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:#e6e6ea;
  border-top:1px solid #e6e6ea}
.cal-head{background:#f6f6f8;padding:7px 8px;font-size:12px;color:var(--text-dim);text-align:center}
.cal-day{background:#fff;min-height:104px;padding:6px 7px;cursor:pointer}
.cal-day:hover{background:#fafafc}
.cal-day.other{background:#fbfbfd;color:#b8b8c0}
.cal-day.today .num{background:var(--red);color:#fff;border-radius:50%;
  width:23px;height:23px;display:grid;place-items:center}
.cal-day .num{font-size:13px;font-weight:600;margin-bottom:4px}
.ev{font-size:11.5px;padding:2px 5px;border-radius:4px;color:#fff;margin-bottom:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}

/* notas y grabadora */
.split{display:flex;height:100%}
.side{width:230px;border-right:1px solid #e6e6ea;overflow:auto;background:#fafafa}
.side-item{padding:11px 13px;border-bottom:1px solid #f0f0f3;cursor:pointer;font-size:13.5px}
.side-item:hover{background:#f2f2f5}
.side-item.sel{background:#fbe9ea;box-shadow:inset 3px 0 0 var(--red)}
.side-item b{display:block;font-weight:600;margin-bottom:2px}
.side-item span{color:var(--text-dim);font-size:12px}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.editor{flex:1;border:0;padding:16px;resize:none;font-size:15px;line-height:1.6;color:var(--text)}
.editor:focus{outline:0}
.rec-status{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-dim)}
.rec-dot{width:11px;height:11px;border-radius:50%;background:#c9c9d0}
.rec-dot.on{background:var(--red);animation:pulse 1.1s infinite}
@keyframes pulse{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.rec-dot.on{animation:none}}
.timer{font-variant-numeric:tabular-nums;font-size:26px;font-weight:600;color:var(--text)}
.transcript{white-space:pre-wrap;line-height:1.6;font-size:14.5px}

/* calculadora */
.calc{padding:14px;display:flex;flex-direction:column;height:100%;background:#101014}
.calc-out{background:#000;color:#fff;border-radius:9px;padding:16px;text-align:right;margin-bottom:12px}
.calc-out .expr{color:#8a8a94;font-size:13px;min-height:18px;word-break:break-all}
.calc-out .val{font-size:34px;font-weight:600;font-variant-numeric:tabular-nums;word-break:break-all}
.calc-keys{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.calc-keys button{border:0;border-radius:9px;background:#26262e;color:#fff;font-size:19px;cursor:pointer}
.calc-keys button:hover{background:#33333d}
.calc-keys .op{background:#3a3a46}
.calc-keys .eq{background:var(--red)}
.calc-keys .eq:hover{background:var(--red-hi)}

/* visor */
.viewer{height:100%;display:flex;flex-direction:column}
.viewer iframe{flex:1;border:0;width:100%;background:#525659}
.viewer .doc{padding:26px 34px;max-width:78ch;margin:auto;line-height:1.65}
.viewer .doc table{border-collapse:collapse;font-size:13px}
.viewer .doc td,.viewer .doc th{border:1px solid #dcdce2;padding:5px 8px}
.viewer img{max-width:100%;display:block;margin:auto}
.viewer .sheet-tabs{display:flex;gap:4px;padding:8px 12px;border-top:1px solid #e6e6ea;background:#f6f6f8}

/* menú contextual y avisos flotantes */
.ctxmenu{position:fixed;z-index:1000;background:#1f1f26;border:1px solid var(--line);border-radius:9px;
  padding:5px;min-width:180px;box-shadow:var(--shadow)}
.ctxmenu button{display:block;width:100%;text-align:left;padding:8px 11px;border:0;border-radius:6px;
  background:transparent;color:var(--on-dark);cursor:pointer;font-size:13.5px}
.ctxmenu button:hover{background:rgba(255,255,255,.1)}
.ctxmenu hr{border:0;border-top:1px solid var(--line);margin:4px 0}

.toasts{position:fixed;right:14px;bottom:calc(var(--bar) + 12px);z-index:1100;display:grid;gap:8px}
.toast{background:#1f1f26;border:1px solid var(--line);border-left:3px solid var(--ok);
  padding:11px 14px;border-radius:8px;font-size:13.5px;max-width:320px;color:var(--on-dark)}
.toast.err{border-left-color:var(--red)}

/* ---------- calendario ---------- */
.win-body.appcal{display:flex;flex-direction:column;overflow:hidden}
.appcal .bar,.appcal .chips{flex:0 0 auto}
.appcal .calwrap{flex:1;min-height:0;overflow:auto}
.appcal .horas{height:100%}
.chips{display:flex;gap:6px;flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid #e6e6ea;background:#fafafc}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid #d5d5dc;
  border-radius:999px;background:#fff;color:var(--text);font-size:12.5px;cursor:pointer}
.chip i{width:9px;height:9px;border-radius:50%;display:block}
.chip.off{opacity:.42;text-decoration:line-through}
i.pt{display:inline-block;width:11px;height:11px;border-radius:50%;vertical-align:middle}
.cal-day .mas{font-size:11px;color:var(--text-dim);padding-left:2px}
.ev.conimg{display:flex;align-items:center;gap:5px;padding:2px 5px 2px 2px}
.ev.conimg span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.evimg{width:18px;height:18px;object-fit:cover;border-radius:4px;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(255,255,255,.45)}
.evh.conimg .evimg{width:26px;height:26px;border-radius:5px;float:right;margin:0 0 3px 5px}

/* vistas de semana y día */
.horas{display:flex;flex-direction:column;height:100%}
.horas-cab{display:flex;border-bottom:1px solid #e6e6ea;background:#fafafc;padding-right:8px}
.horas-cab .hcol{flex:1;text-align:center;padding:8px 4px;font-size:12.5px;color:var(--text-dim)}
.horas-cab .hcol b{color:var(--text);font-size:15px}
.horas-cab .hcol.today b{background:var(--red);color:#fff;border-radius:50%;
  display:inline-grid;place-items:center;width:25px;height:25px}
.horas-cab .gutter{flex:0 0 54px}
.horas-cuerpo{flex:1;display:flex;overflow-y:auto;position:relative}
.horas-cuerpo .gutter{flex:0 0 54px;border-right:1px solid #e6e6ea}
.hlab{font-size:11px;color:var(--text-dim);padding:2px 6px;text-align:right;box-sizing:border-box}
.dcol{flex:1;position:relative;border-right:1px solid #f0f0f3}
.hline{position:absolute;left:0;right:0;border-top:1px solid #f0f0f3}
.evh{position:absolute;border-radius:6px;padding:3px 6px;color:#fff;overflow:hidden;cursor:pointer;
  font-size:11.5px;line-height:1.3;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.evh b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evh span{opacity:.85;font-size:10.5px}
.evh.ajena{opacity:.75}
.evh.drag{opacity:.9;z-index:20;box-shadow:0 8px 20px rgba(0,0,0,.35)}

/* agenda */
.agenda h3{font-size:13.5px;color:var(--text-dim);font-weight:600;margin:20px 0 8px;
  padding-bottom:5px;border-bottom:1px solid #e6e6ea;text-transform:none}
.agenda h3:first-child{margin-top:0}
.afila{display:flex;gap:12px;align-items:center;padding:9px 4px;border-bottom:1px solid #f0f0f3;cursor:pointer}
.afila:hover{background:#fafafc}
.afila img{width:52px;height:52px;object-fit:cover;border-radius:7px;flex:0 0 auto}
.afila i{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.afila b{display:block;font-size:14.5px}
.afila span{color:var(--text-dim);font-size:12.5px}

/* ficha de la cita */
img.cover{width:100%;max-height:230px;object-fit:cover;display:block}
.miniatura{display:inline-block;margin:0 8px 8px 0;text-align:center}
.miniatura img{width:118px;height:88px;object-fit:cover;border-radius:7px;display:block;margin-bottom:4px}
.miniatura .btn{padding:3px 8px;font-size:11.5px}
.soltar{margin-top:12px;padding:14px;border:2px dashed #d5d5dc;border-radius:9px;text-align:center}
.soltar.sobre{border-color:var(--red);background:#fbe9ea}
.dias{display:flex;gap:10px;flex-wrap:wrap;margin:-4px 0 12px;font-size:13.5px;color:var(--text-dim)}
.invs{max-height:170px;min-height:52px;overflow:auto;border:1px solid #e6e6ea;
  border-radius:8px;padding:8px;background:#fafafc}
.invs .empty{padding:6px 4px}
.inv-chk{display:flex;align-items:center;padding:6px 4px;font-size:14px;border-radius:6px;cursor:pointer}
.inv-chk:hover{background:#f0f0f3}

/* panel de inicio */
.home{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.htarj{border:1px solid #e6e6ea;border-radius:10px;padding:14px 16px;background:#fff}
.htarj header{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;
  margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #f0f0f3;cursor:pointer}
.htarj header:hover{color:var(--red)}
.htarj header .gl{font-size:17px}
.hfila{display:flex;gap:9px;align-items:flex-start;padding:7px 0;border-bottom:1px solid #f6f6f8}
.hfila:last-child{border-bottom:0}
.hfila i{width:9px;height:9px;border-radius:50%;flex:0 0 auto;margin-top:5px}
.hfila b{display:block;font-size:13.5px;font-weight:600}
.hfila span{color:var(--text-dim);font-size:12px}
.barra{height:9px;background:#ececed;border-radius:5px;overflow:hidden}
.barra span{display:block;height:100%;background:var(--red)}
.catal{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}
.catal .btn:disabled{opacity:.5}

/* enlaces públicos, asuntos y buscador */
.linkrow{display:flex;gap:7px;align-items:center;flex-wrap:wrap;padding:9px 0;border-bottom:1px solid #f0f0f3}
.linkrow input{flex:1;min-width:180px;padding:7px 10px;border:1px solid #d5d5dc;border-radius:7px;
  font-size:12.5px;background:#fafafc;color:var(--text)}
.linkrow em{flex-basis:100%;font-style:normal;color:var(--text-dim);font-size:12px}
.nextbox{background:#fbe9ea;border-left:3px solid var(--red);border-radius:6px;padding:11px 13px;
  font-size:14px;line-height:1.5}
.itrow{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid #f0f0f3;font-size:14px}
.itrow a{flex:1;color:var(--red);cursor:pointer;text-decoration:none}
.itrow a:hover{text-decoration:underline}
.anot{border-left:2px solid #e6e6ea;padding:2px 0 10px 12px;margin-bottom:12px}
.anot b{font-size:13.5px}
.anot span{color:var(--text-dim);font-size:12px;margin-left:6px}
.anot p{margin:4px 0 0;white-space:pre-wrap;font-size:14px;line-height:1.55}
table.list tr.op{cursor:pointer}
.hit{display:flex;gap:12px;padding:12px 6px;border-bottom:1px solid #f0f0f3;cursor:pointer;border-radius:6px}
.hit:hover{background:#fafafc}
.hit .gl{font-size:22px;line-height:1.2}
.hit b{display:block;font-size:14.5px}
.hit span{color:var(--text-dim);font-size:12px}
.hit p{margin:5px 0 0;font-size:13px;color:var(--text-dim);line-height:1.5}
.bar label{font-size:13.5px;color:var(--text-dim)}
.bar select{padding:6px 9px;border:1px solid #d5d5dc;border-radius:7px;background:#fff;color:var(--text)}
.bar a.btn{text-decoration:none;display:inline-block}
.ev.ajena{opacity:.72;border-left:3px solid rgba(255,255,255,.75)}

/* Botón de instalación de la aplicación */
.tray-btn.install{background:var(--red);color:#fff;font-weight:600;padding:0 14px}
.tray-btn.install:hover{background:var(--red-hi)}

/* Sin retardo de 300 ms ni zoom por doble toque en los controles */
button,.btn,.icon,.fitem,.task,.tray-btn,.side-item,.start-app,.hit,a{touch-action:manipulation}

/* =========================================================
   Modo móvil: las ventanas ocupan la pantalla y no se arrastran
   ========================================================= */
@media (max-width:760px){
  :root{--bar:56px}
  .desktop{inset:0 0 calc(var(--bar) + env(safe-area-inset-bottom)) 0}

  .icon{padding:14px 4px}
  .icon .gl{font-size:32px}

  .taskbar{height:calc(var(--bar) + env(safe-area-inset-bottom));
    padding:0 6px env(safe-area-inset-bottom);gap:4px}
  .tasks{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .tasks::-webkit-scrollbar{display:none}
  .task{max-width:130px;font-size:13px}
  .startbtn img{width:30px;height:30px}
  .clock{font-size:12px}
  .clock small{display:none}

  .startmenu{left:8px;right:8px;width:auto;max-height:76vh;
    bottom:calc(var(--bar) + env(safe-area-inset-bottom) + 8px)}
  .start-apps{grid-template-columns:1fr}
  .start-app{padding:13px 12px;font-size:15px}
  .notifpanel{left:8px;right:8px;width:auto;
    bottom:calc(var(--bar) + env(safe-area-inset-bottom) + 8px)}

  /* Ventanas a pantalla completa, sin marco ni tirador */
  .win.mob{border:0;border-radius:0}
  .win.mob .win-bar{height:52px;cursor:default;padding-left:14px}
  .win.mob .win-title{font-size:16px}
  .win.mob .win-btns .mx{display:none}
  .win.mob .win-btns button{width:44px;height:40px;font-size:18px}
  .win-resize{display:none}

  /* Listas laterales: se convierten en una tira superior */
  .split{flex-direction:column}
  .side{width:auto;max-height:34%;border-right:0;border-bottom:1px solid #e6e6ea}

  /* 16 px evita que iOS haga zoom al enfocar un campo */
  input,select,textarea,.field input,.field select,.field textarea{font-size:16px}
  .bar{gap:6px;padding:8px 10px}
  .btn{padding:9px 14px}
  .grid-files{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));padding:10px}
  .cal-day{min-height:64px;padding:4px 5px}
  .horas-cab .gutter,.horas-cuerpo .gutter{flex:0 0 40px}
  .hlab{font-size:10px;padding:2px 4px}
  .afila img{width:44px;height:44px}
  .chips{padding:6px 10px}
  .miniatura img{width:96px;height:72px}
  .cal-day .num{font-size:12px}
  .ev{font-size:10.5px}
  table.list{font-size:13px}
  table.list th,table.list td{padding:7px 6px}
  .row{flex-direction:column;gap:0}
  .linkrow input{min-width:120px}
}

/* En pantallas táctiles grandes, objetivos algo mayores */
@media (pointer:coarse) and (min-width:761px){
  .fitem{padding:16px 6px}
  .btn{padding:9px 15px}
  .side-item{padding:14px 13px}
}