:root {
  --fondo: #f4f5f7; --superficie: #fff; --texto: #1d2433; --suave: #5b6475; --borde: #dde1e7;
  --primario: #1f3a5f; --primario-hover: #2b4f7f; --error: #b42318; --error-fondo: #fdecea;
  --ok: #18794e; --ok-fondo: #e6f4ec;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--fondo); color: var(--texto); }
h1 { font-size: 22px; margin: 0 0 4px; }
.sub { color: var(--suave); margin: 0 0 20px; }
.barra { display: flex; align-items: center; gap: 8px 24px; padding: 10px 24px; min-height: 56px; background: var(--primario); color: #fff; flex-wrap: wrap; }
.barra a { color: #dfe7f2; text-decoration: none; }
.marca { font-weight: 700; color: #fff !important; }
.marca span { font-weight: 400; opacity: .7; }
.barra nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.barra nav a { padding: 6px 12px; border-radius: 6px; }
.barra nav a:hover, .barra nav a.activo { background: rgba(255,255,255,.14); color: #fff; }
.cuenta { display: flex; gap: 16px; align-items: center; }
.cuenta form { margin: 0; }
.contenido { max-width: 1100px; margin: 32px auto; padding: 0 24px; }
.centrado { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; padding: 32px; width: 100%; max-width: 400px; }
.contenido .tarjeta { margin-top: 8px; }
label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 14px; }
input { display: block; width: 100%; margin-top: 4px; padding: 9px 11px; font: inherit; border: 1px solid var(--borde); border-radius: 6px; }
input:focus { outline: 2px solid var(--primario); outline-offset: -1px; }
button, .boton { display: inline-block; background: var(--primario); color: #fff; border: 0; border-radius: 6px; padding: 10px 18px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.tarjeta button { width: 100%; margin-top: 6px; }
button:hover, .boton:hover { background: var(--primario-hover); }
button.enlace { background: none; padding: 0; color: #dfe7f2; font-weight: 400; }
.volver { display: block; text-align: center; margin-top: 12px; color: var(--suave); }
.error { background: var(--error-fondo); color: var(--error); padding: 10px 12px; border-radius: 6px; }
.aviso { background: var(--ok-fondo); color: var(--ok); padding: 10px 12px; border-radius: 6px; }
.nota { color: var(--suave); font-size: 13px; }
.ficha { display: grid; grid-template-columns: 120px 1fr; gap: 8px 16px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; padding: 20px; max-width: 520px; }
.ficha dt { color: var(--suave); } .ficha dd { margin: 0; }
.ficha + .boton { margin-top: 16px; }
.vacio { background: var(--superficie); border: 1px dashed var(--borde); border-radius: 10px; padding: 40px; text-align: center; color: var(--suave); }
h2 { font-size: 17px; margin: 32px 0 10px; }
h3 { font-size: 15px; margin: 0 0 4px; }
.encabezado { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.encabezado h1 { margin: 0; }
.acciones { display: flex; gap: 8px; align-items: center; }
.acciones form { margin: 0; }
.migas { display: inline-block; color: var(--suave); text-decoration: none; margin-bottom: 8px; font-size: 14px; }
.filtros { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.filtros input { width: 280px; margin: 0; }
select { padding: 9px 11px; font: inherit; border: 1px solid var(--borde); border-radius: 6px; background: #fff; }
label select { display: block; width: 100%; margin-top: 4px; }
.tabla { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; }
.tabla th, .tabla td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla th { background: #f8f9fb; font-size: 13px; color: var(--suave); font-weight: 600; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla a { color: var(--primario); font-weight: 600; text-decoration: none; }
.num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vacio-fila { text-align: center !important; color: var(--suave); padding: 28px !important; }
.etiqueta { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 99px; background: #e8eef7; color: var(--primario); font-weight: 600; }
.etiqueta.gris { background: #eceef1; color: var(--suave); }
.etiqueta.ok { background: var(--ok-fondo); color: var(--ok); }
.etiqueta.alerta { background: #fff4e5; color: #9a5b00; }
.etiqueta.error { background: var(--error-fondo); color: var(--error); }
.consumo-tope { height: 8px; max-width: 360px; background: #e8eef7; border-radius: 99px; overflow: hidden; margin: 6px 0 4px; }
.consumo-tope span { display: block; height: 100%; background: var(--ok); }
.consumo-tope.amarillo span { background: #d08700; }
.consumo-tope.rojo span { background: var(--error); }
.sobre-tope { color: #9a5b00; font-size: 12px; white-space: nowrap; }
.alerta-texto { color: #9a5b00; }
.tarjeta.ancha { max-width: 640px; }
.tabla + .tarjeta { margin-top: 16px; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tres { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .dos, .tres { grid-template-columns: 1fr; } }
label.casilla { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 15px; }
label.casilla input { width: auto; margin: 0; }
button.secundario { background: #fff; color: var(--primario); border: 1px solid var(--borde); }
button.secundario:hover { background: #f4f6f9; }
.codigo { font-family: ui-monospace, Menlo, monospace; color: var(--suave); font-weight: 600; margin-right: 4px; }
.tabla td input, .tabla td select { margin: 0; }
a.boton.secundario { background: #fff; color: var(--primario); border: 1px solid var(--borde); }
a.boton.secundario:hover { background: #f4f6f9; }
.selector-tipo { display: flex; gap: 24px; margin-bottom: 14px; }
.selector-tipo label.casilla { margin: 0; }
.advertencia { background: #fff4e5; color: #6b4000; border-radius: 6px; padding: 12px 14px; margin-bottom: 14px; }
.advertencia p { margin: 0 0 6px; }
.advertencia ul { margin: 0 0 10px; padding-left: 20px; }
.advertencia label.casilla { margin: 0; color: #6b4000; font-weight: 600; }
[hidden] { display: none !important; }
.tabla tfoot td { background: #f8f9fb; }
.plan .tabla { margin: 8px 0 12px; }
.plan .tabla td { padding: 6px 8px; }
.suma { color: var(--suave); }
.cuadra { color: var(--ok); }
.no-cuadra { color: var(--error); }
.tarjeta h3 { margin-top: 20px; }
.tarjeta button.secundario { width: auto; margin-top: 0; }
textarea { display: block; width: 100%; margin-top: 4px; padding: 9px 11px; font: inherit; border: 1px solid var(--borde); border-radius: 6px; resize: vertical; }
.semana-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.semana-nav .boton { padding: 6px 12px; }
.aviso-info { background: #e8eef7; padding: 10px 12px; border-radius: 6px; }
.aviso-info a { color: var(--primario); font-weight: 600; text-decoration: none; }
.paneles { display: grid; grid-template-columns: 300px 1fr; gap: 16px; margin-bottom: 20px; }
.paneles .tarjeta { max-width: none; padding: 20px; }
@media (max-width: 860px) { .paneles { grid-template-columns: 1fr; } }
.carga { display: grid; grid-template-columns: 150px 1fr 110px; gap: 12px; }
@media (max-width: 640px) { .carga { grid-template-columns: 1fr; } }
.panel-carga button:not(.secundario) { width: auto; padding: 10px 28px; }
.crono-tiempo { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; margin: 4px 0; color: var(--primario); }
.panel-crono .acciones { flex-wrap: wrap; }
.crono-item { padding: 8px 0 10px; border-bottom: 1px solid var(--borde); margin-bottom: 8px; }
.crono-item .crono-tiempo { font-size: 26px; }
.crono-item.en-pausa .crono-tiempo { color: var(--suave); }
.crono-item.en-pausa .icono-crono { animation: none; opacity: .5; }
.crono-otro { margin: 4px 0 0; }
.panel-crono .acciones button { width: auto; }
.semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 900px) { .semana { grid-template-columns: 1fr; } }
.dia { background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; padding: 8px; min-height: 120px; }
.dia.hoy { border-color: var(--primario); box-shadow: 0 0 0 1px var(--primario); }
.dia.futuro { opacity: .55; }
.dia-cabeza { display: flex; justify-content: space-between; font-size: 13px; color: var(--suave); margin-bottom: 6px; }
.dia-total { font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; }
.registro { border: 1px solid var(--borde); border-left: 3px solid #b8c2d1; border-radius: 6px; padding: 6px 8px; margin-bottom: 6px; font-size: 13px; }
.registro.estado-aprobada, .registro.estado-liquidada { border-left-color: var(--ok); }
.registro.estado-devuelta { border-left-color: #d98a00; background: #fffaf0; }
.registro-cabeza { display: flex; justify-content: space-between; }
.registro-glosa { color: var(--suave); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 2px 0 4px; }
.registro-pie { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.registro-pie a { color: var(--primario); font-size: 12px; margin-left: auto; }
.total-semana { margin-top: 12px; }
form.devolver { display: flex; gap: 6px; margin: 0; }
form.devolver input { margin: 0; min-width: 140px; }
p.advertencia { display: block; }
.pestanas { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 14px; }
.pestanas a { padding: 6px 12px; border-radius: 6px; color: var(--suave); text-decoration: none; border: 1px solid transparent; }
.pestanas a.activa { background: var(--superficie); border-color: var(--borde); color: var(--primario); font-weight: 600; }
.etiqueta.estado-liq-borrador, .etiqueta.estado-liq-anulada { background: #eceef1; color: var(--suave); }
.etiqueta.estado-liq-aceptada { background: #fff4e5; color: #9a5b00; }
.etiqueta.estado-liq-cobrada { background: var(--ok-fondo); color: var(--ok); }
form.glosa { display: flex; gap: 6px; align-items: flex-start; margin: 0; }
form.glosa textarea { margin: 0; min-width: 260px; font-size: 13px; }
.tabla.totales { max-width: 520px; margin: 20px 0 0 auto; }
.tabla.totales tr.total td { font-weight: 700; font-size: 16px; }
.acciones-liq { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.acciones-liq .tarjeta { margin: 0; }
.acciones-liq label.casilla { font-size: 14px; margin-bottom: 6px; }
h3.proyecto-titulo { margin: 18px 0 8px; font-size: 15px; }
.tabla + .tabla { margin-top: 10px; }
.icono-crono { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.panel-crono button.boton-crono { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 96px; height: 96px; margin: 8px auto 0; border-radius: 50%; padding: 0; font-size: 13px; }
.boton-crono .icono-crono { width: 40px; height: 40px; }
.crono-corriendo { display: flex; align-items: center; gap: 10px; color: var(--primario); }
.crono-corriendo .icono-crono { animation: crono-pulso 1.6s ease-in-out infinite; }
@keyframes crono-pulso { 50% { opacity: .35; } }
@media (max-width: 760px) {
  .barra { padding: 10px 16px; }
  .barra nav { order: 3; flex: 1 0 100%; gap: 2px; }
  .barra nav a { padding: 4px 8px; }
  .cuenta { margin-left: auto; }
}
.panel-filtros select, .panel-filtros input { width: auto; margin: 0; }
.panel-filtros .limpiar { align-self: center; color: var(--primario); font-weight: 600; text-decoration: none; margin-left: 6px; }
.indicadores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
@media (max-width: 900px) { .indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .indicadores { grid-template-columns: 1fr; } }
.indicador { background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; padding: 16px 18px; }
.indicador-cabeza { display: flex; justify-content: space-between; gap: 8px; color: var(--suave); font-size: 14px; }
.indicador-valor { font-size: 28px; font-weight: 700; margin-top: 8px; font-variant-numeric: tabular-nums; }
.variacion { font-weight: 600; font-size: 13px; white-space: nowrap; }
.variacion.baja { color: var(--error); } .variacion.sube { color: var(--ok); } .variacion.neutra { color: var(--suave); }
.tarjeta.grafico { max-width: none; margin-top: 10px; }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--suave); margin: 10px 0; }
.leyenda i { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; border-radius: 2px; }
.leyenda i.l-meta, .leyenda i.l-meta-f { height: 0; border-top: 3px dashed; border-radius: 0; vertical-align: 3px; }
.c-trab, .b-trab { background: #1f4aa8; fill: #1f4aa8; }
.c-fact, .b-fact { background: #a94aa3; fill: #a94aa3; }
.c-liq, .b-liq { background: #8ec2f4; fill: #8ec2f4; }
.svg-grafico { width: 100%; height: auto; }
.eje-linea { stroke: #e6e9ee; stroke-width: 1; }
.eje-texto { fill: var(--suave); font-size: 12px; }
line.l-meta { stroke: #1f3a8a; stroke-width: 2.5; stroke-dasharray: 8 6; }
line.l-meta-f { stroke: #a94aa3; stroke-width: 2.5; stroke-dasharray: 8 6; }
.leyenda i.l-meta { border-color: #1f3a8a; } .leyenda i.l-meta-f { border-color: #a94aa3; }
.panel-filtros select { max-width: 240px; }
.tarjetas-reporte { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.tarjeta-reporte { display: flex; flex-direction: column; gap: 6px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; padding: 18px; min-height: 110px; color: var(--texto); text-decoration: none; }
.tarjeta-reporte:hover { border-color: var(--primario); box-shadow: 0 0 0 1px var(--primario); }
.tarjeta-reporte b { font-size: 16px; color: var(--primario); }
.tarjeta-reporte span { color: var(--suave); font-size: 14px; }
.tabla-desplazable { overflow-x: auto; }
.tabla-reporte { font-size: 14px; }
.tabla-reporte th, .tabla-reporte td { padding: 7px 10px; white-space: nowrap; }
.tabla-reporte td:nth-child(1) { white-space: normal; }
.tabla-reporte td.cero { color: #c7ccd4; }
input.cobrable { width: 64px; margin: 0; padding: 5px 7px; text-align: right; display: inline-block; }
form.cobrable-form { display: inline-flex; gap: 4px; margin: 0; }
form.cobrable-form button { padding: 4px 8px; }
td.cambios { white-space: normal !important; font-size: 13px; color: var(--suave); max-width: 520px; }
td.cambios b { color: var(--texto); font-weight: 600; }