/* ============================================================
   Control360 — branding alineado a 360_logistica
   ============================================================ */
:root{
  --yellow:#fefe01;
  --yellow-soft:#fff680;
  --yellow-deep:#e6e500;
  --yellow-glow:rgba(254,254,1,.45);
  --black:#0a0a0a;
  --ink:#111418;
  --ink-soft:#2b2f36;
  --muted:#5b6470;
  --line:#ececee;
  --bg:#ffffff;
  --bg-soft:#fafbfc;
  --bg-cream:#fffef5;
  --shadow-sm:0 2px 8px rgba(10,10,10,.06);
  --shadow-md:0 10px 30px rgba(10,10,10,.08);
  --shadow-lg:0 24px 60px rgba(10,10,10,.14);
  --shadow-yellow:0 18px 40px rgba(254,254,1,.35);
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --ease:cubic-bezier(.22,1,.36,1);
  --c360-sidebar-w:240px;
  --c360-topbar-h:60px;
}

body{
  background:var(--bg-soft);
  color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  padding-top:var(--c360-topbar-h);
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
  font-family:"Plus Jakarta Sans","Inter",sans-serif;
  color:var(--ink);
}

/* ---------- Topbar (clara) ---------- */
.c360-topbar{
  height:var(--c360-topbar-h);z-index:1040;
  background:#fff!important;
  border-bottom:3px solid var(--yellow);
  box-shadow:var(--shadow-sm);
  font-family:"Plus Jakarta Sans","Inter",sans-serif;
}
.c360-topbar .navbar-brand{color:var(--ink);letter-spacing:.3px;text-decoration:none;}
.c360-topbar .navbar-brand:hover{color:var(--ink);}
.c360-logo{height:42px;width:auto;}
.c360-brand-text{line-height:1.05;}
.c360-brand-text .fw-bold{font-size:1rem;color:var(--ink);font-family:"Plus Jakarta Sans","Inter",sans-serif;}
.c360-tagline{color:var(--muted);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;}
@media (max-width:575.98px){
  .c360-brand-text .fw-bold{font-size:.9rem;}
  .c360-tagline{font-size:.55rem;}
  .c360-logo{height:36px;}
}
.c360-topbar .btn{color:var(--ink);border:0;background:transparent;}
.c360-topbar .btn:hover,
.c360-topbar .btn:focus{background:var(--bg-cream);color:var(--ink);}
.c360-topbar .dropdown-toggle::after{color:var(--ink);}
.c360-topbar .dropdown-menu{
  border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md);
}

/* ---------- Sidebar ---------- */
.c360-sidebar{
  position:fixed;top:var(--c360-topbar-h);left:0;bottom:0;
  width:var(--c360-sidebar-w);overflow-y:auto;
  background:#fff;border-right:1px solid var(--line);
  transition:transform .25s var(--ease);z-index:1030;
}
.c360-sidebar .nav-link{
  color:var(--ink-soft);
  border-radius:var(--radius-sm);
  margin:.2rem 0;padding:.7rem 1rem;
  font-weight:500;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.c360-sidebar .nav-link:hover{background:var(--bg-cream);color:var(--ink);}
.c360-sidebar .nav-link.active{
  background:var(--yellow);color:var(--ink);
  box-shadow:var(--shadow-sm);
}

.c360-main{margin-left:var(--c360-sidebar-w);min-height:calc(100vh - var(--c360-topbar-h));}

@media (max-width:991.98px){
  .c360-sidebar{transform:translateX(-100%);}
  .c360-sidebar.show{transform:translateX(0);box-shadow:var(--shadow-lg);}
  .c360-main{margin-left:0;}
}

/* ---------- Cards ---------- */
.c360-card{
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  background:#fff;
  transition:box-shadow .25s var(--ease),transform .25s var(--ease);
}
.c360-card:hover{box-shadow:var(--shadow-md);}

/* ---------- Botones ---------- */
.btn{border-radius:var(--radius-sm);font-weight:600;font-family:"Plus Jakarta Sans","Inter",sans-serif;}
.btn-primary{
  background:var(--yellow);border-color:var(--yellow);color:var(--ink);
}
.btn-primary:hover,.btn-primary:focus{
  background:var(--yellow-deep);border-color:var(--yellow-deep);color:var(--ink);
  box-shadow:var(--shadow-yellow);
}
.btn-primary:disabled{background:var(--yellow-soft);border-color:var(--yellow-soft);color:var(--ink);}
.btn-dark{background:var(--ink);border-color:var(--ink);}
.btn-dark:hover{background:var(--ink-soft);border-color:var(--ink-soft);}
.btn-outline-primary{
  color:var(--ink);border-color:var(--ink);background:#fff;
}
.btn-outline-primary:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow);}
.btn-link{color:var(--ink);}
.btn-link:hover{color:var(--ink-soft);}

