/* =========================
   Design Tokens (CSS Variables)
   ========================= */
:root {
  /* Colores primarios */
  --color-primary: #4f46e5;
  --color-primary-hover: #4338ca;
  --color-primary-light: #e0e7ff;
  
  /* Colores de estado */
  --color-success: #16a34a;
  --color-success-light: #dcfce7;
  --color-success-border: #86efac;
  
  --color-warning-light: #fef9c3;
  --color-warning-border: #fde047;
  
  --color-danger: #dc2626;
  --color-danger-light: #fee2e2;
  --color-danger-border: #fecaca;
  
  --color-info-light: #dbeafe;
  
  /* Grises */
  --color-text: #111;
  --color-text-secondary: #475569;
  --color-text-muted: #64748b;
  --color-text-light: #94a3b8;
  
  --color-bg: #f6f7fb;
  --color-bg-white: #fff;
  --color-bg-subtle: #f8fafc;
  --color-bg-hover: #f1f5f9;
  
  --color-border: #e2e8f0;
  --color-border-light: #f1f5f9;
  --color-border-dark: #d1d5db;
  
  /* Bordes redondeados */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;
  
  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  
  /* Transiciones */
  --transition-fast: 0.15s ease;
  
  /* Tipografía */
  --font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-md: 13px;
  --font-size-xl: 16px;
  
  /* Espaciado */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
}

/* =========================
   Base
   ========================= */
*{ box-sizing:border-box; }

/* Utility classes */
.hidden { display: none !important; }

body{
  margin:0;
  font-family: var(--font-family);
  color: var(--color-text);
  background: var(--color-bg);
}

header{
  padding: 12px 24px;
  background: var(--color-bg-white);
  border-bottom: 1px solid var(--color-border);
  position:sticky;
  top:0;
  z-index:100;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.title{
  display:flex;
  align-items:center;
  gap: var(--spacing-md);
  flex-wrap:wrap;
}

/* Botón volver al selector de módulos */
.backToSelector {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: var(--transition-fast);
}

.backToSelector:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.backToSelector svg {
  width: 18px;
  height: 18px;
}

h1{ margin:0; font-size: var(--font-size-xl); font-size: 22px; }
p{ margin:0; color: var(--color-text-secondary); }

main{
  margin:0 auto;
  padding: 28px 0 var(--spacing-lg);
  width:80%;
  max-width:2400px;
}

button{
  cursor:pointer;
  font-weight:700;
  padding: var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-white);
  transition: var(--transition-fast);
}
button:hover{ filter:brightness(.98); }

/* =========================
   Controles superiores
   ========================= */
.controls{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px,1fr));
  gap:10px;
  width: 100%;
  flex-basis: 100%;
}

.control label{
  display:block;
  font-size:12px;
  color:#555;
  margin-bottom:4px;
}

.control input,
.control select,
.controls button{
  width:100%;
  padding:10px;
  border:1px solid #d7d9e5;
  border-radius:10px;
  background:#fff;
}

/* =========================
   Tarjetas / paneles
   ========================= */
.kpis{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-bottom:22px;
  margin-top: 14px;
}

.card,
.panel{
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-sm);
}

/* Paneles sin borde */
.panel.noBorder {
  border: none;
  box-shadow: none;
  background: transparent;
  padding: var(--spacing-sm);
}

.card.danger{ border-color: var(--color-danger-border); }
.card.good{ border-color: var(--color-success-border); }

.kpiLabel{ font-size: var(--font-size-sm); color: var(--color-text-muted); }
.kpiValue{ font-size: 22px; font-weight:900; margin-top: var(--spacing-sm); }
.kpiSub{ font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: var(--spacing-xs); }

.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.panelHeader{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  margin-bottom:12px;
}
.panel h2{ font-size:18px; }

/* Leyenda de Antigüedad deuda */
.ageingLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  border-radius: 0 0 14px 14px;
}

.ageingLegendItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  flex: 1 1 auto;
  min-width: 150px;
}

.ageingLegendItem:hover {
  border-color: #94a3b8;
  background: #f1f5f9;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.ageingLegendColor {
  width: 14px;
  height: 14px;
  border-radius: var(--spacing-xs);
  flex-shrink: 0;
}

.ageingLegendInfo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.ageingLegendLabel {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: 500;
}

.ageingLegendValue {
  font-size: var(--font-size-md);
  color: var(--color-text);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ageingLegendPct {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-light);
  background: var(--color-bg-hover);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

/* Responsive: < 900px apilado verticalmente */
@media (max-width: 900px) {
  .ageingLegend {
    flex-direction: column;
    gap: 6px;
    padding: 10px;
  }
  .ageingLegendItem {
    min-width: 100%;
    width: 100%;
  }
}

.belowGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:10px;
}

.miniPanel{
  border:1px solid #eef0f7;
  border-radius:14px;
  padding:10px;
  background:#fbfcff;
}
.miniTitle{ font-size:12px; color:#444; font-weight:800; margin-bottom:6px; }
.miniBody{ font-size:12px; color:#333; padding: 4px; }
.small{ font-size:12px; color:#666; }

/* Contenedor específico para rankings y estadísticas */
#topMorososBox,
#reclamarTopBox,
#reclamarBox,
#yearDebt {
  padding: 4px 0;
  background: transparent;
  min-height: 60px;
}

.rankEmpty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
}

.rankEmptyIcon {
  color: var(--color-text-light);
  opacity: 0.7;
}

.rankEmptyIcon svg {
  display: block;
}

.rankEmptyText {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Mensaje de éxito cuando no hay nada que reclamar */
.rankSuccess {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 20px;
  background: linear-gradient(135deg, var(--color-success-light) 0%, #d1fae5 100%);
  border: 1px solid var(--color-success-border);
  border-radius: var(--radius-md);
  text-align: center;
}

.rankSuccessIcon {
  color: var(--color-success);
  line-height: 1;
}

.rankSuccessIcon svg {
  display: block;
}

.rankSuccessTitle {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-success);
}

.rankSuccessText {
  font-size: 13px;
  color: #166534;
}

/* =========================
   Botones PDF
   ========================= */
.pdfOpenBtn{
  background:#3b82f6 !important;
  border:1px solid #3b82f6 !important;
  color:#fff !important;
  font-weight:900;
}
.pdfOpenBtn:hover{ background:#2563eb !important; }

.pdfUploadBtn{
  background:#fbfcff !important;
  border:1px solid #93c5fd !important;
  color:#1d4ed8 !important;
  font-weight:900;
}
.pdfUploadBtn:hover{ filter:brightness(.98); }

/* =========================
   Barra superior (acciones detalle)
   ========================= */
.topBar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:10px 0 12px;
  width:100%;
  grid-column:1 / -1;
}

.tableActions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.smallBtn{
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  width: auto !important;
  transition: var(--transition-fast);
  cursor: pointer;
}

/* Botones en tabla - más compactos */
#tbl .smallBtn {
  padding: 4px 10px;
  font-size: var(--font-size-xs);
}

/* Primario (azul) */
.primaryBtn{
  width:auto !important;
  background: var(--color-primary) !important;
  color:#fff !important;
  border:1px solid var(--color-primary) !important;
}
.primaryBtn:hover{ 
  background: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
}

/* Peligro (rojo) */
.dangerBtn{
  background: var(--color-danger-light) !important;
  border-color: var(--color-danger-border) !important;
  color: var(--color-danger) !important;
  font-weight:600 !important;
}
.dangerBtn:hover{ 
  background:#fee2e2 !important;
  border-color:#fca5a5 !important;
}

/* Ghost neutro (blanco) */
.ghostBtn{
  background: var(--color-bg-white) !important;
  color: var(--color-text-secondary) !important;
  border:1px solid var(--color-border-dark) !important;
  font-weight:600 !important;
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  box-shadow:none !important;
  transition: var(--transition-fast);
}
.ghostBtn:hover{
  background: var(--color-bg-subtle) !important;
  border-color:#9ca3af !important;
  color: var(--color-text) !important;
}
.ghostBtn:active{ background: var(--color-bg-hover) !important; }

.hintInline{ font-size: var(--font-size-sm); color:#666; }

/* Bloque de bulk */
.bulkInline{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:10px 12px;
  border:1px solid #e5e7ef;
  background:#fff;
  border-radius:16px;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}

.bulkLabel{
  font-size:12px;
  color:#555;
  font-weight:900;
  margin-right:6px;
}

.bulkInline select,
.bulkInline input[type="date"],
.bulkInline input[type="text"],
.bulkInline textarea{
  width:auto;
  min-width:200px;
  padding:8px 10px;
  border:1px solid #d7d9e5;
  border-radius:12px;
  background:#fbfcff;
  font-size:12px;
  font-weight:700;
}
.bulkInline input[type="date"]{ min-width:150px; }

.actionsInline{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.bulkBar{
  margin-top:8px;
  margin-bottom:10px;
  border:1px solid #e5e7ef;
  border-radius:16px;
  padding:12px;
  background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.bulkRight{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.bulkRight select,
.bulkRight input{
  width:auto;
  min-width:220px;
  padding:10px 12px;
  border:1px solid #d7d9e5;
  border-radius:12px;
  background:#fbfcff;
  font-weight:700;
  font-size:12px;
}
.bulkRight input[type="date"]{ min-width:160px; }

.bulkBar button#applyToClient{
  width:auto;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid #d7d9e5;
  background:#111;
  color:#fff;
  font-weight:900;
}
.bulkBar button#applyToClient:hover{ filter:brightness(1.05); }

/* =========================
   Tabla detalle
   ========================= */
.tableWrap{
  width: 100%;
  max-height: 70vh;
  overflow: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-bg-white);
  box-shadow: var(--shadow-sm);
}

table{
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  background: var(--color-bg-white);
}

/* Celdas */
th,td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border-light);
  font-size: var(--font-size-md);
  white-space: nowrap;
  vertical-align: middle;
}

/* Filas de datos */
#tbl tbody tr {
  transition: background-color 0.15s ease;
}

/* Zebra striping - filas alternas */
#tbl tbody tr:nth-child(even):not(.groupRow):not(.subGroupRow):not(.emptyRow):not(.moreRowsIndicator) {
  background-color: var(--color-bg-subtle);
}

/* Hover en filas */
#tbl tbody tr:hover:not(.groupRow):not(.subGroupRow):not(.emptyRow):not(.moreRowsIndicator) {
  background-color: var(--color-primary-light) !important;
}

/* Fila seleccionada */
#tbl tbody tr.selected {
  background-color: #dbeafe !important;
}

/* Cabecera sticky */
#tbl thead th{
  position: sticky;
  top: 0;
  z-index: 10;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  padding: 10px 12px;
  font-weight: 700;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 2px solid var(--color-border);
  text-align: center;
  vertical-align: middle;
}

/* Alineación: cuerpo centrado excepto Cliente (col 2) */
#tbl tbody td:not(:nth-child(2)){ text-align:center; }
#tbl thead th:nth-child(2),
#tbl tbody td:nth-child(2){ text-align:left; }

/* Sel (checkbox) */
#tbl thead th:first-child,
#tbl tbody td:first-child{
  text-align:center;
  width:44px;
}
#tbl tbody td:first-child input[type="checkbox"]{
  display:inline-block;
  vertical-align:middle;
}
.tableWrap input[type="checkbox"]{ transform:scale(1.1); }

