/* Los colores y las tipografias salen de identidad.css (lo genera
   nucleo/aplicar_identidad.py desde estudio.json): aca NO se escribe
   ningun color. La base es la misma que la de los otros modulos. */

*{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}

/* ---------- barra superior (misma convencion que los otros modulos) ---------- */
.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;flex-wrap:wrap}
.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)}

.aviso{padding:10px 22px;background:var(--aviso-fondo);color:var(--aviso-texto);border-bottom:1px solid var(--aviso-borde);font-size:13.5px}
.aviso.error{background:var(--error-fondo);color:var(--error-texto)}
.oculto{display:none !important}

.wrap{max-width:1240px;margin:0 auto;padding:22px}
.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;color:var(--texto)}
.card-head .acciones{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.card-body{padding:16px 18px}
.card-body.flush{padding:0}
.meta{color:var(--texto-sec);font-size:13.5px}
.vacio{padding:26px 18px;color:var(--texto-sec);text-align:center}

.tabla-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:8px 10px;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}

.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-link{background:none;border:none;color:var(--azul-medio);padding:2px 4px;text-decoration:underline}
.btn:disabled,.btn-primario:disabled{opacity:.45;cursor:not-allowed}
.chip{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;background:var(--suave);color:var(--acento)}
.chip.corregida{background:var(--aviso-fondo);color:var(--aviso-texto)}
.chip.atencion{border:1px solid var(--atencion);background:var(--aviso-fondo);color:var(--aviso-texto)}   /* municipal: cae fin de semana (#62) */

.overlay{position:fixed;inset:0;background:var(--velo);display:flex;align-items:center;justify-content:center;padding:16px;z-index:60}
.modal{background:var(--panel);border-radius:12px;width:100%;max-width:560px;max-height:90vh;overflow:auto;box-shadow:var(--sombra-modal)}
.modal h3{font-size:20px;padding:18px 20px 0}
.modal .cuerpo{padding:14px 20px}
.modal .pie{display:flex;gap:9px;justify-content:flex-end;padding:14px 20px 20px;flex-wrap:wrap}
/* Lo que falta completar, en rojo y adentro de la ventana (#73). */
.modal .error-modal{margin:0 20px;padding:9px 12px;border:1px solid var(--borde);border-radius:8px;
  background:var(--error-fondo);color:var(--error-texto);font-size:13.5px;font-weight:600}
.campo{margin-bottom:13px}
.campo label{display:block;font-size:13px;color:var(--texto-sec);margin-bottom:4px}
.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;flex-wrap:wrap;align-items:flex-end}
.fila > *{flex:1;min-width:140px}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--grafito);color:var(--hueso);padding:10px 18px;border-radius:8px;z-index:80;font-size:14px}

