/* ============================================================================
   TAHUA CLUB — Fase 4: Tablas y formularios (DataTables + forms)
   Dirección "Grafito & Ámbar". Solo CSS — cero markup, cero Blade.
   Consume exclusivamente var(--tahua-*) definidas en tahua-brand.css.
   Se aplica a las ~248 vistas que heredan DataTables/bootstrap-select/
   daterangepicker del layout. No renombra ni reestructura ninguna clase-gancho.
   ============================================================================ */

/* ============================ WRAPPER GENERAL ============================ */
.dataTables_wrapper{
  color:var(--tahua-ink);
}
.dataTables_wrapper .row:first-child{
  align-items:center;
  margin-bottom:14px;
  padding-bottom:14px;
  border-bottom:1px solid var(--tahua-line);
  row-gap:10px;
}
.dataTables_wrapper .row:last-child{
  align-items:center;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--tahua-line);
  row-gap:10px;
}

/* ============================ BUSCADOR (_filter) ============================ */
.dataTables_wrapper .dataTables_filter{
  text-align:right;
}
.dataTables_wrapper .dataTables_filter label{
  color:var(--tahua-muted);
  font-weight:650;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.dataTables_wrapper .dataTables_filter input{
  border:1px solid var(--tahua-line);
  border-radius:var(--tahua-r-control);
  background-color:var(--tahua-card);
  color:var(--tahua-ink);
  font-size:13.5px;
  padding:.45rem .8rem;
  height:38px;
  min-width:210px;
  margin-left:0;
  box-shadow:var(--tahua-shadow-sm);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.dataTables_wrapper .dataTables_filter input::placeholder{color:var(--tahua-muted)}
.dataTables_wrapper .dataTables_filter input:focus{
  border-color:var(--tahua-brand);
  outline:2px solid var(--tahua-brand);
  outline-offset:1px;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--tahua-brand) 22%,transparent);
}

/* ============================ LENGTH (_length) ============================ */
.dataTables_wrapper .dataTables_length label{
  color:var(--tahua-muted);
  font-weight:650;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  display:inline-flex;
  align-items:center;
}
.dataTables_wrapper .dataTables_length select{
  border:1px solid var(--tahua-line);
  border-radius:var(--tahua-r-control);
  background-color:var(--tahua-card);
  color:var(--tahua-ink);
  font-size:13.5px;
  font-weight:600;
  padding:0 1.9rem 0 .7rem;
  height:38px;
  margin:0 8px;
  box-shadow:var(--tahua-shadow-sm);
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .6rem center;
}
body.dark-mode .dataTables_wrapper .dataTables_length select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239A9AA0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.dataTables_wrapper .dataTables_length select:focus{
  border-color:var(--tahua-brand);
  outline:2px solid var(--tahua-brand);
  outline-offset:1px;
}

/* ============================ INFO (registros X de Y) ============================ */
.dataTables_wrapper .dataTables_info{
  color:var(--tahua-muted);
  font-size:13px;
  padding-top:.5rem;
}

/* ============================ BOTONES EXPORT (.dt-buttons) ============================
   Instrumento único: un set de chips grafito idénticos (mismo alto, ícono
   centrado, tipografía pareja) en vez de botones multicolor. El color se gasta
   una sola vez — oro en el estado activo, rojo reservado solo a "eliminar".
   El acento se revela en hover (elevación + borde oro), no con relleno fijo. */
.dt-buttons{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.dt-buttons .btn,
.dt-buttons button,
.dt-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:40px;
  height:38px;
  padding:0 .8rem!important;
  background-color:var(--tahua-card)!important;
  border:1px solid var(--tahua-line)!important;
  color:var(--tahua-ink)!important;
  border-radius:var(--tahua-r-control)!important;
  font-weight:600;
  font-size:13px;
  line-height:1;
  box-shadow:var(--tahua-shadow-sm)!important;
  transition:transform .14s ease,border-color .14s ease,background-color .14s ease,box-shadow .14s ease;
}
/* íconos export SIEMPRE visibles — vence a `.dt-buttons button span{color:#fff}`
   del tema (icono blanco sobre chip claro = invisible). Cubre <span> y <i>. */