/* Columna Cliente: máximo y ellipsis */
#tbl thead th:nth-child(2){
  min-width: 200px;
}
#tbl tbody td:nth-child(2){
  white-space:nowrap;
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:default;
}

/* Numéricas (si usas class num en columna) */
td.num, th.num{
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/* Inputs dentro de la tabla */
.tableWrap input[type="date"],
.tableWrap input[type="number"]{
  width: auto;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-white);
  font-size: var(--font-size-sm);
  transition: var(--transition-fast);
}

.tableWrap input[type="date"]:focus,
.tableWrap input[type="number"]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-light);
}

.tableWrap input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* Checkbox de selección de fila = color primario */
.tableWrap input[type="checkbox"]:not(.paidCb) {
  accent-color: var(--color-primary);
}

/* Filas agrupadas (cliente/año) */
#tbl tbody tr.groupRow td,
#tbl tbody tr.subGroupRow td{
  text-align: left !important;
  vertical-align: middle;
  white-space: normal;
  line-height: 1.35;
}

#tbl tbody tr.groupRow td{
  background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 100%);
  font-weight: 800;
  border-top: 2px solid var(--color-border);
  color: var(--color-text);
}

#tbl tbody tr.subGroupRow td{
  background: var(--color-bg-subtle);
  font-weight: 600;
  padding-left: 52px;
  color: var(--color-text-secondary);
}

/* Igualar ancho de "Acción" y "Acción (última)" */
#tbl th.col-action,
#tbl td.col-action{
  min-width:180px;
  width:180px;
}

.actionStateBadge{
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 700;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.actionStateBadge.state-reclamar{
  border: 1px solid var(--color-danger-border);
  background: var(--color-danger-light);
  color: var(--color-danger);
}
.actionStateBadge.state-pendiente{
  border: 1px solid var(--color-warning-border);
  background: var(--color-warning-light);
  color: #92400e;
}
.actionStateBadge.state-reclamado{
  border: 1px solid #93c5fd;
  background: var(--color-info-light);
  color: #1d4ed8;
}
.actionStateBadge.state-cerrado{
  border: 1px solid var(--color-success-border);
  background: var(--color-success-light);
  color: var(--color-success);
}

/* Ocultar columnas dinámicas (según dataset mostrado) */
#tbl.hidePaidDate th.col-paid-date,
#tbl.hidePaidDate td.col-paid-date { display: none; }

/* Ocultar ambas columnas de provisión cuando no hay facturas provisionadas */
#tbl.hideProvision th.col-prov,
#tbl.hideProvision td.col-prov,
#tbl.hideProvision th.col-prov-year,
#tbl.hideProvision td.col-prov-year { display: none; }

/* Badge */
.badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid #e5e7ef;
  background:#fff;
  font-size:12px;
  margin-left:6px;
}

/* =========================
   Cabecera detalle: filtros dentro + popovers
   ========================= */
.thFlex{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-sm);
}

.thLabel{
  font-weight: 700;
  white-space: nowrap;
  font-size: var(--font-size-xs);
}

/* Resaltado de filtros activos */
.thLabel.filterOn{
  color: var(--color-primary) !important;
  font-weight: 800;
}

/* Indicador visual de filtro activo */
.thLabel.filterOn::after {
  content: '●';
  margin-left: 4px;
  font-size: 8px;
  vertical-align: super;
}

/* Controles */
.thSelect, .thInput{
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-white);
  font-size: var(--font-size-xs);
  height: 28px;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
}

.thSelect:hover, .thInput:hover{
  border-color: var(--color-text-light);
}

.thSelect:focus, .thInput:focus{
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-light);
}

/* Cliente: input visible */
#fltClient{
  position:static;
  width:100px;
  flex:0 0 auto;
  opacity:1;
  transform:none;
  pointer-events:auto;
  box-shadow:none;
}

/* Selects como popover (se muestran al abrir) */
#fltActionState,
#fltAction,
#fltPdf,
#fltPaid,
#fltProv,
#fltProvYear{
  position:absolute;
  left:10px;
  top:calc(100% + 8px);
  width:170px;
  z-index:50;
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  display:block;
  box-shadow:0 4px 12px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.05);
  border-radius:8px;
  padding:8px 10px;
  background:#fff;
  border:1px solid #e2e8f0;
}

#tbl thead th.filterOpen #fltActionState,
#tbl thead th.filterOpen #fltAction,
#tbl thead th.filterOpen #fltPdf,
#tbl thead th.filterOpen #fltPaid,
#tbl thead th.filterOpen #fltProv,
#tbl thead th.filterOpen #fltProvYear{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* Responsive: popovers un poco más estrechos */
@media (max-width:1200px){
  #fltClient{ width:140px; }
  #fltActionState,#fltAction,#fltPdf,#fltPaid,#fltProv,#fltProvYear{ width:140px; }
}

/* =========================
   Cabecera: hover/animación solo en lo interactivo
   ========================= */
#tbl thead .thLabel{
  position:relative;
  display:inline-block;
  padding-bottom:2px;
  transition:color .15s ease;
}

/* Solo interactivas */
#tbl thead .sortLabel,
#tbl thead .filterLabel{
  cursor:pointer;
}

/* Subrayado animado */
#tbl thead .sortLabel::before,
#tbl thead .filterLabel::before{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:2px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .18s ease;
}
#tbl thead .sortLabel:hover::before,
#tbl thead .filterLabel:hover::before{
  transform:scaleX(1);
}

/* Icono solo en sortLabel (derecha) */
#tbl thead .sortLabel{
  padding-right:22px;
}

#tbl thead .sortLabel::after{
  content:'▲▼';
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-55%);
  font-size:10px;
  opacity:0;
  transition:opacity .15s ease;
}

#tbl thead .sortLabel:hover{ color:#2563eb; }
#tbl thead .sortLabel:hover::after{ opacity:0.7; }

/* Filtrables (sin icono) */
#tbl thead .filterLabel:hover{ color:#2563eb; }

/* No interactivas: nada de pseudo-elementos */
#tbl thead .thLabel:not(.sortLabel):not(.filterLabel)::before,
#tbl thead .thLabel:not(.sortLabel):not(.filterLabel)::after{
  content:none;
}

