/* ============================================================
   UI PRO — DISEÑO GLOBAL MARINS 2025 (Versión Optimizada V2)
   - Sin variables numéricas (color-016, 052, etc.)
   - Basado en variables semánticas definidas en theme.php:
        --color-primario, --bg-color, --bg-color-2, --bg-color-3,
        --text-color, --text-color-soft, --border-color, --shadow-soft,
        --success-color, --warning-color, --danger-color, --info-color
        y alias: --c-primary, --c-primary-hover, --c-bg-*, --c-text, etc.
============================================================ */

/* ============================================================
   TOKENS COMPLEMENTARIOS (DERIVADOS DE theme.php)
   - Sirven para estandarizar tablas, badges y filtros.
============================================================ */
:root {
  --surface-card: var(--bg-color-2);
  --surface-card-strong: var(--bg-color-3);

  --table-head-bg: var(--surface-card-strong);
  --table-head-text: var(--color-primario);
  --table-head-border: var(--border-color);
  --table-row-stripe: var(--bg-color);
  --table-row-hover: rgba(255, 255, 255, 0.07);
  --table-border-color: var(--border-color);

  --badge-soft-bg: rgba(255, 255, 255, 0.08);
  --badge-soft-border: var(--border-color);
  --badge-soft-text: var(--color-primario);

  --filter-border: var(--border-color);
  --filter-focus-ring: rgba(67, 93, 125, 0.25);

  --btn-icon-size: 38px;
}

@supports (color: color-mix(in srgb, white 50%, black)) {
  :root {
    --filter-focus-ring: color-mix(
      in srgb,
      var(--color-primario) 25%,
      transparent
    );
  }
}

/* ============================================================
   MODALES PRO
   - Estructura visual de los modales UI-PRO
============================================================ */

.modal-pro {
  border-radius: 12px !important;
  overflow: hidden !important;
  border: none !important;
}

.modal-header-pro {
  background: var(--color-primario) !important;
  color: var(--bg-color-2) !important;
  padding: 14px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: none !important;
}

.modal-header-pro .material-icons {
  font-size: 22px !important;
}

.close-pro {
  color: var(--bg-color-2) !important;
  font-size: 26px !important;
  background: none !important;
  border: none !important;
  opacity: 0.9 !important;
  cursor: pointer;
}
.close-pro:hover {
  opacity: 0.6 !important;
}

.modal-body {
  padding: 20px !important;
}

/* ============================================================
   MODAL FOOTER PRO — LAYOUT + GLASS HOVER
============================================================ */

.modal-footer-pro {
  background: var(--bg-color-2) !important;
  border-top: 1px solid var(--border-color) !important;

  padding: 20px 24px !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 18px !important;

  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

/* Botones dentro del footer (tamaño y tipografía) */
.modal-footer-pro .btn {
  min-width: 120px;
  height: 44px;

  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 15px !important;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 8px 18px !important;
  text-transform: none !important;
}

@media (max-width: 768px) {
  .modal-footer-pro .btn {
    min-width: 90px;
    height: 36px;
    padding: 6px 14px !important;
    font-size: 14px !important;
  }
}

/* ============================================================
   INPUTS PRO
   - Inputs genéricos e inputs dentro de filtros
============================================================ */

.input-pro,
.modal-body .form-control,
.filtros-pro .form-control {
  border-radius: 6px !important;
  border: 1px solid var(--border-color) !important;
  background: var(--bg-color);
  color: var(--text-color);
}

.input-pro:focus,
.modal-body .form-control:focus,
.filtros-pro .form-control:focus {
  border-color: var(--color-primario) !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08) !important;
}

.input-pro[readonly],
.modal-body .form-control[readonly] {
  background: #e9ecef !important;
  color: #5f6b76 !important;
  border-color: #ced4da !important;
  cursor: not-allowed;
}