.dt-buttons button span,
.dt-buttons .dt-button span,
.dt-button i,
.dt-buttons button i{
  color:var(--tahua-ink)!important;
  font-size:15px;
  line-height:1;
  display:inline-flex;
  align-items:center;
}
.dt-buttons .btn:hover,
.dt-buttons button:hover,
.dt-button:hover,
.dt-buttons .btn:focus,
.dt-buttons button:focus,
.dt-button:focus{
  background-color:var(--tahua-elev)!important;
  border-color:var(--tahua-brand)!important;
  color:var(--tahua-ink)!important;
  transform:translateY(-1px);
  box-shadow:var(--tahua-shadow-md)!important;
}
.dt-buttons .btn:active,
.dt-buttons button:active,
.dt-button:active,
.dt-buttons .btn.active,
.dt-button.active{
  background-color:var(--tahua-action)!important;
  border-color:var(--tahua-action)!important;
  color:var(--tahua-action-ink)!important;
  transform:translateY(0);
}
.dt-buttons .dt-button.active span,
.dt-buttons .dt-button.active i,
.dt-buttons button.active span,
.dt-buttons button.active i{color:var(--tahua-action-ink)!important}
/* "eliminar" es la única acción con color propio: rojo contenido, no relleno */
.buttons-delete,
.dt-buttons .buttons-delete{
  border-color:color-mix(in srgb,var(--tahua-bad) 40%,var(--tahua-line))!important;
}
.dt-buttons .buttons-delete span,
.dt-buttons .buttons-delete i{color:var(--tahua-bad)!important}
.buttons-delete:hover,
.dt-buttons .buttons-delete:hover{
  background-color:color-mix(in srgb,var(--tahua-bad) 10%,transparent)!important;
  border-color:var(--tahua-bad)!important;
}
/* panel colgante de columnas/colección */
.buttons-collection,
.dt-buttons .buttons-collection{padding:0 .8rem!important}
.dt-button-collection{
  background-color:var(--tahua-card);
  border:1px solid var(--tahua-line);
  border-radius:var(--tahua-r-card);
  box-shadow:var(--tahua-shadow-md);
  padding:6px;
}
.dt-button-collection .dt-button{
  display:flex;
  width:100%;
  height:auto;
  min-height:34px;
  justify-content:flex-start;
  text-align:left;
  margin:2px 0;
  box-shadow:none!important;
}
.dt-button-collection .dt-button:hover{transform:none}

