/* ═══════════════════════════════════════════════════════════════════════════
   PULIDO PREMIUM — Portal Corporativo (sep-2026)
   Capa de PRESENTACIÓN que se carga DESPUÉS de ds.css. Eleva el "front door" de
   Artium sin cambiar ninguna función y conservando la familia visual navy.
   Pieza-firma: la banda de bienvenida (.pf-hero). Todo lo demás queda quieto.
   No usa tipografías externas (regla Artium: solo Microsoft → Segoe UI).
   Fuente editable: E:\CODE\ux-apps\portal\premium.css
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --pf-navy:#1c3f60;
  --pf-navy-deep:#0f2942;
  --pf-line:rgba(28,63,96,.10);
  --pf-hero-fg:#eaf1f8;
}

/* ── Fondo con un lavado ambiental muy sutil arriba ── */
body{
  background:
    radial-gradient(1100px 420px at 50% -240px, rgba(28,63,96,.07), transparent 70%),
    var(--bg);
  background-attachment:fixed;
}

/* ── Barra superior: esmerilada, con logo en degradado ── */
.header{
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(1.5) blur(10px);
  backdrop-filter:saturate(1.5) blur(10px);
  border-bottom:1px solid var(--pf-line);
}
.header .logo{
  background:linear-gradient(135deg,#2a527c,#132c44);
  box-shadow:0 2px 6px rgba(15,41,66,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
.header .titulo{letter-spacing:-.01em}

/* ── PIEZA-FIRMA: banda de bienvenida ── */
.pf-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin:2px 0 26px;
  padding:26px 30px;
  border-radius:18px;
  color:var(--pf-hero-fg);
  background:linear-gradient(135deg,#244b70 0%,#173650 55%,#0f2942 100%);
  box-shadow:0 14px 32px -14px rgba(15,41,66,.6), inset 0 1px 0 rgba(255,255,255,.07);
}
/* Textura tenue de "fachada" (retícula de ventanas), difuminada hacia la esquina */
.pf-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:46px 46px;
  -webkit-mask-image:radial-gradient(130% 130% at 88% -20%, #000 0%, transparent 62%);
          mask-image:radial-gradient(130% 130% at 88% -20%, #000 0%, transparent 62%);
}
/* Halo de luz cálida-fría en la esquina superior derecha */
.pf-hero::after{
  content:"";
  position:absolute; z-index:-1; top:-46%; right:-6%;
  width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle, rgba(102,158,208,.42), transparent 66%);
}
.pf-hero .pf-eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(234,241,248,.7);
}
.pf-hero .pf-greet{
  margin:7px 0 5px; font-size:27px; font-weight:800; letter-spacing:-.02em; line-height:1.14;
}
.pf-hero .pf-sub{
  margin:0; font-size:14px; line-height:1.5; color:rgba(234,241,248,.82); max-width:54ch;
}
.pf-hero .pf-meta{margin-top:16px; display:flex; gap:8px; flex-wrap:wrap}
.pf-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 12px; font-size:12.5px; font-weight:600;
  color:var(--pf-hero-fg);
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
}
.pf-chip .pf-dot{width:7px; height:7px; border-radius:50%; background:#5ee0a4; box-shadow:0 0 0 3px rgba(94,224,164,.22)}

/* Rótulo de sección sobre la grilla (la estructura informa) */
.pf-seclabel{
  display:flex; align-items:baseline; gap:10px;
  margin:0 2px 14px; font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--texto-sec);
}
.pf-seclabel::after{content:""; flex:1; height:1px; background:var(--pf-line)}

/* La antigua línea "Selecciona una aplicación" la reemplaza el hero */
.pf-hero + .subtitulo{display:none}

/* ── Tarjetas de aplicación: profundidad y hover más fino ── */
.card{
  box-shadow:0 1px 2px rgba(15,23,42,.05), 0 8px 18px -14px rgba(15,23,42,.5);
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 4px 10px rgba(15,23,42,.07), 0 20px 38px -18px rgba(15,23,42,.55);
  border-color:#c3cdd9;
}
/* Brillo y profundidad sobre el header de color, sin tocar el color de marca */
.card-header{position:relative; overflow:hidden}
.card-header::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,0) 46%, rgba(0,0,0,.16));
}
.card-header svg, .card-header .emoji{position:relative; z-index:1; filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))}
.card-body .abrir{display:inline-flex; align-items:center; transition:transform .15s ease}
.card:hover .card-body .abrir{transform:translateX(3px)}

/* ── Lista de herramientas: micro-interacción ── */
.tools-titulo{display:flex; align-items:center; gap:9px}
.tools-titulo::before{
  content:""; width:4px; height:18px; border-radius:3px;
  background:linear-gradient(180deg,#2a527c,var(--pf-navy-deep));
}
.tool-flecha{transition:transform .15s ease}
.tool-item:hover .tool-flecha{transform:translate(2px,-2px)}

/* ── Footer ── */
.footer{border-top-color:var(--pf-line)}

/* ── Admin: acentos utilitarios (sin hero) ── */
.tabs{border-bottom-color:var(--pf-line)}
.panel{position:relative}
.admin-cols > div > .panel::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  border-radius:var(--radio) var(--radio) 0 0;
  background:linear-gradient(90deg,#2a527c,var(--pf-navy-deep));
  opacity:.9;
}

/* ── Celular ── */
@media(max-width:760px){
  .pf-hero{padding:20px 18px; border-radius:16px; margin:0 0 18px}
  .pf-hero .pf-greet{font-size:21px}
  .pf-hero .pf-sub{font-size:13px}
  .pf-hero::after{width:220px; height:220px}
  .pf-seclabel{margin-bottom:10px}
}