/* ═══════════════════════════════════════════
   modern.css — Estilos modernos compartidos
   ═══════════════════════════════════════════ */

/* ── Card ── */
.modern-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
  overflow: hidden;
  margin: 20px;
  font-family: 'Inter','Source Sans Pro','Helvetica Neue',Arial,sans-serif;
}

/* ── Card Header (table views) ── */
.modern-card-header-table {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px 20px;
  border-bottom: 1px solid #e8eaed;
}

/* ── Card Header (form views) ── */
.modern-card-header {
  padding: 20px 28px 20px;
  border-bottom: 1px solid #e8eaed;
}

/* ── Card Title ── */
.modern-card-title {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
  letter-spacing: 0.2px;
}

/* ── Section Title (subtítulo dentro de un modern-card-body, para separar
   sub-secciones de un mismo formulario largo, ej. camp_cumpleanos.php,
   discount_add.php) — clase ya referenciada en esos formularios pero nunca
   estilizada, quedaba como un <h4> por defecto del navegador. ── */
.modern-section-title {
  font-size: 14px;
  font-weight: 600;
  color: #2c3e50;
  letter-spacing: 0.2px;
  margin: 28px 0 14px;
  padding-top: 20px;
  border-top: 1px solid #e8eaed;
}
.modern-card-body > .modern-section-title:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* ── Header Left (back btn + title) ── */
.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Back Button ── */
.modern-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #f0f4ff;
  color: #1a5ab8;
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 14px;
}
.modern-back-btn:hover {
  background: #2c6bc0;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(58,123,213,0.3);
}

/* ── Add Button ── */
.modern-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 8px;
  background: linear-gradient(135deg, #3a7bd5, #2c6bc0);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
  letter-spacing: 0.2px;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.modern-add-btn:hover {
  background: linear-gradient(135deg, #2c6bc0, #1e5ba8);
  box-shadow: 0 4px 16px rgba(58,123,213,0.35);
  transform: translateY(-1px);
  color: #fff;
  text-decoration: none;
}

/* ── Card Body (form) ── */
.modern-card-body {
  padding: 24px 28px 12px;
}

/* ── Card Body (table) ── */
.modern-card-body-table {
  padding: 8px 28px 12px;
  overflow-x: auto;
}

/* ── Card Footer ── */
.modern-card-footer {
  padding: 16px 28px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* ── Quick Action Tiles ── */
.quick-tile {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  min-width: 80px;
  border: 1px solid #e8eaed;
  border-radius: 10px;
  text-decoration: none;
  color: #2c3e50;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  background: #fff;
}
.quick-tile:hover {
  border-color: #3a7bd5;
  box-shadow: 0 4px 12px rgba(58,123,213,0.1);
  color: #2c3e50;
}
.quick-tile img {
  height: 28px;
  width: 28px;
}
.quick-tile span {
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
}

/* ── Modern Table ── */
.modern-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: #2c3e50;
}
.modern-table thead tr {
  background: #f8f9fa;
}
.modern-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  color: #444;
  border-bottom: 2px solid #e8eaed;
  letter-spacing: 0.2px;
}
.modern-table thead .th-actions {
  width: 70px;
  text-align: center;
}
.modern-table tbody tr {
  transition: background 0.15s ease;
}
.modern-table tbody tr:hover {
  background: #f0f4ff;
}
.modern-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid #f0f2f5;
}
.modern-table tbody td {
  padding: 5px 16px;
  vertical-align: middle;
}
.modern-table tbody .td-actions {
  text-align: center;
}
.modern-table input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.modern-table input[type="checkbox"]:disabled:checked {
  opacity: 1;
}
#exampleEntryOutMoney thead th:nth-child(3),
#exampleEntryOutMoney tbody td:nth-child(3) {
  min-width: 90px;
  white-space: nowrap;
}

/* ── Action Button (edit/view inside table) ── */
.modern-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #f0f4ff;
  color: #1a5ab8;
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 14px;
}
.modern-action-btn:hover {
  background: #2c6bc0;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(58,123,213,0.3);
}

/* ── Form Layout ── */
.form-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.form-group {
  flex: 1;
  min-width: 200px;
  margin-bottom: 6px;
}
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 4px;
}

/* ── Modern Inputs ── */
.modern-input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 2px solid #7a7f8a;
  border-radius: 8px;
  font-size: 14px;
  color: #2c3e50;
  background: #fff;
  outline: none;
  transition: all 0.25s ease;
  font-family: inherit;
  box-sizing: border-box;
}
.modern-input:focus {
  border-color: #3a7bd5;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(58,123,213,0.08);
}
.modern-input::placeholder {
  color: #7a7f8a;
}
.modern-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #f0f0f0;
}

/* ── Modern Input (compact, for editable table cells) ── */
.modern-input-table {
  height: 32px;
  padding: 0 8px;
  border: 2px solid #7a7f8a;
  border-radius: 6px;
  font-size: 13px;
  color: #2c3e50;
  background: #fff;
  outline: none;
  transition: all 0.25s ease;
  font-family: inherit;
  box-sizing: border-box;
}
.modern-input-table:focus {
  border-color: #3a7bd5;
  box-shadow: 0 0 0 3px rgba(58,123,213,0.08);
}
.modern-input-table:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #f0f0f0;
}

.modern-input.was-invalid,
.modern-select.was-invalid,
.modern-textarea.was-invalid {
  border-color: #c0392b !important;
  box-shadow: 0 0 0 3px rgba(231,76,60,0.08) !important;
  background: #fff;
}