.vinculado-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e8f5e9;
  color: #1b5e20;
  font-size: 12px;
  font-weight: 600;
  width: fit-content;
  max-width: 100%;
}

.vinculado-tag .material-icons {
  font-size: 16px;
}

.productos-tunel-table th.descripcion-col {
  width: 35%;
}

.productos-tunel-table td.descripcion-tunel {
  width: 35%;
  max-width: 360px;
  white-space: normal;
  word-break: break-word;
}

.badge-aportacion {
  background: #fff3e0;
  color: #e65100;
  font-weight: 600;
  margin-top: 4px;
  display: inline-block;
}

.tunel-mobile-info {
  display: none;
}

@media (max-width: 768px) {
  .productos-tunel-table .solo-desktop {
    display: none !important;
  }

  .tunel-mobile-info {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
  }

  .tunel-mobile-info .badge-tunel {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
  }

  .badge-codigo-movil {
    background: #f0f4c3;
    color: #827717;
  }

  .badge-precio-movil {
    background: #e3f2fd;
    color: #0d47a1;
  }

  .badge-coste-final-movil {
    background: #fbe9e7;
    color: #bf360c;
  }

  .badge-aportacion {
    background: #fff3e0;
    color: #e65100;
  }
}

/* ============================================================
   LABELS PRO
============================================================ */

.label-pro,
.modal-body label {
  font-weight: 600 !important;
  color: var(--color-primario) !important;
}

/* ============================================================
   BOTONES PRO (FUERA DE MODALES)
   - Los de modales se fuerzan al final del archivo
============================================================ */

.btn-pro {
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-weight: 600 !important;
  transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease,
    backdrop-filter 0.2s ease;
}

.btn-pro i {
  font-size: 18px !important;
  margin-right: 4px !important;
}

/* Botones principales (fuera de modales) */
.btn-primary,
.btn-success {
  background: var(
    --btn-primary-bg,
    var(--c-primary, var(--color-primario))
  ) !important;
  border-color: var(
    --btn-primary-bg,
    var(--c-primary, var(--color-primario))
  ) !important;
  color: var(--btn-primary-text, #fff) !important;
}

/* Hover estilo glass (Opción C) */
.btn-primary:hover,
.btn-success:hover {
  background: var(--btn-primary-hover-bg, rgba(255, 255, 255, 0.12)) !important;
  color: var(--btn-primary-text, #fff) !important;
  backdrop-filter: blur(4px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

/* Botón secundario general */
.btn-secondary {
  background: var(--btn-secondary-bg, var(--bg-color-3)) !important;
  color: var(--btn-secondary-text, var(--text-color)) !important;
  border: 1px solid var(--btn-secondary-border, var(--border-color)) !important;
}
.btn-secondary:hover {
  background: var(
    --btn-secondary-hover-bg,
    rgba(255, 255, 255, 0.12)
  ) !important;
  backdrop-filter: blur(4px);
}

.btn-icon-only {
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid var(--border-color) !important;
  background: var(--bg-color-2);
  color: var(--color-primario);
}

.btn-icon-only:hover {
  background: var(--bg-color-3);
}

/* ============================================================
   TABLAS PRO
   - Wrapper único, zebra, acciones y badges compartidas
============================================================ */

.table-wrapper {
  background: var(--surface-card) !important;
  padding: 20px 25px !important;
  border-radius: 15px !important;
  box-shadow: 0 2px 10px var(--shadow-soft) !important;
  border: 1px solid var(--table-border-color);
}

.table-responsive-pro {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table {
  margin-bottom: 0;
}

.table th {
  background: var(--table-head-bg);
  color: var(--table-head-text) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-bottom: 2px solid var(--table-head-border) !important;
}

.table td {
  vertical-align: middle !important;
  font-size: 14px !important;
  border-top: 1px solid var(--table-border-color);
}

.table td .material-icons {
  font-size: 20px;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--table-row-stripe) !important;
}

.table-hover tbody tr:hover {
  background: var(--table-row-hover) !important;
  backdrop-filter: blur(3px);
}

.table td a.edit i {
  color: var(--c-primary, var(--color-primario)) !important;
}
.table td a.delete i {
  color: var(--c-danger, var(--danger-color)) !important;
}

.table td a.edit:hover i,
.table td a.delete:hover i {
  opacity: 0.7 !important;
}

.table td a,
.table td a:active,
.table td a:focus {
  color: var(--color-primario) !important;
  text-decoration: none !important;
}

.table td a:hover {
  color: var(--color-primario) !important;
  text-decoration: none !important;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.16);
}

.table-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.acciones-descuentos > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin: 0 4px;
}

.badge-soft {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--badge-soft-bg);
  border: 1px solid var(--badge-soft-border);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--badge-soft-text);
}

