/* Los colores y las tipografias salen de identidad.css (lo genera
   nucleo/aplicar_identidad.py desde estudio.json): aca NO se escribe
   ningun color. (Los colores de las zonas del reporte son otra cosa: son
   parametros editables, en la tabla monotributo_umbrales.) */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--texto);font-family:var(--sans);font-size:15px;line-height:1.5}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:normal;margin:0}

.topbar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:12px 22px;background:var(--panel);border-bottom:1px solid var(--borde);position:sticky;top:0;z-index:20}
.topbar img.logo{height:30px;width:auto}
.topbar .modulos{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap;align-items:center}
.topbar .modulos a{padding:6px 12px;border-radius:6px;color:var(--texto-sec);text-decoration:none;font-size:0.88rem}
.topbar .modulos a.activo{color:var(--acento);font-weight:600}
.topbar .modulos a:hover{background:var(--panel-alt)}
.etiqueta-barra{font-size:0.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--texto-sec);opacity:.7;margin-right:2px}
.separador-barra{width:1px;align-self:stretch;background:var(--borde);margin:0 4px}
.tabs{display:flex;gap:2px;padding:3px;background:var(--panel-alt);border:1px solid var(--borde);border-radius:8px}
.tab{background:none;border:none;padding:7px 14px;border-radius:6px;color:var(--texto-sec);font-size:0.9rem}
.tab[aria-selected="true"]{background:var(--panel);color:var(--acento);font-weight:600;box-shadow:var(--sombra-tab)}

.wrap{max-width:1240px;margin:0 auto;padding:22px}
.split{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:start}
@media (max-width:880px){.split{grid-template-columns:1fr}}

.card{background:var(--panel);border:1px solid var(--borde);border-radius:10px;box-shadow:var(--sombra)}
.card + .card{margin-top:18px}
.card-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:16px 18px 12px;border-bottom:1px solid var(--borde)}
.card-head h2{font-size:19px}
.card-head .acciones{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.card-body{padding:16px 18px}
.card-body.flush{padding:0}

.buscador{width:100%;padding:9px 11px;border:1px solid var(--borde-fuerte);border-radius:7px;background:var(--panel)}
.lista{list-style:none;margin:0;padding:0;max-height:62vh;overflow:auto}
.lista li{border-bottom:1px solid var(--borde)}
.lista li:last-child{border-bottom:none}
.cli-btn{width:100%;text-align:left;background:none;border:none;padding:11px 18px;display:flex;gap:10px;align-items:baseline;color:inherit}
.cli-btn:hover{background:var(--panel-alt)}
.cli-btn[aria-current="true"]{background:var(--suave);box-shadow:inset 3px 0 0 var(--azul-medio)}
.cli-nombre{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cli-cat{font-size:12px;color:var(--texto-sec);white-space:nowrap}

.monto{font-variant-numeric:tabular-nums}
.meta{color:var(--texto-sec);font-size:13.5px}
.vacio{padding:26px 18px;color:var(--texto-sec);text-align:center}
.aviso{padding:10px 14px;background:var(--aviso-fondo);color:var(--aviso-texto);border-radius:8px;font-size:13.5px;margin-bottom:14px}
.aviso.error{background:var(--error-fondo);color:var(--error-texto)}

.tabla-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--borde);vertical-align:top}
th{color:var(--texto-sec);font-weight:600;font-size:12.5px;background:var(--panel-alt)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
td input,td select{width:100%;padding:6px 8px;border:1px solid var(--borde-fuerte);border-radius:6px;background:var(--panel)}

.btn{border:1px solid var(--borde-fuerte);background:var(--panel);color:var(--texto);padding:7px 13px;border-radius:7px}
.btn:hover{background:var(--panel-alt)}
.btn-primario{background:var(--acento);border-color:var(--acento);color:var(--acento-texto);font-weight:600}
.btn-primario:hover{filter:brightness(1.12)}
.btn-chico{padding:4px 9px;font-size:13px;border-radius:6px}
.btn-peligro{background:transparent;color:var(--debe);border:1px solid var(--debe)}
.btn:disabled,.btn-primario:disabled{opacity:.45;cursor:not-allowed}

.campo{margin-bottom:13px}
.campo label{display:block;font-size:13px;color:var(--texto-sec);margin-bottom:4px;font-weight:600}
.campo input,.campo select,.campo textarea{width:100%;padding:9px 11px;border:1px solid var(--borde-fuerte);border-radius:7px;background:var(--panel)}
.fila{display:flex;gap:12px}
.fila > *{flex:1;min-width:0}
@media (max-width:520px){.fila{flex-direction:column;gap:0}}

.chip{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;background:var(--suave);color:var(--acento)}
.chip.ok{background:var(--exito-fondo);color:var(--exito)}
.chip.pendiente{background:var(--aviso-fondo);color:var(--aviso-texto)}

.tarjeta-importacion{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--borde);border-radius:8px;margin-bottom:10px;background:var(--panel-alt)}
.tarjeta-importacion .acciones{display:flex;gap:8px}