/* ── Modern Select ── */
.modern-select {
  width: 100%;
  cursor: pointer;
}
select.modern-select {
  height: 46px;
  padding: 0 36px 0 12px;
  border: 2px solid #7a7f8a;
  border-radius: 8px;
  font-size: 14px;
  color: #2c3e50;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a7f8a' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  outline: none;
  transition: all 0.25s ease;
  font-family: inherit;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
select.modern-select.form-control {
  height: 46px;
  padding: 0 36px 0 12px;
  border: 2px solid #7a7f8a;
  border-radius: 8px;
  box-shadow: none;
}
select.modern-select:focus {
  border-color: #3a7bd5;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(58,123,213,0.08);
}

/* ── Select múltiple (Productos/Paquetes/Servicios, etc.): la altura fija de
   46px de arriba aplastaba el listado sin importar el atributo "size", dejando
   solo 1-2 opciones visibles pese a pedir varias filas. Aquí se respeta el
   alto natural según "size" y se quita la flecha de dropdown (no aplica a un
   listado de varias filas). ── */
select[multiple].modern-select {
  height: auto;
  padding: 6px 10px;
  background-image: none;
}

/* ── Colaborador en la cuadrícula del Punto de Venta (Servicios/Productos/
   Paquetes): sin esto hereda width:100% de .modern-select y queda mucho más
   ancho que las celdas de Cantidad/Precio Unitario (.modern-input-table) de
   la misma fila. Se fija un ancho compacto y la misma altura que esas celdas
   para un formato uniforme. ── */
select.estilistas.modern-select {
  width: 15em !important;
  max-width: 15em;
  height: 32px;
  padding: 0 28px 0 8px;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Modern Textarea ── */
.modern-textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px 14px;
  border: 2px solid #7a7f8a;
  border-radius: 8px;
  font-size: 14px;
  color: #2c3e50;
  background: #fff;
  outline: none;
  transition: all 0.25s ease;
  font-family: inherit;
  box-sizing: border-box;
  resize: vertical;
}
.modern-textarea:focus {
  border-color: #3a7bd5;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(58,123,213,0.08);
}
.modern-textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #f0f0f0;
}
.modern-textarea::placeholder {
  color: #7a7f8a;
}

/* El atributo [hidden] pierde contra cualquier clase de este archivo que fije
   "display" (ej. .modern-btn usa display:inline-flex) porque el CSS del autor
   siempre le gana a la hoja de estilos por defecto del navegador que oculta
   [hidden] — por eso "elemento.hidden = true" no ocultaba botones/campos
   modern-*. Se refuerza aquí para que [hidden] siempre gane. */
[hidden] { display: none !important; }

