/* Traducción de las pantallas de trabajo (Beneficiarios, Por pagar, Pagos, Lote al banco, Reportes) al formato de
   Control Fiscal. Se carga DESPUÉS de los estilos propios de cada pantalla y de css/ui.css: aquí solo se reemplazan
   los colores crema y las esquinas redondeadas; la acomodación de cada pantalla queda igual. */

/* Las variables viejas de cada pantalla apuntan ahora a la paleta azul/gris */
:root {
  --fondo: var(--gris-100); --tinta: var(--gris-900); --suave: var(--gris-700); --borde: var(--gris-300);
  --tarjeta: var(--blanco); --azul: var(--azul-600);
}
body { font: 13px/1.4 var(--fuente); background: var(--gris-100); color: var(--gris-900); }
.c { max-width: none; margin: 0; padding: 0; }
.m { color: var(--gris-500); font-size: 12px; }
.ver { display: none; }

/* Tarjetas → ventanas */
.tarjeta { background: var(--blanco); border: 1px solid var(--gris-300); border-radius: 0; box-shadow: 0 1px 3px rgba(0,0,0,.06); padding: 10px; margin-bottom: 10px; }
.tarjeta h2 { font-size: 14px; font-weight: 600; color: var(--azul-900); margin: 0 0 8px; }
.tarjeta > h2:first-child { margin: -10px -10px 10px; padding: 6px 10px; background: linear-gradient(#f7f9fb, #e7ecf1); border-bottom: 1px solid var(--gris-300); }

/* Campos */
.area label { font-weight: 600; font-size: 12px; color: var(--gris-700); }
.area input:not([type=checkbox]):not([type=radio]), .area select, .area textarea {
  padding: 4px 6px; border: 1px solid var(--gris-300); border-radius: 2px; background: var(--blanco); font: inherit; color: var(--gris-900);
}
.area input[readonly] { background: var(--gris-100); }

/* Botones de las pantallas (los del marco tienen los suyos) */
.area button:not(.herr) {
  font: inherit; font-weight: 400; padding: 4px 14px; border: 1px solid var(--azul-800); border-radius: 3px; cursor: pointer;
  background: linear-gradient(var(--azul-600), var(--azul-700)); color: var(--blanco);
}
.area button:not(.herr):hover:not(:disabled) { background: linear-gradient(#2d72bd, var(--azul-600)); }
.area button.sec { background: linear-gradient(#ffffff, #e6ebf0); color: var(--gris-900); border-color: #9fb3c8; }
.area button.sec:hover:not(:disabled) { background: linear-gradient(#ffffff, #d6e4f2); border-color: var(--azul-600); }
.area button.peligro { background: linear-gradient(#ffffff, #f6e3e1); color: var(--rojo); border-color: #d9a29c; }
.area button.chico { padding: 2px 8px; font-size: 12px; }
.area button:disabled { opacity: .5; cursor: default; }
.area a.boton { border-radius: 3px; background: linear-gradient(var(--azul-600), var(--azul-700)); padding: 4px 14px; font-weight: 400; }

/* Tablas → rejilla */
.area table:not(.hoja):not(.cedula) th {
  background: linear-gradient(#f4f6f8, #e2e7ec); color: var(--gris-900); font-weight: 600; font-size: 12px;
  text-transform: none; letter-spacing: 0; border: 1px solid var(--gris-300); padding: 5px 8px;
}
.area table:not(.hoja):not(.cedula) td { border: 1px solid var(--gris-200); padding: 4px 8px; font-size: 12px; }
.area table:not(.hoja):not(.cedula) tbody tr:nth-child(even) { background: #f8fafc; }
.area table:not(.hoja):not(.cedula) tbody tr:hover { background: var(--azul-100); }
.area tr.sel { background: var(--azul-100) !important; }
.area tfoot td { font-weight: 700; background: var(--gris-100); }

/* La hoja tipo Excel de Beneficiarios */
.hojaCaja { border: 1px solid var(--gris-300); border-radius: 0; }
table.hoja th, table.hoja td { border-right: 1px solid var(--gris-200); border-bottom: 1px solid var(--gris-200); }
table.hoja th { background: linear-gradient(#f4f6f8, #e2e7ec); color: var(--gris-900); border-right-color: var(--gris-300); border-bottom-color: var(--gris-300); }
table.hoja tbody tr:nth-child(even) { background: #f8fafc; }
table.hoja tbody tr:hover { background: var(--azul-50); }
table.hoja tbody tr.sel { background: var(--azul-100); }
table.hoja input.celda:hover, table.hoja input.celda:focus { border-color: var(--azul-600); }

/* Cifras → indicadores */
.cifra { background: var(--blanco); border: 1px solid var(--gris-300); border-top: 3px solid var(--azul-600); border-radius: 0; padding: 8px 12px; }
.cifra .m { text-transform: uppercase; font-size: 11px; letter-spacing: .3px; color: var(--gris-700); }
.cifra b { font-weight: 600; }
.cifra.roja { border-top-color: var(--rojo); }
.cifra.ambar { border-top-color: #d4a017; }

/* Pestañas de Reportes */
.pestanas button, .area .pestanas button { background: linear-gradient(#ffffff, #e6ebf0); color: var(--gris-900); border: 1px solid #9fb3c8; border-radius: 3px; }
.pestanas button.activa, .area .pestanas button.activa { background: linear-gradient(var(--azul-600), var(--azul-700)); color: var(--blanco); border-color: var(--azul-800); }

/* Etiquetas de color y recuadros */
.pill { border-radius: 2px; font-size: 11px; font-weight: 600; line-height: 18px; padding: 0 6px; }
.porAutorizar { border: 1px solid #d4a017; border-left: 4px solid #d4a017; border-radius: 0; background: var(--ambar-bg); }
.barra { border-radius: 0; background: var(--azul-600); }

/* Aviso flotante (comun.js): desde la entrega 40 vive en css/ui.css (también lo usa el tablero) */