/* ============================ TABLA / FILAS ============================ */
table.dataTable{
  border-collapse:separate!important;
  border-spacing:0;
}
table.dataTable thead th,
table.dataTable thead td{
  color:var(--tahua-muted);
  font-size:11.5px;
  font-weight:650;
  text-transform:uppercase;
  letter-spacing:.055em;
  padding:.75rem .8rem;
  border-bottom:1.5px solid var(--tahua-line)!important;
  background-color:transparent;
  white-space:nowrap;
}
table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after{
  opacity:.35;
}
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before{
  opacity:1;
  color:var(--tahua-brand);
}
table.dataTable tbody td{
  border-top:1px solid var(--tahua-line);
  color:var(--tahua-ink);
  vertical-align:middle;
  padding:.7rem .8rem;
  font-size:13.5px;
}
/* dinero / columnas numéricas: cifras tabulares alineadas a la derecha */
table.dataTable td.text-right,
table.dataTable th.text-right,
table.dataTable td.dt-right,
table.dataTable th.dt-right{
  text-align:right;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
table.dataTable.table-striped tbody tr:nth-of-type(odd){
  background-color:color-mix(in srgb,var(--tahua-ink) 2.5%,transparent);
}
table.dataTable tbody tr{
  transition:background-color .12s ease;
}
table.dataTable tbody tr:hover{
  background-color:color-mix(in srgb,var(--tahua-brand) 7%,transparent);
}
table.dataTable tbody tr.selected{
  background-color:color-mix(in srgb,var(--tahua-brand) 12%,transparent);
  box-shadow:inset 3px 0 0 var(--tahua-brand);
}

/* checkbox de selección de filas (.dt-checkboxes) */
.dt-checkboxes,
input.dt-checkboxes{
  width:16px;
  height:16px;
  accent-color:var(--tahua-action);
  cursor:pointer;
}

/* columna de acciones: iconos consistentes */
table.dataTable td.not-exported .btn,
table.dataTable td a[data-toggle="tooltip"]{
  color:var(--tahua-muted);
}
table.dataTable td.not-exported .btn:hover,
table.dataTable td a[data-toggle="tooltip"]:hover{
  color:var(--tahua-brand);
}

/* ============================ PAGINACIÓN ============================ */
.dataTables_wrapper .dataTables_paginate{
  display:inline-flex;
  gap:5px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:36px;
  height:36px;
  border:1px solid var(--tahua-line);
  border-radius:var(--tahua-r-control);
  color:var(--tahua-ink);
  font-size:13px;
  font-weight:600;
  padding:0 .6rem;
  margin:0;
  background-color:var(--tahua-card);
  transition:background-color .14s ease,border-color .14s ease,color .14s ease;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled{
  color:var(--tahua-muted);
  opacity:.6;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current){
  background-color:color-mix(in srgb,var(--tahua-brand) 10%,transparent);
  border-color:var(--tahua-brand);
  color:var(--tahua-ink);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  background-color:var(--tahua-action)!important;
  border-color:var(--tahua-action)!important;
  color:var(--tahua-action-ink)!important;
}

/* ============================ FORMULARIOS ============================ */
.form-group{
  margin-bottom:1.1rem;
}
.form-group label,
label,
.control-label{
  color:var(--tahua-ink);
  font-weight:600;
  font-size:13.5px;
  margin-bottom:.4rem;
}
.form-control,
.custom-select,
select.form-control{
  border:1px solid var(--tahua-line);
  border-radius:var(--tahua-r-control);
  background-color:var(--tahua-card);
  color:var(--tahua-ink);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.form-control::placeholder{color:var(--tahua-muted)}
.form-control:focus,
.custom-select:focus,
select.form-control:focus{
  border-color:var(--tahua-brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--tahua-brand) 18%,transparent);
  outline:none;
}
.form-control:disabled,
.form-control[readonly]{
  background-color:var(--tahua-bg);
  color:var(--tahua-muted);
}
textarea.form-control{
  min-height:88px;
}
/* selects nativos de filtro (Estado / Método de pago): caret oro-neutro
   coherente con el length de DataTables, sin depender del selectpicker */
select.form-control:not([multiple]):not([size]){
  appearance:none;
  -webkit-appearance:none;
  padding-right:2rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .7rem center;
}
body.dark-mode select.form-control:not([multiple]):not([size]){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239A9AA0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.input-group-text{
  border:1px solid var(--tahua-line);
  background-color:var(--tahua-elev);
  color:var(--tahua-muted);
}
.custom-control-label::before{
  border:1px solid var(--tahua-line);
  background-color:var(--tahua-card);
}
.custom-control-input:checked~.custom-control-label::before{
  background-color:var(--tahua-action);
  border-color:var(--tahua-action);
}
.custom-control-input:focus~.custom-control-label::before{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--tahua-brand) 22%,transparent);
}

/* ============================ BOOTSTRAP-SELECT (.selectpicker) ============================ */
.bootstrap-select .dropdown-toggle,
.bootstrap-select>.btn{
  border:1px solid var(--tahua-line)!important;
  border-radius:var(--tahua-r-control)!important;
  background-color:var(--tahua-card)!important;
  color:var(--tahua-ink)!important;
}
.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select>.btn:focus{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--tahua-brand) 18%,transparent)!important;
  border-color:var(--tahua-brand)!important;
}
.bootstrap-select .dropdown-toggle .filter-option-inner-inner{
  color:var(--tahua-ink);
}
.bootstrap-select .dropdown-menu{
  background-color:var(--tahua-card);
  border:1px solid var(--tahua-line);
  border-radius:var(--tahua-r-card);
  box-shadow:var(--tahua-shadow-md);
  padding:6px;
}
.bootstrap-select .dropdown-menu .dropdown-item,
.bootstrap-select .dropdown-menu li>a.dropdown-item{
  color:var(--tahua-ink);
  border-radius:6px;
  padding:.45rem .75rem;
}
.bootstrap-select .dropdown-menu li>a.dropdown-item:hover,
.bootstrap-select .dropdown-menu li>a.dropdown-item:focus{
  background-color:color-mix(in srgb,var(--tahua-brand) 10%,transparent);
  color:var(--tahua-ink);
}
.bootstrap-select .dropdown-menu li.selected>a.dropdown-item,
.bootstrap-select .dropdown-menu .active>a.dropdown-item{
  background-color:var(--tahua-brand-soft);
  color:var(--tahua-ink);
}
.bootstrap-select .bs-searchbox .form-control{
  border-radius:var(--tahua-r-control);
}
.bootstrap-select .no-results{
  color:var(--tahua-muted);
  background-color:transparent;
}

