/* ==========================================================================
   Theme ACEB - Sindikalia (rebuild)
   Layout: header fijo + sidebar controlado
   ========================================================================== */

/* --------------------------- Paleta + Bootstrap ---------------------------- */
:root{
  --aceb-red:      #c81e1e;
  --aceb-red-dark: #971616;
  --aceb-black:    #111111;
  --aceb-white:    #ffffff;
  --g-50:          #fafafa;
  --g-100:         #f5f5f5;
  --g-200:         #eeeeee;
  --g-300:         #e2e2e2;

  --bs-primary:          var(--aceb-red);
  --bs-primary-rgb:      200,30,30;
  --bs-body-color:       var(--aceb-black);
  --bs-body-bg:          var(--g-50);
  --bs-link-color:       var(--aceb-red);
  --bs-link-hover-color: var(--aceb-red-dark);
  --bs-border-color:     var(--g-300);

  /* Layout */
  --header-h: 56px;
  --sb-w:     248px; /* ancho sidebar abierto */
  --sb-w-mini:56px;  /* ancho sidebar colapsado */
  --gap-side: 6px;   /* gap entre sidebar y contenido */
}

/* ------------------------------ Base global -------------------------------- */
html,body{ height:100%; }
body{
  background:var(--bs-body-bg);
  color:var(--bs-body-color);
  margin:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{ color:var(--bs-link-color); text-decoration:none; }
a:hover{ color:var(--bs-link-hover-color); text-decoration:underline; }

/* ------------------------------- Navbar ----------------------------------- */
.app-header.navbar{
  position:fixed; top:0; left:0; right:0; z-index:1030;
  min-height:var(--header-h);
  background:var(--aceb-red)!important; color:#fff!important;
  box-shadow:0 2px 8px rgba(17,17,17,.08);
}
#btnSidebar{
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:none; color:#fff; font-size:1.25rem;
  padding:.5rem; cursor:pointer;
}
#btnSidebar:hover{ background:rgba(255,255,255,.15); border-radius:6px; }
.ver-badge{ background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); color:#fff; font-weight:600; }
.nav-logo-badge{ display:inline-flex; align-items:center; justify-content:center; background:#fff; border-radius:10px; padding:4px 6px; box-shadow:0 2px 6px rgba(0,0,0,.12); }
.navbar .brand-logo{ height:20px; width:auto; }
@media (min-width:576px){ .navbar .brand-logo{ height:22px; } }
@media (min-width:992px){ .navbar .brand-logo{ height:24px; } }

/* Compensacion del contenido bajo header fijo */
.app-main{ padding-top:var(--header-h); }

/* ------------------------------- Sidebar (layout) ------------------------- */
@media (min-width:992px){
  .app-sidebar{
    position:fixed; top:var(--header-h); bottom:0; left:0;
    width:var(--sb-w); height:calc(100vh - var(--header-h)); z-index:1025;
    overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
    transition:width .2s ease;
  }
  .app-main{ margin-left:0 !important; }
  .app-content{
    margin-left:0;
    padding-left: calc(var(--sb-w) - var(--gap-side));
    transition: padding-left .2s ease;
  }
  body.sb-collapsed #app-sidebar{
    width:var(--sb-w-mini) !important;
    min-width:var(--sb-w-mini) !important;
    max-width:var(--sb-w-mini) !important;
  }
  body.sb-collapsed .app-content{ padding-left: calc(var(--sb-w-mini) - var(--gap-side)); }
  body.sb-collapsed .app-sidebar .sidebar-header{ padding:.55rem .35rem; }
  body.sb-collapsed .app-sidebar .sidebar-header .text-uppercase{ display:none; }
  body.sb-collapsed .app-sidebar .sidebar-user{ justify-content:center; }
  body.sb-collapsed .app-sidebar .sidebar-user .lh-sm{ display:none; }
  body.sb-collapsed .app-sidebar .avatar{ width:44px; height:44px; }
  body.sb-collapsed .app-sidebar .nav-link{ justify-content:center !important; padding:.45rem .35rem; }
  body.sb-collapsed .app-sidebar .nav-link p,
  body.sb-collapsed .app-sidebar .nav-link .nav-label,
  body.sb-collapsed .app-sidebar .chevron-icon,
  body.sb-collapsed .app-sidebar .badge-tag{ display:none; }
  body.sb-collapsed .app-sidebar .nav-treeview{ display:none !important; }
}