/* ── Modern Button ── */
.modern-btn {
  height: 42px;
  padding: 0 32px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #3a7bd5, #2c6bc0);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: inherit;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.modern-btn:hover {
  background: linear-gradient(135deg, #2c6bc0, #1e5ba8);
  box-shadow: 0 4px 16px rgba(58,123,213,0.35);
  transform: translateY(-1px);
}
.modern-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
/* :disabled solo aplica a controles de formulario reales (button/input/select). Varias
   pantallas (Traslados, Cierre de Caja, Aceptación legal, etc.) marcan un enlace <a> como
   "deshabilitado" con esta clase — un <a> no tiene estado disabled nativo, así que sin esta
   regla se veía con el color completo y el hover activo aunque no hiciera nada al hacer clic. */
.modern-btn.disabled {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}
.modern-btn.modern-btn-success {
  background: linear-gradient(135deg, #28a745, #1e8a38);
  color: #fff;
}
.modern-btn.modern-btn-success:hover {
  background: linear-gradient(135deg, #1e8a38, #15732e);
  box-shadow: 0 4px 16px rgba(40,167,69,0.35);
  transform: translateY(-1px);
}
.modern-btn.modern-btn-danger {
  background: linear-gradient(135deg, #dc3545, #b52a38);
  color: #fff;
}
.modern-btn.modern-btn-danger:hover {
  background: linear-gradient(135deg, #b52a38, #9a2230);
  box-shadow: 0 4px 16px rgba(220,53,69,0.35);
  transform: translateY(-1px);
}
.modern-btn.modern-btn-warning {
  background: linear-gradient(135deg, #e67e22, #d35400);
  color: #fff;
}
.modern-btn.modern-btn-warning:hover {
  background: linear-gradient(135deg, #d35400, #ba4a00);
  box-shadow: 0 4px 16px rgba(230,126,34,0.35);
  transform: translateY(-1px);
}
.modern-btn.modern-btn-secondary {
  background: #f0f4ff;
  color: #1a5ab8;
}
.modern-btn.modern-btn-secondary:hover {
  background: #2c6bc0;
  color: #fff;
}
.modern-btn.modern-btn-purple {
  /* Mismo morado que el estado "Facturada" en la agenda (#9932CC) */
  background: linear-gradient(135deg, #9932CC, #7d2aa6);
  color: #fff;
}
.modern-btn.modern-btn-purple:hover {
  background: linear-gradient(135deg, #7d2aa6, #691f8a);
  box-shadow: 0 4px 16px rgba(153,50,204,0.35);
  transform: translateY(-1px);
}

/* ── Filter Bar Alignment ── */
.modern-card-body-table .row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
}
.modern-card-body-table .row > [class*="col-"] {
  padding: 0 8px;
  position: relative;
}
/* El mensaje de "Fecha Final no puede ser anterior..." se posiciona absoluto para no sumar
   a la altura de su columna — esta fila usa align-items:flex-end (alinea todo por abajo)
   para que labels/inputs/botones de distinta altura natural queden a ras; si el mensaje de
   error contara en el flujo normal, esa columna se volvía más alta y flex-end empujaba TODAS
   las demás columnas hacia abajo para volver a alinearlas por el fondo, desordenando el filtro
   completo cada vez que aparecía el error. */
.modern-card-body-table .row > [class*="col-"] .field-error {
  position: absolute;
  top: 100%;
  left: 8px;
  right: 8px;
  margin-top: 2px;
}
.modern-card-body-table .row > [class*="col-"] label {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 500;
  color: #444;
}
.modern-card-body-table .row > [class*="col-"] .modern-btn {
  height: 46px;
  width: 100%;
}

/* ── Custom Checkbox & Radio ── */
.modern-checkbox,
.modern-radio,
.checkbox-label input[type="checkbox"],
.checkbox-label input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #7a7f8a;
  background: #fff;
  cursor: pointer;
  vertical-align: middle;
  margin: -2px 6px 0 0;
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-sizing: border-box;
  outline: none;
}
.modern-checkbox,
.checkbox-label input[type="checkbox"] {
  border-radius: 5px;
}
.modern-radio,
.checkbox-label input[type="radio"] {
  border-radius: 50%;
}
.modern-checkbox:hover,
.modern-radio:hover,
.checkbox-label input[type="checkbox"]:hover,
.checkbox-label input[type="radio"]:hover {
  border-color: #3a7bd5;
}
.modern-checkbox:focus-visible,
.modern-radio:focus-visible,
.checkbox-label input[type="checkbox"]:focus-visible,
.checkbox-label input[type="radio"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(58,123,213,0.2);
  border-color: #3a7bd5;
}
.modern-checkbox:checked,
.checkbox-label input[type="checkbox"]:checked {
  background: #3a7bd5 url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6l3 3 5-5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;
  border-color: #3a7bd5;
}
.modern-radio:checked,
.checkbox-label input[type="radio"]:checked {
  border-color: #3a7bd5;
  background: #fff radial-gradient(circle at center, #3a7bd5 6px, #fff 6.5px);
}
.modern-checkbox:disabled,
.modern-radio:disabled,
.checkbox-label input[type="checkbox"]:disabled,
.checkbox-label input[type="radio"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.modern-checkbox:checked:disabled,
.checkbox-label input[type="checkbox"]:checked:disabled {
  background: #3a7bd5 url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6l3 3 5-5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;
  border-color: #3a7bd5;
  opacity: 0.6;
}

.modern-radio:checked:disabled,
.checkbox-label input[type="radio"]:checked:disabled {
  border-color: #3a7bd5;
  background: #fff radial-gradient(circle at center, #3a7bd5 6px, #fff 6.5px);
  opacity: 0.6;
}
.checkbox-label {
  font-size: 14px;
  color: #444;
  cursor: pointer;
}
.two-cols .checkbox-col {
  display: flex;
  align-items: center;
  padding-top: 8px;
}

/* ── Required asterisk ── */
.required { color: #c0392b; }

/* ── Validation ── */
.field-error {
  display: none;
  font-size: 12px;
  color: #c0392b;
  margin-top: 4px;
  font-weight: 500;
}

/* ── Callout / Alert moderno ── */
.callout {
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
  font-family: 'Inter','Source Sans Pro','Helvetica Neue',Arial,sans-serif !important;
  padding: 20px 24px !important;
}
.callout h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}
.callout p {
  font-size: 14px;
  color: #444;
  line-height: 1.5;
}
.callout.callout-warning {
  border-left: 4px solid #e0892a !important;
  background: #ffb366 !important;
  color: #4a2c00 !important;
}
.callout.callout-warning h4 {
  color: #3d2200;
}
.callout.callout-warning p {
  color: #4a2c00;
}
.callout.callout-success {
  border-left: 4px solid #1f9d55 !important;
  background: #6fcf97 !important;
  color: #0b3d1f !important;
}
.callout.callout-success h4 {
  color: #0b3d1f;
}
.callout.callout-success p {
  color: #0b3d1f;
}

/* ── Aviso de tope de fecha por defecto (tablas de Gestión/Inventario) ── */
.date-cap-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #6c7a89;
  margin: -8px 0 15px;
}
.date-cap-hint i {
  color: #2c6bc0;
}
.date-cap-info-suffix {
  color: #6c7a89;
  font-style: italic;
}
.date-cap-search-all-btn {
  display: inline-flex !important;
  width: auto !important;
  height: 32px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  margin: 10px 0 0;
  box-shadow: 0 2px 8px rgba(44,107,192,0.35);
}
.date-cap-search-all-btn:hover {
  box-shadow: 0 4px 14px rgba(44,107,192,0.45);
  transform: translateY(-1px);
}

/* ── Rango rápido (reportes con Fecha Inicial/Final) ──
   Mismas clases que ya usaba pages/charts/assets/reports.css para sus propios presets
   (Reportes Gráficos) — se agregan acá también, en el CSS global, para poder reutilizarlas
   en los 33 reportes pages/pdfs/*.php sin cargar un CSS adicional en cada uno. Se deja
   reports.css intacto (no se le quita nada) para no arriesgar nada en los gráficos. */
.rpt-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.rpt-preset-btn {
  border: 1px solid #e0e4ea;
  background: #f8f9fb;
  color: #5c6168;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.rpt-preset-btn:hover,
.rpt-preset-btn.active {
  background: linear-gradient(135deg, #3a7bd5, #2c6bc0);
  border-color: transparent;
  color: #fff;
}
#btnSendEmailActivation {
  height: 42px;
  padding: 0 32px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #3a7bd5, #2c6bc0);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: inherit;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  float: right;
}
#btnSendEmailActivation:hover {
  background: linear-gradient(135deg, #2c6bc0, #1e5ba8);
  box-shadow: 0 4px 16px rgba(58,123,213,0.35);
  transform: translateY(-1px);
  color: #fff;
}

/* ── Breadcrumb moderno ── */
.content-header {
  padding: 15px 20px 0 20px !important;
}
.content-header > .breadcrumb {
  background: #f0f4ff !important;
  border-radius: 20px !important;
  padding: 5px 16px !important;
  font-size: 13px !important;
  font-family: 'Inter','Source Sans Pro','Helvetica Neue',Arial,sans-serif !important;
  top: 12px !important;
  right: 18px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.content-header > .breadcrumb > li > a {
  color: #2c6bc0 !important;
  font-weight: 500;
}
.content-header > .breadcrumb > li > a:hover {
  color: #3a7bd5 !important;
  text-decoration: underline !important;
}
.content-header > .breadcrumb > li.active {
  color: #2c3e50 !important;
  font-weight: 600;
}
.content-header > .breadcrumb > li + li:before {
  content: '/' !important;
  color: #7a7f8a !important;
  padding: 0 6px !important;
}
@media (max-width: 991px) {
  .content-header > .breadcrumb {
    background: #f0f4ff !important;
    margin-top: 10px !important;
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
    float: none !important;
  }
}

/* ── Modal overlay ── */
#modalNewClient,
#modalConsulta,
#modalObservacion,
#modalTecnica {
  width:100%;
  height:100%;
  position:fixed;
  background-color: rgba(1,1,1,0.9);
  top:0;
  left:0;
  z-index:9999;
  overflow-y:auto;
}
#modalNewClient .modal-dialog,
#modalConsulta .modal-dialog,
#modalObservacion .modal-dialog,
#modalTecnica .modal-dialog {
  max-width: 700px;
  margin: 60px auto;
}

/* ── Nav tabs modern ── */
.nav-tabs-custom {
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.nav-tabs-custom > .nav-tabs {
  border-bottom: 2px solid #e8eaed;
  padding: 0 12px;
  background: #f8f9fa;
}
.nav-tabs-custom > .nav-tabs > li {
  margin-bottom: -2px;
}
.nav-tabs-custom > .nav-tabs > li > a {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  color: #444;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 16px;
  margin-right: 2px;
  border-radius: 0;
  transition: all 0.2s ease;
}
.nav-tabs-custom > .nav-tabs > li > a:hover {
  background: transparent;
  color: #2c6bc0;
}
.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs-custom > .nav-tabs > li.active > a:hover {
  border-bottom: 2px solid #3a7bd5 !important;
  color: #2c6bc0 !important;
  font-weight: 600;
  background: transparent !important;
}

/* ── Payment methods cards (POS) ── */
.pay-methods-wrapper {
  background: #fff;
  border-radius: 8px;
}
.pay-methods-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.pay-method-card {
  flex: 1;
  min-width: 72px;
  max-width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 6px 8px;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: all 0.2s ease;
  user-select: none;
}
.pay-method-card:hover {
  border-color: #a0b4d0;
  background: #f8faff;
}
.pay-method-card.active {
  border-color: #3a7bd5;
  background: #f0f6ff;
  box-shadow: 0 2px 8px rgba(58,123,213,0.15);
  color: #2c6bc0;
}
.pay-method-card.has-data {
  border-color: #27ae60;
  background: #f0faf4;
  box-shadow: 0 2px 8px rgba(39,174,96,0.15);
  color: #1e8449;
}
.pay-method-card.has-data.active {
  border-color: #3a7bd5;
  background: #e8f0fe;
  box-shadow: 0 2px 8px rgba(58,123,213,0.15);
  color: #2c6bc0;
}
.pay-method-card img {
  width: 28px;
  height: 28px;
}
.pay-methods-panel {
  border: 2px solid #e8eaed;
  border-radius: 10px;
  background: #fafbfc;
}
.pay-method-pane {
  display: none;
  padding: 12px 16px;
}
.pay-method-pane.active {
  display: block;
}
.pane-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #2c3e50;
}
.pane-header img {
  width: 20px;
  height: 20px;
}

/* ═══════════════════════════════════════════
   DataTable Overrides
   ═══════════════════════════════════════════ */
.dataTables_wrapper {
  font-family: 'Inter','Source Sans Pro','Helvetica Neue',Arial,sans-serif;
  font-size: 13px;
  color: #444;
  padding-top: 6px;
}
.dataTables_wrapper .dataTables_length {
  float: left;
  padding: 6px 0 10px;
  font-size: 13px;
  color: #444;
}
.dataTables_wrapper .dataTables_filter {
  float: right;
  padding: 6px 0 10px;
  font-size: 13px;
  color: #444;
}
.dataTables_wrapper .dataTables_length label {
  font-weight: normal;
  color: #444;
}
.dataTables_wrapper .dataTables_filter label {
  font-weight: normal;
  color: #444;
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  height: 34px;
  padding: 0 10px;
  border: 2px solid #7a7f8a !important;
  border-radius: 8px !important;
  font-family: inherit;
  font-size: 13px;
  color: #2c3e50;
  background: #f8f9fa;
  outline: none;
  transition: all 0.25s ease;
  box-sizing: border-box;
}
.dataTables_wrapper .dataTables_length select {
  margin: 0 4px;
  min-width: 60px;
  cursor: pointer;
}
.dataTables_wrapper .dataTables_filter input {
  margin-left: 6px;
  min-width: 180px;
}
.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: #3a7bd5 !important;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(58,123,213,0.08);
}
.dataTables_wrapper .dataTables_filter input::placeholder {
  color: #7a7f8a;
}
.dataTables_wrapper .dataTables_info {
  float: left;
  padding: 12px 0 6px;
  font-size: 13px;
  color: #5c6168;
}
.dataTables_wrapper .dataTables_paginate {
  float: right;
  padding: 8px 0 6px;
}
.dataTables_wrapper .dataTables_paginate ul.pagination {
  margin: 0;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.dataTables_wrapper .dataTables_paginate ul.pagination > li {
  display: inline-flex;
  margin: 0;
  border: none;
  background: none;
}
.dataTables_wrapper .dataTables_paginate ul.pagination > li > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  margin: 0;
  border: none !important;
  border-radius: 8px !important;
  background: transparent;
  color: #444;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none !important;
  font-weight: 500;
  line-height: 1;
  float: none;
  box-shadow: none;
}
.dataTables_wrapper .dataTables_paginate ul.pagination > li:first-child > a,
.dataTables_wrapper .dataTables_paginate ul.pagination > li:last-child > a {
  border-radius: 8px !important;
}
.dataTables_wrapper .dataTables_paginate ul.pagination > li > a:hover {
  background: #eef2f7 !important;
  color: #2c3e50 !important;
  border-color: transparent !important;
}
.dataTables_wrapper .dataTables_paginate ul.pagination > li.active > a,
.dataTables_wrapper .dataTables_paginate ul.pagination > li.active > a:hover {
  background: #3a7bd5 !important;
  color: #fff !important;
  font-weight: 600;
  border-color: transparent !important;
}
.dataTables_wrapper .dataTables_paginate ul.pagination > li.disabled > a,
.dataTables_wrapper .dataTables_paginate ul.pagination > li.disabled > a:hover {
  opacity: 0.35;
  cursor: not-allowed;
  background: transparent !important;
  color: #444 !important;
  border-color: transparent !important;
}
.dataTables_wrapper .dataTables_processing {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #444;
  background: #fff;
  border: 1px solid #e8eaed;
  border-radius: 10px;
  padding: 12px 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  letter-spacing: 0.2px;
  z-index: 9999;
}
/* Resaltado de coincidencias del buscador "Buscar:" (ver draw.dt en index.php) */
mark.dt-search-highlight {
  background: #fff3a3;
  color: inherit;
  padding: 0 1px;
  border-radius: 3px;
}
.dataTables_wrapper .dataTables_processing:before {
  content: "\f110";
  font-family: FontAwesome;
  display: inline-block;
  margin-right: 10px;
  animation: fa-spin 1s infinite steps(8);
}

/* ═══════════════════════════════════════════
   Select2 Overrides (modern theme)
   Mayor especificidad para vencer a select2.min.css
   ═══════════════════════════════════════════ */
.skin-blue .select2-container { width: 100%; }
.skin-blue .select2-container--default .select2-selection--single {
  height: 46px;
  border: 2px solid #7a7f8a;
  border-radius: 8px;
  outline: none;
  background: #fff;
  transition: all 0.25s ease;
  cursor: pointer;
}
.skin-blue .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 42px;
  padding: 0 36px 0 14px;
  color: #2c3e50;
  font-size: 14px;
  font-family: inherit;
}
.skin-blue .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #7a7f8a;
}
.skin-blue .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 42px;
  width: 30px;
  top: 2px;
  right: 2px;
}
.skin-blue .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #888 transparent transparent transparent;
  border-width: 5px 5px 0;
}
.skin-blue .select2-container--default.select2-container--open .select2-selection--single {
  border-color: #3a7bd5;
  box-shadow: 0 0 0 3px rgba(58,123,213,0.08);
}
.skin-blue .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #888;
  border-width: 0 5px 5px;
}
.skin-blue .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: #3a7bd5;
}
.skin-blue .select2-container--default.select2-container--disabled .select2-selection--single {
  opacity: 0.6;
  cursor: not-allowed;
  background: #f0f0f0;
}
/* ── Multi-Select (Tags) ── */
.skin-blue .select2-container--default .select2-selection--multiple {
  min-height: 46px;
  border: 2px solid #7a7f8a;
  border-radius: 8px;
  outline: none;
  background: #fff;
  transition: all 0.25s ease;
  cursor: pointer;
  padding: 2px 4px;
}
.skin-blue .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  padding: 2px 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.skin-blue .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: #e8f0fe;
  border: 1px solid #c4d4f0;
  border-radius: 6px;
  padding: 2px 24px 2px 8px;
  font-size: 13px;
  color: #2c3e50;
  margin: 2px 0;
  position: relative;
  line-height: 22px;
}
.skin-blue .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #7a7f8a;
  font-size: 16px;
  font-weight: 700;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