.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.kpi > div{padding:12px 14px;background:var(--suave);border-radius:8px}
.kpi .valor{font-family:var(--serif);font-size:22px;font-variant-numeric:tabular-nums}
.kpi .etiqueta{font-size:12px;color:var(--texto-sec)}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--azul-profundo);color:var(--sobre-intenso);padding:11px 18px;border-radius:9px;z-index:90;max-width:90vw;box-shadow:var(--sombra-modal)}
.oculto{display:none !important}

/* ===== Fase 2: panel interno ===== */
.wrap-ancho{max-width:1400px}

.tarjetas-alerta{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
@media (max-width:800px){.tarjetas-alerta{grid-template-columns:1fr 1fr}}
.tarjeta-alerta{
  background:var(--panel);border:1px solid var(--borde);border-left:5px solid var(--c);border-radius:10px;
  padding:14px 16px;cursor:pointer;text-align:left;box-shadow:var(--sombra);transition:transform .08s;
}
.tarjeta-alerta:hover{transform:translateY(-1px)}
.tarjeta-alerta.activa{outline:2px solid var(--c);background:var(--suave)}
.tarjeta-alerta .n{font-family:var(--serif);font-size:32px;line-height:1;color:var(--c)}
.tarjeta-alerta .t{font-size:13px;color:var(--texto-sec);margin-top:4px}

.chip-alerta{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;background:var(--suave);color:var(--c);white-space:nowrap}
.tend{font-size:12.5px;white-space:nowrap}
.tend.sube{color:var(--exito)}
.tend.baja{color:var(--peligro)}
.tend.neutra{color:var(--texto-sec)}

.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
.filtros .campo{margin:0;min-width:150px}
.filtros .campo select,.filtros .campo input{padding:7px 9px}

table.panel-tabla td{font-size:13px}
table.panel-tabla th{white-space:nowrap}
table.panel-tabla tr.fila-cliente{cursor:pointer}
table.panel-tabla tr.fila-cliente:hover{background:var(--panel-alt)}
table.panel-tabla .nombre{font-weight:600;color:var(--acento)}
.detalle-alertas{padding:8px 12px 12px 30px;background:var(--panel-alt);font-size:13px}
.detalle-alertas li{margin:3px 0}

/* ficha particular */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.tarjetas > div{padding:14px 16px;background:var(--suave);border-radius:10px}
.tarjetas .valor{font-family:var(--serif);font-size:24px;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--acento)}
.tarjetas .etiqueta{font-size:12px;color:var(--texto-sec);margin-top:4px}
.tarjetas .sub{font-size:12px;color:var(--texto-sec);margin-top:6px}

.comparativo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:760px){.comparativo{grid-template-columns:1fr}}
.comparativo > div{border:1px solid var(--borde);border-radius:10px;padding:14px 16px}
.comparativo h3{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-sec);margin:0 0 10px}
.comparativo dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:14px}
.comparativo dt{color:var(--texto-sec)}
.comparativo dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.escenario{margin-top:10px;padding-top:10px;border-top:1px dashed var(--borde)}
.escenario .titulo{font-size:12px;color:var(--texto-sec);margin-bottom:4px}

.alertas-lista{list-style:none;margin:0;padding:0}
.alertas-lista li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px dotted var(--borde)}
.alertas-lista li:last-child{border-bottom:none}
.alertas-lista .det{color:var(--texto-sec);font-size:12.5px}