@media (max-width:991.98px){
  .app-sidebar{
    position:fixed; top:var(--header-h); bottom:0; left:0;
    width:var(--sb-w); height:calc(100vh - var(--header-h));
    transform:translateX(-100%);
    z-index:1050; box-shadow:4px 0 16px rgba(0,0,0,.15);
    transition: transform .2s ease;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  body.sb-open .app-sidebar{ transform:translateX(0); }
  body.sb-open{ overflow:hidden; }
  .app-sidebar::after{
    content:""; position:fixed; inset:var(--header-h) 0 0 0;
    background:rgba(0,0,0,.35); display:none; z-index:-1;
  }
  body.sb-open .app-sidebar::after{ display:block; }
}

/* --------------------- Sidebar estetica y scroll -------------------------- */
.app-sidebar.sidebar-modern { background:#f8f9fb; border-right:1px solid rgba(0,0,0,.04); }
.app-sidebar.sidebar-modern .sidebar-header{ background:#fff; }
.app-sidebar .sidebar-wrapper{ max-height:calc(100vh - var(--header-h)); overflow-y:auto; overflow-x:hidden; padding-right:4px; scrollbar-gutter:stable; }

/* --------------------------- Cards roles usuarios ------------------------- */
.role-card{
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
  overflow:hidden;
  position:relative;
  color:#1f2937;
  background:#fff;
  transition:transform .15s ease, box-shadow .15s ease;
}
.role-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(15,23,42,.12);
}
.role-card .card-body{ position:relative; min-height:210px; }
.role-card-top{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:10px;
}
.role-card-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:12px;
  background:rgba(200,30,30,.12); color:var(--aceb-red);
  font-size:1.1rem;
}
.role-card-count{
  font-size:1.6rem; font-weight:700; color:#111827;
}
.role-card-title{ margin:0 0 6px 0; font-weight:700; font-size:1.05rem; }
.role-card-desc{ margin:0 0 10px 0; color:#6b7280; font-size:.9rem; }
.role-card-meta{ font-size:.82rem; color:#6b7280; }
.role-card-meta.warn{ color:#b45309; }
.role-card-cta{
  margin-top:12px; font-weight:600; color:var(--aceb-red);
  display:inline-flex; align-items:center; gap:6px;
}
.role-card-ghost{
  position:absolute; right:12px; top:18px; font-size:4rem;
  color:rgba(15,23,42,.08); pointer-events:none;
}

.role-card.tone-red .role-card-icon{ background:rgba(200,30,30,.12); color:var(--aceb-red); }
.role-card.tone-blue .role-card-icon{ background:rgba(30,64,175,.12); color:#1e40af; }
.role-card.tone-emerald .role-card-icon{ background:rgba(16,185,129,.12); color:#0f766e; }
.role-card.tone-amber .role-card-icon{ background:rgba(245,158,11,.18); color:#b45309; }
.role-card.tone-violet .role-card-icon{ background:rgba(139,92,246,.14); color:#6d28d9; }
.role-card.tone-indigo .role-card-icon{ background:rgba(79,70,229,.14); color:#4338ca; }
.role-card.tone-slate .role-card-icon{ background:rgba(71,85,105,.14); color:#475569; }
.role-card.tone-dark .role-card-icon{ background:rgba(17,24,39,.12); color:#111827; }
.app-sidebar,
.app-sidebar .sidebar-wrapper{ scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.18) transparent; }
.app-sidebar::-webkit-scrollbar,
.app-sidebar .sidebar-wrapper::-webkit-scrollbar{ width:10px; }
.app-sidebar::-webkit-scrollbar-thumb,
.app-sidebar .sidebar-wrapper::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.15); border-radius:999px; border:2px solid transparent; background-clip:padding-box;
}
.app-sidebar:hover::-webkit-scrollbar-thumb,
.app-sidebar .sidebar-wrapper:hover::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.25); }

/* Chip de usuario */
.app-sidebar.sidebar-modern .sidebar-user{ padding:.45rem .75rem; border-radius:14px; transition:background-color .15s ease, box-shadow .15s ease, transform .05s ease; display:flex; gap:.75rem; align-items:center; }
.app-sidebar.sidebar-modern .sidebar-user:hover{ background:var(--g-100); box-shadow:0 4px 12px rgba(0,0,0,.04); text-decoration:none; transform:translateY(-1px); }
.avatar{ width:44px; height:44px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; background:#f1f1f1; border:2px solid #fff; box-shadow:0 0 0 2px rgba(0,0,0,.05); }
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Lista principal */
.app-sidebar.sidebar-modern .nav-sidebar{ padding:.5rem .5rem 1.25rem; }
.app-sidebar.sidebar-modern .nav-link{
  border-radius:.7rem; margin:2px 0; padding:.5rem .75rem;
  color:#495057; font-size:.93rem; display:flex; align-items:center; gap:.55rem;
  transition:background-color .15s ease, color .15s ease, transform .1s ease;
}
.app-sidebar.sidebar-modern .nav-link .nav-icon{ width:1.25rem; text-align:center; font-size:.95rem; opacity:.8; }
.app-sidebar.sidebar-modern .nav-link p{ margin:0; flex:1; }
.app-sidebar.sidebar-modern .nav-link:hover,
.app-sidebar.sidebar-modern .nav-link:focus{
  text-decoration:none;
  background: linear-gradient(135deg, #d42a38, #b31624);
  color:#ffffff;
  transform: translateX(1px);
  box-shadow:0 6px 16px rgba(199, 31, 45, .25);
}
.app-sidebar.sidebar-modern .nav-link:hover .nav-icon{ color:#ffffff; opacity:1; }

/* Activo */
.app-sidebar.sidebar-modern .nav-link.active{
  background: linear-gradient(135deg, #c71f2d, #a80f1f);
  color:#ffffff;
  font-weight:600;
  box-shadow:0 6px 16px rgba(199, 31, 45, .35);
}
.app-sidebar.sidebar-modern .nav-link.active .nav-icon{ color:#ffffff; opacity:1; }
.app-sidebar.sidebar-modern .nav-link.active:hover{ transform:none; }

/* Submenus */
.app-sidebar.sidebar-modern .nav-treeview .nav-link{
  font-size:.9rem; padding-left:1.9rem; border-radius:.6rem;
}
.app-sidebar.sidebar-modern .nav-treeview .nav-link .nav-icon{ font-size:.9rem; }
.app-sidebar.sidebar-modern .nav-treeview .nav-link:hover{
  background: linear-gradient(135deg, #e64c58, #c71f2d);
  color:#ffffff;
}
.app-sidebar.sidebar-modern .nav-treeview .nav-link:hover .nav-icon{ color:#ffffff; }
.app-sidebar.sidebar-modern .nav-treeview .nav-link.active{
  background:#c71f2d; color:#ffffff;
}

/* Flechas */
.app-sidebar.sidebar-modern .chevron-icon{
  font-size:.8rem; opacity:.7; transition: transform .2s ease, opacity .15s ease;
}
.app-sidebar.sidebar-modern .nav-link[aria-expanded="true"] .chevron-icon{
  transform:rotate(90deg); opacity:1; color:#ffffff;
}

/* Menús colapsables activos (Financiero, RRHH, etc.) */
.app-sidebar.sidebar-modern .nav-link[aria-expanded="true"]{
  background: rgba(200, 30, 30, .08);
  color:#495057;
  box-shadow:none;
}
.app-sidebar.sidebar-modern .nav-link[aria-expanded="true"] .nav-icon{
  color:var(--aceb-red);
  opacity:1;
}
.app-sidebar.sidebar-modern .nav-link.active[data-bs-toggle="collapse"]{
  background: linear-gradient(135deg, #c71f2d, #a80f1f);
  color:#ffffff;
  box-shadow:0 6px 16px rgba(199, 31, 45, .35);
}
.app-sidebar.sidebar-modern .nav-link.active[data-bs-toggle="collapse"] .nav-icon,
.app-sidebar.sidebar-modern .nav-link[aria-expanded="true"] .nav-icon{ 
  color:#ffffff; 
  opacity:1;
}

/* Badge Admin en Sistema */
.app-sidebar.sidebar-modern .nav-link-system span.label{ display:inline-flex; align-items:center; gap:.35rem; }
.app-sidebar.sidebar-modern .nav-link-system .badge-tag{
  font-size:.65rem; text-transform:uppercase; letter-spacing:.04em;
  background: rgba(108,117,125,.12); color:#6c757d;
  border-radius:999px; padding:.12rem .45rem;
}
.app-sidebar.sidebar-modern .nav-link-system[aria-expanded="true"]{
  background: linear-gradient(135deg, #c71f2d, #a80f1f);
  color:#ffffff;
  box-shadow:0 6px 16px rgba(199, 31, 45, .35);
}
.app-sidebar.sidebar-modern .nav-link-system[aria-expanded="true"] .nav-icon{ color:#ffffff; }
.app-sidebar.sidebar-modern .nav-link-system.active{
  background: linear-gradient(135deg, #c71f2d, #a80f1f);
  color:#ffffff;
  box-shadow:0 6px 16px rgba(199, 31, 45, .35);
}
.app-sidebar.sidebar-modern .nav-link-system.active .nav-icon{ color:#ffffff; opacity:1; }
.app-sidebar.sidebar-modern .nav-link-system.active .badge-tag{
  background: rgba(255,255,255,.2); color:#ffffff;
}

/* ------------------------------ Content area ------------------------------- */
.app-content{ padding-top:.35rem !important; }
.container-fluid{ padding-left:8px !important; padding-right:8px !important; }
.card{ border-radius:14px; margin-bottom:.55rem !important; }

/* ------------------------------- Login block ------------------------------- */
.login-wrap{
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(16px,2.5vw,32px);
  padding-top:calc(env(safe-area-inset-top,0px) + clamp(16px,2.5vw,32px));
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + clamp(16px,2.5vw,32px));
  background:linear-gradient(180deg,#ffffff 0%, var(--g-100) 100%);
}
.login-card{
  width:clamp(320px,92vw,1080px);
  background:#fff;
  border:1px solid var(--g-200);
  border-radius:1.25rem;
  overflow:hidden;
  box-shadow:0 .5rem 1.25rem rgba(17,17,17,.08);
}
@media (min-width:992px){
  .login-card{ width:1080px; }
}
.bg-aceb-side{
  background:linear-gradient(180deg, #b31b1b 0%, #8e1616 100%);
  color:#fff;
}
.login-card .form-control{
  height:48px;
  border-radius:10px;
}
.login-card .form-control:focus{
  border-color:var(--aceb-red);
  box-shadow:0 0 0 .2rem rgba(200,30,30,.15);
}
.login-card .btn{
  border-radius:12px;
}
.login-card .btn-primary{
  background:var(--aceb-red);
  border-color:var(--aceb-red);
}
.login-card .btn-primary:hover{
  background:var(--aceb-red-dark);
  border-color:var(--aceb-red-dark);
}
.login-card .btn-outline-primary{
  color:#0d6efd;
  border-color:#0d6efd;
}
.login-card .btn-outline-primary:hover{
  color:#fff;
  background:#0d6efd;
}

/* ========================================================================== 
   Dashboard Styles (restaurados)
   ========================================================================== */
.aceb-dashboard{
  --dash-bg:linear-gradient(180deg,#f8fafc 0%,#fdf2f2 100%);
  background:var(--dash-bg);
  min-height:100vh;
  padding-bottom:3rem;
  font-family:'Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,'Poppins',sans-serif;
}
.dash-container{padding:2.5rem 0 3rem;display:flex;flex-direction:column;gap:2rem;}
.dash-hero{
  background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.6),rgba(255,255,255,.15));
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 35px 60px rgba(203,0,0,.08);
  border-radius:34px;
  padding:2.8rem;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2.2rem;
  position:relative;
  overflow:hidden;
  color:#1f1f29;
}
.dash-hero::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at 80% 10%,rgba(255,255,255,.6),transparent 55%);
  pointer-events:none;
}
.hero-info{position:relative;z-index:2;display:flex;flex-direction:column;gap:1.2rem;}
.hero-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem 1rem;border-radius:999px;background:rgba(205,32,39,.1);color:#a30b18;font-weight:600;font-size:.85rem;}
.hero-info h1{font-size:2.45rem;margin:0;font-weight:800;color:#161622;line-height:1.2;}
.hero-info p.lead{margin:0;color:#374151;font-size:1.05rem;max-width:560px;}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;}
.dash-btn{border-radius:999px;padding:.85rem 1.5rem;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;transition:transform .2s ease,box-shadow .2s ease;}
.dash-btn-primary{background:#b40717;color:#fff;box-shadow:0 18px 35px rgba(180,7,23,.3);}
.dash-btn-warning{background:#c2410c;color:#fff;box-shadow:0 18px 35px rgba(194,65,12,.3);}
.dash-btn-success{background:#047857;color:#fff;box-shadow:0 18px 35px rgba(4,120,87,.3);}
.dash-btn-danger{background:#dc2626;color:#fff;box-shadow:0 18px 35px rgba(220,38,38,.3);}
.dash-btn-secondary{background:#7c3aed;color:#fff;box-shadow:0 18px 35px rgba(124,58,237,.3);}
.dash-btn-outline{border:1px solid rgba(22,22,34,.2);color:#111;background:rgba(255,255,255,.5);}
.dash-btn-ghost{background:rgba(22,22,34,.08);color:#111;}
.dash-btn:hover,.dash-btn:focus-visible{transform:translateY(-2px);text-decoration:none;}
.dash-btn-primary:hover,.dash-btn-primary:focus-visible,.dash-btn-warning:hover,.dash-btn-warning:focus-visible,.dash-btn-success:hover,.dash-btn-success:focus-visible,.dash-btn-danger:hover,.dash-btn-danger:focus-visible,.dash-btn-secondary:hover,.dash-btn-secondary:focus-visible{color:#fff;}
.dash-btn-outline:hover,.dash-btn-outline:focus-visible,.dash-btn-ghost:hover,.dash-btn-ghost:focus-visible{color:#111;}
.hero-actions .dash-btn{flex:1 1 230px;min-width:220px;justify-content:center;}
.hero-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem;margin-top:1.5rem;}
.hero-metrics .dash-kpi-card{background:#fff;border-radius:22px;border:1px solid rgba(15,23,42,.08);box-shadow:0 15px 30px rgba(15,23,42,.08);padding:1rem 1.3rem;display:flex;flex-direction:column;gap:.4rem;min-height:130px;}
.hero-metrics .dash-kpi-card .icon{width:34px;height:34px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;background:rgba(74,222,128,.15);color:#047857;}
.hero-metrics .dash-kpi-card .label{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:#475569;}
.hero-metrics .dash-kpi-card .value{font-size:1.8rem;font-weight:700;color:#0f172a;}
.hero-metrics .dash-kpi-card .detail{font-size:.85rem;color:#475569;}
.dash-btn:hover{transform:translateY(-2px);}
.dash-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;}
.dash-card{background:#fff;border-radius:28px;padding:1.8rem;border:1px solid #e5e7eb;box-shadow:0 25px 45px rgba(15,23,42,.06);display:flex;flex-direction:column;gap:1rem;}
.dash-card.full{grid-column:1/-1;}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;}
.card-head h3{margin:0;font-size:1.25rem;font-weight:700;color:#0f172a;}
.card-head .badge-pill{border-radius:999px;background:#f8fafc;padding:.35rem .9rem;font-size:.8rem;font-weight:600;color:#6b7280;border:1px solid #e5e7eb;}
.role-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9rem;}
.role-list li{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f1f5f9;padding-bottom:.6rem;}
.role-list .bar{height:6px;border-radius:999px;background:#fee2e2;overflow:hidden;margin-top:.4rem;}
.role-list .bar span{display:block;height:100%;background:#ef4444;border-radius:999px;}
.status-pill{display:inline-flex;align-items:center;padding:.2rem .75rem;border-radius:999px;font-size:.78rem;font-weight:600;}
.status-pill.green{background:rgba(16,185,129,.15);color:#047857;}
.status-pill.gray{background:rgba(148,163,184,.2);color:#475569;}
.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;}
.quick-card{border-radius:22px;padding:1.1rem 1.3rem;background:#fff;border:1px solid #e2e8f0;box-shadow:0 16px 35px rgba(15,23,42,.06);display:flex;gap:1rem;text-decoration:none;color:#0f172a;align-items:center;transition:transform .2s ease,box-shadow .2s ease;}
.quick-card:hover{transform:translateY(-3px);box-shadow:0 25px 45px rgba(15,23,42,.1);}
.quick-card .tone{width:46px;height:46px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.3rem;flex-shrink:0;}
.tone-amber{background:linear-gradient(135deg,#f59e0b,#fbbf24);}
.tone-violet{background:linear-gradient(135deg,#8b5cf6,#6366f1);}
.tone-teal{background:linear-gradient(135deg,#0d9488,#14b8a6);}
.tone-indigo{background:linear-gradient(135deg,#4338ca,#6366f1);}

/* SG-SST & RRHH */
.sgsst-dashboard{background:linear-gradient(180deg,#f8fafc 0%,#eef2ff 100%);min-height:100vh;}
.sgsst-container{padding:2.5rem 0 3rem;display:flex;flex-direction:column;gap:2rem;}
.sgsst-hero{background:radial-gradient(circle at top left,rgba(255,255,255,.35),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.4);box-shadow:0 35px 60px rgba(15,23,42,.15);border-radius:32px;padding:2.4rem 2.8rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;position:relative;overflow:hidden;color:#0f172a;}
.sgsst-hero::after{content:\"\";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.25),transparent 55%);pointer-events:none;}
.sgsst-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .9rem;border-radius:999px;background:rgba(15,23,42,.12);font-weight:600;color:#0f172a;font-size:.85rem;backdrop-filter:blur(8px);}
.sgsst-hero h1{font-size:2.3rem;font-weight:800;margin:0;color:#0b1220;}
.sgsst-hero p.lead{font-size:1.05rem;color:#1f2937;margin:0;max-width:520px;}
.sgsst-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;}
.sgsst-panel{background:#fff;border-radius:24px;padding:1.8rem;border:1px solid #e2e8f0;box-shadow:0 20px 45px rgba(15,23,42,.08);}

/* Panel hero extra bits */
.hero-panel{
  position:relative; z-index:2;
  background:rgba(255,255,255,.9);
  border-radius:28px;
  border:1px solid rgba(15,23,42,.08);
  padding:2rem;
  box-shadow:0 30px 60px rgba(15,23,42,.08);
}
.eyebrow{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:600;
  color:#9c2f2f;
  margin-bottom:.5rem;
}
.hero-clock{
  margin-top:1rem;
  background:rgba(255,255,255,.62);
  border-radius:18px;
  padding:1rem 1.2rem;
  display:flex;
  flex-direction:column;
  gap:.4rem;
  width:100%;
  box-shadow:0 15px 35px rgba(15,23,42,.08);
  text-align:center;
  align-items:center;
}
.hero-clock-value{font-size:1.1rem;font-weight:700;color:#0f172a;font-variant-numeric:tabular-nums;line-height:1.4;}
.hero-clock small{font-size:.78rem;color:#6b7280;}

.hero-score{display:flex;align-items:center;gap:1.8rem;flex-wrap:wrap;}
.hero-score .score-circle{
  width:130px;height:130px;border-radius:50%;
  background:conic-gradient(from 0deg,#22c55e 0% calc(var(--pct) * 1%),rgba(226,232,240,.8) calc(var(--pct) * 1%));
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  color:#111;font-weight:800;font-size:2rem;
}
.hero-score .score-circle small{font-size:.8rem;font-weight:600;color:#6b7280;margin-top:.1rem;}

.hero-metrics{list-style:none;padding:0;margin:1.3rem 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.9rem;}
.hero-metrics li{background:rgba(255,255,255,.75);border-radius:18px;padding:.85rem 1rem;border:1px solid rgba(15,23,42,.08);text-align:center;font-weight:600;color:#111;}
.hero-metrics span{display:block;font-size:.8rem;font-weight:500;color:#64748b;margin-top:.2rem;}

/* System status cards */
.system-status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:1.2rem;}
.system-status-card{
  border-radius:18px;
  padding:1rem 1.1rem;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  display:flex;
  gap:.9rem;
  align-items:flex-start;
  box-shadow:0 14px 30px rgba(15,23,42,.06);
}
.system-status-card.ok{border-color:rgba(34,197,94,.4);}
.system-status-card.down{border-color:rgba(220,38,38,.4);}
.status-dot{width:12px;height:12px;border-radius:999px;margin-top:.35rem;background:#10b981;box-shadow:0 0 0 4px rgba(16,185,129,.15);flex-shrink:0;}
.system-status-card.down .status-dot{background:#dc2626;box-shadow:0 0 0 4px rgba(220,38,38,.12);}
.system-status-card strong{display:block;font-size:1.05rem;color:#0f172a;}
.system-status-card small{display:block;font-size:.82rem;color:#6b7280;margin-top:.15rem;}
.system-status-card .status-meta{font-size:.78rem;color:#475569;margin-top:.25rem;display:inline-flex;align-items:center;gap:.3rem;}

/* Modern table */
.modern-table table{width:100%;border-collapse:collapse;font-size:.95rem;}
.modern-table thead th{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#94a3b8;
  border-bottom:1px solid #e5e7eb;
  padding-bottom:.6rem;
}
.modern-table tbody td{padding:.8rem 0;border-bottom:1px solid #f1f5f9;}
.modern-table tbody tr:last-child td{border-bottom:none;}

/* Caja */
.caja-dashboard .sgsst-hero{background:radial-gradient(circle at 10% 20%,rgba(251,113,133,.18),rgba(255,255,255,.1));}
.caja-dashboard .sgsst-chip{background:rgba(220,38,38,.12);color:#7f1d1d;}
.caja-filters{background:#fff;border-radius:20px;border:1px solid #e2e8f0;box-shadow:0 18px 35px rgba(15,23,42,.06);}
.caja-data .card{border-radius:22px;}

/* Tickets */
.tickets-dashboard .sgsst-hero{background:radial-gradient(circle at 20% 15%,rgba(248,113,113,.2),rgba(255,255,255,.08));}
.tickets-dashboard .sgsst-chip{background:rgba(190,24,93,.15);color:#831843;}
.tickets-feed .card{border-radius:24px;border:1px solid #e2e8f0;box-shadow:0 20px 45px rgba(15,23,42,.08);}
/* Footer */
.app-footer{
  padding:12px; text-align:center; font-size:.9rem;
  background:#fff; border-top:1px solid var(--g-200);
}

/* Reloj Digital Sidebar */
.digital-clock-wrapper {
    background-color: #000;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 10px 5px;
    text-align: center;
    color: #33ff33; /* Verde fósforo */
    font-family: 'Share Tech Mono', monospace;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8);
}

.digital-time {
    font-size: 1,6rem; /* Tamaño ajustado, no muy grande */
    line-height: 1;
    text-shadow: 0 0 4px rgba(51, 255, 51, 0.6);
}

.digital-date {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-top: 4px;
}

.digital-day {
    font-size: 0.7rem;
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 1px;
}