.skin-blue .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #c0392b;
}
.skin-blue .select2-container--default .select2-selection--multiple .select2-search--inline {
  margin: 0;
  padding: 0;
}
.skin-blue .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
  margin: 4px 0;
  padding: 0;
  font-family: inherit;
  font-size: 14px;
  color: #2c3e50;
  border: none;
  outline: none;
  background: transparent;
  min-width: 60px;
}
.skin-blue .select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: #3a7bd5;
  box-shadow: 0 0 0 3px rgba(58,123,213,0.08);
}
.skin-blue .select2-container--default.select2-container--disabled .select2-selection--multiple {
  opacity: 0.6;
  cursor: not-allowed;
  background: #f0f0f0;
}
.skin-blue .select2-container--default .select2-search--dropdown .select2-search__field {
  height: 38px;
  border: 2px solid #7a7f8a;
  border-radius: 8px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.25s ease;
  background: #fff;
  box-sizing: border-box;
}
.skin-blue .select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: #3a7bd5;
  box-shadow: 0 0 0 3px rgba(58,123,213,0.08);
}
.skin-blue .select2-dropdown {
  border: 2px solid #7a7f8a;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.1);
  overflow: hidden;
  font-family: inherit;
  font-size: 14px;
}
.skin-blue .select2-container--default .select2-results__option {
  padding: 10px 14px;
  color: #2c3e50;
  font-size: 14px;
  transition: background 0.15s ease;
}
.skin-blue .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: #f0f4ff;
  color: #1a5ab8;
}
.skin-blue .select2-container--default .select2-results__option[aria-selected=true] {
  background: #e8f0fe;
  color: #2c6bc0;
}
.skin-blue .select2-container--default .select2-results > .select2-results__options {
  max-height: 280px;
}
.skin-blue .select2-container--default .select2-results__option[role=group] { padding: 0; }
.skin-blue .select2-container--default .select2-results__group {
  padding: 8px 14px 4px;
  font-weight: 600;
  font-size: 12px;
  color: #5c6168;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ═══════════════════════════════════════════
   Modern Footer (Card style)
   ═══════════════════════════════════════════ */
.footer-card {
  background: #ffffff !important;
  border: none !important;
  border-top: 1px solid #e8eaed !important;
  padding: 12px 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-family: 'Inter','Source Sans Pro','Helvetica Neue',Arial,sans-serif !important;
  font-size: 13px !important;
  color: #5c6168 !important;
}
.footer-card .footer-version {
  background: #2c6bc0;
  color: #ffffff;
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}

/* ═══════════════════════════════════════════
   Modern Header (Header #3 — Gradiente + Toggle)
   ═══════════════════════════════════════════ */
.header-modern {
  background: linear-gradient(135deg, #3a7bd5, #2c6bc0) !important;
  height: 56px !important;
  max-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: 0 2px 12px rgba(42,95,168,0.25) !important;
  font-family: 'Inter','Source Sans Pro','Helvetica Neue',Arial,sans-serif;
  position: relative;
  z-index: 1030;
}
.header-modern .sidebar-toggle {
  height: 56px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  background: transparent !important;
  color: rgba(255,255,255,0.85) !important;
  text-decoration: none !important;
  float: none !important;
  padding: 0 14px !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: all 0.2s ease;
}
.header-modern .sidebar-toggle:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
}
.header-modern .sidebar-toggle span {
  display: block !important;
  width: 20px !important;
  height: 2px !important;
  background: currentColor !important;
  border-radius: 2px !important;
}
.header-modern .sidebar-toggle:before { display: none !important; content: none !important; }
.header-modern .sidebar-toggle .sr-only { display: none !important; }
.header-modern .sidebar-toggle .icon-bar { display: none !important; }
.header-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 230px;
  height: 56px;
  border-right: 1px solid rgba(255,255,255,0.12);
  flex-shrink: 0;
}
.header-logo .header-brand {
  font-size: 17px;
  font-weight: 700;
  color: #fff !important;
  letter-spacing: 0.3px;
  text-decoration: none !important;
  cursor: pointer;
}
.header-spacer { flex: 1; }