.badge-soft[data-variant="success"] {
  background: rgba(34, 197, 94, 0.15);
  color: var(--success-color, #22c55e);
  border-color: rgba(34, 197, 94, 0.3);
}

.badge-soft[data-variant="warning"] {
  background: rgba(244, 162, 97, 0.15);
  color: var(--warning-color, #f4a261);
  border-color: rgba(244, 162, 97, 0.35);
}

.badge-soft[data-variant="danger"] {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger-color, #ef4444);
  border-color: rgba(239, 68, 68, 0.35);
}

/* ============================================================
   SCROLLBARS PRO
============================================================ */

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

/* ============================================================
   PRIVILEGIOS — CARDS CON SCROLL
============================================================ */

.priv-box,
.border-scroll {
  background: var(--bg-color-3) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  padding: var(--padding-global, 16px) !important;
  max-height: 260px !important;
  overflow-y: auto !important;
}

/* ============================================================
   BUSCADORES PRO
============================================================ */

#custom-search-input input {
  border-radius: 8px 0 0 8px !important;
}

#custom-search-input .btn {
  border-radius: 0 8px 8px 0 !important;
}

.filtros-roles,
.filtros-pro {
  display: flex;
  align-items: center;
  gap: 15px;
}

@media (max-width: 768px) {
  .filtros-roles,
  .filtros-pro {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ============================================================
   BLOQUES DE FILTROS COMPARTIDOS
============================================================ */
.filter-block {
  margin: 10px 0 18px;
}

.filter-block label {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primario);
  margin-bottom: 6px;
  display: block;
}

.filter-block select,
.filter-block .form-control {
  width: 100%;
  max-width: 320px;
  border-radius: 8px !important;
  padding: 7px 10px !important;
  border: 1px solid var(--filter-border) !important;
  font-size: 14px;
  background: var(--bg-color);
  color: var(--text-color);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.filter-block select:focus,
.filter-block .form-control:focus {
  border-color: var(--color-primario) !important;
  box-shadow: 0 0 0 2px var(--filter-focus-ring);
}

@media (max-width: 768px) {
  .filter-block {
    margin: 8px 0 12px;
  }
  .filter-block select,
  .filter-block .form-control {
    max-width: none;
    width: 100%;
  }
}

.filters-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--padding-global, 16px);
}

.filters-inline .filter-block {
  margin: 0;
}

.filters-inline .btn-icon-only,
.filters-inline .btn {
  align-self: flex-end;
}

