:root {

  --azul-oscuro: #1a2a6c;
  --azul-medio: #2c3e50;
  --azul-claro: #f0f4f8;
  --naranja-accent: #f39c12;
  --verde-exito: #27ae60;
  --rojo-error: #e74c3c;

}

body {
  font-family: 'IBM Plex Sans', sans-serif;
  background:
    radial-gradient(circle at top left, rgba(42,82,152,0.08), transparent 30%),
    radial-gradient(circle at bottom right, rgba(243,156,18,0.06), transparent 25%),
    #f4f7fb;
  margin: 0;
  padding: 0;
  color: #2d3436;
  min-height: 100vh;
}

/* 🔵 Banner Principal con Degradado */

.header-banner h1 {
  margin: 0;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.header-banner {
  background:
    linear-gradient(135deg,
      #0f172a 0%,
      #1e3a8a 45%,
      #2563eb 100%);
  padding: 38px 24px;
  color: white;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 10px 40px rgba(0,0,0,0.18);
}


.header-banner::before {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  background: rgba(255,255,255,0.05);
  border-radius: 50%;
  top: -250px;
  right: -150px;
}


.header-banner p { 
  opacity: 0.9; 
  font-weight: 300; 
  margin-top: 10px;
  font-size: 18px;
}


/* 🖱️ Menú de Navegación Sticky */

.main-nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  padding: 14px;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}


.nav-btn {
  background: transparent;
  border: none;
  padding: 12px 20px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  border-radius: 12px;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}


.nav-btn:hover {
  background: rgba(37,99,235,0.08);
  color: #1d4ed8;
  transform: translateY(-1px);
}

.nav-btn.active {
  background: linear-gradient(135deg,#1d4ed8,#2563eb);
  color: white;
  box-shadow: 0 6px 18px rgba(37,99,235,0.25);
}

/* 📄 Contenedor Principal */

.container { 
  max-width: 1000px; 
  margin: 30px auto; 
  padding: 0 20px; 
}

/* 🗂️ Tarjetas del Formulario */

.card {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  padding: 26px;
  border-radius: 22px;
  margin-bottom: 25px;

  border: 1px solid rgba(255,255,255,0.6);

  box-shadow:
    0 10px 30px rgba(15,23,42,0.06),
    0 1px 2px rgba(15,23,42,0.05);

  transition: 0.25s ease;
}


.card h2 {
  font-size: 18px;
  color: var(--azul-oscuro);
  border-bottom: 2px solid var(--azul-claro);
  padding-bottom: 10px;
  margin-top: 0;
  margin-bottom: 20px;
}


.card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 45px rgba(15,23,42,0.08),
    0 2px 4px rgba(15,23,42,0.05);
}

/* 🔍 Buscador en Módulo Contable */

.search-container { 

  margin-bottom: 20px; 

}

#inputBusqueda {
  width: 100%;
  padding: 15px;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  font-size: 16px;
  box-sizing: border-box;

}

#inputBusqueda:focus {
  border-color: var(--azul-oscuro);
  outline: none;
}


/* 📦 EL CAJÓN CONTABLE (Viewport con Scroll) */
.table-container {
  height: 550px; /* Altura del cajón */
  overflow: auto; /* Scroll para las 25 columnas y filas */
  border: 1px solid #eee;
  border-radius: 10px;
  background: white;
}

#tablaContable tr:nth-child(even) {
  background: #f8fbff;
}

#tablaContable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

#tablaContable th {
  position: sticky;
  top: 0;
  background: linear-gradient(135deg,#0f172a,#1e3a8a);
  color: white;
  padding: 14px;
  z-index: 10;
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 0.03em;
}


#tablaContable td {
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
  text-align: center;
  white-space: nowrap; /* Evita que el texto se rompa */
}

#tablaContable tr:hover { 
  background-color: #f8faff; 

}

/* 🔢 Controles de Paginación */
.pagination-controls {

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
  background: white;
  padding: 15px;
  border-radius: 10px;

}

.pagination-controls button {
  padding: 10px 18px;
  border: 1px solid var(--azul-oscuro);
  background: white;
  color: var(--azul-oscuro);
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.2s;
}

.pagination-controls button:hover {
  background: var(--azul-oscuro);
  color: white;
}

#infoPagina {
  font-weight: bold;
  color: var(--azul-medio);
}

/* 🔗 Botones de Enlace (Fotos en tabla) */

.btn-link {
  background-color: #3498db;
  color: white !important;
  padding: 6px 12px;
  text-decoration: none;
  border-radius: 5px;
  font-size: 11px;
  font-weight: bold;
}

/* 📋 Inputs del Formulario */