.header-modern .navbar-custom-menu {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding-right: 12px !important;
  margin: 0 !important;
  float: none !important;
}
.header-modern .navbar-custom-menu .navbar-nav {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-direction: row !important;
  margin: 0 !important;
}
.header-modern .navbar-nav > li {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

/* Search box in header */
.header-search-item { padding: 0 !important; }
.header-search {
  display: flex !important;
  align-items: center !important;
  background: rgba(255,255,255,0.14) !important;
  border-radius: 8px !important;
  padding: 0 12px !important;
  height: 34px !important;
  transition: all 0.3s !important;
  position: relative;
}
.header-search:focus-within { background: rgba(255,255,255,0.22) !important; }
.header-search input {
  border: none !important;
  background: transparent !important;
  padding: 0 8px !important;
  font-size: 13px !important;
  font-family: inherit !important;
  outline: none !important;
  width: 130px !important;
  color: #fff !important;
  height: auto !important;
  line-height: 1 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  min-width: 0 !important;
}
.header-search input::placeholder { color: rgba(255,255,255,0.55) !important; }
.header-search i { color: rgba(255,255,255,0.65) !important; font-size: 13px !important; }
.header-search .results {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 340px;
  max-height: 360px;
  overflow-y: auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  z-index: 9999;
  margin-top: 6px;
}
@media (max-width: 768px) {
  .header-search .results { position: fixed; top: 56px; left: 8px; right: 8px; width: auto; max-height: 280px; }
}
.search-results-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}
.search-results-list li {
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 1px solid #f4f5f7;
  transition: background 0.15s;
}
.search-results-list li:last-child { border-bottom: none; }
.search-results-list li:hover { background: #f0f4ff; }
.search-result-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #2c3e50;
}
.search-result-desc {
  display: block;
  font-size: 11px;
  color: #6e737a;
  margin-top: 2px;
}
/* Notification icons in header */
.header-modern .navbar-nav > li.header-notif-icon > a {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255,255,255,0.85) !important;
  font-size: 15px !important;
  padding: 0 !important;
  transition: all 0.2s !important;
  position: relative !important;
  line-height: 1 !important;
}
.header-modern .navbar-nav > li.header-notif-icon > a:hover {
  background: rgba(255,255,255,0.14) !important;
  color: #fff !important;
}
.header-modern .navbar-nav > li.header-notif-icon > a .label {
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  border-radius: 8px !important;
  background: #ff6b6b !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 16px !important;
  text-align: center !important;
}