/* ============================ DATERANGEPICKER (knockout-daterangepicker) ====
   El plugin real es knockout-daterangepicker (Sensor Tower), NO el bootstrap
   daterangepicker. Su marca propia es MORADA (#7c5cc4) y su CSS puede cargar
   asíncrono (preload+onload), así que TODO override va con !important y
   especificidad ≥ plugin. Objetivo de Sergio: compacto, denso, elegante —
   pestañas y rango en grafito/oro, día seleccionado en oro, cero morado.
   Estructura: .daterangepicker > .controls(.periods + .ranges + .custom-range-*)
   + .calendar(.calendar-header + .calendar-table). ======================== */

/* --- Contenedor: card compacta, tipografía menor, sombra premium --- */
.daterangepicker{
  background:var(--tahua-card)!important;
  border:1px solid var(--tahua-line)!important;
  border-radius:12px!important;
  box-shadow:var(--tahua-shadow-lg)!important;
  color:var(--tahua-ink)!important;
  padding:10px!important;
  font-size:12px!important;
  font-family:var(--tahua-sans)!important;
  line-height:1.45!important;
}
.daterangepicker .controls{min-width:168px!important;margin:2px!important}

/* --- Caret de orientación: que herede color de la card --- */
.daterangepicker.orientation-left:not(.standalone):after,
.daterangepicker.orientation-right:not(.standalone):after{
  border-bottom-color:var(--tahua-card)!important;
}
.daterangepicker.orientation-left:not(.standalone):before,
.daterangepicker.orientation-right:not(.standalone):before{
  border-bottom-color:var(--tahua-line)!important;
}

/* --- Pestañas Day/Week/Month/Quarter/Year: control segmentado grafito --- */
.daterangepicker .periods{
  background:var(--tahua-elev)!important;
  border:1px solid var(--tahua-line)!important;
  border-radius:9px!important;
  padding:2px!important;
  gap:2px!important;
  margin:0 0 10px!important;
}
.daterangepicker .periods li,
.daterangepicker .periods li:first-child,
.daterangepicker .periods li:last-child{
  background:transparent!important;
  color:var(--tahua-muted)!important;
  border-radius:6px!important;
  padding:4px 9px!important;
  font-size:11px!important;
  font-weight:600!important;
  letter-spacing:.015em!important;
  transition:background-color .14s ease,color .14s ease!important;
}
.daterangepicker .periods li:hover{
  background:color-mix(in srgb,var(--tahua-brand) 13%,transparent)!important;
  color:var(--tahua-ink)!important;
}
.daterangepicker .periods li.active,
.daterangepicker .periods li.active:hover{
  background:var(--tahua-action)!important;
  color:var(--tahua-action-ink)!important;
  box-shadow:var(--tahua-shadow-sm)!important;
}

