/* =====================================================================
   painland.css — sitio independiente painland.dinerius.com
   Se apoya en modulos-negocio.css y solo ajusta: pantalla completa,
   cabecera de marca y un acabado más premium.
   ===================================================================== */
:root{
  --pl-ink:#0D0F14; --pl-ink2:#1E1A12;
  --pl-oro:#C08A28; --pl-oro-claro:#F3D27A; --pl-oro-hondo:#9C6B14;
  --pl-fondo:#F4F0E6;
}
*{ box-sizing:border-box; }
html, body{ margin:0; height:100%; }
body.pl{
  min-height:100dvh; display:flex; flex-direction:column;
  background: radial-gradient(1200px 500px at 50% -200px, #FFFDF6 0%, var(--pl-fondo) 60%) fixed, var(--pl-fondo);
  font-family:'IBM Plex Sans',system-ui,sans-serif; color:var(--pl-ink);
  -webkit-font-smoothing:antialiased;
}

/* ---------- Cabecera de marca ---------- */
.pl-head{
  position:relative; flex:0 0 auto; color:#fff; overflow:hidden;
  background: linear-gradient(160deg, var(--pl-ink2) 0%, var(--pl-ink) 65%);
  border-bottom:1px solid rgba(243,210,122,0.35);
  box-shadow:0 10px 30px rgba(13,15,20,0.25);
}
.pl-head::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(600px 160px at 12% 0%, rgba(243,210,122,0.18), transparent 70%),
              radial-gradient(500px 140px at 100% 100%, rgba(192,138,40,0.14), transparent 70%);
}
.pl-head::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--pl-oro-claro), var(--pl-oro), transparent);
  opacity:.8;
}
.pl-head-in{
  position:relative; max-width:1280px; margin:0 auto; padding:16px 22px;
  padding-top:calc(16px + env(safe-area-inset-top));
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.pl-marca{ display:flex; align-items:center; gap:14px; min-width:0; }
.pl-logo{
  flex:0 0 auto; width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  font-family:'League Spartan',sans-serif; font-weight:900; font-size:1.7rem; line-height:1; padding-top:4px;
  color:var(--pl-ink);
  background: linear-gradient(145deg, #FBE6A6 0%, var(--pl-oro-claro) 30%, var(--pl-oro) 75%, var(--pl-oro-hondo) 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.6), inset 0 -3px 0 rgba(0,0,0,0.18), 0 6px 16px rgba(192,138,40,0.35);
}
.pl-marca-txt{ min-width:0; }
.pl-nombre{
  margin:0; font-family:'League Spartan',sans-serif; font-weight:900; font-size:1.65rem; letter-spacing:.06em; line-height:1;
  background: linear-gradient(180deg, #FFF6D8 0%, var(--pl-oro-claro) 45%, var(--pl-oro) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pl-nombre span{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:.82rem; letter-spacing:.02em;
  -webkit-text-fill-color: rgba(255,255,255,0.72); color:rgba(255,255,255,0.72); margin-left:6px; vertical-align:middle;
}
.pl-sub{
  margin-top:6px; font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,0.78); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pl-sub i{ font-style:normal; color:var(--pl-oro-claro); margin:0 3px; }
.pl-sello{
  flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:7px 12px; border-radius:999px;
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:.76rem; color:rgba(255,255,255,0.85);
  background:rgba(255,255,255,0.06); border:1px solid rgba(243,210,122,0.28);
}
.pl-sello-punto{ width:8px; height:8px; border-radius:50%; background:#4CC38A; box-shadow:0 0 0 3px rgba(76,195,138,0.2); }

/* ---------- Carga ---------- */
.pl-carga{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:40px 16px; text-align:center; }
.pl-spinner{ width:38px; height:38px; border-radius:50%; border:3px solid rgba(192,138,40,0.2); border-top-color:var(--pl-oro); animation:pl-gira .9s linear infinite; }
@keyframes pl-gira{ to{ transform:rotate(360deg); } }
.pl-carga-txt{ font-family:'Quicksand',sans-serif; font-weight:700; color:rgba(13,15,20,0.6); }
.pl-carga.error .pl-spinner{ display:none; }
.pl-carga-error{ max-width:420px; font-family:'IBM Plex Sans',sans-serif; color:#B5412F; line-height:1.5; }
.pl-reintentar{
  border:none; border-radius:999px; padding:11px 20px; cursor:pointer; color:#fff; font-family:'Quicksand',sans-serif; font-weight:800;
  background:linear-gradient(180deg,#D9A23A,var(--pl-oro)); box-shadow:0 4px 0 var(--pl-oro-hondo), 0 8px 18px rgba(192,138,40,0.3);
}

/* ---------- La pantalla de módulos ocupa todo lo que queda ---------- */
body.pl .mn-overlay{
  position:relative; inset:auto; z-index:1; flex:1 1 auto; min-height:0;
  background:none; backdrop-filter:none; -webkit-backdrop-filter:none;
}
body.pl .mn-overlay.open{ display:flex; }
body.pl.mn-abierto{ overflow:hidden; height:100dvh; }
body.pl .mn-shell{
  width:100%; max-width:1280px; margin:0 auto; border-radius:0; box-shadow:none; background:transparent;
}
body.pl .mn-head-negocio{ display:none; }
body.pl .mn-head{
  background:transparent; border-bottom:none; padding:18px 22px 6px;
}
body.pl .mn-titulo{
  font-family:'League Spartan',sans-serif; font-weight:800; font-size:1.6rem; letter-spacing:.01em; margin:0;
}
body.pl .mn-periodo{
  background:#fff; border:1px solid rgba(192,138,40,0.35); border-radius:999px; padding:4px;
  box-shadow:0 2px 0 rgba(192,138,40,0.25), 0 8px 20px rgba(13,15,20,0.08);
}
body.pl .mn-flecha{ background:#FBF6E8; }
body.pl .mn-flecha:hover{ background:var(--pl-oro-claro); }

/* Pestañas como botones 3D */
body.pl .mn-tabs{
  background:transparent; border-bottom:none; padding:8px 22px 16px; margin-bottom:-8px; gap:10px;
  scrollbar-width:none;
}
body.pl .mn-tabs::-webkit-scrollbar{ display:none; }
body.pl .mn-tab{
  flex:0 0 auto; border:1px solid rgba(13,15,20,0.10); border-radius:14px; padding:11px 18px;
  background:linear-gradient(180deg,#FFFFFF,#F7F2E6); color:rgba(13,15,20,0.68); font-size:.95rem;
  box-shadow:0 3px 0 rgba(13,15,20,0.10), 0 6px 14px rgba(13,15,20,0.06);
  transition: transform .12s ease, box-shadow .12s ease, color .12s ease;
}
body.pl .mn-tab:hover{ transform:translateY(-1px); color:var(--pl-ink); }
body.pl .mn-tab.activo{
  color:var(--pl-ink); border-color:rgba(156,107,20,0.55); border-bottom-color:rgba(156,107,20,0.55);
  background:linear-gradient(180deg,#FBE6A6 0%, var(--pl-oro-claro) 40%, #DDA941 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.7), 0 3px 0 var(--pl-oro-hondo), 0 5px 10px rgba(192,138,40,0.22);
}
body.pl .mn-tab:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(13,15,20,0.12); }
body.pl .mn-body{ padding:12px 22px calc(32px + env(safe-area-inset-bottom)); }
body.pl .mn-tabla-wrap, body.pl .mn-kpi, body.pl .mn-cal, body.pl .mn-sueldo-card, body.pl .mn-dia-panel{
  box-shadow:0 1px 0 rgba(13,15,20,0.04), 0 10px 26px rgba(13,15,20,0.06);
}

/* ---------- Aviso ---------- */
.pl-toast{
  position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom)); transform:translate(-50%, 20px); opacity:0; pointer-events:none;
  z-index:6000; max-width:min(92vw,460px); padding:12px 18px; border-radius:14px;
  background:var(--pl-ink); color:#fff; font-family:'Quicksand',sans-serif; font-weight:700; font-size:.9rem; text-align:center;
  border:1px solid rgba(243,210,122,0.35); box-shadow:0 14px 34px rgba(0,0,0,0.3);
  transition:opacity .2s ease, transform .2s ease;
}
.pl-toast.show{ opacity:1; transform:translate(-50%,0); }

/* ---------- Celular ---------- */
@media (max-width:640px){
  .pl-head-in{ padding:12px 14px; padding-top:calc(12px + env(safe-area-inset-top)); }
  .pl-logo{ width:40px; height:40px; font-size:1.4rem; border-radius:12px; }
  .pl-nombre{ font-size:1.32rem; }
  .pl-nombre span{ display:block; margin:4px 0 0; font-size:.74rem; }
  .pl-sub{ font-size:.6rem; letter-spacing:.08em; }
  .pl-sello{ display:none; }
  body.pl .mn-head{ padding:12px 14px 4px; }
  body.pl .mn-titulo{ font-size:1.3rem; }
  body.pl .mn-tabs{ padding:6px 14px 14px; gap:8px; }
  body.pl .mn-tab{ padding:9px 13px; font-size:.86rem; }
  body.pl .mn-body{ padding:10px 14px calc(28px + env(safe-area-inset-bottom)); }
}

/* =====================================================================
   Pantalla de carga + entrada (v55)
   ===================================================================== */
.pl-splash{
  position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center; overflow:hidden;
  background: radial-gradient(900px 520px at 50% 38%, #2A2112 0%, #12110D 55%, #08090C 100%);
}
.pl-splash-brillo{
  position:absolute; inset:-40%; pointer-events:none;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(243,210,122,0.10) 40deg, transparent 90deg, transparent 180deg, rgba(243,210,122,0.07) 220deg, transparent 270deg);
  animation: pl-rota 9s linear infinite;
}
@keyframes pl-rota{ to{ transform:rotate(360deg); } }
.pl-splash-centro{ position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; padding:24px; text-align:center; }
.pl-splash-logo{
  width:96px; height:96px; border-radius:26px; display:grid; place-items:center; position:relative; overflow:hidden;
  background: linear-gradient(145deg, #FBE6A6 0%, #F3D27A 30%, #C08A28 75%, #9C6B14 100%);
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.6), inset 0 -5px 0 rgba(0,0,0,0.2), 0 18px 50px rgba(192,138,40,0.45), 0 0 0 1px rgba(243,210,122,0.4);
  animation: pl-logo-in .8s cubic-bezier(.2,.9,.25,1.25) both, pl-flota 2.6s ease-in-out .8s infinite;
}
.pl-splash-logo span{ font-family:'League Spartan','Arial Black',sans-serif; font-weight:900; font-size:3.4rem; line-height:1; padding-top:8px; color:#0D0F14; }
.pl-splash-logo::after{
  content:''; position:absolute; top:-40%; left:-60%; width:40%; height:180%; transform:rotate(20deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.75), transparent);
  animation: pl-destello 2.2s ease-in-out .6s infinite;
}
@keyframes pl-logo-in{ from{ opacity:0; transform:scale(.4) rotate(-12deg); } to{ opacity:1; transform:none; } }
@keyframes pl-flota{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@keyframes pl-destello{ 0%{ left:-60%; } 55%,100%{ left:130%; } }
.pl-splash-nombre{
  margin-top:10px; font-family:'League Spartan','Arial Black',sans-serif; font-weight:900; font-size:2.2rem; letter-spacing:.22em; padding-left:.22em;
  background: linear-gradient(180deg, #FFF6D8 0%, #F3D27A 45%, #C08A28 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: pl-sube .7s ease .25s both;
}
.pl-splash-sub{ font-family:'IBM Plex Mono',monospace; font-size:.74rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,0.6); animation: pl-sube .7s ease .4s both; }
@keyframes pl-sube{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.pl-splash-barra{ margin-top:18px; width:180px; height:4px; border-radius:99px; background:rgba(243,210,122,0.15); overflow:hidden; animation: pl-sube .7s ease .5s both; }
.pl-splash-barra i{ display:block; width:40%; height:100%; border-radius:99px; background:linear-gradient(90deg,#C08A28,#F3D27A,#C08A28); animation: pl-barra 1.2s ease-in-out infinite; }
@keyframes pl-barra{ 0%{ transform:translateX(-110%); } 100%{ transform:translateX(260%); } }
.pl-splash .pl-carga{ flex:none; padding:6px 0 0; gap:10px; }
.pl-splash .pl-carga-txt{ color:rgba(255,255,255,0.7); font-size:.9rem; animation: pl-sube .7s ease .55s both; }
.pl-splash .pl-carga-error{ color:#FFB4A6; }
.pl-splash.con-error .pl-splash-barra, .pl-splash.con-error .pl-splash-brillo{ display:none; }
.pl-splash.con-error .pl-splash-logo{ animation:none; }
/* Salida: el logo se agranda y la cortina sube */
.pl-splash.salir{ animation: pl-cortina .8s cubic-bezier(.7,0,.25,1) both; }
.pl-splash.salir .pl-splash-centro{ animation: pl-zoom .55s ease both; }
@keyframes pl-cortina{ 0%{ clip-path: inset(0 0 0 0); } 100%{ clip-path: inset(0 0 100% 0); } }
@keyframes pl-zoom{ to{ opacity:0; transform:scale(1.25); } }

/* Mientras carga, nada de la página se ve por detrás */
body.pl-cargando .pl-head, body.pl-cargando .mn-overlay{ visibility:hidden; }
/* Entrada de la página, en cascada */
body.pl-entrando .pl-head{ animation: pl-baja .7s cubic-bezier(.2,.8,.2,1) .15s both; }
body.pl-entrando .mn-head{ animation: pl-sube .6s ease .3s both; }
body.pl-entrando .mn-tabs{ animation: pl-sube .6s ease .4s both; }
body.pl-entrando .mn-body > *{ animation: pl-sube .6s ease both; }
body.pl-entrando .mn-body > *:nth-child(1){ animation-delay:.5s; }
body.pl-entrando .mn-body > *:nth-child(2){ animation-delay:.58s; }
body.pl-entrando .mn-body > *:nth-child(3){ animation-delay:.66s; }
body.pl-entrando .mn-body > *:nth-child(n+4){ animation-delay:.74s; }
@keyframes pl-baja{ from{ opacity:0; transform:translateY(-100%); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .pl-splash *, .pl-splash, body.pl-entrando *{ animation-duration:.01s !important; animation-delay:0s !important; animation-iteration-count:1 !important; }
}

/* =====================================================================
   Inicio: 4 tarjetas (v57)
   ===================================================================== */
body.pl-en-home .mn-overlay{ display:none !important; }
body.pl-en-modulo .pl-home{ display:none; }
.pl-home{ flex:1 1 auto; overflow:auto; }
.pl-home-in{ max-width:1180px; margin:0 auto; padding:34px 22px calc(40px + env(safe-area-inset-bottom)); }
.pl-home-hola{ margin-bottom:22px; }
.pl-home-k{ display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#9C6B14; background:#FBF3DC; border:1px solid rgba(192,138,40,0.35); border-radius:999px; padding:5px 12px; }
.pl-home-hola h2{ margin:12px 0 0; font-family:'League Spartan',sans-serif; font-weight:800; font-size:2.1rem; letter-spacing:.005em; color:#0D0F14; }
.pl-cards{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.pl-card{
  --c:#2E9A62; --cf:#EAF6EF; --cd:#1C6B43;
  position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; gap:8px; text-align:left; cursor:pointer;
  min-height:300px; padding:22px 20px 20px; border-radius:24px; border:1px solid color-mix(in srgb, var(--c) 25%, transparent);
  background: linear-gradient(165deg, #FFFFFF 0%, var(--cf) 78%);
  box-shadow: inset 0 1px 0 #fff, 0 6px 0 color-mix(in srgb, var(--c) 22%, transparent), 0 18px 40px rgba(13,15,20,0.08);
  font-family:'Manrope',sans-serif; color:#0D0F14;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, border-color .22s ease;
}
.pl-card-ventas{ --c:#2E9A62; --cf:#EAF6EF; --cd:#1C6B43; }
.pl-card-gastos{ --c:#D9622B; --cf:#FDF0E7; --cd:#9E3F14; }
.pl-card-sueldos{ --c:#3B7DD8; --cf:#EDF3FC; --cd:#22569E; }
.pl-card-resultados{ --c:#C08A28; --cf:#FBF4E0; --cd:#7E5710; }
.pl-card::before{ content:''; position:absolute; left:0; right:0; top:0; height:5px; background:linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 55%, #fff)); }
.pl-card-brillo{ position:absolute; top:-30%; left:-70%; width:45%; height:160%; transform:rotate(18deg); background:linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent); opacity:0; pointer-events:none; }
.pl-card:hover, .pl-card:focus-visible{
  transform: translateY(-8px); outline:none; border-color:var(--c);
  box-shadow: inset 0 1px 0 #fff, 0 10px 0 color-mix(in srgb, var(--c) 30%, transparent), 0 28px 56px color-mix(in srgb, var(--c) 26%, transparent);
}
.pl-card:hover .pl-card-brillo, .pl-card:focus-visible .pl-card-brillo{ animation: pl-card-brillo .9s ease; }
@keyframes pl-card-brillo{ 0%{ left:-70%; opacity:1; } 100%{ left:130%; opacity:1; } }
.pl-card:active, .pl-card.pl-card-apretada{ transform: translateY(2px) scale(.99); box-shadow: inset 0 1px 0 #fff, 0 2px 0 color-mix(in srgb, var(--c) 30%, transparent); }
.pl-card-ico{
  width:68px; height:68px; border-radius:20px; display:grid; place-items:center; font-size:2.1rem; margin-bottom:6px;
  background: linear-gradient(150deg, #fff 0%, color-mix(in srgb, var(--c) 18%, #fff) 100%);
  border:1px solid color-mix(in srgb, var(--c) 30%, transparent);
  box-shadow: inset 0 2px 0 #fff, 0 6px 0 color-mix(in srgb, var(--c) 25%, transparent), 0 12px 22px color-mix(in srgb, var(--c) 20%, transparent);
  transition: transform .25s cubic-bezier(.2,.8,.2,1.4);
}
.pl-card:hover .pl-card-ico{ transform: rotate(-8deg) scale(1.08); }
.pl-card-t{ font-family:'League Spartan',sans-serif; font-weight:800; font-size:1.7rem; line-height:1; letter-spacing:.005em; }
.pl-card-d{ font-size:.9rem; line-height:1.4; color:rgba(13,15,20,0.62); }
.pl-card-dato{ margin-top:auto; display:flex; flex-direction:column; gap:2px; width:100%; padding-top:12px; border-top:1px dashed color-mix(in srgb, var(--c) 35%, transparent); }
.pl-card-dato small{ font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(13,15,20,0.5); }
.pl-card-dato b{ font-weight:800; font-size:1.35rem; font-variant-numeric: tabular-nums; color:var(--cd); min-height:1.6rem; }
.pl-card-dato b.rojo{ color:#B5412F; } .pl-card-dato b.verde{ color:#1C6B43; }
.pl-skel{ display:inline-block; width:110px; height:18px; border-radius:6px; background:linear-gradient(90deg, rgba(13,15,20,0.06), rgba(13,15,20,0.12), rgba(13,15,20,0.06)); background-size:200% 100%; animation: pl-skel 1.1s linear infinite; vertical-align:middle; }
@keyframes pl-skel{ to{ background-position:-200% 0; } }
.pl-card-ir{ display:inline-flex; align-items:center; gap:6px; margin-top:6px; padding:9px 16px; border-radius:999px; font-weight:800; font-size:.86rem; color:#fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 85%, #fff), var(--c)); box-shadow: 0 3px 0 var(--cd), 0 8px 16px color-mix(in srgb, var(--c) 30%, transparent); }
.pl-card-ir em{ font-style:normal; transition: transform .2s ease; }
.pl-card:hover .pl-card-ir em{ transform: translateX(5px); }
/* Entrada de las tarjetas */
.pl-home-entra .pl-home-hola{ animation: pl-sube .55s ease both; }
.pl-home-entra .pl-card{ animation: pl-card-in .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.12s + var(--i) * .08s); }
@keyframes pl-card-in{ from{ opacity:0; transform: translateY(26px) scale(.96); } to{ opacity:1; transform:none; } }
body.pl-entrando .pl-home-entra .pl-home-hola{ animation-delay:.45s; }
body.pl-entrando .pl-home-entra .pl-card{ animation-delay: calc(.55s + var(--i) * .09s); }
/* Botón «‹ Inicio» dentro de una vista */
body.pl .mn-volver{ display:inline-flex; align-items:center; background:#0D0F14; color:#F3D27A; border:1px solid rgba(243,210,122,0.4); font-weight:800; padding:9px 16px; box-shadow:0 3px 0 #000, 0 8px 16px rgba(13,15,20,0.18); }
body.pl .mn-volver:hover{ border-color:#F3D27A; transform:translateY(-1px); }
.pl-marca{ cursor:pointer; }
@media (max-width:1000px){ .pl-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } .pl-card{ min-height:250px; } }
@media (max-width:640px){
  .pl-home-in{ padding:20px 14px calc(28px + env(safe-area-inset-bottom)); }
  .pl-home-hola h2{ font-size:1.5rem; }
  .pl-cards{ gap:12px; }
  .pl-card{ min-height:0; padding:16px 14px 14px; border-radius:20px; gap:6px; }
  .pl-card-ico{ width:50px; height:50px; font-size:1.55rem; border-radius:15px; }
  .pl-card-t{ font-size:1.3rem; }
  .pl-card-d{ font-size:.78rem; }
  .pl-card-dato b{ font-size:1.05rem; }
  .pl-card-ir{ padding:7px 12px; font-size:.78rem; }
}