/* ---------- calendario ---------- */
.cal-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cal-nav h2{min-width:190px;text-align:center}
.cal-nav h2::first-letter{text-transform:uppercase}
.lentes{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:14px}
.filtro-oblig{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:13px;margin-top:10px}
.filtro-oblig label{display:flex;gap:5px;align-items:center;cursor:pointer}
.calendario{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.calendario .dow{font-size:12px;color:var(--texto-sec);text-align:center;padding:4px 0;font-weight:600}
.dia{min-height:96px;border:1px solid var(--borde);border-radius:8px;padding:5px 6px;background:var(--panel);text-align:left;
  display:flex;flex-direction:column;gap:3px;color:inherit;overflow:hidden}
.dia.fuera{visibility:hidden}
.dia.hoy{box-shadow:inset 0 0 0 2px var(--azul-medio)}
.dia.elegido{background:var(--suave)}
.dia .num{font-size:13px;font-weight:600;color:var(--texto-sec)}
/* La etiqueta (#55): fondo = color de la obligación (parámetro, viene en
   --ev); letra oscura fija para que se lea sobre el pastel también en modo
   oscuro; texto a la izquierda y el semáforo pegado a la derecha. */
.ev{display:flex;align-items:center;gap:5px;font-size:11.5px;line-height:1.25;padding:1px 3px 1px 6px;border-radius:5px;
  background:var(--ev, var(--panel-alt));color:var(--grafito);min-height:19px}
.ev .t{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dia .ev.con-clientes{font-weight:600}
.ev .marca, .filtro-oblig .marca{flex:0 0 auto;width:15px;height:15px;border-radius:3px;display:flex;align-items:center;justify-content:center;
  font-size:10px;color:var(--sobre-intenso);font-weight:600}
.ev .marca{margin-left:auto}
.ev .marca.sem-cumplido, .filtro-oblig .marca.sem-cumplido{background:var(--exito)}
.ev .marca.sem-cerca, .filtro-oblig .marca.sem-cerca{background:var(--atencion)}
.ev .marca.sem-vencido, .filtro-oblig .marca.sem-vencido{background:var(--peligro)}
.dia .mas{font-size:11px;color:var(--texto-sec)}
.dia .cuenta{display:none;font-size:11px;color:var(--acento);font-weight:600}
/* En el celular no entran los nombres: solo cuántos vencimientos hay. */
@media (max-width:700px){
  .dia{min-height:56px;padding:3px}
  .dia .ev,.dia .mas{display:none}
  .dia .cuenta{display:block}
}

.detalle-dia .vto{padding:10px 0;border-bottom:1px solid var(--borde)}
.detalle-dia .vto:last-child{border-bottom:none}
.detalle-dia .vto .titulo{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.detalle-dia .clientes{margin:4px 0 0;padding-left:18px;font-size:14px}

/* ---------- carga y pendientes ---------- */
.grilla-carga td,.grilla-carga th{padding:4px 6px;font-size:12.5px;text-align:center;white-space:nowrap}
.grilla-carga th:first-child,.grilla-carga td:first-child{text-align:left}
.pendiente{border:1px solid var(--borde);border-radius:8px;padding:12px 14px;margin-bottom:10px}
.pendiente.resuelto,.pendiente.descartado{opacity:.6}
.pendiente h4{margin:0 0 4px;font-size:15px}
.pendiente .acciones{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.pendiente .propuesta-detectada{margin:0 0 8px;font-size:14px}
.pendiente .texto-fuente{margin-top:10px;font-size:13px}
.pendiente .texto-fuente summary{cursor:pointer;color:var(--texto-sec)}
.pendiente .texto-fuente p{margin:6px 0 0;white-space:pre-line}
.pendiente table input,.pendiente table select{width:100%;padding:5px 7px;border:1px solid var(--borde-fuerte);border-radius:6px;background:var(--panel)}
.lista-clientes{display:flex;flex-direction:column;gap:4px;max-height:260px;overflow:auto;font-size:14px}
.lista-clientes label{display:flex;gap:8px;align-items:center}
.problema{color:var(--peligro)}

/* ---------- recordatorios (etapa B) ---------- */
.capa{display:flex;gap:6px;align-items:center;font-size:14px;cursor:pointer}
.dia .ev.rec{font-weight:normal}
.chip.atrasado{background:var(--error-fondo);color:var(--error-texto);font-weight:600}
.chip.hoy{background:var(--aviso-fondo);color:var(--aviso-texto);font-weight:600}
.chip.hecho{background:var(--exito-fondo);color:var(--exito)}
.a-la-vista{border:1px solid var(--borde);border-radius:8px;padding:10px 12px;margin-bottom:12px;background:var(--panel-alt)}
.a-la-vista h3{font-family:var(--sans);font-size:14px;font-weight:600;margin:0 0 6px}
.rec-item{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;padding:9px 0;border-bottom:1px solid var(--borde)}
.rec-item:last-child{border-bottom:none}
.rec-item .rec-texto{flex:1;min-width:220px}
.rec-item .rec-fecha{font-weight:600;white-space:nowrap;min-width:150px}
.rec-item .rec-acciones{display:flex;gap:6px;flex-wrap:wrap}
.rec-item.hecho .rec-texto{opacity:.7}
.comentario{white-space:pre-wrap}
.modal textarea{min-height:80px;resize:vertical}
.check-lista{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:14px}
.check-lista label{display:flex;gap:5px;align-items:center}
@media (max-width:700px){
  .dia .ev.rec{display:none}
}
/* El comentario del recordatorio, debajo de su título (#73). */
.rec-detalle{font-size:13.5px;color:var(--texto);margin-top:3px;white-space:pre-wrap}
/* La solapa Obligaciones (#74): la prioridad y la muestra del nombre que
   se va a leer en el día del calendario. */
/* La fila se agarra y se lleva a donde va (#76). */
.fila-oblig{cursor:grab}
.fila-oblig:active{cursor:grabbing}
.fila-oblig.arrastrando{opacity:.45;background:var(--suave)}
.fila-oblig:hover .oblig-agarre{color:var(--acento)}
.oblig-agarre{width:24px;text-align:center;color:var(--texto-sec);opacity:.75;letter-spacing:-2px;user-select:none}
/* Los botones de la fila no arrastran: se aprietan. */
.fila-oblig button{cursor:pointer}
.ev-muestra{display:inline-block;border-left:3px solid var(--ev,var(--borde));padding:2px 8px;border-radius:4px;
  background:var(--panel-alt);font-size:13px;white-space:nowrap}
.subtitulo-dia{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--texto-sec);text-transform:uppercase;letter-spacing:.04em;margin:4px 0 2px}
.campo input[type="checkbox"]{width:auto;padding:0}

/* ---------- cumplidos (etapa C): semáforo como el panel de Monotributo ---------- */
.clientes.tildes{list-style:none;padding-left:0}
.clientes.tildes li{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;padding:3px 0 3px 8px;border-left:3px solid var(--borde)}
.clientes.tildes label{display:flex;gap:7px;align-items:baseline;cursor:pointer}
.clientes.tildes .sem{font-size:12.5px}
.clientes.tildes li.sem-cumplido{border-left-color:var(--exito)}
.clientes.tildes li.sem-cumplido .sem{color:var(--exito)}
.clientes.tildes li.sem-cerca{border-left-color:var(--atencion)}
.clientes.tildes li.sem-cerca .sem{color:var(--atencion)}
.clientes.tildes li.sem-vencido{border-left-color:var(--peligro)}
.clientes.tildes li.sem-vencido .sem{color:var(--peligro);font-weight:600}
/* En el celular el color va en el contador del día. */
.dia .cuenta.sem-cumplido{color:var(--exito)}
.dia .cuenta.sem-cerca{color:var(--atencion)}
.dia .cuenta.sem-vencido{color:var(--peligro)}

/* ---------- historial (etapa C) ---------- */
#mes-hist{padding:6px 9px;border:1px solid var(--borde-fuerte);border-radius:7px;background:var(--panel)}
.rec-item.hist .rec-fecha{font-weight:normal;line-height:1.6}

/* ---------- comentarios (etapa C): amarillo simple, naranja próximo período ---------- */
#com-hist{padding:6px 9px;border:1px solid var(--borde-fuerte);border-radius:7px;background:var(--panel)}
.chip-com{border:1px solid var(--atencion);background:var(--aviso-fondo);color:var(--texto);border-radius:999px;padding:2px 9px;font-size:12px}
.chip-com.com-naranja{border-color:var(--alerta);background:var(--alerta);color:var(--acento-texto);font-weight:600}
.lista-com{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow:auto}
.com-item{border-left:4px solid var(--atencion);padding:4px 10px;background:var(--panel-alt);border-radius:0 6px 6px 0}
.com-item.com-naranja{border-left-color:var(--alerta)}

/* 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}
}

/* ---------- vistas día / semana / mes y colores (#55) ---------- */
.vistas-cal{display:inline-flex;gap:4px;margin-left:8px}
.vistas-cal [aria-pressed="true"]{background:var(--acento);color:var(--acento-texto);border-color:var(--acento)}
.calendario.semana .dia{min-height:240px}
.calendario.semana .dia .num{font-size:12.5px}
.filtro-acciones{display:flex;gap:6px;flex-basis:100%;margin-bottom:4px}
.filtro-oblig .marca.sin-marca{width:15px;height:15px;border:1px dashed var(--borde);border-radius:3px;vertical-align:-2px}   /* filtro por estado (#65) */
.muestra-color{display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--ev);border:1px solid var(--borde);margin-right:2px;vertical-align:-1px}
.detalle-dia .vto{border-left:5px solid var(--ev, transparent);padding-left:10px}
.rec-item{border-left:5px solid var(--ev, transparent);padding-left:10px}
.colores-cal{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px 18px}
.color-grupo{display:flex;gap:10px;align-items:center;cursor:pointer}
.color-grupo input[type="color"]{width:42px;height:30px;padding:0;border:1px solid var(--borde-fuerte);border-radius:6px;background:var(--panel)}
.color-grupo .muestra{display:inline-flex;font-size:13px;padding:3px 8px;margin-bottom:2px}
.color-grupo > span{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.agregar-color{margin-top:12px}
.color-grupo .btn-link{margin-left:auto}
/* ---------- avisos por WhatsApp o Gmail (#58, #59) ---------- */
.vto-acciones{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 0}
.avisos{margin-top:8px;padding:10px 12px;border:1px solid var(--borde);border-radius:8px;background:var(--panel-alt)}
.avisos-cab{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.avisos-cab .btn-link{margin-left:auto}
.avisos-lista{list-style:none;padding:0;margin:6px 0 0}
.avisos-lista li{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;padding:4px 0;border-top:1px solid var(--borde)}
.avisos-lista li:first-child{border-top:none}
.avisos-lista label{display:flex;gap:6px;align-items:baseline;cursor:pointer}
.avisos-canal{display:flex;gap:12px;align-items:baseline;margin:6px 0 0}
.avisos-canal label{display:flex;gap:4px;align-items:baseline;cursor:pointer}
.avisos-muestra{white-space:pre-wrap;font-family:inherit;font-size:13px;margin:0;padding:8px 10px;border-radius:6px;background:var(--panel);border:1px solid var(--borde)}