/* User dropdown in header */
.header-modern .navbar-nav > li.header-user-item > a {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 12px 3px 3px !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
  font-family: inherit !important;
  transition: all 0.2s !important;
  height: auto !important;
  line-height: 1 !important;
}
.header-modern .navbar-nav > li.header-user-item > a:hover {
  background: rgba(255,255,255,0.22) !important;
  color: #fff !important;
}
.header-modern .navbar-nav > li.header-user-item > a img.user-image {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  float: none !important;
  margin: 0 !important;
}
.header-modern .navbar-nav > li.header-user-item > a span.hidden-xs {
  display: inline !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #fff !important;
}

/* Sidebar offset for taller header */
.header-modern ~ .main-sidebar {
  padding-top: 56px !important;
}

/* El scroll del menu ya no se fuerza aqui con overflow-y/max-height:
   .main-sidebar no esta fijo al viewport, asi que ese scroll interno
   quedaba "flotando" y daba la sensacion de que todo el menu se movia
   raro al hacer scroll. Se dejo que AdminLTE maneje el alto como en el
   resto del layout (scroll nativo de pagina); el recalculo real esta en
   index.php, disparado cuando cargan las imagenes del sidebar. */

/* ═══════════════════════════════════════════
   Modern Header Dropdowns (Notifications, Messages, Tasks, User)
   ═══════════════════════════════════════════ */

/* All navbar dropdowns — override AdminLTE's box-shadow:none */
.header-modern .navbar-nav .dropdown-menu {
  box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 0 !important;
  margin-top: 8px !important;
  font-family: 'Inter','Source Sans Pro','Helvetica Neue',Arial,sans-serif !important;
  overflow: hidden;
}

/* Notification/messages/tasks panels */
.header-modern .navbar-nav > .notifications-menu > .dropdown-menu,
.header-modern .navbar-nav > .messages-menu > .dropdown-menu,
.header-modern .navbar-nav > .tasks-menu > .dropdown-menu {
  width: 320px !important;
  padding: 0 !important;
  margin: 8px 0 0 0 !important;
}