input,
select {
  width: 100%;
  padding: 14px 16px;
  margin-top: 8px;
  border: 1px solid #dbe4ee;
  border-radius: 12px;
  box-sizing: border-box;
  font-size: 14px;
  background: #fff;
  transition: 0.2s;
}

input:focus,
select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37,99,235,0.10);
}

.readonly-input { 
  background-color: #f8f9fa; 
  color: #7f8c8d; 
  font-weight: bold; 
}

/* 🟢 Botón de Guardar */

.btn-save {
  width: 100%;
  padding: 18px;
  background: linear-gradient(135deg,#f59e0b,#f97316);
  color: white;
  border: none;
  border-radius: 16px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.25s;
  margin-top: 20px;

  box-shadow:
    0 10px 20px rgba(249,115,22,0.25);
}

.btn-save:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 30px rgba(249,115,22,0.35);
}


/* Asegúrate de que el mensaje esté justo antes del botón */
#mensaje {
  margin-top: 20px;
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  font-weight: bold;
}

/* 🌓 Control de Secciones */

.content-section { display: none; }
.content-section.active { display: block; animation: fadeIn 0.4s ease; }


@keyframes fadeIn {

  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ⚠️ Mensajes de Alerta */

.mensaje-alerta {
  padding: 15px;
  margin-top: 15px;
  border-radius: 8px;
  text-align: center;
  font-weight: bold;
}

.check-container {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  margin-top: 10px;
}

.check-container input[type="checkbox"] {
  width: auto;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════
   MODAL MARCAR ORDEN CUMPLIDA — Popup centrado
═══════════════════════════════════════════════════════ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 60, 0.65);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  animation: fadeInOverlay 0.25s ease;
}