/* --- Lista de rangos "Hoy / Ayer / Últimos 7 días…": densa y sobria --- */
.daterangepicker .ranges li,
.daterangepicker .ranges li:first-child,
.daterangepicker .ranges li:last-child{
  background:transparent!important;
  color:var(--tahua-ink)!important;
  border-radius:6px!important;
  padding:5px 10px!important;
  margin-bottom:2px!important;
  font-size:12.5px!important;
  font-weight:500!important;
  text-align:left!important;
  transition:background-color .12s ease,color .12s ease!important;
}
.daterangepicker .ranges li:hover{
  background:color-mix(in srgb,var(--tahua-brand) 12%,transparent)!important;
  color:var(--tahua-ink)!important;
}
.daterangepicker .ranges li.active,
.daterangepicker .ranges li.active:hover{
  background:var(--tahua-brand-soft)!important;
  color:var(--tahua-ink)!important;
  font-weight:650!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tahua-brand) 45%,transparent)!important;
}

/* --- Inputs de rango manual: campos de formulario con foco oro --- */
.daterangepicker .custom-range-inputs input{
  border:1px solid var(--tahua-line)!important;
  border-radius:7px!important;
  background:var(--tahua-card)!important;
  color:var(--tahua-ink)!important;
  font-size:12.5px!important;
  padding:.42em .55em!important;
}
.daterangepicker .custom-range-inputs input:focus{
  border-color:var(--tahua-brand)!important;
  outline:none!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--tahua-brand) 20%,transparent)!important;
}

/* --- Botones: Apply grafito sólido, Cancel discreto (ghost) --- */
.daterangepicker .custom-range-buttons button{
  border-radius:7px!important;
  font-size:12.5px!important;
  font-weight:600!important;
  padding:5px 12px!important;
  background:transparent!important;
  color:var(--tahua-muted)!important;
  border:1px solid transparent!important;
  transition:background-color .14s ease,color .14s ease!important;
}
.daterangepicker .custom-range-buttons button:hover{
  background:color-mix(in srgb,var(--tahua-ink) 7%,transparent)!important;
  color:var(--tahua-ink)!important;
}
.daterangepicker .custom-range-buttons button.apply-btn{
  background:var(--tahua-action)!important;
  color:var(--tahua-action-ink)!important;
  border-color:var(--tahua-action)!important;
}
.daterangepicker .custom-range-buttons button.apply-btn:hover{
  background:var(--tahua-action-hover)!important;
  color:var(--tahua-action-ink)!important;
  border-color:var(--tahua-action-hover)!important;
}

/* --- Calendario: cabecera, selects y flechas neutras --- */
.daterangepicker .calendar .calendar-title{
  color:var(--tahua-muted)!important;
  font-size:11px!important;
  font-weight:650!important;
  text-transform:uppercase!important;
  letter-spacing:.05em!important;
}
.daterangepicker .calendar .calendar-header button:hover{
  background:color-mix(in srgb,var(--tahua-brand) 10%,transparent)!important;
  border-radius:6px!important;
}
.daterangepicker select{
  background:var(--tahua-card)!important;
  border:1px solid var(--tahua-line)!important;
  border-radius:6px!important;
  color:var(--tahua-ink)!important;
  font-size:12px!important;
  padding:3px 6px!important;
}
.daterangepicker .arrow-left,
.daterangepicker .arrow-right{background-color:var(--tahua-muted)!important}
.daterangepicker .arrow-left:before{border-right-color:var(--tahua-muted)!important}
.daterangepicker .arrow-right:before{border-left-color:var(--tahua-muted)!important}