@media (max-width: 768px) {
  .filters-inline {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ============================================================
   BADGES PRO (ROLES, USUARIOS)
============================================================ */

.badge-custom {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 10px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.badge-admin {
  background: var(--badge-admin) !important;
}
.badge-encargado {
  background: var(--badge-encargado) !important;
}
.badge-camarero {
  background: var(--badge-camarero) !important;
}
.badge-default {
  background: var(--badge-default) !important;
}

/* ============================================================
   GENERAL PAGE LAYOUT
============================================================ */

.page-roles,
.page-usuarios,
.page-sectores,
.page-productos,
.page-inventarios,
.page-cocteles,
.page-balinesas,
.page-pedidos {
  margin-bottom: 50px !important;
}

/* ============================================================
   HEADER PRO — UNIFICADO 2025
============================================================ */

.header-bar {
  background: var(--color-primario);
  border-radius: 15px;
  padding: var(--padding-global, 16px) 20px;
  max-width: 1100px;
  box-shadow: 0 2px 10px var(--shadow-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  color: var(--bg-color-2);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-title {
  display: flex;
  align-items: center;
}

.header-title h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--bg-color-2);
}

.menu-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 50px;
}

/* Botones de menú estilo glass */
.menu-buttons a {
  background: rgba(255, 255, 255, 0.18);
  color: var(--bg-color-2) !important;
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 6px 14px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease,
    backdrop-filter 0.2s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.menu-buttons a:hover {
  background: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
  transform: translateY(-1px);
}

.menu-buttons .logout {
  background: rgba(0, 0, 0, 0.2);
}

.menu-buttons .logout:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Hamburguesa */
.menu-toggle {
  background: none;
  border: none;
  color: var(--bg-color-2);
  font-size: 2.4rem;
  cursor: pointer;
  line-height: 1;
  display: none;
  margin-left: auto;
}

@media (max-width: 768px) {
  .header-bar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 18px 16px 12px;
  }

  .header-title {
    flex: 1 1 auto;
  }

  .header-title h2 {
    font-size: 20px;
  }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    font-size: 24px;
    padding: 4px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.15);
    color: var(--bg-color-2);
    z-index: 2;
  }

  .menu-buttons {
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin: 0;
    padding: 14px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  }

  .menu-buttons.show {
    display: flex;
  }

  .menu-buttons a {
    width: 100%;
    justify-content: flex-start;
    padding: 12px 16px;
    margin: 0;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.12);
  }
}

/* ============================================================
   PAGINACIÓN — UNIFICADA AL COLOR PRIMARIO
============================================================ */

.pagination .active a,
.pagination .active span {
  background: var(--color-primario) !important;
  border-color: var(--color-primario) !important;
  color: #fff !important;
  border-radius: 10px !important;
}

/* Hover glass en activa (ligerísimo para no molestar) */
.pagination .active a:hover,
.pagination .active span:hover {
  background: var(--color-primario) !important;
  border-color: var(--color-primario) !important;
  color: #fff !important;
}

.pagination li a,
.pagination li span {
  background: var(--bg-color-2) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-color) !important;
  border-radius: 10px !important;
  padding: 6px 14px !important;
  font-weight: 600 !important;
}

/* Hover glass para páginas no activas */
.pagination li a:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
}

.pagination .disabled span,
.pagination .disabled a {
  background: var(--bg-color) !important;
  color: var(--text-color-soft) !important;
  border-color: var(--border-color) !important;
  opacity: 0.6 !important;
}

/* ============================================================
   SISTEMA DE ALERTAS
============================================================ */

.alert,
#mb-alert {
  background: var(--bg-color-2) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  margin: 10px 0 18px !important;
  color: var(--text-color) !important;
  box-shadow: 0 4px 12px var(--shadow-soft) !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  animation: fadeInAlert 0.25s ease-out forwards;
}

/* Bordes laterales semánticos */
.alert-success {
  border-left: 5px solid var(--success-color) !important;
}
.alert-danger {
  border-left: 5px solid var(--danger-color) !important;
}
.alert-warning {
  border-left: 5px solid var(--warning-color) !important;
}
.alert-info {
  border-left: 5px solid var(--info-color) !important;
}

/* Botones dentro de alertas / confirmaciones */
.alert button,
#mb-alert button {
  border-radius: 10px !important;
  padding: 6px 14px !important;
  font-size: 14px !important;
  margin-right: 8px !important;
}

