/* Inicio premium (2-oct-2026) — archivo COMÚN e IDÉNTICO en Operativa, Comercial, Financiera, Jurídica y
   SGS Administrativa (fuente: E:\CODE\ux-apps\comun\inicio.css). Se carga DESPUÉS de ds.css. Todo cuelga de
   `.in-on` (lo pone inicio.js en <html>): sin el script, el Inicio queda como antes. Solo cambia el aspecto. */
.in-on{
  --in-tinta:#0f1b2d; --in-texto:#1e293b; --in-suave:#64748b; --in-tenue:#94a3b8;
  --in-borde:#e4e9f0; --in-fondo:#f5f7fa; --in-sup:#fff;
  --in-navy:#132c47; --in-navy2:#1c3f60; --in-rojo:#d92d20;
  --in-r:18px; --in-r-sm:12px;
  --in-sombra:0 1px 2px rgba(15,27,45,.04),0 1px 3px rgba(15,27,45,.04);
  --in-sombra-hover:0 1px 2px rgba(15,27,45,.04),0 14px 32px -14px rgba(15,27,45,.28);
}

/* SGS Administrativa conserva su color de marca */
.in-on.in-sgs{--in-navy:#16302f;--in-navy2:#22414a}
.in-on.in-sgs .in-hero{background:radial-gradient(120% 140% at 100% 0%,#2f6b5e 0%,rgba(47,107,94,0) 55%),linear-gradient(135deg,var(--in-navy) 0%,var(--in-navy2) 100%)}

/* APP Bruno conserva su oliva; no tiene contadores por módulo → sin «por atender» */
.in-on.in-bruno{--in-navy:#2a3420;--in-navy2:#445535}
.in-on.in-bruno .in-hero{background:radial-gradient(120% 140% at 100% 0%,#7a8c57 0%,rgba(122,140,87,0) 55%),linear-gradient(135deg,var(--in-navy) 0%,var(--in-navy2) 100%)}
.in-on.in-bruno .in-st-at{display:none}
.in-on .in-hero > .in-logo{flex:0 0 auto;align-self:center;height:72px;width:auto;padding:8px 12px;margin-right:-6px;border-radius:16px;background:#fff;box-shadow:0 6px 18px -8px rgba(0,0,0,.45)}
.in-on .in-hero:has(> .in-logo) > .in-hero-txt{flex:1 1 auto}
.in-on .home-wrap.in-home > .home-hero.in-vacio{display:none}
/* Sin paneles (Bruno): la rejilla va suelta dentro del Inicio */
.in-on .home-wrap.in-home{--ac:#5c6b7a;--ac-cl:#eef1f5}
.in-on.in-bruno .home-wrap.in-home{--ac:#445535;--ac-cl:#eceee4}
.in-on :is(#in-id,body) .home-wrap.in-home > .home-grid.home-grid:not(#homeGrid){margin-top:24px}
.in-on .home-wrap.in-home .hpe-barra:empty{display:none}

/* ── Contenedor ─────────────────────────────────────────────────────────── */
.in-on :is(#in-id,body) .home-wrap.in-home{max-width:1240px;margin:0 auto;padding:4px 0 40px}
.in-on .panel:has(> .home-wrap.in-home){background:transparent;border:0;box-shadow:none;padding:0}
/* Comercial: en el Inicio la barra solo repetía «Inicio» y la campana de tareas (el widget ya está debajo). */
.in-on .content:has(> .panel > .home-wrap.in-home) > .topbar{display:none}
.in-on .content:has(> .panel > .home-wrap.in-home) > .estado:empty{display:none}
.in-on :is(#in-id,body) .home-wrap.in-home > .hp-top.in-vacio{display:none}
.in-on :is(#in-id,body) .home-wrap.in-home #homeGrid.home-grid{display:block}

/* ── Cabecera ───────────────────────────────────────────────────────────── */
.in-on .in-hero{position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding:28px 30px;border-radius:22px;color:#fff;isolation:isolate;
  background:radial-gradient(120% 140% at 100% 0%,#2b5f8e 0%,rgba(43,95,142,0) 55%),linear-gradient(135deg,var(--in-navy) 0%,var(--in-navy2) 100%);
  box-shadow:0 20px 40px -24px rgba(19,44,71,.55)}
.in-on .in-hero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:28px 28px;-webkit-mask-image:linear-gradient(105deg,transparent 35%,#000 95%);mask-image:linear-gradient(105deg,transparent 35%,#000 95%)}
.in-on .in-hero::after{content:"";position:absolute;right:-60px;bottom:-90px;width:260px;height:260px;border-radius:50%;z-index:-1;
  border:1px solid rgba(255,255,255,.10);box-shadow:0 0 0 40px rgba(255,255,255,.025),0 0 0 80px rgba(255,255,255,.02)}
.in-on .in-hero-txt{min-width:0}
.in-on .in-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.in-on .in-eyebrow .in-app:empty{display:none}
.in-on .in-eyebrow .in-app:not(:empty)+.in-fecha::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;margin:0 8px 2px 0;vertical-align:middle;opacity:.7}
.in-on .in-eyebrow .in-fecha{letter-spacing:.02em;text-transform:none;font-weight:500}
.in-on .in-sal :is(h2,#homeSaludo,.home-saludo){margin:10px 0 4px !important;font-size:32px;line-height:1.12;font-weight:700;letter-spacing:-.025em;color:#fff !important}
.in-on .in-sub :is(p,#homeSub,.home-sub){margin:0 !important;font-size:15px !important;color:rgba(255,255,255,.72) !important}
.in-on .in-hero-der{display:flex;flex-direction:column;align-items:flex-end;gap:14px;flex:0 0 auto}
.in-on .in-stats{display:flex;gap:10px}
.in-on .in-stat{min-width:104px;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.in-on .in-stat b{display:block;font-size:26px;line-height:1.1;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.in-on .in-stat span{display:block;margin-top:2px;font-size:12px;color:rgba(255,255,255,.66)}
.in-on .in-st-at:not(.al-dia) b{color:#ffb4ab}
.in-on .in-st-at.al-dia b{color:#86efac}
.in-on .in-acc:empty{display:none}
.in-on .in-acc :is(button,.btn){margin:0;min-height:36px;padding:7px 14px;border-radius:999px;font-size:13px;font-weight:600;
  background:rgba(255,255,255,.10) !important;color:#fff !important;border:1px solid rgba(255,255,255,.22) !important;box-shadow:none !important;cursor:pointer}
.in-on .in-acc :is(button,.btn):hover{background:rgba(255,255,255,.18) !important}
.in-on .in-acc .hidden{display:none !important}

/* ── Requiere atención ──────────────────────────────────────────────────── */
.in-on .in-atencion{margin-top:18px}
.in-on .in-at-cab{display:flex;align-items:center;gap:8px;margin:0 2px 10px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--in-suave)}
.in-on .in-at-pulso{width:8px;height:8px;border-radius:50%;background:var(--in-rojo);box-shadow:0 0 0 0 rgba(217,45,32,.45);animation:in-pulso 2s infinite}
@keyframes in-pulso{70%{box-shadow:0 0 0 8px rgba(217,45,32,0)}100%{box-shadow:0 0 0 0 rgba(217,45,32,0)}}
.in-on .in-at-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.in-on .in-at{display:flex;align-items:center;gap:12px;width:100%;min-height:62px;margin:0;padding:10px 14px;text-align:left;cursor:pointer;
  background:var(--in-sup);border:1px solid var(--in-borde);border-left:3px solid var(--in-rojo);border-radius:var(--in-r-sm);box-shadow:var(--in-sombra);
  font:inherit;color:var(--in-texto);transition:transform .15s ease,box-shadow .15s ease}
.in-on .in-at:hover{transform:translateY(-1px);box-shadow:var(--in-sombra-hover)}
.in-on .in-at-ico{flex:0 0 auto;width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#fef3f2;font-size:18px}
.in-on .in-at-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.in-on .in-at-t b{font-size:14px;font-weight:600;color:var(--in-tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.in-on .in-at-t small{font-size:12.5px;color:var(--in-suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.in-on .in-at-n{flex:0 0 auto;min-width:30px;height:26px;padding:0 9px;border-radius:999px;background:var(--in-rojo);color:#fff;font-size:13px;font-weight:700;line-height:26px;text-align:center;font-variant-numeric:tabular-nums}

/* ── Mis tareas pendientes (widget común y el de Operativa) ─────────────── */
.in-on :is(#in-id,body) .home-wrap.in-home :is(.tw-home,.ta-home):not([hidden]):not(.hidden){max-width:none;margin-top:18px;background:var(--in-sup);border:1px solid var(--in-borde);border-radius:var(--in-r);box-shadow:var(--in-sombra);padding:18px 20px}
.in-on :is(#in-id,body) .home-wrap.in-home .tw-home[hidden]{display:none !important}
.in-on :is(#in-id,body) .home-wrap.in-home :is(.tw-cab,.ta-home-cab) b{font-size:15px;font-weight:700;color:var(--in-tinta);letter-spacing:-.01em}

/* ── Paneles ────────────────────────────────────────────────────────────── */
.in-on :is(#in-id,body) .home-wrap.in-home .hp-panel{--ac:#1c3f60;--ac-cl:#eef3f8;margin-top:30px;padding:0;background:transparent;border:0;border-radius:0}
.in-on :is(#in-id,body) .home-wrap.in-home .hp-panel.azul{--ac:#1c3f60;--ac-cl:#eaf1f8}
.in-on :is(#in-id,body) .home-wrap.in-home .hp-panel.verde{--ac:#157347;--ac-cl:#e7f5ed}
.in-on :is(#in-id,body) .home-wrap.in-home .hp-panel.morado{--ac:#6c3fb5;--ac-cl:#f1ebfb}
.in-on :is(#in-id,body) .home-wrap.in-home .hp-panel.naranja{--ac:#b45309;--ac-cl:#fdf1e1}
.in-on :is(#in-id,body) .home-wrap.in-home .hp-panel.rojo{--ac:#b42318;--ac-cl:#fdecea}
.in-on :is(#in-id,body) .home-wrap.in-home .hp-panel.gris,.in-on :is(#in-id,body) .home-wrap.in-home .hp-panel.otros{--ac:#5c6b7a;--ac-cl:#eef1f5}
.in-on :is(#in-id,body) .home-wrap.in-home .hp-cab{display:flex;align-items:center;gap:10px;margin:0 2px 14px}
.in-on :is(#in-id,body) .home-wrap.in-home .hp-cab::after{content:"";flex:1 1 auto;height:1px;background:var(--in-borde);margin-left:6px}
.in-on :is(#in-id,body) .home-wrap.in-home .hp-cab .punto{width:4px;height:16px;border-radius:4px;background:var(--ac)}
.in-on :is(#in-id,body) .home-wrap.in-home .hp-cab h3{margin:0;font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--in-texto)}
.in-on :is(#in-id,body) .home-wrap.in-home .hp-panel.otros .hp-cab h3{color:var(--in-suave)}
.in-on :is(#in-id,body) .home-wrap.in-home .hp-cab .n{min-width:22px;padding:1px 8px;border-radius:999px;background:var(--ac-cl);color:var(--ac);font-size:12px;font-weight:700;text-align:center}

/* ── Tarjetas de módulo ─────────────────────────────────────────────────── */
.in-on :is(#in-id,body) .home-wrap.in-home .home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:0}
.in-on :is(#in-id,body) .home-wrap.in-home .home-grid .home-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:0;min-height:138px;
  margin:0;padding:18px 18px 16px;text-align:left;font:inherit;cursor:pointer;
  background:var(--in-sup);border:1px solid var(--in-borde);border-top:1px solid var(--in-borde);border-radius:var(--in-r);box-shadow:var(--in-sombra);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.in-on :is(#in-id,body) .home-wrap.in-home .home-grid .home-card:hover{transform:translateY(-2px);box-shadow:var(--in-sombra-hover);border-color:color-mix(in srgb,var(--ac) 35%,var(--in-borde))}
.in-on :is(#in-id,body) .home-wrap.in-home .home-grid .home-card:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 30%,transparent)}
.in-on :is(#in-id,body) .home-wrap.in-home .home-grid .home-card::after{content:"";position:absolute;right:16px;bottom:16px;width:28px;height:28px;border-radius:50%;
  background:var(--ac-cl) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/14px no-repeat;
  opacity:0;transform:translateX(-6px);transition:opacity .18s ease,transform .18s ease}
.in-on :is(#in-id,body) .home-wrap.in-home .home-grid .home-card:hover::after{opacity:1;transform:none}
.in-on :is(#in-id,body) .home-wrap.in-home .home-grid .home-card .hc-ico{width:46px;height:46px;display:grid;place-items:center;flex:0 0 auto;margin:0;
  border-radius:14px;font-size:23px;line-height:1;background:var(--ac-cl);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ac) 12%,transparent)}
.in-on :is(#in-id,body) .home-wrap.in-home .home-grid .home-card .hc-tit{margin:14px 0 0;font-size:15.5px;line-height:1.3;font-weight:650;letter-spacing:-.01em;color:var(--in-tinta)}
.in-on :is(#in-id,body) .home-wrap.in-home .home-grid .home-card :is(.hc-desc,.hc-sub){margin:4px 0 0;font-size:12.5px;line-height:1.45;color:var(--in-suave);padding-right:28px}
.in-on :is(#in-id,body) .home-wrap.in-home .home-grid .home-card .hc-tit{display:block}
.in-on :is(#in-id,body) .home-wrap.in-home .home-grid .home-card{text-decoration:none;color:inherit}
.in-on :is(#in-id,body) .home-wrap.in-home .home-grid .home-card .hc-desc:empty{display:none}
.in-on :is(#in-id,body) .home-wrap.in-home .home-grid .home-card .hc-nivel{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding:12px 0 0;
  background:transparent !important;color:var(--in-suave);font-size:12px;font-weight:500;border-radius:0;line-height:1.2}
.in-on :is(#in-id,body) .home-wrap.in-home .home-grid .home-card .hc-nivel::before{content:"";width:6px;height:6px;border-radius:50%;background:#94a3b8}
.in-on :is(#in-id,body) .home-wrap.in-home .home-grid .home-card .hc-nivel[style*="1e7e34"]::before{background:#16a34a}
.in-on :is(#in-id,body) .home-wrap.in-home .home-grid .home-card .hc-nivel[style*="6c3fb5"]::before{background:#7c5cc4}
.in-on :is(#in-id,body) .home-wrap.in-home .home-grid .home-card .hc-badge{position:absolute;top:16px;right:16px;min-width:26px;height:24px;padding:0 8px;border-radius:999px;
  background:var(--in-rojo);color:#fff;font-size:12.5px;font-weight:700;line-height:24px;text-align:center;box-shadow:0 4px 10px -3px rgba(217,45,32,.55);font-variant-numeric:tabular-nums}
.in-on :is(#in-id,body) .home-wrap.in-home .home-grid .home-card.admin{background:linear-gradient(180deg,#fff,#f8fafc);border-style:dashed;border-color:#cfd8e3}

/* ── Celular primero ────────────────────────────────────────────────────── */
@media (max-width:760px){
  .in-on :is(#in-id,body) .home-wrap.in-home{padding:0 0 28px}
  .in-on .in-hero{flex-direction:column;align-items:stretch;gap:16px;padding:20px 18px;border-radius:18px}
  .in-on .in-sal :is(h2,#homeSaludo,.home-saludo){font-size:25px;margin-top:8px !important}
  .in-on .in-sub :is(p,#homeSub,.home-sub){font-size:14px !important}
  .in-on .in-hero-der{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
  .in-on .in-stats{flex:1 1 auto}
  .in-on .in-stat{flex:1 1 0;min-width:0;padding:10px 12px}
  .in-on .in-stat b{font-size:22px}
  .in-on .in-at-lista{grid-template-columns:1fr}
  .in-on :is(#in-id,body) .home-wrap.in-home .hp-panel{margin-top:24px}
  .in-on :is(#in-id,body) .home-wrap.in-home .home-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .in-on :is(#in-id,body) .home-wrap.in-home .home-grid .home-card{min-height:118px;padding:14px 14px 12px;border-radius:16px}
  .in-on :is(#in-id,body) .home-wrap.in-home .home-grid .home-card .hc-ico{width:40px;height:40px;font-size:20px;border-radius:12px}
  .in-on :is(#in-id,body) .home-wrap.in-home .home-grid .home-card .hc-tit{margin-top:12px;font-size:14.5px;overflow-wrap:anywhere}
  .in-on :is(#in-id,body) .home-wrap.in-home .home-grid .home-card .hc-desc{display:none}
  .in-on :is(#in-id,body) .home-wrap.in-home .home-grid .home-card .hc-sub{font-size:12px;padding-right:0}
  .in-on .in-hero > .in-logo{height:48px;padding:6px 8px;align-self:flex-start;border-radius:12px}
  .in-on :is(#in-id,body) .home-wrap.in-home .home-grid .home-card::after{display:none}
  .in-on :is(#in-id,body) .home-wrap.in-home .home-grid .home-card .hc-badge{top:12px;right:12px}
  .in-on :is(#in-id,body) .home-wrap.in-home :is(.tw-home,.ta-home):not([hidden]):not(.hidden){padding:14px 14px;border-radius:16px}
}
@media (prefers-reduced-motion:reduce){
  .in-on .in-at-pulso{animation:none}
  .in-on :is(#in-id,body) .home-wrap.in-home .home-grid .home-card,.in-on .in-at{transition:none}
}