/* Header */
.header-modern .navbar-nav > .notifications-menu > .dropdown-menu > li.header,
.header-modern .navbar-nav > .messages-menu > .dropdown-menu > li.header,
.header-modern .navbar-nav > .tasks-menu > .dropdown-menu > li.header {
  background: #f8fafc !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid #eef0f4 !important;
  color: #2c3e50 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 10px 10px 0 0 !important;
}

/* Footer */
.header-modern .navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a,
.header-modern .navbar-nav > .messages-menu > .dropdown-menu > li.footer > a,
.header-modern .navbar-nav > .tasks-menu > .dropdown-menu > li.footer > a {
  border-radius: 0 0 10px 10px !important;
  font-size: 12px !important;
  background: #f8fafc !important;
  padding: 10px 16px !important;
  border-top: 1px solid #eef0f4 !important;
  color: #2c6bc0 !important;
  font-weight: 500 !important;
  transition: background 0.2s;
}
.header-modern .navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a:hover,
.header-modern .navbar-nav > .messages-menu > .dropdown-menu > li.footer > a:hover,
.header-modern .navbar-nav > .tasks-menu > .dropdown-menu > li.footer > a:hover {
  background: #f0f4ff !important;
}

/* Menu container */
.header-modern .navbar-nav > .notifications-menu > .dropdown-menu > li .menu,
.header-modern .navbar-nav > .messages-menu > .dropdown-menu > li .menu,
.header-modern .navbar-nav > .tasks-menu > .dropdown-menu > li .menu {
  max-height: 280px !important;
}

/* Menu items */
.header-modern .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a,
.header-modern .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a,
.header-modern .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a {
  padding: 12px 16px !important;
  border-bottom: 1px solid #f4f5f7 !important;
  color: #444 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  transition: background 0.15s ease;
}
.header-modern .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a:hover,
.header-modern .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:hover,
.header-modern .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a:hover {
  background: #f8fafe !important;
}
.header-modern .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li:last-child > a {
  border-bottom: none !important;
}

/* Notification icons inside menu items */
.header-modern .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > i,
.header-modern .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > i,
.header-modern .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a > i {
  width: 24px !important;
  text-align: center;
  margin-right: 6px;
}

/* Notifications menu items - icon + text alignment */
.header-modern .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .fa,
.header-modern .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .glyphicon,
.header-modern .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .ion {
  width: 24px !important;
}

/* Messages menu (Calendar) */
.header-modern .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > div > img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
}
.header-modern .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > h4 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #2c3e50 !important;
  margin: 0 0 0 50px !important;
}
.header-modern .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > h4 > small {
  font-size: 10px !important;
  color: #6e737a !important;
}
.header-modern .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > p {
  margin: 2px 0 0 50px !important;
  font-size: 12px !important;
  color: #5c6168 !important;
}

/* Tasks menu - progress bars */
.header-modern .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a > h3 {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #444 !important;
  margin: 0 0 6px 0 !important;
}
.header-modern .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a > .progress {
  height: 6px !important;
  border-radius: 3px !important;
  background: #eef0f4 !important;
  margin: 0 !important;
}