/* ============================================================
   CONFIRMACIONES SUPERPUESTAS
============================================================ */

#mb-confirm,
#mb-confirm-delete {
  backdrop-filter: blur(4px);
  background: rgba(0, 0, 0, 0.45) !important;
}

#mb-confirm .ios-confirm-box,
#mb-confirm-delete .ios-confirm-box {
  border-radius: 18px !important;
  padding: 24px 22px !important;
  background: var(--bg-color-2) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35) !important;
  animation: fadeInAlert 0.25s ease-out forwards;
}

#mb-confirm .ios-confirm-text,
#mb-confirm-delete .ios-confirm-text {
  font-size: 16px !important;
  font-weight: 600 !important;
  margin-bottom: 14px !important;
}

#mb-confirm .ios-confirm-actions .btn-danger,
#mb-confirm-delete .ios-confirm-actions .btn-danger {
  background: var(--danger-color) !important;
  border-color: var(--danger-color) !important;
  border-radius: 12px !important;
}

#mb-confirm .ios-confirm-actions .btn-light,
#mb-confirm-delete .ios-confirm-actions .btn-light {
  border-radius: 12px !important;
}

/* ============================================================
   UI-PRO — MÁRGENES, FOCUS, VARIOS
============================================================ */

.modal-footer {
  padding-bottom: 28px !important;
}

.modal-content {
  border-radius: 18px !important;
  padding-bottom: 6px !important;
}

#filtroEstadoChips {
  margin-bottom: 14px !important;
}

.glyphicon-search {
  display: none !important;
}

.material-icons:contains("search") {
  display: none !important;
}

.input-group-btn button.btn-info span.glyphicon-search,
.input-group-btn button.btn-info i.material-icons {
  display: none !important;
}

.input-group-btn button.btn-info {
  padding: 0 !important;
  width: 0 !important;
  border: none !important;
  background: transparent !important;
}

.configuracion-botones {
  margin-top: 40px !important;
}

.ui-input {
  height: 42px !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
}

.ui-btn {
  border-radius: 10px !important;
  padding: 8px 14px !important;
  font-weight: 600;
}

/* Focus global sin outline feo */
*:focus,
*:focus-visible,
*:focus-within {
  outline: none !important;
  box-shadow: none !important;
}

/* ============================================================
   CLIC EN MÓVIL — NIVEL Y COSTO
============================================================ */

.item.nivel,
.item.porcentaje {
  cursor: default;
  pointer-events: none;
}

@media (max-width: 768px) {
  .item.nivel,
  .item.porcentaje {
    cursor: pointer !important;
    pointer-events: auto !important;
  }
}

/* ============================================================
   BADGES UNIFICADOS (COSTE, TOTAL, CATEGORÍA MÓVIL, ETC)
============================================================ */

.ui-badge,
.badge,
.badge-pill-mobile,
.badge-total-mobile,
.categoria-badge-mobile {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: var(--color-primario) !important;
  color: var(--bg-color-2) !important;
  padding: 2px 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;

  border-radius: 10px !important;
  line-height: 1 !important;
  white-space: nowrap !important;

  border: none !important;
}

.badge-secondary,
.badge-default {
  background: var(--color-primario) !important;
  color: var(--bg-color-2) !important;
}

/* ============================================================
   ESTILO UNIFICADO DE FILTROS (GLASS SOFT)
============================================================ */

/* ============================================================
   INPUTS GENERALES (filtros, formularios, buscadores)
   - Mismo sistema que inputs de modales
   - Perfecto para tema claro/oscuro
============================================================ */

.form-control,
.filtro-input,
.filtro-select,
select.form-control {
  background: var(--bg-color-2) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-color) !important;

  border-radius: 10px !important;
  padding: 10px 12px !important;
  font-size: 14px !important;

  transition: 0.2s ease;
  box-sizing: border-box;
}