/* --- Rejilla de días: borde fino, in-range oro-suave, hover sutil --- */
.daterangepicker .calendar .calendar-table{
  border:1px solid var(--tahua-line)!important;
  border-radius:8px!important;
  background:var(--tahua-card)!important;
}
.daterangepicker .calendar .calendar-table .table-row .table-col.clickable:hover .table-value-wrapper{
  background:color-mix(in srgb,var(--tahua-brand) 15%,transparent)!important;
  border-radius:6px!important;
}
.daterangepicker .calendar .calendar-table .table-row .table-col.in-range{
  background:var(--tahua-brand-soft)!important;
}
.daterangepicker .calendar .calendar-table .table-row .table-col.week-day.unavailable,
.daterangepicker .calendar .calendar-table .table-row .table-col.out-of-boundaries,
.daterangepicker .calendar .calendar-table .table-row .table-col.unavailable{
  color:var(--tahua-muted)!important;
  opacity:.6!important;
}
/* Día seleccionado (inicio/fin de rango): ORO con tinta oscura, en ambos temas */
.daterangepicker .calendar .calendar-table .table-row .table-col.start-date .table-value-wrapper,
.daterangepicker .calendar .calendar-table .table-row .table-col.start-date .table-value-wrapper:hover,
.daterangepicker .calendar .calendar-table .table-row .table-col.end-date .table-value-wrapper,
.daterangepicker .calendar .calendar-table .table-row .table-col.end-date .table-value-wrapper:hover{
  background:var(--tahua-brand)!important;
  color:#1A1A1A!important;
  border-radius:6px!important;
  font-weight:650!important;
}

/* ============================ MODALES ============================ */
.modal-content{
  background-color:var(--tahua-card);
  border:1px solid var(--tahua-line);
  border-radius:var(--tahua-r-card);
  box-shadow:var(--tahua-shadow-lg);
  color:var(--tahua-ink);
}
.modal-header{
  border-bottom:1px solid var(--tahua-line);
  padding:1.1rem 1.5rem;
}
.modal-header .modal-title{
  color:var(--tahua-ink);
  font-weight:650;
}
.modal-body{
  padding:1.4rem 1.5rem;
}
.modal-footer{
  border-top:1px solid var(--tahua-line);
  padding:1rem 1.5rem;
}
.modal-backdrop.show{
  opacity:.55;
}
/* enlaces dentro de modales: acción grafito, nunca morado heredado de a{} */
.modal-body a,
.modal-content a:not(.btn):not(.dropdown-item):not(.close),
.modal-content .btn-link{
  color:var(--tahua-action);
}
.modal-body a:hover,
.modal-content a:not(.btn):not(.dropdown-item):not(.close):hover,
.modal-content .btn-link:hover{
  color:var(--tahua-action);
  text-decoration:underline;
}

/* ============================ TARJETA DE FILTROS ============================
   Patrón "Filtrar ventas": card + <h3> título + fila de selects + submit.
   Elevamos el título a un encabezado de sección con micro-regla oro (firma),
   damos aire al cuerpo y jerarquía real al botón de acción. */
.card>h3:first-child,
.card>h3.text-center{
  color:var(--tahua-ink);
  font-size:13px;
  font-weight:650;
  text-transform:uppercase;
  letter-spacing:.09em;
  margin:0;
  padding:1.15rem 1.5rem .95rem;
}
.card>h3.text-center::after{
  content:"";
  display:block;
  width:34px;
  height:2px;
  margin:.6rem auto 0;
  border-radius:2px;
  background-color:var(--tahua-brand);
}
/* la fila de campos respira; el label ya es 13.5px semibold */
.card-body .row .form-group{margin-bottom:.9rem}
.card-body .form-group label strong,
.form-group label strong{font-weight:650}
/* botón de aplicar filtro: acción primaria a lo ancho de su columna */
#filter-btn,
button#filter-btn.btn-primary{
  width:100%;
  height:38px;
  font-weight:650;
  letter-spacing:.02em;
}

/* ============================ BOTONES SECUNDARIOS OFF-BRAND ============================
   .btn-info (cyan Bootstrap) es el "Añadir venta" y varias acciones de cabecera
   que el rediseño nunca tocó. Lo llevamos al grafito de acción. Los grises
   Bootstrap (secondary/light/dark) pasan a chip neutro coherente. */