/* ---------- Forms ---------- */
.form-control,.form-select{
  border-radius:var(--radius-sm);border-color:var(--line);
}
.form-control:focus,.form-select:focus{
  border-color:var(--yellow-deep);
  box-shadow:0 0 0 .25rem var(--yellow-glow);
}
.form-check-input:checked{background-color:var(--ink);border-color:var(--ink);}
.form-switch .form-check-input:checked{background-color:var(--yellow);border-color:var(--yellow);}
.input-group-text{background:var(--bg-cream);border-color:var(--line);}

/* ---------- Wizard ---------- */
.c360-steps{display:flex;gap:.5rem;margin-bottom:1.5rem;flex-wrap:wrap;}
.c360-step{
  flex:1 1 0;min-width:130px;padding:.75rem 1rem;border-radius:var(--radius-sm);
  background:#fff;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:.6rem;
  border:1px solid var(--line);
  font-family:"Plus Jakarta Sans","Inter",sans-serif;
}
.c360-step.activo{background:var(--yellow);color:var(--ink);border-color:var(--yellow-deep);box-shadow:var(--shadow-sm);}
.c360-step.completo{background:var(--ink);color:#fff;border-color:var(--ink);}
.c360-step .num{
  width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.7);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;
}
.c360-step.completo .num{background:var(--yellow);color:var(--ink);}

