:root{
  --cp-yellow:#f2b400;
  --cp-yellow-2:#ffc928;
  --cp-black:#0f0f0f;
  --cp-gray:#1c1c1c;
  --cp-white:#ffffff;
  --cp-muted:#9aa0a6;

  /* glass tuning */
  --cp-glass-b1: rgba(255,255,255,.08);
  --cp-glass-b2: rgba(255,255,255,.04);
  --cp-glass-border: rgba(255,255,255,.10);
  --cp-glow-1: rgba(242,180,0,.10);
  --cp-glow-2: rgba(242,180,0,.06);
}

/* BODY */
body{
  background-color:var(--cp-black);
  color:var(--cp-white);
}

/* NAVBAR */
.navbar{
  background:linear-gradient(180deg, #111, #0b0b0b);
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* OFFCANVAS */
.offcanvas{
  background-color:var(--cp-gray);
}
.offcanvas-title{
  color:var(--cp-yellow);
  font-weight:700;
}

/* LINKS MENU (list-group) */
.list-group-item{
  background:transparent;
  color:var(--cp-white);
  border-color:rgba(255,255,255,.10);
}
.list-group-item i{
  color:var(--cp-yellow);
}
.list-group-item:hover{
  background:rgba(242,180,0,.12);
  color:var(--cp-yellow);
}

/* BOTONES */
.btn-primary{
  background-color:var(--cp-yellow);
  border-color:var(--cp-yellow);
  color:#000;
  font-weight:700;
  box-shadow:
    0 12px 28px rgba(0,0,0,.35),
    0 0 0 1px rgba(242,180,0,.18);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn-primary:hover{
  background-color:var(--cp-yellow-2);
  border-color:var(--cp-yellow-2);
  color:#000;
  transform: translateY(-1px);
  box-shadow:
    0 16px 36px rgba(0,0,0,.45),
    0 0 0 1px rgba(242,180,0,.26),
    0 0 22px rgba(242,180,0,.10);
}

/* GLASS (panel/cards) - ÚNICA DEFINICIÓN */
.glass{
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 18px;

  /* degradado más rico + leve tono amarillo */
  background:
    linear-gradient(135deg, rgba(242,180,0,.10), rgba(255,255,255,.06), rgba(0,0,0,.30)),
    linear-gradient(180deg, var(--cp-glass-b1), var(--cp-glass-b2));

  border: 1px solid var(--cp-glass-border);

  box-shadow:
    0 18px 55px rgba(0,0,0,.60),
    0 0 0 1px var(--cp-glow-1),
    inset 0 0 42px var(--cp-glow-2);

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  will-change: transform;
}

/* Hover de panel/card */
.glass:hover{
  transform: translateY(-3px);
  border-color: rgba(242,180,0,.35);
  box-shadow:
    0 26px 78px rgba(0,0,0,.72),
    0 0 0 1px rgba(242,180,0,.18),
    inset 0 0 58px rgba(242,180,0,.12);
}

/* Evitar hover en móviles */
@media (hover:none){
  .glass:hover{ transform:none; }
}

/* TITULOS */
h4, h5{
  color:var(--cp-yellow);
}

/* LINKS */
a{
  color:var(--cp-yellow);
}
a:hover{
  color:#ffd966;
}

/* SPINNER */
.spinner-border{
  color:var(--cp-yellow);
}

/* ============ Central Parking - Form Controls (Dark) ============ */

.cp-dark .form-control,
.cp-dark .form-select{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  color:#fff;
}

.cp-dark .form-control:focus,
.cp-dark .form-select:focus{
  border-color: rgba(242,180,0,.35);
  box-shadow: 0 0 0 .25rem rgba(242,180,0,.10);
}

.cp-dark .form-control::placeholder{
  color: rgba(255,255,255,.6);
}

/* FIX: dropdown options legibles (browser pinta el menú claro) */
.cp-dark .form-select option{
  color:#111 !important;
  background:#fff !important;
}

/* Modales */
.cp-dark .modal .modal-content{
  border:1px solid rgba(255,255,255,.08);
}
.cp-dark .modal-header,
.cp-dark .modal-footer{
  border-color: rgba(255,255,255,.08);
}

/* Utilidades */
.cp-dark .badge-soft{
  background: rgba(242,180,0,.12);
  border: 1px solid rgba(242,180,0,.20);
  color:#ffd766;
}
.cp-dark .btn-ghost{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color:#fff;
}
.cp-dark .btn-ghost:hover{
  border-color: rgba(242,180,0,.25);
}
.cp-dark .small-muted{ opacity:.70; }

/* ===============================
   Dropdown Portal (GLOBAL - NO CLIP)
   =============================== */

/* Menú “portaleado” al body + posicionado por JS */
.cp-dd-fixed{
  position: fixed !important;
  z-index: 20000 !important; /* por encima del modal y backdrop */
  /* IMPORTANTES para que NO herede transforms de Popper */
  transform: none !important;
  inset: auto !important;
  margin: 0 !important;
  will-change: top,left;
}

/* opcional: que no cambie el ancho raro */
.cp-dd-fixed.dropdown-menu{
  min-width: 180px;
}

/* Si por estilo alguno de tus contenedores tiene overflow/rounded,
   NO lo tocamos globalmente para no romper bordes.
   El portal se encarga de “salir” sin depender de overflow. */

/* ============ Densidad UI (80%) ============ */
:root{
  --cp-scale: .80;
}

/* Tipografía base */
.cp-dark{
  font-size: calc(1rem * var(--cp-scale));
}

/* Inputs / selects / botones */
.cp-dark .form-control,
.cp-dark .form-select{
  padding: calc(.375rem * var(--cp-scale)) calc(.75rem * var(--cp-scale));
  font-size: calc(1rem * var(--cp-scale));
}

.cp-dark .btn{
  padding: calc(.375rem * var(--cp-scale)) calc(.75rem * var(--cp-scale));
  font-size: calc(1rem * var(--cp-scale));
}

.cp-dark .btn-sm{
  padding: calc(.25rem * var(--cp-scale)) calc(.5rem * var(--cp-scale));
  font-size: calc(.875rem * var(--cp-scale));
}

/* Tablas */
.cp-dark .table{
  font-size: calc(.95rem * var(--cp-scale));
}
.cp-dark .table th,
.cp-dark .table td{
  padding: calc(.75rem * var(--cp-scale));
}

/* Dropdown / toast (opcionales) */
.cp-dark .dropdown-menu{
  font-size: calc(1rem * var(--cp-scale));
}
.cp-dark .toast{
  font-size: calc(1rem * var(--cp-scale));
}

/* ===============================
   Bordes redondeados – Central Parking
   =============================== */

:root{
  --cp-radius-sm: 10px;
  --cp-radius-md: 12px;
  --cp-radius-lg: 14px;
}

/* ===== Cards / contenedores ===== */
.cp-dark .glass,
.cp-dark .card{
  border-radius: var(--cp-radius-md);
  overflow-x: auto;     /* scroll horizontal OK */
  overflow-y: hidden;   /* evita “corte” raro vertical */
}

/* table-responsive: por defecto NO permite overflow vertical (para respetar bordes),
   pero si usas .cp-scroll-area, ahí sí habilitamos scroll vertical */
.cp-dark .table-responsive{
  border-radius: var(--cp-radius-md);
  overflow-x: auto;
  overflow-y: hidden;
}
.cp-dark .table-responsive.cp-scroll-area{
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Para que el borde redondeado se aplique visualmente */
.cp-dark .table-responsive{
  -webkit-overflow-scrolling: touch;
}

/* ===== Tablas ===== */
.cp-dark .table{
  border-radius: var(--cp-radius-md);
  overflow: hidden;
}

.cp-dark .table thead th:first-child{
  border-top-left-radius: var(--cp-radius-md);
}
.cp-dark .table thead th:last-child{
  border-top-right-radius: var(--cp-radius-md);
}

.cp-dark .table tbody tr:last-child td:first-child{
  border-bottom-left-radius: var(--cp-radius-md);
}
.cp-dark .table tbody tr:last-child td:last-child{
  border-bottom-right-radius: var(--cp-radius-md);
}

/* ===== Modales ===== */
.cp-dark .modal-content{
  border-radius: var(--cp-radius-lg);
}

/* ===== Inputs / selects ===== */
.cp-dark .form-control,
.cp-dark .form-select{
  border-radius: var(--cp-radius-sm);
}

/* ===== Botones ===== */
.cp-dark .btn{
  border-radius: var(--cp-radius-sm);
}

/* ===== Dropdowns ===== */
.cp-dark .dropdown-menu{
  border-radius: var(--cp-radius-md);
}

/* ===== Toast ===== */
.cp-dark .toast{
  border-radius: var(--cp-radius-md);
}

/* ===== Badges ===== */
.cp-dark .badge{
  border-radius: 999px;
}

/* evita que el background de la tabla se “salga” del radio */
.cp-dark .table{
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
}

/* suaviza esquinas visibles en header */
.cp-dark .table thead th:first-child{ border-top-left-radius: var(--cp-radius-md); }
.cp-dark .table thead th:last-child{  border-top-right-radius: var(--cp-radius-md); }
.cp-dark .table tbody tr:last-child td:first-child{ border-bottom-left-radius: var(--cp-radius-md); }
.cp-dark .table tbody tr:last-child td:last-child{  border-bottom-right-radius: var(--cp-radius-md); }

/* Persona + correo compacto */
.cp-dark .cp-person{ line-height: 1.15; }
.cp-dark .cp-person .cp-name{
  font-weight: 600;
  font-size: .95em;
}
.cp-dark .cp-person .cp-mail{
  margin-top: 2px;
  font-size: .90em;
  opacity: .70;
}

.cp-dark .cp-person .cp-mail{
  cursor: pointer;
}
.cp-dark .cp-person .cp-mail:hover{
  opacity: .95;
  text-decoration: underline;
}

.sortable-placeholder{
  height: 52px;
  background: rgba(242,180,0,.15);
  border: 1px dashed rgba(242,180,0,.5);
  border-radius: 10px;
}

/* =========================
   Estados estándar
   ========================= */
.badge-estado{
  font-size: 0.65rem;
  padding: 0.35em 0.6em;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .3px;
}

/* Activo */
.badge-estado-activo{
  background: rgba(46, 204, 113, .18);
  color: #2ecc71;
  border: 1px solid rgba(46, 204, 113, .35);
}

/* Inactivo */
.badge-estado-inactivo{
  background: rgba(241, 196, 15, .18);
  color: #f1c40f;
  border: 1px solid rgba(241, 196, 15, .35);
}

/* Opcional futuro */
.badge-estado-anulado{
  background: rgba(189, 195, 199, .15);
  color: #bdc3c7;
  border: 1px solid rgba(189, 195, 199, .35);
}

/* ================================
   Modales con combos desplegables (GLOBAL)
   Usa la clase: .cp-modal-float
   ================================ */

.modal.cp-modal-float,
.modal.cp-modal-float .modal-dialog,
.modal.cp-modal-float .modal-content,
.modal.cp-modal-float .modal-body{
  overflow: visible !important;
}

.modal.cp-modal-float .glass{
  overflow: visible !important;
}

/* OJO: NO forzamos overflow visible en table-responsive global,
   porque rompe el borde redondeado.
   El portal resuelve dropdowns sin tocar overflow. */

/* Si quieres scroll, que sea una zona interna */
.modal.cp-modal-float .cp-scroll-area{
  max-height: calc(100vh - 320px);
  overflow-y: auto;
  overflow-x: hidden;
}

.modal.cp-modal-float .glass{
  position: relative;
  z-index: 2;
}
.modal.cp-modal-float .modal-body{
  position: relative;
  z-index: 1;
}

/* ==============================
   FIX MOBILE: modal asignación
   ============================== */
@media (max-width: 576px){

  /* 1) Toolbar: select y botón en columna */
  .cp-asig-toolbar{
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
  }

  .cp-asig-toolbar .cp-asig-select{
    width: 100% !important;
    max-width: 100% !important;
  }

  .cp-asig-toolbar .btn{
    width: 100% !important; /* botón "Asignar" visible */
  }

  /* 2) Modal más "mobile friendly" */
  #modal_asignacion_encuestas .modal-dialog{
    margin: .75rem auto;
    width: calc(100% - 1.5rem);
  }

  /* 3) Scroll REAL en la tabla dentro del modal
        (override directo al overflow-y:hidden global) */
  #modal_asignacion_encuestas .table-responsive.cp-scroll-area{
    max-height: 52vh;              /* ajusta si quieres más alto */
    overflow-y: auto !important;   /* <-- clave */
    overflow-x: auto !important;   /* permite deslizar horizontal */
    -webkit-overflow-scrolling: touch;
  }
}

/* Opcional: que cp-scroll-area funcione también en desktop */
#modal_asignacion_encuestas .table-responsive.cp-scroll-area{
  overflow-y: auto !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* =========================================================
   FIX: Scroll vertical en tablas dentro de modales (mobile/desktop)
   Tu regla global .cp-dark .table-responsive { overflow-y:hidden; }
   está bloqueando el scroll de .cp-scroll-area
   ========================================================= */

/* Permite que el contenedor con cp-scroll-area sí tenga scroll vertical */
.cp-dark .table-responsive.cp-scroll-area{
  overflow-y: auto !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch; /* móvil suave */
}

/* (Opcional recomendado) evita que el modal-body compita con el scroll interno */
.cp-dark .modal .modal-body{
  overflow: hidden; /* el scroll lo maneja cp-scroll-area */
}

/* Ajuste de altura del área scrolleable dentro del modal */
.modal .cp-scroll-area{
  max-height: calc(100vh - 360px);
}

/* Mobile: más altura útil para la tabla */
@media (max-width: 576px){
  .modal .cp-scroll-area{
    max-height: 45vh;  /* ajusta si quieres 50vh */
  }
}

/* Barra select + botón: desktop OK, mobile apila */
@media (max-width: 576px){
  .cp-asig-bar{
    flex-wrap: wrap !important;      /* permite salto */
  }

  .cp-asig-bar #asig_id_encuesta{
    min-width: 100% !important;
    flex: 1 1 100% !important;
  }

  .cp-asig-bar .wt_asig_button{
    width: 100% !important;          /* botón debajo, full ancho */
    flex: 1 1 100% !important;
  }
}

/* =========================================================
   Component: List Item with Floating Actions (Central Parking)
   Uso: <a class="list-group-item ... cp-li cp-li-actions">...</a>
   ========================================================= */

.cp-li{
  position: relative;
  border-radius: var(--cp-radius-md);
  overflow: hidden; /* mantiene bordes finos */
}

/* espacio reservado para botón acciones */
.cp-li-actions{
  padding-right: 60px !important;
}

/* botón acciones flotante */
.cp-li-actions .cp-li-actions-box{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

/* botón estilo “icon-circle” */
.cp-btn-icon{
  width: 38px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;

  border-radius: 12px;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.cp-btn-icon:hover{
  transform: translateY(-1px);
  border-color: rgba(242,180,0,.25);
  box-shadow: 0 10px 26px rgba(0,0,0,.35), 0 0 0 1px rgba(242,180,0,.10);
}

/* variante amarilla (como tu screenshot del +) */
.cp-btn-icon.cp-btn-yellow{
  background: rgba(242,180,0,.18);
  border-color: rgba(242,180,0,.35);
  color: var(--cp-yellow);
}

.cp-btn-icon.cp-btn-yellow:hover{
  background: rgba(242,180,0,.26);
  border-color: rgba(242,180,0,.55);
  color: var(--cp-yellow-2);
}

/* cuando el item está activo, subimos contraste */
.list-group-item.active.cp-li{
  background: rgba(242,180,0,.12) !important;
  border-color: rgba(242,180,0,.35) !important;
}