.btn-info,
.btn-info:focus,
.btn-info.disabled,
.btn-info:disabled,
.add-sale-btn.btn-info{
  background-color:var(--tahua-action);
  border-color:var(--tahua-action);
  color:var(--tahua-action-ink);
}
.btn-info:hover,
.btn-info:not(:disabled):not(.disabled):active,
.add-sale-btn.btn-info:hover{
  background-color:var(--tahua-action-hover);
  border-color:var(--tahua-action-hover);
  color:var(--tahua-action-ink);
}
.btn-info i,.btn-info span{color:var(--tahua-action-ink)}
.btn-secondary,
.btn-light,
.btn-dark,
.btn-teal{
  background-color:var(--tahua-card);
  border-color:var(--tahua-line);
  color:var(--tahua-ink);
}
.btn-secondary:hover,
.btn-light:hover,
.btn-dark:hover,
.btn-teal:hover,
.btn-secondary:focus,
.btn-light:focus,
.btn-dark:focus{
  background-color:var(--tahua-elev);
  border-color:var(--tahua-brand);
  color:var(--tahua-ink);
}

/* ============================================================================
   MATA-FUGAS DE MORADO (#7c5cc4 / #6244a6) — dominio DataTables + formularios
   Overrides que ganan por especificidad ≥ base y por orden de carga (este
   archivo se enlaza después de custom-default.css). Donde la base usa
   !important, el override también. Todo apunta a var(--tahua-*).
   ============================================================================ */

/* --- Paginación Bootstrap (.page-link / .page-item.active) usada en varias
   vistas junto a DataTables. Base: `.page-link{color:#7c5cc4}` y
   `.page-item.active .page-link{background:#7c5cc4;border-color:#7c5cc4}`. --- */
.page-link{
  color:var(--tahua-ink);
  background-color:var(--tahua-card);
  border:1px solid var(--tahua-line);
}
.page-link:hover{
  color:var(--tahua-ink);
  background-color:color-mix(in srgb,var(--tahua-brand) 10%,transparent);
  border-color:var(--tahua-brand);
}
.page-item.active .page-link{
  color:var(--tahua-action-ink);
  background-color:var(--tahua-action);
  border-color:var(--tahua-action);
}
.page-item.disabled .page-link{
  color:var(--tahua-muted);
  background-color:var(--tahua-card);
  border-color:var(--tahua-line);
}
/* dark: la base pinta `.dark-mode .page-link` con grises fijos — reafirmamos
   con tokens para que el active dorado y el hover sigan siendo coherentes. */
body.dark-mode .page-link{
  color:var(--tahua-ink);
  background-color:var(--tahua-card);
  border-color:var(--tahua-line);
}
body.dark-mode .page-item.active .page-link{
  color:var(--tahua-action-ink);
  background-color:var(--tahua-action);
  border-color:var(--tahua-action);
}

/* --- bootstrap-select: base `.bootstrap-select .btn-link{color:#7c5cc4}` --- */
.bootstrap-select .btn-link,
.bootstrap-select .btn-link:hover,
.bootstrap-select .btn-link:focus{
  color:var(--tahua-muted);
}
/* ítem activo/seleccionado del selectpicker: la base tiene
   `.dropdown-item.active{background:#7c5cc4}` y `.dropdown-item.selected{color:#7c5cc4}` */
.bootstrap-select .dropdown-menu .dropdown-item.active,
.bootstrap-select .dropdown-menu .dropdown-item:active,
.bootstrap-select .dropdown-menu .dropdown-item.selected{
  background-color:var(--tahua-brand-soft);
  color:var(--tahua-ink);
}

/* --- daterangepicker: base
   `.daterangepicker .custom-range-buttons button.apply-btn{background:#7c5cc4}` --- */
.daterangepicker .custom-range-buttons button.apply-btn,
.daterangepicker .custom-range-buttons button.apply-btn:hover{
  background:var(--tahua-action);
  color:var(--tahua-action-ink);
  border-color:var(--tahua-action);
}

/* --- Export collection: base pinta el panel y el botón de morado sólido
   `.dt-button-collection.dropdown-menu{background:#7c5cc4}` (2 clases, vence a
   mi `.dt-button-collection`) y `.buttons-collection{background:#7c5cc4}`. --- */