/* Filtro activo: rojo manda (incluye icono) */
.thLabel.filterOn:hover{ color:#c40000 !important; }
.thLabel.filterOn::before{ background:#c40000; }
.thLabel.filterOn.sortLabel::after{ color:#c40000; opacity:0.8; }

/* =========================
   Otras secciones
   ========================= */
.uploadGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  align-items: stretch;
}

.uploadBox{
  border:1px solid #e2e8f0;
  border-radius:10px;
  padding:14px 16px;
  background:#fff;
  display: flex;
  flex-direction: column;
}

.uploadBox .small {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 8px;
}

.uploadBox .small strong {
  color: #475569;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Footer del uploadBox - siempre al final */
.uploadBoxFooter {
  margin-top: auto;
  padding-top: 10px;
}

/* Contenido que crece para empujar footer al final */
.uploadBox .fileDropzone {
  flex: 1;
}

/* Dropzone moderna */
.fileDropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  padding: 24px 16px;
  min-height: 120px;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.fileDropzone:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.fileDropzone.dragover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  transform: scale(1.01);
}

.fileDropzone input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.fileDropzoneIcon {
  font-size: 32px;
  line-height: 1;
}

.fileDropzoneText {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.fileDropzoneText strong {
  color: var(--color-primary);
}

.fileDropzoneHint {
  font-size: 11px;
  color: var(--color-text-muted);
}

/* Cuando tiene archivo seleccionado */
.fileDropzone.hasFile {
  border-color: var(--color-success);
  background: var(--color-success-light);
}

.fileDropzone.hasFile .fileDropzoneText {
  color: var(--color-success);
  font-weight: 600;
}

.uploadBox button:not(.yearBtn) {
  margin-top: 10px;
  width: 100%;
  padding: 10px 14px;
  background: #475569;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}

.uploadBoxFooter button:not(.yearBtn) {
  margin-top: 0;
}

.uploadBox button:not(.yearBtn):hover {
  background: #334155;
}

.uploadBox button:not(.yearBtn):disabled {
  background: #94a3b8;
  cursor: not-allowed;
}

/* Radio buttons como tarjetas */
.radioGroup {
  display: flex;
  gap: 10px;
  margin: 12px 0;
}

.radioCard {
  flex: 1;
  position: relative;
  cursor: pointer;
}

.radioCard input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.radioCardContent {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  transition: all 0.2s ease;
}

.radioCardIcon {
  font-size: 16px;
}

.radioCardLabel {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.radioCard input[type="radio"]:checked + .radioCardContent {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.radioCard input[type="radio"]:checked + .radioCardContent .radioCardLabel {
  color: var(--color-primary);
}

.radioCard:hover .radioCardContent {
  border-color: var(--color-primary);
}

/* Variante danger para Reemplazar */
.radioCard.danger input[type="radio"]:checked + .radioCardContent {
  border-color: var(--color-danger);
  background: var(--color-danger-light);
}

.radioCard.danger input[type="radio"]:checked + .radioCardContent .radioCardLabel {
  color: var(--color-danger);
}

.radioCard.danger:hover .radioCardContent {
  border-color: var(--color-danger-border);
}

/* Selector de año moderno */
.yearSelector {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}

.yearSelectorLabel {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.yearSelectorInput {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}

.yearSelectorInput input[type="number"] {
  width: 44px;
  padding: 3px 2px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  color: var(--color-text);
  -moz-appearance: textfield;
}

.yearSelectorInput input[type="number"]::-webkit-outer-spin-button,
.yearSelectorInput input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.yearBtn {
  width: 20px;
  height: 22px;
  border: none;
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.1s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yearBtn:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.yearBtn:active {
  background: var(--color-primary);
  color: #fff;
}

.hint{ margin-top:8px; font-size:11px; color:#94a3b8; line-height: 1.4; }
.hint.warn{ color:#78716c; background: #fafaf9; border: 1px solid #e7e5e4; padding: 6px 8px; border-radius: 5px; }
.hint code { background: #f1f5f9; padding: 1px 4px; border-radius: 3px; font-size: 10px; color: #64748b; }

/* Resultado subida masiva PDFs */
.bulkResultBox {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.bulkResultSuccess {
  border-color: #86efac;
  background: #f0fdf4;
}

.bulkResultWarning {
  border-color: #fde047;
  background: #fefce8;
}

.bulkResultInfo {
  border-color: #93c5fd;
  background: #eff6ff;
}

.bulkResultTitle {
  font-weight: 600;
  font-size: 13px;
  color: #374151;
  margin-bottom: 6px;
}

.bulkResultSuccess .bulkResultTitle { color: #166534; }
.bulkResultWarning .bulkResultTitle { color: #854d0e; }

.bulkResultStats {
  display: flex;
  gap: 12px;
  font-size: 13px;
  margin-bottom: 4px;
}

.bulkResultOk {
  color: #16a34a;
  font-weight: 600;
}

.bulkResultBad {
  color: #dc2626;
  font-weight: 600;
}

.bulkResultMeta {
  font-size: 11px;
  color: #64748b;
}

.row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:8px;
}

.btnLink{
  display:inline-block;
  margin-top:8px;
  text-decoration:none;
  text-align:center;
  padding:10px;
  border:1px solid #d7d9e5;
  border-radius:10px;
  background:#fff;
  color:#111;
  font-weight:700;
}
.btnLink:hover{ filter:brightness(.98); }

.importRow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
  flex-wrap: wrap;
}

.btnLinkSmall {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #fff;
  color: #475569;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.15s ease;
}

.btnLinkSmall:hover {
  border-color: #94a3b8;
  background: #f8fafc;
  color: #334155;
}

.amountPending{ color:#c40000; font-weight:900; }

/* Tablas mini (deuda por año / provisión por año) */
#yearDebt table, #provByYear table{
  width:100%;
  border-collapse:collapse;
}
#yearDebt th, #yearDebt td, #provByYear th, #provByYear td{
  padding:10px;
  border-bottom:1px solid #eef0f7;
  font-size:13px;
}
#yearDebt table td:nth-child(3),
#yearDebt table th:nth-child(3){
  color:#c40000;
  font-weight:700;
}

/* ===== Tarjetas modernas de Deuda por Año ===== */
#yearDebt {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 0;
}

.yearDebtEmpty {
  text-align: center;
  color: var(--color-text-muted);
  padding: 20px;
  font-size: var(--font-size-sm);
}

.yearDebtCard {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  transition: all 0.2s ease;
}

.yearDebtCard:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.1);
  transform: translateY(-1px);
}

.yearDebtHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.yearDebtYear {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-text);
  background: linear-gradient(135deg, var(--color-primary) 0%, #818cf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.yearDebtCount {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background: var(--color-bg-hover);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-weight: 600;
}

.yearDebtBar {
  height: 6px;
  background: var(--color-bg-hover);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: 12px;
}

.yearDebtBarFill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-danger) 0%, #f87171 100%);
  border-radius: var(--radius-full);
  transition: width 0.4s ease;
}

.yearDebtStats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.yearDebtStat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  text-align: center;
}

.yearDebtStatLabel {
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.yearDebtStatValue {
  font-size: var(--font-size-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.yearDebtStatValue.pending {
  color: var(--color-danger);
}

.yearDebtStatValue.reclamar {
  color: #ea580c;
}

.yearDebtStatValue.prov {
  color: var(--color-text-secondary);
}

/* Responsive */
@media (max-width: 600px) {
  .yearDebtStats {
    grid-template-columns: 1fr;
  }
  .yearDebtStat {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* Cobrado */
#kpiCobrado{ color:#16a34a; }
.kpiGreen{ color:#16a34a; }
#kpiCobradoPendiente{ color: var(--color-danger); font-weight:700; }
#kpiTotal{ color: var(--color-danger); font-weight:900; }

.cobradoBox{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  padding: 16px 8px;
}

.cobradoKpi{ 
  text-align: center; 
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cobradoKpi .kpiValue {
  font-size: 32px !important;
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cobradoKpi .kpiSub {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.cobradoChartWrap{
  position: relative;
  width: 180px;
  height: 180px;
  filter: drop-shadow(0 6px 16px rgba(22, 163, 74, 0.15));
}

.cobradoChartWrap canvas{ 
  width: 100% !important; 
  height: 100% !important; 
}

.cobradoCenter{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.cobradoPct{
  font-weight: 900;
  font-size: 36px;
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -1px;
  line-height: 1;
}

.cobradoSmall{
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-text-muted);
  font-weight: 700;
  margin-top: 4px;
}

/* Acciones */
.actionReclamar{ color:#c40000; font-weight:900; }
.actionPteReclamar{ color:#1e7f3f; font-weight:700; }
.actionPagoParcial{ color:#b26a00; font-weight:800; }
.actionPdtePago{
  color:#b26a00;       /* naranja */
  font-weight:800;
}

footer{ text-align:center; }

/* Pendiente de reclamar */
.reclamarHero{
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items: center;
  text-align: center;
  padding: 10px 0;
}

.reclamarAmount{
  font-size:42px;
  font-weight:900;
  color:#c40000;
  line-height:1;
}

.reclamarAmount.clickable {
  cursor: pointer;
  transition: all 0.15s ease;
  border-radius: 10px;
  padding: 8px 16px;
}

.reclamarAmount.clickable:hover {
  background: rgba(220, 38, 38, 0.08);
  transform: scale(1.02);
}

.reclamarAmount.clickable.success:hover {
  background: rgba(5, 150, 105, 0.08);
}

.reclamarMeta{
  font-size:13px;
  color:#666;
  margin-top:4px;
}

.reclamarStats{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
  margin-top:8px;
  width: 100%;
}

.reclamarStat{
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 14px 12px;
  background: #fff;
  transition: all 0.2s ease;
}

.reclamarStat.clickable {
  cursor: pointer;
}

.reclamarStat.clickable:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.12);
}

.reclamarStatLabel{
  font-size:11px;
  color: var(--color-text-muted);
  font-weight:700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.reclamarStatValue{
  margin-top:8px;
  font-size:20px;
  font-weight:900;
}

.reclamarPctRed{ color:#c40000; font-weight:900; }

/* Ranking */
.rankRow{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  margin: 6px 0;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--color-border-light);
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  position: relative;
  overflow: hidden;
}

.rankRow::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--color-primary) 0%, #818cf8 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.rankRow:hover {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-color: var(--color-border);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.rankRow:hover::before {
  opacity: 1;
}

.rankRow:last-child { margin-bottom: 0; }

.rankLeft { 
  flex: 1; 
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rankName{
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.rankName > span:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rankIdx{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  font-size: 12px;
  font-weight: 800;
  color: #64748b;
  flex-shrink: 0;
}

.rankBar{
  height: 5px;
  background: var(--color-bg-hover);
  border-radius: 999px;
  overflow: hidden;
}
.rankBar span{
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary) 0%, #818cf8 100%);
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.rankAmt{
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--color-danger);
  white-space: nowrap;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--color-danger-light);
  border: 1px solid var(--color-danger-border);
}

/* Medallas top 1/2/3 */
.rankRow:nth-child(1) .rankIdx{
  background: linear-gradient(135deg, #fef08a 0%, #fde047 100%);
  color: #854d0e;
  box-shadow: 0 2px 6px rgba(253, 224, 71, 0.4);
}
.rankRow:nth-child(1) .rankBar span {
  background: linear-gradient(90deg, #eab308 0%, #facc15 100%);
}
.rankRow:nth-child(2) .rankIdx{
  background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
  color: #4b5563;
  box-shadow: 0 2px 4px rgba(209, 213, 219, 0.3);
}
.rankRow:nth-child(2) .rankBar span {
  background: linear-gradient(90deg, #6b7280 0%, #9ca3af 100%);
}
.rankRow:nth-child(3) .rankIdx{
  background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
  color: #9a3412;
  box-shadow: 0 2px 4px rgba(253, 186, 116, 0.3);
}
.rankRow:nth-child(3) .rankBar span {
  background: linear-gradient(90deg, #ea580c 0%, #fb923c 100%);
}

.danger{
  color:#c62828;
  font-weight:600;
}

/* Evitar desbordes en paneles con contenido largo */
.panel, .panel *{ min-width:0; }
#reclamarBox, #reclamarTopBox, #topMorososBox{
  overflow:hidden;
  word-break:break-word;
  overflow-wrap:anywhere;
}

/* =========================
   Responsive
   ========================= */
@media (max-width:1400px){
  .reclamarStats{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width:768px){
  main{ width:100%; max-width:none; padding: 12px 16px; }
  .controls{ grid-template-columns:repeat(2,1fr); }
  .kpis{ grid-template-columns:repeat(2,1fr); gap: 10px; }
  .grid{ grid-template-columns:1fr; }
  .belowGrid{ grid-template-columns:1fr; }
  .uploadGrid{ grid-template-columns:1fr; }
  .panel, .card{ width:100%; max-width:none; padding: 14px; }
  .chartBox{ height:320px; }
  .bulkInline select{ min-width:180px; }
  .reclamarStats{ grid-template-columns:1fr; }
  .cargaMensual{ display: none !important; }
  .cargaGrid{ flex-direction: column; }
  .modalBox.modalLarge{ width:95%; }
  .dashboardPanels{ flex-direction: column; }
  .tdAcciones{ flex-wrap: wrap; }
  .panelTable{ padding: 10px; }
  .panelHeader{ padding: 0 4px; }
  
  /* En móviles, header no sticky */
  header, .topbar, .filtersBar, .mainHeader {
    position: static !important;
  }
}

/* Encabezado principal sticky (solo desktop) */
@media (min-width: 769px) {
  header, .topbar, .filtersBar, .mainHeader{
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
  }
}

/* Layout interno de cabecera tabla */
#tbl thead th:nth-child(2) .thFlex{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  flex-wrap: nowrap;
}
#tbl thead th:not(:nth-child(2)) .thFlex{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

section.panel{
  margin-top:12px;
  margin-bottom:12px;
}

/* =========================
   Modal (histórico / PDF options)
   ========================= */
.modalOverlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 16px;
  z-index:1000;
  animation: fadeIn 0.2s ease;
  overflow-y: auto;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-24px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal,
.modalBox{
  width:min(760px, 100%);
  max-height: calc(100vh - 48px);
  background:#fff;
  border:none;
  border-radius: 20px;
  box-shadow: 0 24px 80px -12px rgba(0,0,0,.22), 0 8px 24px -8px rgba(0,0,0,.08);
  overflow:hidden;
  animation: slideIn 0.3s cubic-bezier(.22,1,.36,1);
  display: flex;
  flex-direction: column;
}
.modalHeader{
  padding: 22px 28px;
  border-bottom: 1px solid #f0f1f5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background: linear-gradient(180deg, #fafbff 0%, #fff 100%);
}
.modalHeader h2{
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.3px;
}
.modalTitle{
  font-size:18px;
  font-weight:700;
  color:#0f172a;
  letter-spacing: -0.3px;
}
.modalClose{
  border: none;
  background: #f1f5f9;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-weight: 400;
  font-size: 18px;
  color: #94a3b8;
  transition: all 0.2s ease;
  flex-shrink: 0;
  cursor: pointer;
}
.modalClose:hover{
  background: #fee2e2;
  color: #dc2626;
  transform: rotate(90deg);
}
.modalBody{ 
  padding: 28px; 
  max-height: calc(80vh - 150px);
  overflow-y: auto;
}
.modalFooter{
  padding: 18px 28px;
  border-top: 1px solid #f0f1f5;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  background: #fafbfd;
}
.modalList{
  border:1px solid #e5e7eb;
  background:#f8fafc;
  border-radius:12px;
  padding:12px 14px;
  max-height:280px;
  overflow:auto;
  font-size:13px;
  line-height:1.45;
}
.modalList .rowLine{ 
  padding:10px 0; 
  border-bottom:1px solid #e5e7eb; 
}
.modalList .rowLine:last-child{ border-bottom:none; }
.modalList .rowLineFlex{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.modalTextarea{
  width:100%;
  min-height:100px;
  resize:vertical;
  margin-top:12px;
  padding:12px 14px;
  border:1px solid #d1d5db;
  border-radius:10px;
  font-size:13px;
  background:#fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.modalTextarea:focus{
  outline:none;
  border-color:#6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
.modalHint{ margin-top:10px; font-size:12px; color:#64748b; }

/* Mini panels dentro de modales */
.modalOverlay .miniBody {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
}
.modalOverlay .miniBody .small {
  font-size: 13px;
  color: #64748b;
  margin-top: 4px;
}
.miniTitle {
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 8px;
}
.miniPanel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px;
}
.amountPending {
  color: #dc2626;
}
/* Antigüedad: lo más estrecha posible */

/* ====== MODAL SIZE VARIANTS ====== */
.modalBox.modalLarge{
  width: min(960px, 95%);
}
.modalBox.modalSmall{
  width: min(440px, 92%);
}

/* ====== KPI CARDS ====== */
.kpiCard{
  display:flex;
  flex-direction:column;
  gap: 6px;
  padding: 20px 22px;
  min-width:0;
  transition: transform 0.25s cubic-bezier(.4,0,.2,1), box-shadow 0.25s cubic-bezier(.4,0,.2,1);
  animation: slideUp 0.4s ease both;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-bg-white);
  position: relative;
  overflow: hidden;
  border-left: 4px solid var(--kpi-accent, #94a3b8);
}
.kpiCard[data-accent="indigo"]{ --kpi-accent: #6366f1; --kpi-val: #4f46e5; }
.kpiCard[data-accent="amber"]{ --kpi-accent: #f59e0b; --kpi-val: #d97706; }
.kpiCard[data-accent="red"]{ --kpi-accent: #ef4444; --kpi-val: #dc2626; }
.kpiCard[data-accent="blue"]{ --kpi-accent: #3b82f6; --kpi-val: #2563eb; }
.kpiCard:nth-child(1){ animation-delay: 0s; }
.kpiCard:nth-child(2){ animation-delay: 0.06s; }
.kpiCard:nth-child(3){ animation-delay: 0.12s; }
.kpiCard:nth-child(4){ animation-delay: 0.18s; }
.kpiCard:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.04);
}
.kpiCard .kpiLabel{
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-text-muted);
}
.kpiCard .kpiValue{
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.1;
  color: var(--kpi-val, var(--color-text));
}
@keyframes slideUp{
  from{ opacity:0; transform: translateY(12px); }
  to{ opacity:1; transform: translateY(0); }
}

/* ====== CARGA DE TRABAJO PANEL ====== */
.cargaPanel{
  animation: slideUp 0.4s ease 0.2s both;
  padding: 18px 20px;
}
.cargaHeader{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.cargaHeader h3{
  margin:0;
  font-size:15px;
  font-weight:700;
  color: var(--color-text);
  letter-spacing: -0.2px;
}
.cargaSubtitle{
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: 500;
}
.cargaGrid{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.cargaCard{
  flex: 1 1 260px;
  background: #fff;
  border: 1.5px solid #e4e8ef;
  border-left: 4px solid var(--person-color, #94a3b8);
  border-radius: var(--radius-md);
  padding:12px 14px;
  transition: all 0.2s ease;
}
.cargaCard:hover{
  box-shadow: 0 3px 12px rgba(0,0,0,.07);
  transform: translateY(-2px);
}
.cargaCard.danger{
  background: #fff5f5;
  border-color: #fca5a5;
  border-left-color: #ef4444;
}
.cargaCard.warning{
  background: #fffbf0;
  border-color: #fde68a;
  border-left-color: #f59e0b;
}
.cargaCard.ok{
  background: #f8fdfb;
  border-color: #d1e9dd;
}
.cargaCard.idle{
  background: #f8f9fb;
  border-color: #e4e8ef;
}
.cargaCard.idle .cargaBarFill{
  background: #cbd5e1;
}
.cargaCard.idle .cargaPct{
  color: #cbd5e1;
}
.cargaCardHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}
.cargaNombre{
  font-weight:600;
  font-size:13px;
  color: var(--color-text);
}
.cargaAlert{
  font-size:14px;
}
.cargaAlertIcon{
  color: #dc2626;
  flex-shrink: 0;
}
.cargaCard.warning .cargaAlertIcon{
  color: #d97706;
}
.cargaLibresOver{
  font-weight: 700;
  color: #dc2626;
}
.cargaBarWrap{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}
.cargaBar{
  flex:1;
  height:8px;
  background:#e2e8f0;
  border-radius:4px;
  overflow:hidden;
}
.cargaBarFill{
  height:100%;
  border-radius:4px;
  background: var(--color-primary);
  transition: width 0.4s ease;
}
.cargaCard.danger .cargaBarFill{
  background: var(--color-danger);
}
.cargaCard.warning .cargaBarFill{
  background: #f59e0b;
}
.cargaCard.ok .cargaBarFill{
  background: var(--person-color, #10b981);
}
.cargaPct{
  font-size:12px;
  font-weight:700;
  color: var(--color-text-muted);
  min-width:32px;
  text-align:right;
}
.cargaStats{
  display:flex;
  gap:12px;
  font-size:12px;
  color: var(--color-text-muted);
  flex-wrap:wrap;
}
.cargaEmpty{
  text-align:center;
  color: var(--color-text-muted);
  padding:16px;
  font-size:13px;
}

/* ====== URGENTES PANEL ====== */
.urgentesPanel{
  animation: slideUp 0.4s ease 0.28s both;
  padding: 18px 20px;
}
.urgenteBadge{
  background: var(--color-danger);
  color:#fff;
  border-radius:10px;
  padding:2px 8px;
  font-size:12px;
  font-weight:700;
  min-width:20px;
  text-align:center;
  display:inline-block;
}
.urgenteBadge.hasUrgent{
  animation: pulse 1.5s infinite;
}
@keyframes pulse{
  0%, 100%{ opacity:1; }
  50%{ opacity:.6; }
}

/* Weekly Calendar */
.weekCalendar{
  overflow: hidden;
}
.wkCal{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.wkDay{
  background: #f8f9fb;
  border: 1.5px solid #eef0f5;
  border-radius: 12px;
  overflow: hidden;
  min-height: 110px;
  display: flex;
  flex-direction: column;
}
.wkDay.wkToday{
  border-color: #c7d2fe;
  background: #fafaff;
  box-shadow: 0 2px 8px rgba(99,102,241,.08);
}
.wkDayHead{
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  background: #fff;
  border-bottom: 1px solid #eef0f5;
}
.wkDayHeadToday{
  background: #4f46e5;
  color: #fff;
  border-bottom-color: #4f46e5;
}
.wkDayBody{
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  overflow-y: auto;
  max-height: 320px;
}
.wkEmpty{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
  font-size: 13px;
}

/* Mini task cards */
.wkTask{
  padding: 7px 9px;
  border-radius: 8px;
  border-left: 3.5px solid #94a3b8;
  background: #fff;
  transition: all 0.15s ease;
  cursor: pointer;
}
.wkTask:hover{
  background: #eef2ff;
  box-shadow: 0 2px 6px rgba(79,70,229,.1);
  transform: translateY(-1px);
}
.wkTask.wkOverdue{
  background: #fff5f5;
}
.wkTask.wkOverdue:hover{
  background: #fee2e2;
}
.wkTaskName{
  font-size: 11px;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
  line-height: 1.3;
}
.wkTaskClient{
  font-size: 10px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.wkTaskMeta{
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: space-between;
}
.wkTaskEnc{
  font-size: 9px;
  color: #94a3b8;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
}
.wkTaskBadge{
  font-size: 8px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Responsive calendar */
@media (max-width: 768px){
  .wkCal{
    grid-template-columns: repeat(2, 1fr);
  }
  .wkDay:last-child{
    grid-column: 1 / -1;
  }
}
#tbl thead th:nth-child(6),
#tbl tbody td:nth-child(6){
  width:90px;
  padding-left:6px;
  padding-right:6px;
}

.reclamarStatValue.danger,
.reclamarAmount.danger {
  color: #b71c1c;
}

.reclamarStatValue.success,
.reclamarAmount.success {
  color: #1b5e20;
  font-weight: bold;
}

#tbl tbody tr.emptyRow td{
  padding:22px 12px;
  text-align:center !important;
  color:#666;
  background:#fbfcff;
}

.emptyRow .emptyTitle{
  font-weight:900;
  color:#111;
  margin-bottom:6px;
}

.emptyRow .emptyActions{
  margin-top:10px;
}

/* Indicador de más filas (límite de visualización) */
#tbl tbody tr.moreRowsIndicator td {
  padding: 16px 12px;
  text-align: center !important;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-top: 2px dashed #e2e8f0;
}

.moreRowsBox {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.moreRowsIcon {
  font-size: 18px;
}

.moreRowsText {
  font-size: 13px;
  color: #475569;
}

.moreRowsText strong {
  color: #1e293b;
  font-weight: 700;
}

.moreRowsHint {
  font-size: 12px;
  color: #94a3b8;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}

@media (max-width: 600px) {
  .moreRowsBox {
    flex-direction: column;
    gap: 6px;
  }
}

.rowLineFlex{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
/* --- Pagos / estado pagada --- */
.paidTickBtn{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid #d7d9e5;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 18px;
  cursor: pointer;
}
.paidTickBtn.none{
  color: #9ca3af;
  background: #fff;
}
.paidTickBtn.partial{
  color: #b45309;
  border-color: #fdba74;
  background: #fff7ed;
}
.paidTickBtn.full{
  color: #1d4ed8;
  border-color: #93c5fd;
  background: #eff6ff;
}

/* Checkbox Pagada (colores según estado de pago) */
.paidCb{
  transform: scale(1.2);
  cursor: pointer;
}

/* Pago completo = verde */
.paidCb.full,
.tableWrap .paidCb.full { 
  accent-color: #16a34a !important;
}

/* Pago parcial = amarillo */
.paidCb.partial,
.tableWrap .paidCb.partial { 
  accent-color: #f59e0b !important;
}

/* Sin pago = gris */
.paidCb.none,
.tableWrap .paidCb.none {
  accent-color: #9ca3af !important;
}

/* Panels del dashboard: estiran por igual */
section.grid .panel{
  display:flex;
  flex-direction:column;
  min-height:0;
}

/* El contenido interior rellena el alto */
.chartBox,
#topMorososBox{
  flex:1;
  min-height:0;
}

/* Desktop base: altura estable con límites */
.chartBox{
  height: min(60vh, 420px);
  min-height: 280px;
  max-height: 520px;
  padding:12px;
  box-sizing:border-box;
  position:relative;
}

/* Canvas del chart ocupa todo el alto del contenedor */
.chartBox canvas{
  width:100% !important;
  height:100% !important;
}

/* Top morosos con scroll si hay muchos */
#topMorososBox{
  overflow:auto;
}

/* Móvil normal */
@media (max-width:768px){
  .chartBox{
    height: min(75vh, 520px);
    min-height: 380px;
    max-height: 520px;
  }
}

/* Móvil aunque uses "versión escritorio" */
@media (pointer: coarse){
  .chartBox{
    height: min(75vh, 520px);
    min-height: 380px;
    max-height: 520px;
  }
}

/* svh (más estable que vh en móvil) */
@supports (height: 1svh){
  .chartBox{ height: min(60svh, 420px); }

  @media (max-width:768px){
    .chartBox{ height: min(75svh, 520px); }
  }
  @media (pointer: coarse){
    .chartBox{ height: min(75svh, 520px); }
  }
}

.bulkNote{ min-width:220px; }

/* =========================
   AUTENTICACIÓN / LOGIN
   ========================= */
.loginScreen {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.loginBox {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
  padding: 40px 36px;
  width: 100%;
  max-width: 400px;
}

.loginLogo {
  text-align: center;
  margin-bottom: 32px;
}

.loginLogo h1 {
  font-size: 32px;
  color: #111;
  margin: 0 0 8px 0;
}

.loginSubtitle {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.loginForm {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.loginField {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.loginField label {
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

.loginField input {
  padding: 14px 16px;
  border: 2px solid #e5e7ef;
  border-radius: 12px;
  font-size: 15px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background: #fafbfc;
}

.loginField input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
  background: #fff;
}

.loginField input::placeholder {
  color: #aaa;
}

.loginError {
  background: #fff5f5;
  border: 1px solid #fecaca;
  color: #b91c1c;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

.loginBtn {
  padding: 14px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  margin-top: 8px;
}

.loginBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.loginBtn:active {
  transform: translateY(0);
}

.loginBtn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Header con usuario y logout */
.headerRight {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

.userInfo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.userDisplay {
  font-size: 13px;
  font-weight: 600;
  color: #1e40af;
  background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid #bfdbfe;
}

.logoutBtn {
  padding: 8px 16px;
  background: #fff;
  border: 1px solid #e5e7ef;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  transition: all 0.15s ease;
}

.logoutBtn:hover {
  background: #fff5f5;
  border-color: #fecaca;
  color: #b91c1c;
}

/* Ajustes del header para incluir userInfo */
header .title {
  flex: 1;
}

@media (max-width: 768px) {
  .loginBox {
    padding: 32px 24px;
  }
  
  .headerRight {
    width: 100%;
    justify-content: flex-end;
    margin-top: 12px;
  }
  
  .userDisplay {
    display: none;
  }
}

/* =============== TOAST / ALERT NOTIFICATIONS =============== */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  background: #1e293b;
  color: #f1f5f9;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  font-size: 14px;
  max-width: 350px;
  pointer-events: auto;
  animation: toastIn 0.3s ease;
}

.toast.success {
  background: #059669;
  color: #fff;
}

.toast.error {
  background: #dc2626;
  color: #fff;
}

.toast.warning {
  background: #d97706;
  color: #fff;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(100%); }
}

.toast.removing {
  animation: toastOut 0.3s ease forwards;
}

/* =============== CUSTOM ALERTS / CONFIRMS =============== */
.alertOverlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  padding: 20px;
  animation: fadeIn 0.15s ease;
}

.alertBox {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
  padding: 28px 32px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  animation: slideIn 0.2s ease;
}

.alertIcon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 28px;
  font-weight: bold;
}

.alertBox--info .alertIcon {
  background: #dbeafe;
  color: #2563eb;
}

.alertBox--success .alertIcon {
  background: #d1fae5;
  color: #059669;
}

.alertBox--warning .alertIcon {
  background: #fef3c7;
  color: #d97706;
}

.alertBox--error .alertIcon,
.alertBox--danger .alertIcon {
  background: #fee2e2;
  color: #dc2626;
}

.alertMessage {
  font-size: 15px;
  color: #374151;
  line-height: 1.5;
  margin-bottom: 20px;
  word-break: break-word;
}

.alertInput {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 20px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.alertInput:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}

.alertBox--danger .alertInput:focus {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220,38,38,.15);
}

.alertActions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.alertBtn {
  padding: 10px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
}

.alertBox > .alertBtn {
  background: #4f46e5;
  color: #fff;
  min-width: 120px;
}

.alertBox > .alertBtn:hover {
  background: #4338ca;
}

.alertBtn--cancel {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
}

.alertBtn--cancel:hover {
  background: #e5e7eb;
}

.alertBtn--confirm {
  background: #4f46e5;
  color: #fff;
}

.alertBtn--confirm:hover {
  background: #4338ca;
}

.alertBtn--confirm.alertBtn--danger,
.alertBtn--confirm.alertBtn--error {
  background: #dc2626;
}

.alertBtn--confirm.alertBtn--danger:hover,
.alertBtn--confirm.alertBtn--error:hover {
  background: #b91c1c;
}

.alertBtn--confirm.alertBtn--warning {
  background: #d97706;
}

.alertBtn--confirm.alertBtn--warning:hover {
  background: #b45309;
}

/* Ranking de reclamar con colores más urgentes */
#reclamarTopBox .rankBar span {
  background: linear-gradient(90deg, #dc2626 0%, #f87171 100%);
}
#reclamarTopBox .rankRow:nth-child(1) .rankBar span {
  background: linear-gradient(90deg, #b91c1c 0%, #dc2626 100%);
}
#reclamarTopBox .rankRow:nth-child(2) .rankBar span {
  background: linear-gradient(90deg, #dc2626 0%, #ef4444 100%);
}
#reclamarTopBox .rankRow:nth-child(3) .rankBar span {
  background: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
}

/* ============================================================
   IMPORT RESULT PANEL
   ============================================================ */
.importResultPanel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 560px;
}

.importResultCards {
  display: flex;
  gap: 10px;
}

.irCard {
  flex: 1;
  text-align: center;
  padding: 14px 10px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}
.irCard--primary { background: #eff6ff; border-color: #bfdbfe; }
.irCard--info    { background: #f0fdf4; border-color: #bbf7d0; }
.irCard--warn    { background: #fffbeb; border-color: #fde68a; }

.irCardNum {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
}
.irCard--primary .irCardNum { color: #2563eb; }
.irCard--info .irCardNum    { color: #16a34a; }
.irCard--warn .irCardNum    { color: #d97706; }

.irCardLabel {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.irSection {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px;
}

.irSectionTitle {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 10px;
}
.irSectionTitle--warn { color: #b45309; }

.irVincStats {
  display: flex;
  gap: 16px;
}

.irVincStat {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.irVincNum {
  font-size: 22px;
  font-weight: 700;
}
.irVincNum--ok   { color: #16a34a; }
.irVincNum--warn { color: #d97706; }

.irVincLabel {
  font-size: 11px;
  color: #64748b;
  text-align: center;
  margin-top: 2px;
}

.irNote {
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 6px;
  margin-top: 10px;
}
.irNote--ok {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.irTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.irTable th {
  text-align: left;
  font-weight: 600;
  color: #475569;
  padding: 6px 8px;
  border-bottom: 2px solid #e2e8f0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.irTable td {
  padding: 6px 8px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
}
.irTable tr:last-child td { border-bottom: none; }

.irSinNifList {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.irSinNifTag {
  font-size: 11px;
  background: #fef3c7;
  color: #92400e;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid #fde68a;
}

.irSinNifMore {
  font-size: 11px;
  color: #9ca3af;
  padding: 3px 6px;
  font-style: italic;
}

/* Import result: linked card + neutral */
.irCard--linked { background: #ecfdf5; border-color: #6ee7b7; }
.irCard--linked .irCardNum { color: #059669; }
.irCard--neutral { background: #f8fafc; border-color: #e2e8f0; }
.irCard--neutral .irCardNum { color: #94a3b8; }

.irVincNum--neutral { color: #94a3b8; }

/* Import result: skip reasons */
.irSkipList {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.irSkipRow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #f1f5f9;
}
.irSkipRow:last-child { border-bottom: none; }

.irSkipIcon {
  font-size: 14px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.irSkipCount {
  font-size: 15px;
  font-weight: 700;
  color: #334155;
  min-width: 28px;
  text-align: right;
  flex-shrink: 0;
}

.irSkipLabel {
  font-size: 13px;
  color: #64748b;
}

.irSkipEjemplos {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-left: 56px;
  padding-bottom: 6px;
}

/* PDF Viewer modal - wider for inline viewing */
.modal.modalPdfViewer,
.modalBox.modalPdfViewer {
  width: min(950px, 95%);
}


/* ====================================================================
   MISSING COMPONENT STYLES - COMPREHENSIVE REBUILD
   ==================================================================== */

/* ====== BUTTONS ====== */
.btnPrimary{
  background: linear-gradient(180deg, #5b52f0 0%, var(--color-primary) 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: var(--font-size-md);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 1px 3px rgba(79,70,229,.2);
}
.btnPrimary:hover{ background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(79,70,229,.25); }

.btnSecondary{
  background: #fff;
  color: var(--color-text-secondary);
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: var(--font-size-md);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btnSecondary:hover{ background: #f8fafc; border-color: #cbd5e1; color: #334155; }

.btnDanger{
  background: linear-gradient(180deg, #ef4444 0%, var(--color-danger) 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: var(--font-size-md);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 1px 3px rgba(220,38,38,.2);
}
.btnDanger:hover{ background: linear-gradient(180deg, var(--color-danger) 0%, #b91c1c 100%); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(220,38,38,.25); }

.btnSmall{
  padding: 5px 10px;
  font-size: var(--font-size-xs);
}

.btnIcon{
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: all var(--transition-fast);
}
.btnIcon:hover{ background: var(--color-bg-hover); border-color: var(--color-border-dark); }
.btnIcon.danger:hover{ background: var(--color-danger-light); border-color: var(--color-danger-border); color: var(--color-danger); }

/* ====== FORM LAYOUT ====== */
.formSection{
  margin-bottom: 20px;
  padding: 16px 18px;
  background: #fafbfd;
  border: 1px solid #eef0f5;
  border-radius: 12px;
}
.formSectionHeader{
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e8ecf4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.formSectionHeader h4{
  margin: 0;
  font-size: 14px;
  color: #334155;
  letter-spacing: -0.1px;
}
.formRow{
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
  align-items: flex-start;
}
.formGroup{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.formGroup label{
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: #475569;
  letter-spacing: 0.1px;
}
.formGroup input,
.formGroup select,
.formGroup textarea{
  padding: 9px 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: var(--font-size-md);
  font-family: var(--font-family);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  background: #fafbfc;
}
.formGroup input:focus,
.formGroup select:focus,
.formGroup textarea:focus{
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(79,70,229,.07);
  background: #fff;
}
.formGroup input::placeholder,
.formGroup textarea::placeholder{
  color: #b0b8c9;
}
/* Flex proportions */
.fg1{ flex:1; }
.fg2{ flex:2; }
.fg3{ flex:3; }
.fg4{ flex:4; }
.fg6{ flex:6; }

.required::after{
  content: " *";
  color: var(--color-danger);
}

.checkboxGroup{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.checkboxGroup label{
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-sm);
  cursor: pointer;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}
.checkboxGroup label:hover{
  background: var(--color-bg-hover);
}

.dynamicRows{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dynRow{
  display: flex;
  gap: 8px;
  align-items: center;
}
.dynRow select,
.dynRow input{
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}
.ctTipo{ width: 100px; }
.ctValor{ flex: 2; }
.ctPersona{ flex: 2; }

/* ====== DATA TABLE ====== */
.dataTable{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--font-size-sm);
}
.dataTable th{
  background: var(--color-bg-subtle);
  border-bottom: 2px solid var(--color-border);
  padding: 8px 10px;
  text-align: left;
  font-weight: 700;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  position: sticky;
  top: 0;
  z-index: 2;
  white-space: nowrap;
}
.dataTable td{
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: middle;
}
/* Zebra striping */
.dataTable tbody tr:nth-child(even){
  background: rgba(248,250,252,.7);
}
.dataTable tbody tr{
  transition: all 0.15s ease;
}
.dataTable tbody tr:hover{
  background: #eef2ff;
  box-shadow: inset 3px 0 0 var(--color-primary);
}

/* Table column classes */
.thTarea, .tdTarea{ min-width: 180px; max-width: 280px; }
.tdTarea{ overflow: hidden; }
.tareaDesc{ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.thCliente, .tdCliente{ min-width: 120px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thPlazo, .tdPlazo{ white-space: nowrap; min-width: 90px; }
.thDias, .tdDias{ text-align: center; min-width: 50px; }
.thNotas, .tdNotas{ min-width: 120px; }
.thEstado, .thFacturado{ min-width: 100px; }
.thHoras, .tdHoras{ text-align: center; min-width: 56px; font-variant-numeric: tabular-nums; }
.tdHoras{
  font-weight: 600;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  letter-spacing: 0.2px;
}
.thAcciones, .tdAcciones{ text-align: center; min-width: 80px; white-space: nowrap; }
.tdAcciones{
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 4px;
  padding: 6px 8px;
}
.tdAcciones .btnIcon{
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-muted);
  transition: all 0.18s ease;
}
.tdAcciones .btnIcon:hover{
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: transparent;
  transform: scale(1.08);
}
.tdAcciones .btnIcon.danger:hover{
  background: #fef2f2;
  color: var(--color-danger);
}

/* Table header filters */
.thSortable{ cursor: pointer; user-select: none; }
.thSortable:hover{ color: var(--color-primary); }
.thSortBtn{
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 0 4px;
  color: var(--color-text-muted);
}
.thFilterBtn{
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}
.thFilterBtn:hover{ color: var(--color-primary); }
.thFilterDropdown{
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.1), 0 2px 6px rgba(0,0,0,.04);
  padding: 8px;
  z-index: 50;
  min-width: 180px;
  animation: dropdownSlide 0.18s cubic-bezier(.2,.9,.3,1);
  transform-origin: top left;
}
.thFilterDropdown select{
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid #e4e8ef;
  border-radius: 8px;
  font-size: 12px;
  background: #fafbfc;
  color: #334155;
  cursor: pointer;
  transition: border-color 0.15s;
}
.thFilterDropdown select:focus{
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,.08);
}
.thFilter{ position: relative; }
.thWithSearch{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.thWithSearch > span{
  flex-shrink: 0;
  white-space: nowrap;
}
.thSearchInput{
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  width: 100%;
  min-width: 60px;
  max-width: 120px;
  background: var(--color-bg-white);
  transition: all 0.15s ease;
}
.thSearchInput:focus{
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(79,70,229,.12);
  max-width: 160px;
}

.tableHeader{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 8px;
}

/* Inline editing */
.inlineSelect{
  padding: 5px 8px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  font-size: var(--font-size-xs);
  background: transparent;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(.4,0,.2,1);
  max-width: 140px;
  font-weight: 500;
}
.inlineSelect:hover{
  border-color: #e2e8f0;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.inlineSelect:focus{
  outline: none;
  border-color: #6366f1;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(99,102,241,.08);
}
.personSelect{
  padding: 4px 8px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.inlineInput{
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  background: transparent;
  transition: all var(--transition-fast);
  width: 100%;
}
.inlineInput:hover{ border-color: var(--color-border); background: var(--color-bg-white); }
.inlineInput:focus{
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-bg-white);
  box-shadow: 0 0 0 2px rgba(79,70,229,.12);
}
.notasInput{ font-size: var(--font-size-xs); color: var(--color-text-muted); }
.horasInput{ width: 60px; text-align: center; font-variant-numeric: tabular-nums; }

/* ====== DIAS BADGE ====== */
.diasBadge{
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-align: center;
  min-width: 36px;
  line-height: 1.3;
}
.diasVencido{
  background: var(--color-danger);
  color: #fff;
  animation: gentlePulse 2s infinite;
}
.diasMuyUrgente{
  background: #f97316;
  color: #fff;
}
.diasUrgente{
  background: #fbbf24;
  color: #92400e;
}
.diasProximo{
  background: #e0e7ff;
  color: var(--color-primary);
}
@keyframes gentlePulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.75; }
}

/* ====== ESTADO/FACTURADO SELECT COLORS ====== */
.estadoSelect, .facturadoSelect{
  font-weight: 600;
}
.estado-porhacer{ background: #f1f5f9; color: #475569; }
.estado-enproceso{ background: #dbeafe; color: #1e40af; }
.estado-pendiente{ background: #fef3c7; color: #92400e; }
.estado-ptepresentar{ background: #fae8ff; color: #86198f; }
.estado-presentado{ background: #dcfce7; color: #166534; }
.estado-hecho{ background: #d1fae5; color: #065f46; }
.fact-nofacturable{ background: #f1f5f9; color: #64748b; }
.fact-pendiente{ background: #fef3c7; color: #92400e; }
.fact-facturado{ background: #dcfce7; color: #166534; }

/* ====== PANEL TABLE (section wrapper for detail table) ====== */
.panelTable{
  animation: slideUp 0.4s ease 0.35s both;
}
.panelTable h2{
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 2px;
}
.completadasTable{ /* alias */ }
.completadasTableWrap,
.festivosTableWrap{
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.festivosTable{ /* same as panelTable */ }
.festivosActions{
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.festivosAddRow{
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.festivosAddRow input,
.festivosAddRow select{
  padding: 7px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

/* ====== TAREASDETAIL TABLE WRAP ====== */
.tareasTable{
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-white);
}

/* ====== AUTOCOMPLETE ====== */
.autocompleteWrap{
  position: relative;
}
.autocompleteDropdown{
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.1), 0 2px 6px rgba(0,0,0,.04);
  max-height: 240px;
  overflow-y: auto;
  z-index: 100;
  animation: dropdownSlide 0.18s cubic-bezier(.2,.9,.3,1);
  transform-origin: top center;
}
@keyframes dropdownSlide{
  from{ opacity:0; transform: translateY(-6px) scaleY(.96); }
  to{ opacity:1; transform: translateY(0) scaleY(1); }
}
/* Scrollbar refinement */
.autocompleteDropdown::-webkit-scrollbar{
  width: 5px;
}
.autocompleteDropdown::-webkit-scrollbar-track{
  background: transparent;
}
.autocompleteDropdown::-webkit-scrollbar-thumb{
  background: #d1d5db;
  border-radius: 10px;
}
.acItem{
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 1px solid #f5f6f8;
  transition: all 0.12s ease;
  color: #334155;
}
.acItem:hover{
  background: #eef2ff;
  color: #4f46e5;
  padding-left: 18px;
}
.acItem:last-child{ border-bottom: none; }
.acNif{
  font-size: 11px;
  color: #94a3b8;
  margin-left: 8px;
  font-weight: 500;
}
.acNoResults{
  padding: 16px 14px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
}

/* ====== TOAST NOTIFICATIONS ====== */
.toastContainer{
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toastContainer > *{
  pointer-events: auto;
}

/* ====== CONFIRM MODAL ====== */
.confirmModal{
  text-align: center;
  padding: 32px 28px 24px;
}
.confirmIcon{
  font-size: 44px;
  margin-bottom: 12px;
  line-height: 1;
}
.confirmModal h3{
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px;
}
.confirmModal p{
  font-size: 13px;
  color: var(--color-text-muted);
}
.confirmButtons{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.confirmButtons .btnSecondary,
.confirmButtons .btnDanger{
  min-width: 110px;
  padding: 9px 20px;
  border-radius: 10px;
  font-size: 13px;
}

/* ====== DASHBOARD LAYOUT ====== */
.dashboardSection{
  margin-bottom: var(--spacing-md);
}
.dashboardPanels{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 14px;
}

/* ====== DETAIL FIELDS ====== */
.detailField{
  margin-bottom: 8px;
}
.detailLabel{
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}
.detailValue{
  font-size: var(--font-size-md);
  color: var(--color-text);
}

/* ====== EMPTY STATE ====== */
.emptyState{
  text-align: center;
  padding: 32px 16px;
  color: var(--color-text-muted);
}
.emptyIcon{
  font-size: 40px;
  margin-bottom: 8px;
  opacity: 0.5;
}

/* ====== PLAZO RESULT ====== */
.calcularPlazoRow{
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.plazoCalculado{
  margin-top: 10px;
}
.plazoResult{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #f0fdf4;
  border: 1px solid #a7f3d0;
  border-radius: var(--radius-md);
}
.plazoIcon{
  font-size: 18px;
  color: var(--color-success);
  font-weight: 700;
}
.plazoInfo{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.plazoDetail{
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.festivosExcluidos{
  margin-top: 8px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background: #fffbeb;
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.festivosExcluidos ul{
  margin: 4px 0 0 16px;
  padding: 0;
}

/* ====== TRABAJO RAPIDO ====== */
.trabajoRapidoInfo{
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: var(--font-size-sm);
  margin-bottom: 12px;
  line-height: 1.5;
}

/* ====== SELECCIÓN EXTRAORDINARIO ====== */
.selExtraHint{
  font-size: 13px;
  color: #64748b;
  margin-bottom: 12px;
}
.selExtraList{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.selExtraItem{
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.15s;
  background: #fff;
}
.selExtraItem:hover{
  border-color: var(--color-primary);
  background: #f8f9ff;
  box-shadow: 0 2px 8px rgba(99,102,241,.1);
}
.selExtraHead{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.selExtraTitle{
  font-weight: 700;
  font-size: 14px;
  color: #1e293b;
}
.selExtraImporte{
  font-weight: 700;
  font-size: 14px;
  color: var(--color-primary);
}
.selExtraConceptos{
  font-size: 12px;
  color: #64748b;
  margin-bottom: 2px;
}
.selExtraMeta{
  font-size: 11px;
  color: #94a3b8;
}

/* ====== AÑADIR CONCEPTO CARD ====== */
.acTrabajoCard{
  background: #f8f9ff;
  border: 1.5px solid #e0e7ff;
  border-left: 4px solid var(--color-primary);
  border-radius: 10px;
  padding: 14px 16px;
}
.acTrabajoHead{
  font-weight: 700;
  font-size: 14px;
  color: var(--color-primary);
  margin-bottom: 6px;
}
.acTrabajoMeta{
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: #475569;
  margin-bottom: 4px;
}
.acTrabajoConceptos{
  font-size: 12px;
  color: #64748b;
  font-style: italic;
}

/* ====== IMPUTACIONES ====== */
.impTareaInfo{
  background: linear-gradient(135deg, var(--color-bg-subtle), #eef2ff);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: var(--font-size-sm);
  line-height: 1.6;
}
.impFormulario{
  background: #fafbfc;
  border: 1px solid #eef0f4;
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.impFormulario h4{
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.impFormRow{
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.impFormRow input,
.impFormRow select{
  padding: 7px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  background: var(--color-bg-white);
}
.impFormRow input:focus,
.impFormRow select:focus{
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,.1);
}
.horasInput{
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.impListaWrap{
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.impTabla{
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.impTabla th{
  background: var(--color-bg-subtle);
  padding: 8px 12px;
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.impTabla td{
  padding: 8px 12px;
  border-top: 1px solid var(--color-border-light);
}
.impTabla tbody tr:hover{ background: var(--color-bg-hover); }
.impResumen{
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 14px 0;
  padding: 14px 18px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  font-size: var(--font-size-sm);
}
.impTotal{
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.impTotal strong{
  font-size: 16px;
  color: var(--color-success);
}
.impComparacion{
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  display: flex;
  gap: 4px;
}
.impEmpty{
  text-align: center;
  padding: 24px 16px;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.btnDeleteImp{
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-light);
  font-size: 14px;
  transition: all var(--transition-fast);
  padding: 4px;
  border-radius: var(--radius-sm);
}
.btnDeleteImp:hover{ color: var(--color-danger); background: var(--color-danger-light); }

/* ====== CONTROL HORAS — CLEAN REDESIGN ====== */
.chModal{
  width: min(1400px, 95%);
}
.chModalHeader{
  padding: 18px 24px !important;
  background: #fff !important;
}
.chModalHeader > div:first-child{ display: flex; flex-direction: column; gap: 2px; }
.chModalHeader h2{
  font-size: 17px !important;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin: 0;
}
.chSubtitle{
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
  margin-top: 2px;
  display: block;
}
.chHeaderActions{
  display: flex;
  align-items: center;
  gap: 8px;
}
.chBtnExport{
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.chBtnExport:hover{
  background: #e2e8f0;
  color: #1e293b;
}
.chModalBody{
  padding: 20px 24px !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Toolbar + inline summary */
.chToolbar{
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.chPeriodoWrap{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chPeriodoWrap label{
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #94a3b8;
}
.chPeriodoWrap select{
  padding: 8px 12px;
  border: 1.5px solid #e4e8ef;
  border-radius: 9px;
  font-size: 13px;
  background: #fafbfc;
  color: #334155;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s;
}
.chPeriodoWrap select:focus{
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,.08);
}
.chCustomRange{
  display: flex;
  gap: 6px;
  align-items: center;
}
.chRangeSep{
  color: #94a3b8;
  font-size: 13px;
}
.chCustomRange input{
  padding: 8px 10px;
  border: 1.5px solid #e4e8ef;
  border-radius: 9px;
  font-size: 12px;
  background: #fafbfc;
}
.chCustomRange input:focus{
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,.08);
}

/* Inline summary pill (replaces KPI cards) */
.chInlineSummary{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: #f8f9fb;
  border: 1px solid #eef0f5;
  border-radius: 20px;
  font-size: 12px;
  color: #64748b;
}
.chInlineVal{
  font-weight: 800;
  color: #1e293b;
  font-variant-numeric: tabular-nums;
}
.chInlineDot{
  width: 3px;
  height: 3px;
  background: #cbd5e1;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Tabs */
.chTabs{
  display: flex;
  gap: 0;
  border-bottom: 2px solid #f0f2f5;
}
.chTab{
  padding: 9px 18px;
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: all 0.15s;
  border-radius: 0;
}
.chTab:hover{
  color: #475569;
}
.chTab.active{
  color: #4f46e5;
  border-bottom-color: #4f46e5;
}
.chTabBadge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  background: #e2e8f0;
  color: #64748b;
  border-radius: 9px;
  margin-left: 4px;
}
.chTabBadge.has-alerts{
  background: #fecaca;
  color: #dc2626;
}
.chTabContent{
  display: none;
}
.chTabContent.active{
  display: block;
}

/* Grid 2 panels */
.chGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.chGridStacked{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chPanel{
  background: #fff;
  border: 1.5px solid #eef0f5;
  border-radius: 14px;
  padding: 18px;
}
.chPanelFull{
  background: #fff;
  border: 1.5px solid #eef0f5;
  border-radius: 14px;
  padding: 18px;
}
.chPanelHead{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f2f5;
}
.chPanel h4, .chPanelFull h4{
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
}
.chPanelSub{
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
}

/* Bar items */
.chBarList{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chBarItem{
  display: flex;
  align-items: center;
  gap: 12px;
}
.chBarName{
  width: 270px;
  min-width: 270px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chBarTrack{
  flex: 1;
  height: 10px;
  background: #f1f5f9;
  border-radius: 5px;
  overflow: hidden;
}
.chBarFill{
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #818cf8);
  border-radius: 5px;
  transition: width 0.5s cubic-bezier(.4,0,.2,1);
}
.chBarFillGreen{
  background: linear-gradient(90deg, #10b981, #34d399);
}
.chBarValue{
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.chBarValueOut{
  min-width: 52px;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  font-variant-numeric: tabular-nums;
}
.chBarEmpty{
  text-align: center;
  padding: 24px 12px;
  color: #94a3b8;
  font-size: 13px;
}

/* Mini tables */
.chTableWrap{
  overflow-x: auto;
}
.chMiniTable{
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.chMiniTable th{
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #94a3b8;
  padding: 6px 8px;
  border-bottom: 1px solid #eef0f5;
}
.chMiniTable td{
  padding: 8px 8px;
  border-bottom: 1px solid #f8f9fb;
  color: #334155;
}
.chMiniTable tr:last-child td{
  border-bottom: none;
}
.chMiniTable tr:hover td{
  background: #fafbfc;
}
.chMiniTable .right{
  text-align: right;
}
.chValBold{
  font-weight: 700;
  color: #0f172a;
}

/* Deviation badges */
.chDesv{
  display: inline-block;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}
.chDesvOk{
  background: #dcfce7;
  color: #16a34a;
}
.chDesvOver{
  background: #fee2e2;
  color: #dc2626;
}
.chDesvNeutral{
  background: #f1f5f9;
  color: #64748b;
}

/* Facturacion total */
.chSfTotal{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: #fef8f0;
  border: 1px solid #fed7aa;
  border-radius: 10px;
  margin-bottom: 12px;
}
.chSfLabel{
  font-size: 12px;
  font-weight: 600;
  color: #92400e;
}
.chSfVal{
  font-size: 18px;
  font-weight: 800;
  color: #c2410c;
  font-variant-numeric: tabular-nums;
}

/* Alertas */
.chAlertGroup{
  margin-bottom: 14px;
}
.chAlertGroup:last-child{
  margin-bottom: 0;
}
.chAlertGroupTitle{
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f0f2f5;
}
.chAlertaItem{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  background: #fafbfc;
  border: 1px solid #eef0f5;
  border-radius: 8px;
  font-size: 12px;
  color: #475569;
  margin-bottom: 5px;
  line-height: 1.5;
}
.chAlertaItem:last-child{ margin-bottom: 0; }
.chAlertDot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.chAlertDot.red{ background: #ef4444; }
.chAlertDot.amber{ background: #f59e0b; }
.chAlertDot.blue{ background: #3b82f6; }
.chAlertaText{ flex: 1; }
.chAlertaValue{ font-weight: 700; color: #dc2626; }
.chNoAlertas{
  text-align: center;
  padding: 24px;
  color: #10b981;
  font-size: 13px;
  font-weight: 600;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
}

/* Responsive */
@media (max-width: 700px){
  .chGrid{ grid-template-columns: 1fr; }
  .chInlineSummary{ display: none; }
  .chTabs{ overflow-x: auto; }
}

/* ====== SVG ICON BUTTONS ====== */
.btnIcon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 7px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s;
}
.btnIcon:hover{
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
}
.btnIcon.btnDeleteTarea:hover,
.btnIcon.btnDeleteFestivo:hover,
.btnIcon.btnDeleteImp:hover,
.btnIcon.danger:hover{
  background: #fee2e2;
  border-color: #fecaca;
  color: #dc2626;
}
.btnIcon svg{
  display: block;
  flex-shrink: 0;
}

/* ====== CONSULTA TAREA (read-only modal) ====== */
.consultaBody{
  padding: 0;
}
.ctGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ctCard{
  background: #f8f9fb;
  border: 1.5px solid #eef0f5;
  border-radius: 10px;
  padding: 12px 14px;
}
.ctFull{
  grid-column: 1 / -1;
}
.ctLabel{
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #94a3b8;
  margin-bottom: 4px;
}
.ctVal{
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
}
.ctStatusRow{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ctBadge{
  display: inline-block;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
}

/* Completadas table row hover */
#tbodyCompletadas tr:hover{
  background: #f8f9ff;
}

/* ====== AJUSTES PANEL ====== */
.ajustesGrid{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ajustesRow{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  transition: all 0.15s ease;
}
.ajustesRow:hover{
  background: #eef2ff;
  border-color: #c7d2fe;
}
.ajustesNombre{
  flex: 1;
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}
.ajustesColor{
  width: 32px;
  height: 32px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0;
  transition: border-color var(--transition-fast);
}
.ajustesColor:hover{
  border-color: var(--color-primary);
}
.ajustesToggle{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}
.ajustesToggle:hover{
  background: rgba(79,70,229,.08);
}
.ajustesInfo{
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: 14px;
  padding: 10px 12px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-sm);
  line-height: 1.5;
}

/* ====== CONFIG HORAS ====== */
.configHorasRow{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  margin-bottom: 6px;
  transition: all 0.15s ease;
}
.configHorasRow:hover{
  background: #eef2ff;
  border-color: #c7d2fe;
}
.configHorasNombre{
  flex: 1;
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}
.configHorasInput{
  width: 72px;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  text-align: center;
  font-weight: 600;
  background: var(--color-bg-white);
  transition: border-color var(--transition-fast);
}
.configHorasInput:focus{
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,.1);
}
.configHorasInfo{
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: 14px;
  padding: 10px 12px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-sm);
  line-height: 1.5;
}

/* ====== CLIENTE LINK ====== */
/* ====== CLIENTE LINK (legacy) ====== */
.clienteLink{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 5px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  color: #4f46e5;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s;
  cursor: pointer;
}
.clienteLink:hover{
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #4338ca;
  text-decoration: none;
}
/* clienteDetalleInfo — see end of file */

/* ====== TEXT UTILITY ====== */
.textMuted{ color: var(--color-text-muted); }

/* ====== CONTAINER ====== */
.container{
  max-width: none;
  margin: 0 auto;
  padding: 0;
}

/* ====== ACTIONS ROW ====== */
.actionsLeft{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* ====== RESPONSIVE SUPPLEMENTS ====== */
@media (max-width:768px){
  .formRow{ flex-direction: column; }
  .dashboardPanels{ grid-template-columns: 1fr; }
  .chGrid{ grid-template-columns: 1fr; }
  .impFormRow{ flex-direction: column; }
}
/* ====== JS-SELECTOR BUTTON VARIANTS ====== */
.btnCalendar,
.btnEditTarea,
.btnDeleteTarea,
.btnImputar,
.btnHorasReal,
.btnDeleteFestivo,
.btnRemoveRow,
.btnAjustes{
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 5px 8px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: all 0.18s ease;
  color: var(--color-text-muted);
}
.btnCalendar:hover,
.btnEditTarea:hover,
.btnImputar:hover,
.btnHorasReal:hover,
.btnAjustes:hover{ background: #eef2ff; color: var(--color-primary); }
.btnDeleteTarea:hover,
.btnDeleteFestivo:hover,
.btnRemoveRow:hover{ background: #fef2f2; color: var(--color-danger); }

/* Festivo delete animation */
.festivoDeleting{
  opacity: 0.4;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* ====== PLAZO MODE TOGGLE (new tarea form) ====== */
.plazoModeToggle {
  display: inline-flex;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  overflow: hidden;
}
.plazoModeBtn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border: none;
  background: #f8fafc;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s;
}
.plazoModeBtn.active {
  background: var(--color-primary);
  color: #fff;
}
.plazoModeBtn:hover:not(.active) { background: #e2e8f0; }

/* ====== CALCULADOR STANDALONE MODE SELECTOR ====== */
.modalBox.modalCalculador{
  width: min(620px, 95%);
}
.modalCalculador .modalBody{
  padding: 32px 36px;
}
.modalCalculador .formRow{
  margin-bottom: 20px;
}
.modalCalculador .formGroup label{
  margin-bottom: 6px;
}
.modalCalculador .formGroup input,
.modalCalculador .formGroup select{
  padding: 12px 14px;
  font-size: 14px;
}
.cpModeSelector {
  display: flex;
  gap: 0;
  margin-bottom: 22px;
  border: 1.5px solid #d1d5db;
  border-radius: 10px;
  overflow: hidden;
}
.cpModeBtn {
  flex: 1;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  background: #f8fafc;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.cpModeBtn.active {
  background: var(--color-primary);
  color: #fff;
}
.cpModeBtn:hover:not(.active) { background: #e2e8f0; }

/* ====== PLAZO AJUSTE WARNING ====== */
.plazoAjuste {
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--color-warning-light);
  border: 1px solid var(--color-warning-border);
  border-radius: 6px;
  font-size: 12px;
  color: #92400e;
}

/* ====== COMPLETADAS SEARCH ====== */
.completadasSearchRow {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.completadasSearchInput {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #d7d9e5;
  border-radius: 8px;
  font-size: 13px;
  background: #fff;
  transition: border-color 0.15s;
}
.completadasSearchInput:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-light);
}

/* ====== REACTIVAR BUTTON (minimalist) ====== */
.btnReactivar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  border: 1px solid #d7d9e5;
  background: #fff;
  color: #64748b;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
}
.btnReactivar svg{
  display: block;
  flex-shrink: 0;
}
.btnReactivar:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ==============================================================
   SITE FOOTER
   ============================================================== */
.siteFooter{
  text-align: center;
  padding: 24px 16px 20px;
  font-size: 12px;
  font-weight: 500;
  color: #94a3b8;
  letter-spacing: 0.2px;
  border-top: 1px solid #f1f5f9;
  margin-top: 20px;
}

/* ==============================================================
   MODAL TAREA — STEP-BASED MINIMAL DESIGN
   ============================================================== */

/* Container */
.mtModal{
  width: min(740px, 95%);
}

/* Header */
.mtHeader{
  padding: 18px 28px !important;
  background: #fff !important;
  border-bottom: 1px solid #eef0f5 !important;
}
.mtHeader h2{
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px;
}

/* Body */
.mtBody{
  padding: 8px 28px 16px !important;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ---- STEP BLOCK ---- */
.mtStep{
  padding: 20px 0 18px;
  border-bottom: 1px solid #f0f2f5;
  position: relative;
}
.mtStep:first-of-type{
  padding-top: 16px;
}
.mtStepLast,
.mtStep:last-of-type{
  border-bottom: none;
  padding-bottom: 6px;
}

/* Step header: number + title */
.mtStepHead{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.mtStepNum{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: #4f46e5;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}
.mtStepTitle{
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: -0.1px;
}

/* Step content area */
.mtStepContent{
  padding-left: 34px;
}

/* ---- GRIDS ---- */
.mtGrid2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.mtGrid3{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

/* ---- INPUTS inside steps ---- */
.mtStepContent .formGroup{
  gap: 5px;
}
.mtStepContent .formGroup > label{
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.15px;
}
.mtStepContent input[type="text"],
.mtStepContent input[type="number"],
.mtStepContent input[type="date"],
.mtStepContent select,
.mtStepContent textarea{
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid #e4e8ef;
  border-radius: 9px;
  font-size: 13px;
  font-family: var(--font-family);
  background: #fafbfc;
  color: #1e293b;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  box-sizing: border-box;
}
.mtStepContent input:focus,
.mtStepContent select:focus,
.mtStepContent textarea:focus{
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,.08);
  background: #fff;
}
.mtStepContent input::placeholder,
.mtStepContent textarea::placeholder{
  color: #b0b8c8;
}
.mtStepContent textarea{
  resize: vertical;
  min-height: 44px;
}

/* Description: two textareas stacked */
.mtStep:nth-child(3) .mtStepContent{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---- STEP 1: CLIENTE ---- */
.mtClienteRow{
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.mtClienteField{
  flex: 1;
}
.mtBtnNuevoCliente{
  margin-top: 0;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #4f46e5;
  background: #eef2ff;
  border: 1.5px solid #e0e7ff;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  height: auto;
  align-self: flex-start;
}
.mtBtnNuevoCliente:hover{
  background: #e0e7ff;
  border-color: #c7d2fe;
}

/* Client link — pill style */
.mtClienteLink{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #4f46e5;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s;
  cursor: pointer;
}
.mtClienteLink:hover{
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #4338ca;
}
.mtClienteLink svg{
  flex-shrink: 0;
}

/* ---- STEP 3: TIME INPUT ---- */
.mtTimeInput{
  display: flex;
  align-items: center;
  gap: 4px;
}
.mtTimeInput input{
  width: 52px !important;
  min-width: 52px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.mtTimeInput span{
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
}

/* ---- STEP 4: PLAZO OPTIONS ---- */
.mtPlazoOptions{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mtPlazoOption{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border: 1.5px solid #e4e8ef;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s;
  background: #fafbfc;
}
.mtPlazoOption:hover{
  border-color: #d0d5e0;
  background: #f8f9fc;
}
.mtPlazoOption:has(input:checked){
  border-color: #a5b4fc;
  background: #f5f7ff;
  box-shadow: 0 0 0 3px rgba(99,102,241,.06);
}
.mtPlazoOption > input[type="radio"]{
  margin-top: 3px;
  accent-color: #4f46e5;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.mtPlazoOptionBody{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.mtPlazoOptionLabel{
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}

/* Plazo calc grid — all inputs same size */
.mtPlazoCalcGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mtPlazoCalcGrid .formGroup{
  gap: 4px;
}
.mtPlazoCalcGrid .formGroup > label{
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Mode toggle inside plazo — match input height */
.mtPlazoCalcGrid .plazoModeToggle{
  display: flex;
  border: 1.5px solid #e4e8ef;
  border-radius: 9px;
  overflow: hidden;
  height: 38px;
}
.mtPlazoCalcGrid .plazoModeBtn{
  flex: 1;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  background: #fafbfc;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s;
}
.mtPlazoCalcGrid .plazoModeBtn.active{
  background: #4f46e5;
  color: #fff;
}
.mtPlazoCalcGrid .plazoModeBtn:hover:not(.active){
  background: #eef2ff;
  color: #4f46e5;
}

/* Calc grid inputs — uniform */
.mtPlazoCalcGrid input,
.mtPlazoCalcGrid select{
  width: 100% !important;
  padding: 9px 12px !important;
  border: 1.5px solid #e4e8ef !important;
  border-radius: 9px !important;
  font-size: 13px !important;
  background: #fafbfc !important;
  box-sizing: border-box;
}
.mtPlazoCalcGrid input:focus,
.mtPlazoCalcGrid select:focus{
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.08) !important;
  background: #fff !important;
}

/* Calcular button */
.mtBtnCalcular{
  align-self: flex-start;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: #4f46e5;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.mtBtnCalcular:hover{
  background: #4338ca;
  box-shadow: 0 2px 8px rgba(79,70,229,.2);
}

/* ---- FOOTER ---- */
.mtFooter{
  padding: 16px 28px !important;
  background: #fff !important;
  border-top: 1px solid #eef0f5 !important;
  gap: 8px;
}
.mtFooter .btnPrimary{
  min-width: 140px;
  padding: 10px 24px;
}
.mtFooter .btnSecondary{
  min-width: 100px;
}

/* ---- CLIENT DETAIL INFO (inside modal) ---- */
.clienteDetalleInfo{
  background: #fff;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 13px;
  margin-bottom: 0;
  line-height: 1.8;
  color: #475569;
}
.clienteDetalleInfo strong{
  color: #1e293b;
  font-weight: 600;
}

/* ==============================================================
   CLIENT DETAIL MODAL — STRUCTURED CARD DESIGN
   ============================================================== */
.cdModal{
  width: min(520px, 95%);
}
.cdHeader{
  padding: 20px 24px !important;
  background: #fff !important;
  border-bottom: 1px solid #f0f2f5 !important;
}
.cdHeader h2{
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: -0.3px;
}
.cdBody{
  padding: 20px 24px !important;
}

/* Structured grid */
.cdGrid{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cdCard{
  background: #fafbfc;
  border: 1.5px solid #eef0f5;
  border-radius: 12px;
  padding: 14px 18px;
}
.cdCardLabel{
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #94a3b8;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eef0f5;
}
.cdCardRows{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cdRow{
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  line-height: 1.4;
}
.cdRowKey{
  min-width: 110px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  flex-shrink: 0;
}
.cdRowVal{
  color: #1e293b;
  font-weight: 500;
  word-break: break-word;
}

/* Fallback: if raw strong/br format not yet processed */
.cdBody .clienteDetalleInfo > strong{
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #94a3b8;
  margin-top: 16px;
  margin-bottom: 3px;
  padding-top: 14px;
  border-top: 1px solid #f0f2f5;
}
.cdBody .clienteDetalleInfo > strong:first-child{
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* detailField legacy fallback */
.detailField{
  padding: 8px 0;
  border-bottom: 1px solid #f0f2f5;
  font-size: 13px;
  color: #334155;
}
.detailField:last-child{ border-bottom: none; }
.detailLabel{
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #94a3b8;
  display: block;
  margin-bottom: 2px;
}
.detailValue{
  color: #1e293b;
  font-weight: 500;
}

.cdFooter{
  padding: 14px 24px !important;
  background: #fafbfd !important;
  border-top: 1px solid #f0f2f5 !important;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 640px){
  .mtGrid2,
  .mtGrid3{
    grid-template-columns: 1fr;
  }
  .mtPlazoCalcGrid{
    grid-template-columns: 1fr;
  }
  .mtModal{
    width: 95%;
  }
  .mtBody{
    padding: 8px 20px 12px !important;
  }
  .mtHeader,
  .mtFooter{
    padding: 14px 20px !important;
  }
  .mtStepContent{
    padding-left: 0;
  }
  .mtClienteRow{
    flex-direction: column;
  }
}