/* User dropdown menu */
.header-modern .navbar-nav > .user-menu > .dropdown-menu {
  width: 280px !important;
  border-radius: 10px !important;
  margin-top: 8px !important;
  padding: 0 !important;
  border: none !important;
}
.header-modern .navbar-nav > .user-menu > .dropdown-menu > li.user-header {
  height: 160px !important;
  padding: 12px !important;
  background: linear-gradient(135deg, #3a7bd5, #2c6bc0) !important;
  border-radius: 10px 10px 0 0 !important;
}
.header-modern .navbar-nav > .user-menu > .dropdown-menu > li.user-header > img {
  width: 80px !important;
  height: 80px !important;
  border: 3px solid rgba(255,255,255,0.25) !important;
}
.header-modern .navbar-nav > .user-menu > .dropdown-menu > li.user-header > p {
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  margin-top: 8px !important;
}
.header-modern .navbar-nav > .user-menu > .dropdown-menu > li.user-header > p > small {
  font-size: 11px !important;
  color: rgba(255,255,255,0.7) !important;
}
.header-modern .navbar-nav > .user-menu > .dropdown-menu > .user-body {
  padding: 12px 16px !important;
  border-bottom: 1px solid #eef0f4 !important;
}
.header-modern .navbar-nav > .user-menu > .dropdown-menu > .user-body a {
  color: #2c6bc0 !important;
  font-size: 13px !important;
  transition: color 0.2s;
}
.header-modern .navbar-nav > .user-menu > .dropdown-menu > .user-body a:hover {
  color: #1a5ab8 !important;
}
.header-modern .navbar-nav > .user-menu > .dropdown-menu > .user-footer {
  background: #f8fafc !important;
  padding: 12px 16px !important;
  border-radius: 0 0 10px 10px !important;
}
.header-modern .navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn {
  font-size: 12px !important;
  padding: 5px 14px !important;
  border-radius: 6px !important;
}

/* Inventory alert item styling in tasks */
.header-modern .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li {
  border-bottom: 1px solid #f4f5f7 !important;
}
.header-modern .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li:last-child {
  border-bottom: none !important;
}
.header-modern .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a .pull-right {
  font-size: 11px !important;
  color: #6e737a !important;
  font-weight: 500 !important;
}

/* Calendar item in messages menu */
.header-modern .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li {
  border-bottom: 1px solid #f4f5f7 !important;
}
.header-modern .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li:last-child {
  border-bottom: none !important;
}

@media (max-width: 768px) {
  .header-modern { height: 52px !important; max-height: 52px !important; position: relative; }
  .header-logo {
    width: auto !important;
    min-width: 0 !important;
    padding: 0 8px !important;
    border-right: none !important;
  }
  .header-logo .header-brand { font-size: 14px !important; white-space: nowrap; }
  .header-modern .sidebar-toggle { padding: 0 8px !important; }
  /* Collapsible search: icon only, expands on tap */
  .header-modern .header-search {
    display: flex !important;
    height: 30px !important;
    padding: 0 !important;
    width: 30px !important;
    justify-content: center !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: width 0.25s ease, background 0.25s ease !important;
    overflow: visible !important;
    background: transparent !important;
  }
  .header-modern .header-search:hover { background: rgba(255,255,255,0.12) !important; }
  .header-modern .header-search i { font-size: 15px !important; }
  .header-modern .header-search input {
    width: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .header-modern .header-search.expanded {
    width: 160px !important;
    background: rgba(255,255,255,0.14) !important;
    padding: 0 8px !important;
    justify-content: flex-start !important;
  }
  .header-modern .header-search.expanded i { font-size: 13px !important; }
  .header-modern .header-search.expanded input {
    width: 120px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    padding: 0 6px !important;
    font-size: 12px !important;
  }
  .header-modern .navbar-custom-menu {
    padding-right: 4px !important;
    gap: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .header-modern .navbar-custom-menu::-webkit-scrollbar { display: none !important; }
  .header-modern .navbar-nav > li.header-notif-icon > a {
    width: 30px !important;
    height: 30px !important;
    font-size: 13px !important;
  }
  .header-modern .navbar-nav > li.header-notif-icon > a .label {
    top: 1px !important;
    right: 1px !important;
    min-width: 14px !important;
    height: 14px !important;
    font-size: 9px !important;
    line-height: 14px !important;
  }
  .header-modern .navbar-nav > li.header-user-item > a {
    padding: 2px 6px 2px 2px !important;
    gap: 3px !important;
  }
  .header-modern .navbar-nav > li.header-user-item > a img.user-image {
    width: 24px !important;
    height: 24px !important;
  }
  .header-modern .navbar-nav > li.header-user-item > a span.hidden-xs {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
  .modern-card { margin: 8px; }
  .modern-card-header { padding: 14px 16px 14px; }
  .modern-card-header-table { padding: 14px 16px 14px; flex-direction: column; gap: 10px; align-items: stretch; }
  .modern-card-body { padding: 14px 16px 6px; }
  .modern-card-body-table { padding: 4px 14px 10px; }
  .modern-card-footer { padding: 12px 16px; }
  .modern-add-btn { justify-content: center; }
  .modern-table thead th,
  .modern-table tbody td { padding: 8px 10px; font-size: 13px; }
  .form-row { flex-direction: column; gap: 0; }
  /* Filtros de las tablas de Gestión/Inventario (Fecha Inicial/Final/Estado/Filtrar): en
     desktop usan flex-row + align-items:flex-end (ver comentario más arriba, "Filter Bar
     Alignment") y el mensaje de error va position:absolute para no desordenar esa fila. En
     mobile cada columna ya se apila una debajo de otra, así que ese motivo desaparece — hay
     que apilarlas de verdad (Bootstrap por sí solo no lo hace acá porque display:flex en
     .row anula el stacking por float de .col-md-*) y devolver el error al flujo normal para
     que empuje al siguiente campo en vez de superponerse encima, igual que en Reportes. */
  .modern-card-body-table .row { flex-direction: column; align-items: stretch; gap: 0; }
  .modern-card-body-table .row > [class*="col-"] { width: 100%; margin-bottom: 12px; }
  .modern-card-body-table .row > [class*="col-"] .field-error { position: static; margin-top: 4px; }
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter {
    float: none;
    text-align: center;
    padding-bottom: 8px;
  }
  .dataTables_wrapper .dataTables_filter input {
    min-width: 120px;
  }
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    float: none;
    text-align: center;
  }
  /* El indicador "Procesando..." de DataTables (jquery.dataTables/dataTables.bootstrap.css)
     se centra con top:50% sobre TODO el wrapper (filtros+tabla+paginación). En mobile, con
     la fila de filtros apilada verticalmente ocupando bastante más alto, ese centro queda
     por debajo del viewport mientras el usuario sigue mirando los filtros o el botón
     "Filtrar" que acaba de tocar — el aviso de carga nunca se ve sin bajar a propósito.
     Se fija cerca del top del viewport (el header no es fijo/sticky, ver
     project_sidebar_scroll_architecture, así que no hace falta reservarle espacio salvo
     al cargar sin haber scrolleado aún) para que sea visible sin scrollear. */
  .dataTables_wrapper .dataTables_processing {
    position: fixed;
    top: 60px;
    left: 50%;
    right: auto;
    width: auto;
    max-width: calc(100% - 32px);
    height: auto;
    margin: 0;
    transform: translateX(-50%);
  }
}
.table-responsive {
  overflow-x: visible !important;
}
div.dataTables_scrollBody {
  overflow-x: visible !important;
}


/* ── Status Badges (columna Activo en tablas de configuración) ── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.status-badge--active {
  background-color: #e6f9f0;
  color: #1a8a4a;
  border: 1px solid #a3dfc0;
}
.status-badge--inactive {
  background-color: #fdf0f0;
  color: #c0392b;
  border: 1px solid #f5c6c6;
}

/* ── Status Badge variants adicionales ── */
.status-badge--warning {
  background-color: #fff8e6;
  color: #b07d0a;
  border: 1px solid #f0d080;
}
.status-badge--neutral {
  background-color: #f0f2f5;
  color: #5a6475;
  border: 1px solid #8a93a0;
}
.status-badge--info {
  background-color: #e8f4fd;
  color: #1a6fa8;
  border: 1px solid #a3cfe8;
}
.status-badge--magenta {
  background-color: #fbeef5;
  color: #a13d7c;
  border: 1px solid #ecc3dd;
}
.status-badge--orange {
  background-color: #fdf0e6;
  color: #b0530a;
  border: 1px solid #f0c8a3;
}

/* ── Radio group ── */
.modern-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 6px;
}
.modern-radio-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #3d4a5c;
  font-weight: 500;
}
.modern-radio-label input[type="radio"] {
  accent-color: #4a90d9;
  width: 16px;
  height: 16px;
  cursor: pointer;
}