@keyframes fadeInOverlay {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-box {
  background: #fff;
  border-radius: 20px;
  padding: 36px 40px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25), 0 0 0 1px rgba(26,42,108,0.08);
  position: relative;
  animation: slideUpModal 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes slideUpModal {
  from { opacity: 0; transform: translateY(30px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* X de cierre */
.modal-close-x {
  position: absolute;
  top: 16px;
  right: 18px;
  background: #f0f4f8;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 14px;
  cursor: pointer;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}
.modal-close-x:hover { background: #e74c3c; color: white; }

.modal-icon {
  font-size: 48px;
  text-align: center;
  margin-bottom: 10px;
}

.modal-box h3 {
  text-align: center;
  color: var(--azul-oscuro);
  font-size: 20px;
  margin: 0 0 6px;
}

.modal-box > p {
  text-align: center;
  color: #555;
  font-size: 14px;
  margin: 0 0 20px;
}

/* Cuadro de datos de la orden */
.modal-orden-info {
  background: #f4f7ff;
  border: 1px solid #dce6ff;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}

.modal-dato {
  display: flex;
  flex-direction: column;
  font-size: 13px;
}

.modal-dato span {
  color: #7f8c8d;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.modal-dato strong {
  color: var(--azul-oscuro);
  font-size: 14px;
}

/* Botones del modal */
.modal-buttons {
  display: flex;
  gap: 12px;
}

.btn-modal-cancelar,
.btn-modal-confirmar {
  flex: 1;
  padding: 13px;
  border-radius: 10px;
  border: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s;
}

.btn-modal-cancelar {
  background: #f0f4f8;
  color: #555;
}
.btn-modal-cancelar:hover { background: #e0e5ec; }

.btn-modal-confirmar {
  background: var(--verde-exito);
  color: white;
}
.btn-modal-confirmar:hover {
  background: #219a52;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(39,174,96,0.35);
}

/* ── Botón en tabla ── */
.btn-cumplir {
  background: linear-gradient(135deg, var(--azul-oscuro), #2a5298);
  color: white;
  border: none;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.2s;
}
.btn-cumplir:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(26,42,108,0.3);
}

/* ── Badge Cantidad ── */
.badge-cantidad {
  display: inline-block;
  background: #e8f0ff;
  color: var(--azul-oscuro);
  border-radius: 20px;
  padding: 3px 12px;
  font-weight: 700;
  font-size: 13px;
}

/* ── Filas con estado ── */
.fila-cumplida { background-color: #f0fff5 !important; }
.fila-pendiente { background-color: #fff; }

.badge-cumplida {
  background: #d4f5e2;
  color: #27ae60;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
}

.badge-usuario {
  background: #e8f0ff;
  color: var(--azul-oscuro);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.fecha-badge {
  color: #27ae60;
  font-weight: 600;
  font-size: 12px;
}

.text-muted {
  color: #aaa;
  font-size: 12px;
}

/* ── Cabecera contable ── */
.contable-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.contable-acciones { display: flex; gap: 10px; align-items: center; }

.filtros-rapidos { display: flex; gap: 6px; }

.filtro-btn {
  padding: 7px 14px;
  border: 1px solid #ddd;
  border-radius: 20px;
  background: white;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: 0.2s;
}
.filtro-btn.active, .filtro-btn:hover { background: var(--azul-oscuro); color: white; border-color: var(--azul-oscuro); }
.filtro-pendiente.active, .filtro-pendiente:hover { background: #e67e22; border-color: #e67e22; }
.filtro-cumplida.active,  .filtro-cumplida:hover  { background: var(--verde-exito); border-color: var(--verde-exito); }

/* ── Stats chips ── */
.contable-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }

.stat-chip {
  background: #f0f4f8;
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 13px;
  color: #555;
}
.stat-chip.pendiente { background: #fff3e0; color: #e67e22; }
.stat-chip.cumplida  { background: #e8f8ee; color: #27ae60; }

/* ── Mensajes de ganancia/pérdida ── */
.ganancia { background: #e8f8ee; color: #27ae60; }
.perdida  { background: #fdecea; color: #e74c3c; }
.exacto   { background: #fff9e6; color: #f39c12; }
.exito    { background: #e8f8ee; color: #27ae60; }
.error    { background: #fdecea; color: #e74c3c; }
.advertencia { background: #fff9e6; color: #e67e22; }
.cargando { background: #eef2ff; color: var(--azul-oscuro); }

/* ── Campos ocultos (acompañante) ── */
.campos-ocultos { display: none; margin-top: 10px; }

/* ── Header item badge ── */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1000px;
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 12px;
}

.header-logo { display: flex; align-items: center; gap: 15px; }
.logo-icon { font-size: 42px; }

.header-item-badge {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 30px;
  padding: 8px 20px;
  color: white;
  font-weight: 700;
  font-size: 15px;
  backdrop-filter: blur(4px);
}

/* ── Formulario grid ── */
.formulario-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.full-width { grid-column: 1 / -1; }

.form-group label { display: block; font-weight: 600; color: #555; font-size: 13px; margin-top: 14px; }
.form-group label:first-child { margin-top: 0; }

.card-icon { margin-right: 6px; }

/* ── Botón Ver PDF ── */
.btn-ver-pdf {
  background: linear-gradient(135deg, #1a2a6c, #2a5298);
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.2s;
}
.btn-ver-pdf:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(26,42,108,0.3);
}

/* Responsivo */
@media (max-width: 700px) {
  .formulario-grid { grid-template-columns: 1fr; }
  .modal-orden-info { grid-template-columns: 1fr; }
  .modal-box { padding: 24px 20px; }
  .main-nav { flex-wrap: wrap; }
  .nav-btn { font-size: 12px; padding: 8px 12px; }
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgba(37,99,235,0.35);
  border-radius: 20px;
}

::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.03);
}

/* ═══════════════════════════════════════
   DASHBOARD ESTADÍSTICAS
═══════════════════════════════════════ */

.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
  margin-bottom:25px;
}

.stat-card{
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(10px);
  border-radius:22px;
  padding:26px;
  box-shadow:
    0 10px 30px rgba(15,23,42,0.06),
    0 1px 2px rgba(15,23,42,0.05);
  border:1px solid rgba(255,255,255,0.6);
}

.stat-label{
  font-size:13px;
  color:#64748b;
  display:block;
  margin-bottom:10px;
  font-weight:600;
}

.stat-card h2{
  margin:0;
  font-size:32px;
  color:#0f172a;
  font-weight:700;
}

.dashboard-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.dashboard-grid .card{
  min-height:420px;
}

canvas{
  width:100% !important;
  height:320px !important;
}

@media(max-width:900px){

  .dashboard-grid{
    grid-template-columns:1fr;
  }

}

/* ═══════════════════════════════════════
   ESTADÍSTICAS - TABLAS Y TOPS
═══════════════════════════════════════ */

.top-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:10px;
}

.top-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#f8fbff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:14px 16px;
  transition:0.2s ease;
}

.top-item:hover{
  transform:translateY(-1px);
  background:#eef4ff;
}

.top-item strong{
  color:#0f172a;
  font-size:14px;
}

.top-item span{
  background:linear-gradient(135deg,#1d4ed8,#2563eb);
  color:white;
  padding:5px 12px;
  border-radius:30px;
  font-size:12px;
  font-weight:700;
}

/* ═══════════════════════════════════════
   FILTROS DASHBOARD
═══════════════════════════════════════ */

.stats-filtros{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:24px;
  align-items:end;
}

.stats-filtros .form-group{
  flex:1;
  min-width:180px;
}

.stats-filtros label{
  font-size:12px;
  font-weight:700;
  color:#475569;
  margin-bottom:6px;
  display:block;
}

.stats-filtros input,
.stats-filtros select{
  margin-top:0;
}

/* ═══════════════════════════════════════
   TABLA RESUMEN ESTADÍSTICAS
═══════════════════════════════════════ */

.stats-table{
  width:100%;
  border-collapse:collapse;
  margin-top:10px;
}

.stats-table th{
  background:linear-gradient(135deg,#0f172a,#1e3a8a);
  color:white;
  padding:12px;
  font-size:12px;
  text-align:left;
}

.stats-table td{
  padding:12px;
  border-bottom:1px solid #edf2f7;
  font-size:13px;
}

.stats-table tr:nth-child(even){
  background:#f8fbff;
}

.stats-table tr:hover{
  background:#eef4ff;
}

/* ═══════════════════════════════════════
   ESTADO VACÍO
═══════════════════════════════════════ */

.stats-empty{
  text-align:center;
  padding:50px 20px;
  color:#94a3b8;
}

.stats-empty h3{
  margin-top:10px;
  color:#64748b;
}

/* ═══════════════════════════════════════
   RESPONSIVE ESTADÍSTICAS
═══════════════════════════════════════ */

@media(max-width:900px){

  .stats-grid{
    grid-template-columns:1fr;
  }

  .dashboard-grid{
    grid-template-columns:1fr;
  }

  .stats-filtros{
    flex-direction:column;
  }

}

.stat-info h2{
    color:#0f2d5c;
    text-shadow:0 2px 10px rgba(15,45,92,.15);
    font-weight:700;
}

.stat-info span{
    color:#355b8c;
    font-weight:600;
}

.card h2{
    color:#102a43;
    text-shadow:0 2px 8px rgba(0,0,0,.08);
}
/* ── Tabla Visor PDFs — ancho completo ── */
#pdfTabla { width:100%; border-collapse:collapse; table-layout:fixed; }
#pdfTabla th { position:sticky; top:0; background:linear-gradient(135deg,#0f172a,#1e3a8a); color:white; padding:14px 16px; font-size:12px; letter-spacing:0.03em; z-index:10; white-space:nowrap; }
#pdfTabla td { padding:12px 16px; border-bottom:1px solid #f0f0f0; font-size:13px; vertical-align:middle; }
#pdfTabla tr:nth-child(even) { background:#f8fbff; }
#pdfTabla tr:hover { background:#eef4ff; }
#pdfTabla th:nth-child(1) { width:70px; }
#pdfTabla th:nth-child(2) { width:200px; }
#pdfTabla th:nth-child(3) { width:auto; }
#pdfTabla th:nth-child(4) { width:140px; text-align:center; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE MÓVIL — Terminal Chiquinquirá
   Breakpoint principal: 768px  |  Extra pequeño: 390px
═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Header ── */
  .header-banner { padding: 18px 14px; }
  .header-banner h1 { font-size: 19px; letter-spacing: 0; }
  .header-banner p { font-size: 13px; margin-top: 4px; }
  .header-inner { flex-direction: column; gap: 6px; }
  .header-logo { gap: 10px; }
  .logo-icon { font-size: 28px; }
  .header-item-badge { font-size: 11px; }

  /* ── Navegación 2×2 ── */
  .main-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 8px;
  }
  .nav-btn {
    padding: 10px 6px;
    font-size: 11px;
    border-radius: 10px;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    min-height: 52px;
  }
  .nav-icon { font-size: 18px; }

  /* ── Contenedor ── */
  .container { padding: 0 8px; margin: 10px auto; }

  /* ── Formulario: 1 columna ── */
  .formulario-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .full-width { grid-column: 1 !important; }
  .card { padding: 16px 12px; border-radius: 12px; }
  .card h2 { font-size: 14px; }

  /* ── Inputs táctiles: font-size 16px evita zoom en iOS ── */
  input:not([type="checkbox"]):not([type="file"]),
  select,
  textarea {
    padding: 13px 11px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
  }
  input[type="file"] {
    padding: 10px !important;
    font-size: 14px !important;
  }

  /* ── URL box ── */
  .url-box { flex-direction: column; gap: 6px; }
  .btn-validar-url { width: 100%; padding: 13px; font-size: 14px; border-radius: 10px; }

  /* ── Botón guardar ── */
  .btn-save { padding: 16px; font-size: 16px; border-radius: 12px; }

  /* ── Tablas: scroll horizontal suave con indicador ── */
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
    box-shadow: inset -6px 0 8px -6px rgba(0,0,0,0.10);
  }
  #tablaContable { min-width: 920px; }
  #pdfTabla      { min-width: 480px; }
  #tablaRanking  { min-width: 340px; width: 100%; }

  /* ── Paginación ── */
  .pagination-controls {
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px 6px;
  }
  .pagination-controls button {
    padding: 10px 12px;
    font-size: 13px;
    min-width: 44px;
    min-height: 44px;
  }
  #infoPagina, #pdfInfoPagina {
    font-size: 12px;
    width: 100%;
    text-align: center;
    order: -1;
  }

  /* ── Módulo contable ── */
  .contable-header { flex-direction: column; gap: 8px; align-items: flex-start; }
  .filtros-rapidos { flex-wrap: wrap; gap: 5px; }
  .filtro-btn { padding: 8px 12px; font-size: 12px; min-height: 38px; }
  .contable-stats { flex-wrap: wrap; gap: 6px; }
  .stat-chip { font-size: 12px; padding: 5px 10px; }
  .contable-acciones { width: 100%; }

  /* ── KPIs estadísticas ── */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 14px 10px; border-radius: 14px; }
  .stat-card h2 { font-size: 20px; }
  .stat-icon { font-size: 26px; }

  /* ── Gráficas ── */
  canvas { height: 220px !important; }

  /* ── Modal ── */
  .modal-box {
    margin: 16px;
    padding: 22px 16px;
    border-radius: 14px;
    max-width: calc(100vw - 32px);
    max-height: 90vh;
    overflow-y: auto;
  }
  .modal-buttons { flex-direction: column; gap: 8px; }
  .btn-modal-cancelar,
  .btn-modal-confirmar { width: 100%; padding: 14px; font-size: 15px; min-height: 44px; }
  .modal-close-x { top: 12px; right: 12px; font-size: 18px; }

  /* ── Tabla PDFs ── */
  #pdfTabla th, #pdfTabla td { padding: 10px 8px; font-size: 12px; }
  .btn-ver-pdf { font-size: 12px; padding: 8px 10px; min-height: 38px; }

  /* ── Botón marcar cumplida ── */
  .btn-cumplir { font-size: 11px; padding: 7px 8px; white-space: nowrap; min-height: 36px; }

  /* ── Mensaje ganancia ── */
  .mensaje-alerta { font-size: 13px; padding: 11px; }

}

/* ── iPhone SE y pantallas muy pequeñas ── */
@media (max-width: 390px) {
  .header-banner h1 { font-size: 16px; }
  .nav-btn { font-size: 10px; min-height: 48px; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat-card h2 { font-size: 22px; }
  canvas { height: 190px !important; }
  .card { padding: 14px 10px; }
}

/* ── Dispositivos táctiles: targets mínimos y sin hover ── */
@media (hover: none) and (pointer: coarse) {
  .nav-btn,
  .btn-save,
  .filtro-btn,
  .btn-exportar,
  .btn-cumplir,
  .btn-ver-pdf,
  .btn-modal-cancelar,
  .btn-modal-confirmar,
  .pagination-controls button { min-height: 44px; }

  /* Eliminar efectos hover que no aplican en touch */
  .nav-btn:hover,
  .top-item:hover,
  .btn-save:hover,
  .btn-cumplir:hover { transform: none; background-color: unset; }
}


/* ── Barra exportar reporte contable ── */
.contable-export-bar {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: #f8fbff;
  border: 1px solid #e2eaf6;
  border-radius: 10px;
}
.export-fecha-grupo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.export-fecha-grupo label {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.export-fecha-grupo input[type="date"] {
  padding: 8px 10px;
  font-size: 13px;
  border: 1.5px solid #dbe4ee;
  border-radius: 8px;
  margin-top: 0;
  width: auto;
}
.btn-exportar-contable {
  padding: 9px 18px;
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
  border: none;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s;
  white-space: nowrap;
  min-height: 38px;
}
.btn-exportar-contable:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(22,163,74,0.3);
}
@media (max-width: 768px) {
  .contable-export-bar { gap: 8px; padding: 10px; }
  .export-fecha-grupo input[type="date"] { font-size: 16px; }
  .btn-exportar-contable { width: 100%; min-height: 44px; }
}

/* ── Botón borrar en módulo PDFs ── */
.btn-borrar-pdf {
  padding: 8px 12px;
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s;
  white-space: nowrap;
}
.btn-borrar-pdf:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(231,76,60,0.35);
}
@media (max-width: 768px) {
  .btn-borrar-pdf { min-height: 38px; font-size: 12px; }
}