/* =====================================================================
   GERPRESS · componentes reutilizables
   ===================================================================== */

/* ---------- Botones ---------- */
.btn{border:1px solid transparent; border-radius:9px; padding:9px 14px; font-size:13px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:6px;}
.btn:disabled{opacity:.55; cursor:not-allowed;}
.btn-primario{background:var(--azul-500); color:#fff;}
.btn-primario:hover:not(:disabled){background:var(--azul-600);}
.btn-secundario{background:#fff; color:var(--gris-700); border-color:var(--gris-300);}
.btn-secundario:hover:not(:disabled){background:var(--gris-50);}
.btn-exito{background:var(--verde); color:#fff;}
.btn-peligro{background:var(--rojo); color:#fff;}
.btn-sm{padding:6px 10px; font-size:12px;}
.btn-bloque{width:100%;}
.btn-icono{background:none; border:none; font-size:15px; padding:4px 6px; border-radius:7px; color:var(--gris-600);}
.btn-icono:hover{background:var(--gris-100);}
.pill-accion{padding:5px 9px; border-radius:7px; border:1px solid var(--gris-300); background:#fff; font-size:11.5px; font-weight:600; color:var(--gris-700);}
.pill-accion:hover{background:var(--gris-50);}
.pill-accion.peligro{border-color:var(--rojo); color:var(--rojo);}
.pill-accion.peligro:hover{background:var(--rojo-bg);}
.acciones-fila{display:flex; gap:6px; flex-wrap:wrap;}
.btn[aria-busy="true"] .btn-texto{display:none;}
.btn[aria-busy="true"] .btn-cargando{display:inline;}
.btn-cargando{display:none;}

/* ---------- Campos ---------- */
.campo{display:flex; flex-direction:column; gap:5px; margin-bottom:4px;}
.campo label{font-size:12px; font-weight:700; color:var(--gris-600);}
.campo input,.campo select,.campo textarea{padding:9px 11px; border:1px solid var(--gris-300); border-radius:var(--radio-sm); background:#fff; width:100%;}
.campo input:disabled,.campo select:disabled,.campo textarea:disabled{background:var(--gris-100); color:var(--gris-500);}
.campo .ayuda{font-size:11px; color:var(--gris-500);}
.campo .error{font-size:11.5px; color:var(--rojo);}
.campo.con-error input,.campo.con-error select,.campo.con-error textarea{border-color:var(--rojo);}
.rejilla-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.rejilla-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;}
.rejilla-4{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
@media (max-width:700px){ .rejilla-2,.rejilla-3,.rejilla-4{grid-template-columns:1fr;} }

/* ---------- Tarjetas y KPI ---------- */
.tarjeta{background:#fff; border:1px solid var(--gris-200); border-radius:var(--radio); box-shadow:var(--sombra); padding:16px; margin-bottom:16px;}
.tarjeta h3{margin:0 0 10px;}
.tarjeta.ancho-total{grid-column:1 / -1;}
.rejilla-kpi{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:12px; margin-bottom:18px;}
.kpi{background:#fff; border:1px solid var(--gris-200); border-radius:var(--radio); padding:14px 16px; box-shadow:var(--sombra);}
.kpi.clicable{cursor:pointer;}
.kpi.clicable:hover{border-color:var(--azul-300);}
.kpi .num{font-size:23px; font-weight:800;}
.kpi .num.monto{font-size:18px;}
.kpi .lbl{font-size:11px; color:var(--gris-500); font-weight:700; text-transform:uppercase; letter-spacing:.3px;}
.kpi.barra-izq{border-left:4px solid var(--gris-400);}

/* ---------- Encabezado de vista ---------- */
.encabezado-vista{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:16px; flex-wrap:wrap;}
.encabezado-vista h2{margin:0;}
.encabezado-vista p{color:var(--gris-500); font-size:12.5px; margin:2px 0 0;}
.leyenda-alcance{font-size:11.8px; color:var(--gris-600); background:var(--gris-50); border:1px dashed var(--gris-300); border-radius:var(--radio-sm); padding:9px 11px; margin-bottom:14px;}

/* ---------- Tablas ---------- */
.tabla-wrap{overflow-x:auto;}
thead th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--gris-500); border-bottom:1px solid var(--gris-200); padding:8px 10px; white-space:nowrap;}
tbody td{padding:9px 10px; border-bottom:1px solid var(--gris-100); vertical-align:top;}
tbody tr:hover{background:var(--gris-50);}
th.ordenable{cursor:pointer;}
th.ordenable::after{content:"↕"; opacity:.35; margin-left:5px;}
th.ordenable.asc::after{content:"↑"; opacity:1;}
th.ordenable.desc::after{content:"↓"; opacity:1;}
.num-tabla{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}
.vacio-tabla{padding:34px; text-align:center; color:var(--gris-400); font-size:13px;}
.fila-alerta{background:#fff6f6;}
.fila-herramientas{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px;}
.fila-herramientas input[type=search],.fila-herramientas input[type=text]{padding:8px 11px; border:1px solid var(--gris-300); border-radius:var(--radio-sm); min-width:230px;}
.fila-herramientas select{padding:8px 10px; border:1px solid var(--gris-300); border-radius:var(--radio-sm);}
.paginacion{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; font-size:12.5px; color:var(--gris-600); flex-wrap:wrap;}
.paginacion .controles{display:flex; gap:6px; align-items:center;}

/* ---------- Badges y chips ---------- */
.badge{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:700; white-space:nowrap;}
.badge .dot{width:6px; height:6px; border-radius:50%;}
.chip-moneda{display:inline-block; padding:2px 7px; border-radius:6px; font-size:10.5px; font-weight:800; letter-spacing:.3px;}
.chip-moneda.mxn{background:var(--azul-bg); color:var(--azul-500);}
.chip-moneda.usd{background:var(--verde-bg); color:#15803d;}
.chip-tipo{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:700; white-space:nowrap;}
.mini-nota{font-size:11.5px; color:var(--gris-500);}
.rango-top{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:6px; background:var(--gris-100); color:var(--gris-600); font-size:11px; font-weight:800; margin-right:6px;}
.rango-top.oro{background:#fdf3d7; color:#a16207;}

/* ---------- Barras de reporte ---------- */
.barra-rep{display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:12.5px;}
.barra-rep .etq{width:150px; flex-shrink:0; color:var(--gris-700); font-weight:600;}
.barra-rep .etq small{display:block; font-weight:500; color:var(--gris-400); font-size:10.5px;}
.barra-rep .pista{flex:1; height:14px; background:var(--gris-100); border-radius:6px; overflow:hidden;}
.barra-rep .pista>div{height:100%;}
.barra-rep .val{min-width:60px; text-align:right; font-weight:700; font-size:12px; font-variant-numeric:tabular-nums;}
.barra-rep.monto .etq{width:200px;}
.barra-rep.monto .val{min-width:130px;}
.pista-saldo{height:8px; background:var(--gris-100); border-radius:5px; overflow:hidden; min-width:90px;}
.pista-saldo>div{height:100%; background:var(--verde);}

/* ---------- Avisos ---------- */
.aviso{border:1px solid var(--gris-200); background:var(--gris-50); border-radius:10px; padding:10px 12px; margin-bottom:12px; font-size:12.5px;}
.aviso b{display:block; margin-bottom:2px;}
.aviso.ok{border-color:#bfe9d2; background:var(--verde-bg);}
.aviso.error{border-color:#f6c9c9; background:var(--rojo-bg);}
.aviso.pendiente{border-color:#e2d6fb; background:var(--morado-bg);}
.aviso.atencion{border-color:#f8d9b8; background:var(--naranja-bg);}

/* ---------- Modal ---------- */
.modal-root{position:fixed; inset:0; background:rgba(15,23,42,.45); display:none; align-items:flex-start; justify-content:center; padding:28px 14px; overflow-y:auto; z-index:1000;}
.modal-root.abierto{display:flex;}
.modal-caja{background:#fff; border-radius:14px; width:100%; max-width:560px; box-shadow:var(--sombra-md);}
.modal-caja.ancho{max-width:920px;}
.modal-cabecera{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--gris-200);}
.modal-cabecera h3{margin:0;}
.modal-cuerpo{padding:18px;}
.modal-pie{display:flex; justify-content:flex-end; gap:8px; padding:14px 18px; border-top:1px solid var(--gris-200); flex-wrap:wrap;}

/* ---------- Toasts ---------- */
.toast-root{position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:8px; z-index:1100;}
.toast{background:#fff; border-left:4px solid var(--azul-500); border-radius:10px; box-shadow:var(--sombra-md); padding:11px 14px; font-size:12.8px; max-width:380px;}
.toast.exito{border-left-color:var(--verde);}
.toast.error{border-left-color:var(--rojo);}
.toast.aviso{border-left-color:var(--naranja);}

/* ---------- Comentarios ---------- */
.comentario-item{padding:8px 10px; background:var(--gris-50); border-radius:8px; margin-bottom:6px; font-size:12.5px;}
.comentario-item b{font-size:12px;}
.comentario-item .cfecha{color:var(--gris-400); font-size:10.5px;}
.subrayado-suave{border-bottom:1px dashed var(--gris-300); padding-bottom:10px; margin-bottom:12px;}
.abono-item{display:flex; justify-content:space-between; gap:10px; padding:8px 10px; background:var(--gris-50); border-radius:8px; margin-bottom:6px; font-size:12.5px;}
.abono-item .amonto{font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap;}
.abono-item .afecha{color:var(--gris-500); font-size:11px;}
.card-linea{border:1px solid var(--gris-200); border-radius:10px; padding:12px; margin-bottom:10px; background:var(--gris-50);}
.card-linea .titulo-linea{font-weight:700; font-size:13.5px; margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;}