.grafico-svg{width:100%;height:auto;display:block}
.grafico-svg .guia{stroke:var(--borde);stroke-width:1}
.grafico-svg .eje{fill:var(--texto-sec);font-size:11px}
.grafico-svg .eje.nota{font-size:9.5px;font-style:italic}
.leyenda{display:flex;gap:16px;margin:8px 0 4px;font-size:13px}
.leyenda label{display:flex;align-items:center;gap:6px;cursor:pointer}
.leyenda .sw{width:14px;height:14px;border-radius:3px;display:inline-block}

.frases{list-style:none;margin:0;padding:0}
.frases li{padding:10px 14px;border-left:3px solid var(--azul-medio);background:var(--panel-alt);border-radius:0 8px 8px 0;margin-bottom:8px;font-size:14.5px;line-height:1.5}
.frases li .t{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-sec);display:block;margin-bottom:2px}

.encabezado-cliente{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.encabezado-cliente h2{font-size:24px}
.encabezado-cliente .meta-linea{display:flex;gap:14px;flex-wrap:wrap;font-size:13.5px;color:var(--texto-sec);align-items:center}

.revision-form{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end}
@media (max-width:700px){.revision-form{grid-template-columns:1fr}}
.revision-form .campo{margin:0}
.sin-rango{color:var(--texto-sec);font-style:italic}
.hist-proy{opacity:.7;font-style:italic}

/* Apartados plegables de comprobantes (Carga y reportes) */
details.apartado{border:1px solid var(--borde);border-radius:8px;margin-top:12px;background:var(--panel)}
details.apartado > summary{cursor:pointer;padding:12px 14px;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;list-style:none}
details.apartado > summary::-webkit-details-marker{display:none}
details.apartado > summary::before{content:"▸";color:var(--texto-sec)}
details.apartado[open] > summary::before{content:"▾"}
details.apartado[open] > summary{border-bottom:1px solid var(--borde)}
.apartado-cuerpo{padding:12px 14px}
.apartado-cuerpo h3{font-size:14px;margin:6px 0 8px}
.lista-comprobantes .tabla-scroll{max-height:480px;overflow:auto}
.lista-comprobantes .fila-mes td{background:var(--suave);font-weight:600}

/* ---------- Tira de meses (Comprobantes de ARCA) ---------- */
/* De un vistazo: en qué meses hay archivos cargados y en cuáles no.
   Cada mes es un botón que mueve el filtro. */
.tira-meses {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 6px;
}
.mes-tira {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 52px;
  padding: 6px 8px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--panel);
  cursor: pointer;
  font: inherit;
  line-height: 1.1;
  position: relative;
}
.mes-tira:hover { border-color: var(--azul-medio); }
.mes-tira .mes-nombre { font-size: 12px; font-weight: 600; text-transform: capitalize; }
.mes-tira .mes-anio { font-size: 10px; color: var(--texto-sec); }
.mes-tira .mes-marcas { font-size: 11px; letter-spacing: 2px; font-weight: 700; }

/* Los dos archivos cargados, uno solo, o ninguno. */
.mes-completo { background: var(--exito-fondo); border-color: var(--exito-borde); }
.mes-completo .mes-marcas { color: var(--exito); }
.mes-a-medias { background: var(--aviso-fondo); border-color: var(--aviso-borde); }
.mes-a-medias .mes-marcas { color: var(--aviso-texto); }
.mes-vacio .mes-marcas { color: var(--borde-fuerte); }

.mes-elegido { outline: 2px solid var(--azul-profundo); outline-offset: 1px; }
.mes-pendiente { position: absolute; top: 2px; right: 5px; color: var(--aviso-texto); font-size: 14px; }
.tira-ayuda { margin: 0 0 12px; }

/* En el teléfono (trabajo #32, 2026-10-09): la barra de arriba no queda
   fija y se compacta; el «Ir a» se desliza de costado en un solo renglón. */
@media (max-width:700px){
  .topbar{position:static;gap:8px;padding:8px 12px}
  .topbar img.logo{height:24px}
  .topbar .modulos{margin-left:0;width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .topbar .modulos::-webkit-scrollbar{display:none}
  .topbar .modulos a{padding:4px 8px;white-space:nowrap}
  .etiqueta-barra,.separador-barra{display:none}
}

/* En el teléfono (trabajo #32): una tabla ancha se desliza dentro de su
   recuadro en vez de estirar el panel (y con él, toda la página). */
.split > *{min-width:0}