.dt-button-collection.dropdown-menu{
  background:var(--tahua-card);
  border:1px solid var(--tahua-line);
  border-radius:var(--tahua-r-card);
  box-shadow:var(--tahua-shadow-md);
}
.dt-button-collection.dropdown-menu a{
  color:var(--tahua-ink);
}
.buttons-collection,
.dt-buttons .buttons-collection{
  background:var(--tahua-card)!important;
  color:var(--tahua-ink)!important;
}

/* --- edit-options (dropdown de acciones de fila en las tablas). Base:
   `.dropdown-menu.edit-options li .btn-link,.dropdown-menu.edit-options li a{color:#7c5cc4}`
   y su :hover con `background:var(--primary-bg-color);color:#7c5cc4`. --- */
.dropdown-menu.edit-options li .btn-link,
.dropdown-menu.edit-options li a{
  color:var(--tahua-ink);
}
.dropdown-menu.edit-options li .btn-link:hover,
.dropdown-menu.edit-options li a:hover,
.dropdown-item.selected{
  background-color:color-mix(in srgb,var(--tahua-brand) 10%,transparent);
  color:var(--tahua-brand);
}
body.dark-mode .dropdown-menu.edit-options li .btn-link,
body.dark-mode .dropdown-menu.edit-options li a{
  color:var(--tahua-ink);
}
body.dark-mode .dropdown-menu.edit-options li .btn-link:hover,
body.dark-mode .dropdown-menu.edit-options li a:hover{
  background-color:color-mix(in srgb,var(--tahua-brand) 16%,transparent);
  color:var(--tahua-brand);
}

/* --- Foco de inputs: base `.form-control:focus{border:1px solid #7c5cc4;box-shadow:none}`
   comparte selector; reafirmo con especificidad mayor para blindar el orden. --- */
.form-control:focus,
input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus{
  border-color:var(--tahua-brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--tahua-brand) 18%,transparent);
}

/* ============================================================================
   MINIATURAS DE PRODUCTO — placeholder elegante para imágenes rotas
   El controlador emite <img src="images/product/..."> por fila; cuando el
   archivo no existe (dev/local o producto sin foto) el navegador pinta el ícono
   de imagen rota. Convertimos cada miniatura en una tesela suave con un ícono
   neutro. Truco: los pseudo-elementos SOLO se renderizan cuando la imagen falla
   (en una imagen cargada el contenido reemplazado los tapa), así que ::before
   aparece únicamente en imágenes rotas. La base ponía círculo 50px + padding;
   lo llevamos a tesela cuadrada redondeada, más de producto que de avatar. ---- */
table.dataTable td img{
  width:44px!important;
  height:44px!important;
  max-width:44px!important;
  max-height:44px!important;
  padding:0!important;
  border:1px solid var(--tahua-line)!important;
  border-radius:10px!important;
  background-color:var(--tahua-elev)!important;
  object-fit:cover!important;
  position:relative!important;
  overflow:hidden!important;
  color:transparent!important;          /* oculta el texto alt en imágenes rotas */
  font-size:0!important;
  box-shadow:var(--tahua-shadow-sm);
  transition:transform .14s ease,box-shadow .14s ease;
}
table.dataTable tbody tr:hover td img{
  transform:translateY(-1px);
  box-shadow:var(--tahua-shadow-md);
}
table.dataTable td img::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background-color:var(--tahua-elev);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238C8C92' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:52%;
}

/* ============================================================================
   TARJETA DE FILTROS — pulido de aire y densidad ("Ventas de filtros" /
   "Productos de filtro"). El título con micro-regla oro ya vive arriba; aquí
   damos respiración a la fila de campos y afinamos la altura de los controles
   de filtro para que casen con los 38px de la barra de DataTables. ---------- */
.card-body .form-group>label,
.card-body .row .form-group>label{
  font-size:12px;
  font-weight:650;
  letter-spacing:.01em;
  color:var(--tahua-muted);
  text-transform:none;
}
.card-body .form-control,
.card-body select.form-control,
.card-body .bootstrap-select>.btn{
  height:40px;
  font-size:13.5px;
}
.card-body textarea.form-control{height:auto}