/* Placeholder coherente */
.form-control::placeholder,
.filtro-input::placeholder,
.filtro-select::placeholder,
select.form-control::placeholder {
  color: var(--text-color-soft) !important;
  opacity: 1;
}

/* Hover glass suave */
.form-control:hover,
.filtro-input:hover,
.filtro-select:hover,
select.form-control:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(4px);
}

/* Focus — halo primario */
.form-control:focus,
.filtro-input:focus,
.filtro-select:focus,
select.form-control:focus {
  border-color: var(--color-primario) !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15) !important;
  background: var(--bg-color-2) !important;
}

.form-control:hover,
.filtro-input:hover,
.filtro-select:hover,
select.form-control:hover {
  border-color: rgba(0, 0, 0, 0.18) !important;
}

.form-control:focus,
.filtro-input:focus,
.filtro-select:focus,
select.form-control:focus {
  border-color: var(--color-primario, #435d7d) !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1) !important;
  background: #fff !important;
}

select.form-control,
.filtro-select {
  line-height: 1.35 !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

select.form-control option,
.filtro-select option {
  line-height: 1.35 !important;
}

/* ================================
   INPUTS EN MODALES UI-PRO — Borde
================================ */

/* Inputs en modales — versión oscura/clara correctamente */
.modal .form-control {
  border: 2px solid var(--border-color) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;

  /* FONDOS DIFERENCIADOS POR TEMA */
  background-color: var(--bg-color-2) !important;

  /* TEXTO */
  color: var(--text-color) !important;

  /* PLACEHOLDER */
  --placeholder-color: var(--text-color-soft);
  box-shadow: none !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  font-size: 16px;
}

/* Placeholder compatible cross-browser */
.modal .form-control::placeholder {
  color: var(--text-color-soft) !important;
  opacity: 1;
}

/* Estado enfocado (focus) en inputs de modales */
.modal .form-control:focus {
  border-color: var(--color-primario) !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15) !important;
  background-color: #fff;
}

/* ============================================================
   FIX INPUT SELECT — TEXTO CORTADO EN MODO OSCURO
============================================================ */

select.form-control,
.filtro-select,
.modal .form-control[type="select-one"] {
  height: 44px !important; /* altura uniforme */
  line-height: normal !important; /* evita texto cortado */
  padding-top: 10px !important; /* centra verticalmente */
  padding-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
}

/* Para el texto dentro del select */
select.form-control option {
  line-height: 1.35 !important;
  padding: 6px !important;
}

/* Placeholder for selects (when browser uses first empty option) */
select.form-control:not([multiple]):invalid {
  color: var(--text-color-soft) !important;
}

/* ============================================================
   🔥 FIX DEFINITIVO 2025 — BOTONES DE MODALES CON COLOR PRINCIPAL
   - Aplica a TODOS los botones dentro de modales UI-PRO
   - Válido para tema claro y oscuro
   - No afecta a botones fuera de modales
============================================================ */

.modal-pro .btn,
.modal-footer-pro .btn,
.modal-content .btn {
  background: var(
    --btn-primary-bg,
    var(--c-primary, var(--color-primario))
  ) !important;
  border-color: var(
    --btn-primary-bg,
    var(--c-primary, var(--color-primario))
  ) !important;
  color: var(--btn-primary-text, #fff) !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
}

/* Hover glass en botones de modales */
.modal-pro .btn:hover,
.modal-footer-pro .btn:hover,
.modal-content .btn:hover {
  background: var(--btn-primary-hover-bg, rgba(255, 255, 255, 0.12)) !important;
  border-color: var(
    --btn-primary-hover-bg,
    rgba(255, 255, 255, 0.28)
  ) !important;
  color: var(--btn-primary-text, #fff) !important;
  backdrop-filter: blur(5px);
  transform: translateY(-1px);
}

/* Iconos dentro de botones de modales */
.modal-pro .btn i,
.modal-footer-pro .btn i {
  color: #fff !important;
}