/* ═══════════════════════════════════════════════════════════
   MARSACOT — Premium Polish
   Cargado DESPUÉS del <style> inline de cada módulo.
   Solo AGREGA — no sobreescribe funcionalidad.
   LOGO: no tocar .logo-wrap en ninguna circunstancia.
═══════════════════════════════════════════════════════════ */

/* ── 1. GLOBAL ─────────────────────────────────────────── */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(249,115,22,0.35) rgba(255,255,255,0.04);
}
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: rgba(249,115,22,0.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(249,115,22,0.5); }
::selection { background: rgba(249,115,22,0.3); color: #fff; }
[data-theme="light"] { scrollbar-color: rgba(249,115,22,0.55) rgba(0,0,0,0.05); }
[data-theme="light"]::-webkit-scrollbar-track { background: rgba(0,0,0,0.04); }
[data-theme="light"]::-webkit-scrollbar-thumb { background: rgba(249,115,22,0.55); }

/* ── 2. HEADER ─────────────────────────────────────────── */
.header {
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(249,115,22,0.08);
}
.header::before {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(249,115,22,0.55) 40%,
    rgba(251,191,36,0.45) 60%,
    transparent 100%);
  pointer-events: none; z-index: 2;
}

/* ── 3. BOTONES ────────────────────────────────────────── */
.btn-guardar,
.btn-alta,
.btn-login {
  position: relative;
  overflow: hidden;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
.btn-guardar::after,
.btn-alta::after,
.btn-login::after {
  content: '';
  position: absolute; top: -50%; left: -70%; width: 40%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: skewX(-20deg);
  animation: pm-btn-shine 3.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pm-btn-shine {
  0%,100% { left: -70%; opacity: 0; }
  15%     { opacity: 1; }
  35%     { left: 130%; opacity: 0; }
}
.btn-guardar:hover,
.btn-alta:hover,
.btn-login:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 28px rgba(249,115,22,0.52), 0 0 0 1px rgba(249,115,22,0.3) inset;
}
.btn-guardar:active,
.btn-alta:active,
.btn-login:active {
  transform: scale(0.96);
}
.btn-editar {
  transition: transform .15s, background .2s, border-color .2s;
}
.btn-editar:hover {
  transform: translateY(-1px);
  border-color: rgba(59,130,246,0.5);
  background: rgba(59,130,246,0.18);
}
.btn-baja,
.btn-logout {
  transition: transform .15s, background .2s, border-color .2s;
}
.btn-baja:hover,
.btn-logout:hover {
  transform: translateY(-1px);
  border-color: rgba(239,68,68,0.5);
  background: rgba(239,68,68,0.18);
}

/* ── 4. PILLS DE ESTADO (.hp) ──────────────────────────── */
.hp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hp::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hp.pg { animation: pm-glow-green 2.5s ease-in-out infinite; }
.hp.pg::before {
  background: #22c55e;
  box-shadow: 0 0 5px #22c55e;
  animation: pm-dot-pulse 1.8s ease-in-out infinite;
}
@keyframes pm-glow-green {
  0%,100% { box-shadow: 0 0 8px rgba(34,197,94,0.15); }
  50%     { box-shadow: 0 0 16px rgba(34,197,94,0.35); }
}
.hp.pa::before {
  background: #fbbf24;
  box-shadow: 0 0 5px #fbbf24;
  animation: pm-dot-pulse 0.9s ease-in-out infinite;
}
.hp.pr::before {
  background: #ef4444;
  box-shadow: 0 0 5px #ef4444;
  animation: pm-dot-pulse 0.7s ease-in-out infinite;
}
.hp.pb::before {
  background: #3b82f6;
  box-shadow: 0 0 5px #3b82f6;
  animation: pm-dot-pulse 2s ease-in-out infinite;
}
.hp.pe::before {
  background: #94a3b8;
}
@keyframes pm-dot-pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(1.45); opacity: 0.65; }
}

/* ── 5. KPI VALUES ─────────────────────────────────────── */
.kpi-value {
  background: linear-gradient(135deg, #fbbf24 30%, #f97316 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── 6. MODALES ────────────────────────────────────────── */
.modal {
  background: rgba(17,34,64,0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 64px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.07);
}
.modal::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  pointer-events: none; z-index: 1;
}

/* ── 7. INPUTS ─────────────────────────────────────────── */
.meta-field input,
.meta-field select,
.login-field input,
.search-input {
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.25);
}
.meta-field input:focus,
.meta-field select:focus,
.login-field input:focus,
.search-input:focus {
  box-shadow:
    0 0 0 3px rgba(249,115,22,0.18),
    0 0 20px rgba(249,115,22,0.08),
    inset 0 1px 3px rgba(0,0,0,0.2);
}

/* ── 8. BARRA DE PROGRESO ──────────────────────────────── */
.progress-bar-fill {
  box-shadow: 0 0 12px rgba(249,115,22,0.55), 0 0 4px rgba(251,191,36,0.4);
  position: relative;
  overflow: hidden;
}
.progress-bar-fill::after {
  content: '';
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: pm-progress-shimmer 2.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pm-progress-shimmer {
  0%   { left: -100%; }
  100% { left: 200%; }
}

/* ── 9. SKELETON LOADING (disponible para uso futuro) ───── */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.09) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
  border-radius: 6px;
  animation: pm-skeleton-shimmer 1.8s ease-in-out infinite;
}
@keyframes pm-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.sk-line           { height: 12px; margin-bottom: 8px; }
.sk-line.wide      { width: 80%; }
.sk-line.medium    { width: 55%; }
.sk-line.short     { width: 35%; }
.sk-block          { height: 48px; margin-bottom: 8px; border-radius: 9px; }

/* ── 10. TABLA / SIDEBAR / LOGIN ───────────────────────── */
.ht tr:hover td {
  background: linear-gradient(
    90deg,
    rgba(249,115,22,0.05),
    rgba(249,115,22,0.02) 50%,
    transparent
  );
}

.sb-item.active {
  box-shadow: inset 3px 0 16px rgba(249,115,22,0.1);
}
.sb-item.active:hover {
  background: rgba(249,115,22,0.1);
  box-shadow: inset 3px 0 24px rgba(249,115,22,0.16);
}

.login-card {
  background: rgba(17,34,64,0.72);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 24px 80px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.07);
}
.login-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 10%, rgba(255,255,255,0.12) 50%, transparent 90%);
  pointer-events: none; z-index: 1;
}