/* ---------- Pills de estado ---------- */
.c360-pill{padding:.25rem .7rem;border-radius:999px;font-size:.75rem;font-weight:700;letter-spacing:.3px;text-transform:uppercase;}
.c360-pill.planificado{background:#fff3cd;color:#664d03;}
.c360-pill.activo{background:var(--yellow);color:var(--ink);}
.c360-pill.cerrado{background:#e9ecef;color:#495057;}
.c360-pill.cancelado{background:#f8d7da;color:#842029;}
.c360-pill.presente{background:#d1e7dd;color:#0a3622;}
.c360-pill.asignado{background:#e7f1ff;color:#084298;}
.c360-pill.retirado{background:#e2e3e5;color:#41464b;}
.c360-pill.no_asistio{background:#f8d7da;color:#842029;}

/* ---------- Tablas ---------- */
.table thead th{
  font-family:"Plus Jakarta Sans","Inter",sans-serif;
  font-size:.78rem;text-transform:uppercase;letter-spacing:.4px;
  color:var(--muted);font-weight:700;
}

/* ---------- Login ---------- */
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 20% 20%, rgba(254,254,1,.25), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(254,254,1,.18), transparent 50%),
    var(--black);
}
.login-card{
  max-width:430px;width:100%;border:0;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);background:#fff;
}
.brand-icon{
  width:68px;height:68px;border-radius:var(--radius-md);
  background:var(--yellow);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);font-size:2rem;margin:0 auto 1rem;
  box-shadow:var(--shadow-yellow);
}

/* ---------- Avatar / chips ---------- */
.c360-avatar{
  width:44px;height:44px;border-radius:50%;object-fit:cover;
  border:2px solid var(--yellow);background:var(--bg-cream);
}
.c360-chip{
  display:inline-flex;align-items:center;gap:.35rem;
  background:var(--bg-cream);border:1px solid var(--line);
  border-radius:999px;padding:.2rem .6rem;font-size:.78rem;color:var(--ink-soft);
}
.c360-chip i{color:var(--ink);}

/* ---------- Tabs ---------- */
.nav-tabs{border-bottom:2px solid var(--line);}
.nav-tabs .nav-link{
  color:var(--muted);font-weight:600;border:0;
  border-bottom:3px solid transparent;border-radius:0;
  font-family:"Plus Jakarta Sans","Inter",sans-serif;
  padding:.75rem 1.1rem;
}
.nav-tabs .nav-link.active{
  color:var(--ink);background:transparent;border-bottom-color:var(--yellow);
}
.nav-tabs .nav-link:hover{color:var(--ink);}
.nav-tabs .nav-link .badge{font-size:.7rem;}

/* Sub-navegación dentro de una sección (pills sutiles) */
.c360-subnav{
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:.3rem;display:inline-flex;flex-wrap:wrap;
}
.c360-subnav .nav-link{
  color:var(--ink-soft);font-weight:600;border-radius:999px;
  padding:.45rem 1rem;font-size:.9rem;
  font-family:"Plus Jakarta Sans","Inter",sans-serif;
}
.c360-subnav .nav-link:hover{background:var(--bg-cream);color:var(--ink);}
.c360-subnav .nav-link.active{background:var(--ink);color:#fff;}

/* ---------- Nav de secciones (Resumen / Colaboradores / Invitados) ---------- */
.c360-section-tabs{
  display:inline-flex;gap:.25rem;
  background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:.3rem;
  box-shadow:var(--shadow-sm);
  max-width:100%;overflow-x:auto;
}
.c360-section-tab{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.55rem 1.1rem;border-radius:999px;text-decoration:none;
  color:var(--ink-soft);font-weight:600;font-size:.92rem;
  font-family:"Plus Jakarta Sans","Inter",sans-serif;
  white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.c360-section-tab > i{font-size:1.05rem;}
.c360-section-tab:hover{background:var(--bg-cream);color:var(--ink);}
.c360-section-tab.active{
  background:var(--ink);color:#fff;
  box-shadow:0 2px 8px rgba(10,10,10,.18);
}
.c360-section-tab .badge{background:rgba(0,0,0,.12)!important;color:inherit!important;font-weight:700;}
.c360-section-tab.active .badge{background:var(--yellow)!important;color:var(--ink)!important;}
@media (max-width:575.98px){
  .c360-section-tab{padding:.5rem .85rem;font-size:.85rem;}
  .c360-section-tab > i{font-size:.95rem;}
}

/* ---------- Botones de scanner (más grandes y visibles) ---------- */
.c360-scan-btn{
  font-weight:600;padding:.5rem .9rem;
  font-family:"Plus Jakarta Sans","Inter",sans-serif;font-size:.85rem;
  white-space:nowrap;
}
.c360-scan-btn i{font-size:1.1rem;}

/* ---------- Footer ---------- */
.c360-footer{
  margin-top:2rem;padding:1rem 1.25rem;
  border-top:1px solid var(--line);
  background:#fff;
  display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;
  font-size:.78rem;color:var(--muted);
  font-family:"Inter",sans-serif;
}
.c360-footer a{
  color:var(--ink);text-decoration:none;
  border-bottom:1px dashed var(--yellow-deep);
}
.c360-footer a:hover{color:var(--ink);border-bottom-style:solid;}

/* ---------- Tablas responsive con mejor UX móvil ---------- */
@media (max-width: 575.98px){
  .table thead th{font-size:.7rem;padding:.4rem .3rem;}
  .table tbody td{font-size:.78rem;padding:.4rem .3rem;}
  .table .btn-group-sm > .btn,
  .table .btn-sm{padding:.2rem .4rem;font-size:.75rem;}
  .c360-card{border-radius:.75rem;}
  .nav-pills.c360-subnav .nav-link{padding:.4rem .75rem;font-size:.8rem;}
}
.table-responsive{ -webkit-overflow-scrolling:touch; }

/* ---------- Modal de equipo: filas legibles en móvil ---------- */
.eq-item .form-label{font-size:.7rem;color:var(--muted);}
@media (max-width: 575.98px){
  .eq-item .row > [class*="col-"]{padding-right:.25rem;padding-left:.25rem;}
  .eq-item .btn-sm{width:100%;}
}

/* ---------- Select de estado coloreado ---------- */
.c360-estado-select{
  font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.3px;
  border-radius:999px;padding:.25rem 2rem .25rem .9rem;
  width:auto;max-width:none;display:inline-block;
  cursor:pointer;border:1px solid transparent;
}
.c360-estado-select.c360-estado-planificado{background:#fff3cd;color:#664d03;border-color:#ffe69c;}
.c360-estado-select.c360-estado-activo     {background:var(--yellow);color:var(--ink);border-color:var(--yellow-deep);}
.c360-estado-select.c360-estado-cerrado    {background:#e9ecef;color:#495057;border-color:#ced4da;}
.c360-estado-select.c360-estado-cancelado  {background:#f8d7da;color:#842029;border-color:#f1aeb5;}
.c360-estado-select:focus{box-shadow:0 0 0 .2rem var(--yellow-glow);}

/* ---------- Misc ---------- */
.bg-yellow{background:var(--yellow);}
.text-ink{color:var(--ink);}
.divider-yellow{height:3px;background:var(--yellow);border-radius:2px;width:60px;margin:.5rem 0 1rem;}