:root {
  --fondo: #f4f5f7;
  --papel: #ffffff;
  --tinta: #1c2331;
  --suave: #5a6376;
  --linea: #e1e4ea;
  --marca: #1f3550;
  --accion: #1b5fa8;
  --accion-oscura: #154b86;

  --verde: #1d7443;      --verde-fondo: #e7f4ec;     --verde-borde: #a9d8bb;
  --amarillo: #855400;   --amarillo-fondo: #fff4d9;  --amarillo-borde: #f0cf7e;
  --rojo: #b1261d;       --rojo-fondo: #fdecea;      --rojo-borde: #f2b3ad;
  --gris: #586174;       --gris-fondo: #eef0f4;      --gris-borde: #d5d9e1;
  --azul: #1b5fa8;       --azul-fondo: #e8f0fb;      --azul-borde: #b3cbeb;
  --morado: #5b3fa0;     --morado-fondo: #f0ebfa;    --morado-borde: #cdbfeb;

  --radio: 10px;
  --sombra: 0 1px 2px rgba(20, 30, 50, .06), 0 2px 8px rgba(20, 30, 50, .05);
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accion); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.75rem; line-height: 1.25; margin: 0 0 .25rem; letter-spacing: -.01em; }
h2 { font-size: 1.2rem; margin: 0 0 .5rem; }
h3 { font-size: 1.05rem; margin: 0; }
.bajada { color: var(--suave); margin: 0 0 1rem; max-width: 62rem; }
.gris-texto { color: var(--suave); font-size: .9rem; }
.derecha { text-align: right; }
.vacio { color: var(--suave); padding: 1rem 0; }

/* Menú lateral y barra superior (diseño del 08/10) */
:root { --ancho-menu: 264px; }
.lateral {
  position: fixed; inset: 0 auto 0 0; width: var(--ancho-menu); z-index: 40;
  background: var(--marca); color: #fff; display: flex; flex-direction: column; padding: 1.1rem .8rem 1rem;
  overflow-y: auto;
}
.marca { color: #fff; font-weight: 700; font-size: 1.08rem; padding: .2rem .6rem 1rem; display: block; line-height: 1.25; }
.marca span { display: block; font-weight: 400; opacity: .7; font-size: .92rem; }
.marca:hover { text-decoration: none; }
.menu { display: flex; flex-direction: column; gap: .15rem; flex: 1; }
.grupo-menu { margin: 1rem .6rem .35rem; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.menu .item {
  display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: 8px;
  color: rgba(255, 255, 255, .84); font-size: .97rem;
}
.menu .item .icono { flex-shrink: 0; opacity: .85; }
.menu .item span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu .item:hover { background: rgba(255, 255, 255, .09); text-decoration: none; color: #fff; }
.menu .item.activo { background: #fff; color: var(--marca); font-weight: 600; }
.menu .item.activo .icono { opacity: 1; }
.menu .item.apagado { opacity: .4; pointer-events: none; }
.insignia {
  font-size: .76rem; font-weight: 700; padding: .05rem .5rem; border-radius: 999px; white-space: nowrap;
  background: rgba(255, 255, 255, .16); color: #fff;
}
.insignia.alerta { background: #f0b429; color: #3d2a00; }
.menu .item.activo .insignia { background: var(--azul-fondo); color: var(--marca); }
.menu .item.activo .insignia.alerta { background: #f0b429; color: #3d2a00; }
.lateral-pie { font-size: .78rem; color: rgba(255, 255, 255, .55); margin: 1rem .6rem 0; line-height: 1.4; }

.principal { margin-left: var(--ancho-menu); min-height: 100vh; }
.sin-menu .principal { margin-left: 0; }
.superior {
  position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--linea); display: flex; align-items: center; gap: 1rem; padding: .6rem 1.5rem; min-height: 60px;
}
.sin-menu .superior { display: none; }
.abrir-menu { display: none; background: none; border: 0; color: var(--tinta); padding: .3rem; cursor: pointer; border-radius: 8px; }
.abrir-menu:hover { background: var(--gris-fondo); }
.mes-elegido { display: flex; align-items: baseline; gap: .55rem; }
.mes-elegido span { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); }
.mes-elegido strong { font-size: 1.08rem; }
.mes-elegido a { font-size: .88rem; }
.superior-derecha { margin-left: auto; display: flex; align-items: center; gap: .9rem; }
.preguntar { display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px; }
.preguntar .icono { width: 17px; height: 17px; }
.usuario-actual { display: flex; align-items: center; gap: .55rem; margin: 0; font-size: .92rem; color: var(--tinta); }
.usuario-actual .avatar {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--marca); color: #fff; font-weight: 700; font-size: .9rem;
}
.usuario-actual .enlace { background: none; border: 0; color: var(--accion); font: inherit; font-weight: 600; cursor: pointer; padding: 0; }
.velo { position: fixed; inset: 0; background: rgba(15, 25, 40, .45); z-index: 35; }

@media (max-width: 960px) {
  .lateral { transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 30px rgba(0, 0, 0, .25); }
  .lateral.abierto { transform: none; }
  .principal { margin-left: 0; }
  .abrir-menu { display: inline-flex; }
  .superior { padding: .5rem 1rem; }
}
@media (max-width: 620px) {
  .superior .nombre-usuario, .superior .preguntar { display: none; }
  .mes-elegido span { display: none; }
}

.contenido { max-width: 1280px; margin: 0 auto; padding: 1.75rem 1.25rem 3rem; }
.angosto { max-width: 760px; }
.encabezado { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.volver { display: inline-block; margin-bottom: .4rem; font-size: .95rem; }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: var(--accion); color: #fff; border: 0; border-radius: 8px;
  padding: .6rem 1.05rem; font: inherit; font-weight: 600; cursor: pointer; text-align: center;
}
.boton:hover { background: var(--accion-oscura); text-decoration: none; }
.boton:disabled { background: #aab3c2; cursor: not-allowed; }
.boton.secundario { background: var(--papel); color: var(--accion); border: 1px solid var(--azul-borde); }
.boton.secundario:hover { background: var(--azul-fondo); }
.boton.grande { font-size: 1.1rem; padding: .8rem 1.4rem; }
.boton.ancho { width: 100%; margin-bottom: .6rem; }
.boton.confirmar { background: var(--verde); margin-top: .5rem; }
.boton.confirmar:hover { background: #155c35; }
.enlace { background: none; border: 0; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0; }

/* Mensajes después de una acción */
.mensajes { max-width: 1280px; margin: 1rem auto 0; padding: 0 1.25rem; }
.mensaje {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .8rem 1rem; border-radius: var(--radio); border: 1px solid; margin-bottom: .5rem;
}
.mensaje.ok { background: var(--verde-fondo); border-color: var(--verde-borde); color: #124a2b; }
.mensaje.aviso { background: var(--amarillo-fondo); border-color: var(--amarillo-borde); color: #5e3b00; }
.mensaje.info { background: var(--azul-fondo); border-color: var(--azul-borde); color: #123a66; }
.mensaje form { margin: 0; flex-shrink: 0; }

/* 1. Subir */
.zona {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
  border: 2px dashed #b8c2d3; border-radius: 14px; background: var(--papel);
  padding: 2.5rem 1rem; text-align: center; cursor: pointer; color: var(--suave);
  transition: background .15s, border-color .15s;
}
.zona svg { color: var(--accion); }
.zona strong { color: var(--tinta); font-size: 1.2rem; }
.zona:hover, .zona.encima { background: var(--azul-fondo); border-color: var(--accion); }
.recibidos { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; gap: .6rem; }
.recibidos li {
  display: flex; gap: .9rem; align-items: center; background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: .8rem 1rem;
}
.recibidos li div { display: flex; flex-direction: column; }
.recibidos .detalle { color: var(--suave); font-size: .92rem; }
.marca-ok {
  width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 2px solid var(--linea); flex-shrink: 0;
  display: grid; place-items: center;
}
.recibidos li.listo { border-color: var(--verde-borde); background: var(--verde-fondo); }
.recibidos li.listo .marca-ok { background: var(--verde); border-color: var(--verde); }
.recibidos li.listo .marca-ok::after { content: "✓"; color: #fff; font-weight: 700; }
.recibidos li.subiendo .marca-ok { border-color: var(--accion); border-top-color: transparent; animation: girar .8s linear infinite; }
.error { background: var(--rojo-fondo); border: 1px solid var(--rojo-borde); color: var(--rojo); padding: .7rem 1rem; border-radius: var(--radio); }
.comenzar { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1.1rem; }
.comenzar label { display: block; font-weight: 600; margin-bottom: .4rem; }
.fila-comenzar { display: flex; gap: .75rem; flex-wrap: wrap; }
.fila-comenzar select { flex: 1; min-width: 12rem; }
select, input[type=search] {
  font: inherit; padding: .55rem .7rem; border: 1px solid #c5ccd8; border-radius: 8px; background: #fff; color: var(--tinta);
}
.nota { color: var(--amarillo); margin: .6rem 0 0; }
.recordados { color: var(--suave); margin-top: 1rem; }

/* 2. Revisión: tarjetas de resumen */
.tarjetas { display: grid; grid-template-columns: repeat(5, 1fr); gap: .75rem; margin-bottom: 1rem; }
.tarjeta {
  display: flex; flex-direction: column; padding: .8rem 1rem; border-radius: var(--radio);
  border: 1px solid; box-shadow: var(--sombra); color: inherit; transition: transform .1s;
}
.tarjeta:hover { text-decoration: none; transform: translateY(-1px); }
.tarjeta .numero { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.tarjeta .texto { font-weight: 600; }
.tarjeta.elegida { outline: 3px solid var(--tinta); outline-offset: 1px; }
.tarjeta.rojo { background: var(--rojo-fondo); border-color: var(--rojo-borde); color: var(--rojo); }
.tarjeta.azul { background: var(--azul-fondo); border-color: var(--azul-borde); color: var(--azul); }
.tarjeta.amarillo { background: var(--amarillo-fondo); border-color: var(--amarillo-borde); color: var(--amarillo); }
.tarjeta.verde { background: var(--verde-fondo); border-color: var(--verde-borde); color: var(--verde); }
.tarjeta.morado { background: var(--morado-fondo); border-color: var(--morado-borde); color: var(--morado); }

.herramientas { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.herramientas input { flex: 1; min-width: 16rem; max-width: 34rem; }

/* Una propiedad: datos + dos chequeos */
.lista { display: grid; gap: .8rem; }
.propiedad {
  background: var(--papel); border: 1px solid var(--linea); border-left: 6px solid var(--gris-borde);
  border-radius: var(--radio); box-shadow: var(--sombra);
  display: grid; grid-template-columns: minmax(15rem, 1fr) minmax(16rem, 1.15fr) minmax(16rem, 1.15fr);
  gap: .9rem; padding: 1rem; scroll-margin-top: 5rem;
}
.propiedad:target { box-shadow: 0 0 0 3px var(--accion); }
.borde-verde { border-left-color: var(--verde); }
.borde-amarillo { border-left-color: #e0a526; }
.borde-rojo { border-left-color: var(--rojo); }
.borde-gris { border-left-color: var(--gris-borde); }
.propiedad-datos p { margin: .1rem 0 .5rem; }
.propiedad-datos dl { display: grid; grid-template-columns: auto 1fr; gap: .1rem .7rem; margin: 0; font-size: .93rem; }
.propiedad-datos dt { color: var(--suave); }
.propiedad-datos dd { margin: 0; }
.propiedad-pie { grid-column: 1 / -1; display: flex; justify-content: flex-end; border-top: 1px solid var(--linea); padding-top: .6rem; }
.chequeo { border-radius: 8px; padding: .7rem .85rem; border: 1px solid; }
.chequeo p { margin: .35rem 0 0; font-size: .95rem; }
.chequeo form { margin: 0; }
.chequeo-titulo { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; font-weight: 600; font-size: .9rem; color: var(--suave); }
.fondo-verde { background: #f6fbf8; border-color: var(--verde-borde); }
.fondo-amarillo { background: #fffbf0; border-color: var(--amarillo-borde); }
.fondo-rojo { background: #fef6f5; border-color: var(--rojo-borde); }
.fondo-gris { background: #f8f9fb; border-color: var(--gris-borde); }
.chip {
  display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .15rem .65rem .15rem .25rem;
  font-weight: 700; font-size: .85rem; border: 1px solid; white-space: nowrap;
}
.chip i {
  font-style: normal; display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  color: #fff; font-size: .75rem;
}
.chip.verde { color: var(--verde); background: var(--verde-fondo); border-color: var(--verde-borde); }
.chip.verde i { background: var(--verde); }
.chip.amarillo { color: var(--amarillo); background: var(--amarillo-fondo); border-color: var(--amarillo-borde); }
.chip.amarillo i { background: #d99a12; }
.chip.rojo { color: var(--rojo); background: var(--rojo-fondo); border-color: var(--rojo-borde); }
.chip.rojo i { background: var(--rojo); }
.chip.gris { color: var(--gris); background: var(--gris-fondo); border-color: var(--gris-borde); }
.chip.gris i { background: var(--gris); }
.etiqueta-ejemplo {
  font-size: .75rem; font-weight: 600; background: var(--morado-fondo); color: var(--morado);
  border: 1px solid var(--morado-borde); border-radius: 999px; padding: .05rem .5rem; vertical-align: middle;
}

/* Bloques de abajo: pagos sin identificar, enviadas, no arriendo */
.bloque { margin-top: 2rem; }
details.bloque { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: .9rem 1.1rem; }
details.bloque > summary { font-weight: 700; font-size: 1.1rem; cursor: pointer; }
details.bloque[open] > summary { margin-bottom: .75rem; }
.cuenta {
  display: inline-block; min-width: 1.8rem; text-align: center; font-size: .85rem; border-radius: 999px;
  background: var(--gris-fondo); color: var(--gris); padding: .05rem .5rem; margin-left: .3rem; vertical-align: middle;
}
.cuenta.verde { background: var(--verde-fondo); color: var(--verde); }
.suelto {
  display: grid; grid-template-columns: 9rem 1fr minmax(20rem, 26rem); gap: 1rem; align-items: start;
  background: var(--papel); border: 1px solid var(--linea); border-left: 6px solid var(--morado-borde);
  border-radius: var(--radio); padding: .9rem 1rem; margin-bottom: .6rem; scroll-margin-top: 5rem;
}
details .suelto { box-shadow: none; }
.suelto-monto { font-size: 1.3rem; font-weight: 700; display: flex; flex-direction: column; }
.suelto-monto small { font-size: .85rem; font-weight: 400; color: var(--suave); }
.suelto-quien { display: flex; flex-direction: column; gap: .15rem; }
.suelto-quien q { color: var(--tinta); font-style: italic; }
.pista { margin: .2rem 0 0; color: var(--morado); font-size: .92rem; }
.suelto-acciones { display: flex; flex-direction: column; gap: .5rem; margin: 0; }
.suelto-acciones select { width: 100%; }
.suelto-acciones .botones { display: flex; gap: .5rem; flex-wrap: wrap; }
.tabla { width: 100%; border-collapse: collapse; background: var(--papel); font-size: .95rem; }
.tabla th, .tabla td { padding: .5rem .6rem; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.tabla th { color: var(--suave); font-weight: 600; font-size: .85rem; }
.tabla th.derecha, .tabla td.derecha { text-align: right; }
.tabla-liquidaciones { border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }

/* 3. Liquidaciones */
.destacado {
  display: flex; flex-direction: column; background: var(--morado-fondo); border: 1px solid var(--morado-borde);
  color: var(--morado); padding: 1rem 1.2rem; border-radius: var(--radio); margin-bottom: 1rem; box-shadow: var(--sombra);
}
.destacado strong { font-size: 1.15rem; }
.destacado:hover { text-decoration: none; background: #e9e1f8; }
.liquidacion { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1.5rem; align-items: start; }
.hoja { margin: 0; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .08), 0 10px 30px rgba(0, 0, 0, .08); border: 1px solid var(--linea); }
.hoja img { display: block; width: 100%; height: auto; }
.panel { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.1rem; position: sticky; top: 4.5rem; box-shadow: var(--sombra); }
.panel h2 { font-size: 1rem; margin: 1.2rem 0 .5rem; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.panel form { margin: 0; }
.razon { color: var(--amarillo); font-size: .92rem; margin: -.2rem 0 .7rem; }
.aprobada { background: var(--verde-fondo); border: 1px solid var(--verde-borde); color: #124a2b; border-radius: 8px; padding: .8rem .9rem; margin-bottom: .7rem; display: flex; flex-direction: column; }
.aprobada strong { font-size: 1.1rem; }
.aviso-caja { background: var(--amarillo-fondo); border: 1px solid var(--amarillo-borde); color: #5e3b00; border-radius: 8px; padding: .8rem .9rem; margin-bottom: .8rem; }
.mini-chequeo { margin-bottom: .6rem; }
.mini-chequeo p { margin: .3rem 0 0; font-size: .92rem; }
.mini-chequeo .chip { white-space: normal; }
.datos-carta { display: grid; grid-template-columns: auto 1fr; gap: .2rem .7rem; margin: 0; font-size: .93rem; }
.datos-carta dt { color: var(--suave); }
.datos-carta dd { margin: 0; }
.origen { color: var(--suave); font-size: .88rem; margin: .6rem 0 0; }
.vecinos { display: flex; gap: .5rem; }

.resultado-comparacion { border-radius: var(--radio); padding: 1rem 1.2rem; margin-bottom: 1.2rem; border: 1px solid; display: flex; flex-direction: column; gap: .2rem; }
.resultado-comparacion strong { font-size: 1.3rem; }
.resultado-comparacion.igual { background: var(--verde-fondo); border-color: var(--verde-borde); color: #124a2b; }
.resultado-comparacion.distinta { background: var(--amarillo-fondo); border-color: var(--amarillo-borde); color: #5e3b00; }
.resultado-comparacion ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.resultado-comparacion li span { font-weight: 700; }
.comparacion { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.comparacion figure { margin: 0; }
.comparacion figcaption { font-weight: 700; margin-bottom: .5rem; font-size: 1.05rem; }

.pie { text-align: center; color: var(--suave); font-size: .85rem; padding: 1.5rem 1rem 2rem; }

/* Pantalla de espera */
.cargando { position: fixed; inset: 0; background: rgba(244, 245, 247, .82); display: grid; place-items: center; z-index: 50; }
.cargando[hidden] { display: none; }
.cargando-caja { background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 1.2rem 1.6rem; display: flex; gap: .9rem; align-items: center; box-shadow: var(--sombra); font-weight: 600; }
.rueda { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 3px solid var(--azul-borde); border-top-color: var(--accion); animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

@media (max-width: 1100px) {
  .propiedad { grid-template-columns: 1fr 1fr; }
  .propiedad-datos { grid-column: 1 / -1; }
  .tarjetas { grid-template-columns: repeat(3, 1fr); }
  .liquidacion { grid-template-columns: 1fr; }
  .panel { position: static; }
  .suelto { grid-template-columns: 8rem 1fr; }
  .suelto-acciones { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .propiedad, .comparacion { grid-template-columns: 1fr; }
  .tarjetas { grid-template-columns: repeat(2, 1fr); }
  .suelto { grid-template-columns: 1fr; }
}

/* Historial en la barra */

/* Comprobantes */
.adjunto { font-size: .92rem; margin: .5rem 0 0; padding: .35rem .6rem; border-radius: 6px; }
.adjunto::before { content: "📎 "; }
.adjunto.ok { background: var(--verde-fondo); color: #124a2b; }
.adjunto.falta { background: var(--amarillo-fondo); color: #5e3b00; }
.falta-texto { color: var(--amarillo); font-size: .92rem; }

/* Acciones de la revisión */
.chequeo .botones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.boton.confirmar-no { margin-top: .5rem; }
.boton.chico { padding: .35rem .7rem; font-size: .88rem; }
.resolver { margin-top: .6rem; border-top: 1px dashed var(--linea); padding-top: .45rem; }
.resolver > summary { cursor: pointer; color: var(--accion); font-weight: 600; font-size: .9rem; }
.resolver-cuerpo { display: flex; flex-direction: column; gap: .7rem; margin-top: .5rem; }
.resolver-cuerpo h4 { margin: .2rem 0 .1rem; font-size: .9rem; }
.resolver-cuerpo p { margin: 0; }
.candidato { display: flex; justify-content: space-between; align-items: center; gap: .6rem; background: #fff;
             border: 1px solid var(--linea); border-radius: 8px; padding: .4rem .55rem; margin: 0; font-size: .9rem; }
.candidato q { font-style: italic; }
.formulario { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; background: #fff;
              border: 1px solid var(--linea); border-radius: 8px; padding: .55rem .65rem; margin: 0; }
.formulario input[type=text], .formulario select, .formulario input[type=date] {
  font: inherit; font-size: .92rem; padding: .4rem .55rem; border: 1px solid #c5ccd8; border-radius: 6px; width: 100%; }
.fila-formulario { display: flex; gap: .4rem; width: 100%; flex-wrap: wrap; }
.fila-formulario > * { flex: 1; min-width: 9rem; }
.fila-formulario label { display: flex; align-items: center; gap: .4rem; font-size: .9rem; }

/* Liquidaciones */
.titulo-bloque { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.titulo-bloque h2 { margin: 0; }
.cuenta.amarilla { background: var(--amarillo-fondo); color: var(--amarillo); }
.paginas { display: flex; flex-direction: column; gap: .6rem; }
.rotulo-pagina { margin: .8rem 0 0; color: var(--suave); font-weight: 600; }
.correo { margin-top: 1rem; }
.correo > summary { cursor: pointer; font-weight: 600; color: var(--accion); }
.correo pre, .cuerpo-correo { white-space: pre-wrap; font-family: inherit; background: var(--fondo); border: 1px solid var(--linea);
  border-radius: 8px; padding: .7rem .8rem; font-size: .92rem; margin: .4rem 0; }
.confirmar-envio { display: flex; justify-content: flex-end; align-items: center; gap: .8rem; margin-top: 1.2rem; }

/* Historial */
.filtros-historial select { min-width: 14rem; }
.tarjetas-3 { grid-template-columns: repeat(3, 1fr); }
tr.anulada td { color: var(--suave); text-decoration: line-through; }
tr.anulada td:last-child, tr.anulada td .chip { text-decoration: none; }
.detalle-envio { display: grid; grid-template-columns: 1fr 1.3fr; gap: 1rem; }
.panel-simple { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1.1rem; box-shadow: var(--sombra); }
.panel-simple h2 { font-size: 1rem; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 900px) { .detalle-envio, .tarjetas-3 { grid-template-columns: 1fr; } }
.candidato .boton { white-space: nowrap; flex-shrink: 0; }

/* Varias cartolas en la subida */
.recibidos li .cartolas { flex: 1; }
.lista-cartolas { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: .25rem; }
.lista-cartolas:empty { display: none; }
.lista-cartolas li { display: flex; justify-content: space-between; align-items: center; gap: .8rem;
  background: rgba(255, 255, 255, .7); border: 1px solid var(--verde-borde); border-radius: 6px; padding: .3rem .6rem; font-size: .92rem; }
.lista-cartolas .enlace { color: var(--accion); font-weight: 600; text-decoration: none; }
.lista-cartolas li:has(.aviso-cartola) { flex-wrap: wrap; }
.aviso-cartola { flex-basis: 100%; margin: .1rem 0 0; color: #5e3b00; font-size: .88rem; }
.cuenta-mov { color: var(--suave); }

/* Revisión como bandeja de pendientes */
.progreso { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: .9rem 1.1rem;
  margin-bottom: .9rem; box-shadow: var(--sombra); }
.progreso p { margin: 0 0 .5rem; font-size: 1.1rem; }
.barra-progreso { height: .7rem; background: var(--gris-fondo); border-radius: 999px; overflow: hidden; }
.barra-progreso span { display: block; height: 100%; background: var(--verde); border-radius: 999px; transition: width .3s; }
.pestanas { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .8rem; }
.pestanas a { padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--linea); background: var(--papel);
  color: var(--tinta); font-weight: 600; }
.pestanas a b { color: var(--suave); margin-left: .25rem; }
.pestanas a:hover { text-decoration: none; background: var(--azul-fondo); }
.pestanas a.elegida { background: var(--marca); border-color: var(--marca); color: #fff; }
.pestanas a.elegida b { color: rgba(255, 255, 255, .8); }
.reglas { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: .6rem 1rem; margin-bottom: .9rem; }
.reglas > summary { cursor: pointer; font-weight: 600; color: var(--accion); }
.reglas ul { margin: .6rem 0; padding-left: 1.2rem; color: var(--suave); }
.reglas li { margin: .2rem 0; }
.fila-regla { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .4rem 0; }
.entrada-pesos { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; }
.entrada-pesos input { width: 7.5rem; font: inherit; padding: .35rem .5rem; border: 1px solid #c5ccd8; border-radius: 6px; }
.grupo { margin-bottom: 1.4rem; }
.grupo h2 { font-size: 1.15rem; }
.grupo .bajada { margin-bottom: .6rem; }
.pendiente { background: var(--papel); border: 1px solid var(--linea); border-left: 6px solid var(--gris-borde);
  border-radius: var(--radio); margin-bottom: .45rem; box-shadow: var(--sombra); scroll-margin-top: 5rem; }
.pendiente > summary { display: grid; grid-template-columns: minmax(14rem, 1fr) minmax(0, 2.2fr) auto; gap: .9rem;
  align-items: center; padding: .65rem .9rem; cursor: pointer; list-style: none; }
.pendiente > summary::-webkit-details-marker { display: none; }
.pendiente[open] > summary { border-bottom: 1px solid var(--linea); }
.pendiente-que { display: flex; flex-direction: column; }
.pendiente-motivo { display: flex; flex-direction: column; gap: .3rem; font-size: .92rem; }
.linea-motivo { display: flex; gap: .5rem; align-items: baseline; }
.linea-motivo .chip { flex-shrink: 0; }
.pendiente-abrir { color: var(--accion); font-weight: 600; white-space: nowrap; }
.pendiente-abrir::after { content: " ▾"; }
.pendiente[open] .pendiente-abrir::after { content: " ▴"; }
.pendiente .propiedad { border: 0; border-radius: 0 0 var(--radio) var(--radio); box-shadow: none; }
.marcar-todo { margin: 0 0 .5rem; }
.marcar-todo .enlace { color: var(--accion); font-weight: 600; text-decoration: none; }
.tabla-marcable td:first-child { width: 2rem; }
.tabla-marcable input[type=checkbox] { width: 1.1rem; height: 1.1rem; }
@media (max-width: 900px) { .pendiente > summary { grid-template-columns: 1fr; } }
.progreso .atajo { margin: .6rem 0 0; font-size: 1rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

/* Entrar */
.formulario.entrar { padding: 1.2rem; gap: .5rem; max-width: 24rem; }
.formulario.entrar label { font-weight: 600; }
.formulario.entrar input { font: inherit; padding: .55rem .65rem; border: 1px solid #c5ccd8; border-radius: 6px; width: 100%; }
.formulario.entrar .boton { margin-top: .6rem; }

/* Datos de la carta */
.datos-carta-form { padding: 1.1rem; gap: .45rem; }
.datos-carta-form label { font-weight: 600; margin-top: .4rem; }
.datos-carta-form input[type=text], .datos-carta-form select { font: inherit; padding: .5rem .6rem; border: 1px solid #c5ccd8; border-radius: 6px; width: 100%; }
.datos-carta-form .fila-formulario select { flex: 0 0 9rem; min-width: 0; }
.datos-carta-form .gris-texto { margin: 0; font-size: .88rem; }
.datos-carta-form .boton { margin-top: .8rem; }

/* Cambios de dirección */
.calce { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
         background: #fff; border: 1px solid var(--linea); border-radius: 8px; padding: .8rem 1rem; margin-bottom: .6rem; }
.calce p { margin: 0 0 .2rem; }
.calce-antes { font-size: .95rem; }
.calce-botones { display: flex; gap: .5rem; }
.calce-botones form { margin: 0; }
.calce-botones .boton.confirmar { margin-top: 0; }

/* Avisos y resumen */
.aviso-borrador { background: #fff; border: 1px solid var(--linea); border-radius: 8px; padding: .7rem .9rem; margin-bottom: .6rem; }
.aviso-elegir { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; }
.aviso-elegir input { width: 1.1rem; height: 1.1rem; margin-top: .2rem; }
.aviso-borrador .gris-texto { margin: .3rem 0 0 1.7rem; font-size: .9rem; }
.aviso-borrador details { margin-left: 1.7rem; }
pre.resumen { white-space: pre-wrap; background: #fff; border: 1px solid var(--linea); border-radius: 8px; padding: 1rem; font: inherit; }

/* 2. Tus tareas: una pregunta a la vez, con letra grande y botones grandes */
.bandeja { max-width: 860px; font-size: 1.12rem; }
.saludo { font-size: 1.2rem; margin: 0 0 1rem; }
.tarea {
  background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; box-shadow: var(--sombra);
  padding: 1.6rem 1.7rem;
}
.tarea h1 { font-size: 1.65rem; margin-bottom: .6rem; }
.tarea-texto { font-size: 1.15rem; margin: 0 0 .6rem; }
.tarea-ficha { color: var(--suave); font-size: .98rem; margin: 0 0 .6rem; }
.tarea-consejo {
  background: var(--azul-fondo); border: 1px solid var(--azul-borde); color: #123a66;
  border-radius: var(--radio); padding: .65rem .9rem; margin: .4rem 0 0;
}
.opciones { display: grid; gap: .7rem; margin: 1.3rem 0 .4rem; }
.opcion-form { margin: 0; }
.opcion {
  display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; width: 100%;
  background: var(--papel); color: var(--tinta); border: 2px solid var(--azul-borde); border-radius: 12px;
  padding: .95rem 1.2rem; font: inherit; font-size: 1.15rem; font-weight: 600; text-align: left; cursor: pointer;
}
.opcion:hover { background: var(--azul-fondo); border-color: var(--accion); text-decoration: none; }
.opcion.recomendada { background: var(--verde); border-color: var(--verde); color: #fff; }
.opcion.recomendada:hover { background: #155c35; }
.opcion:focus-visible, .opcion.recomendada:focus { outline: 3px solid var(--accion); outline-offset: 3px; }
.sello { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .85; }
.opcion-form.con-campo {
  display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap;
  border: 2px solid var(--linea); border-radius: 12px; padding: .8rem 1rem;
}
.campo-opcion { flex: 1; min-width: 14rem; display: flex; flex-direction: column; gap: .35rem; font-weight: 600; }
.campo-opcion input, .campo-opcion select {
  font: inherit; font-weight: 400; padding: .6rem .75rem; border: 1px solid #c5ccd8; border-radius: 8px; width: 100%;
}
.opcion.chica { width: auto; padding: .65rem 1.2rem; }
.tarea-pie { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.tarea-pie form { margin: 0; }
.tarea.terminado { border-color: var(--verde-borde); background: var(--verde-fondo); }
.atajos, .otras-cosas, .que-viene { margin-top: 1.25rem; }
.atajos p, .otras-cosas p { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: .75rem 1rem; margin: 0 0 .6rem; }
.que-viene summary, .otras-cosas summary { cursor: pointer; font-weight: 600; }
.que-viene ul, .otras-cosas ul { margin: .5rem 0; }
.opcion .porque { font-weight: 400; font-size: .92rem; opacity: .85; }

/* Los meses en el sistema (paso 8) */
.sistema-meses { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1.1rem; margin-top: 1.25rem; }
.sistema-meses h2 { margin-bottom: .3rem; }
.botones-sistema { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.botones-sistema form { margin: 0; }
.resumen-fila { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1.1rem; margin-bottom: 1rem; }
.datos-carta-form h2 { margin: 0; }
.datos-carta-form { margin-bottom: 1rem; }
.meses-reajuste { flex-wrap: wrap; gap: .6rem; }
.falta-ipc td { background: var(--amarillo-fondo); }

/* Comprobantes y boletas subidos, y lo que falta del mes (paso 9) */
.lista-cartolas li:has(.ok-documento) { flex-wrap: wrap; }
.lista-cartolas li span { overflow-wrap: anywhere; }
.ok-documento { flex-basis: 100%; margin: .1rem 0 0; color: var(--verde); font-size: .88rem; }
.pedidos { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1.1rem; margin-top: 1.25rem; }
.pedidos h2 { margin-bottom: .3rem; }
.pedidos summary { cursor: pointer; font-weight: 600; margin-top: .4rem; }
.lista-pedidos { margin: .4rem 0 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
.lista-pedidos li { overflow-wrap: anywhere; }

/* El asistente (paso 11) */
.chat-avisos { background: var(--azul-fondo, #eef4fb); border: 1px solid var(--linea); border-radius: var(--radio); padding: .6rem 1rem; margin: 1rem 0; }
.chat-avisos p { margin: .25rem 0; }
.chat-mensajes { display: grid; gap: .8rem; margin: 1rem 0; }
.chat-mensaje { max-width: 92%; }
.chat-mensaje.giovana { justify-self: end; background: var(--accion); color: #fff; border-radius: 14px 14px 4px 14px; padding: .55rem .9rem; }
.chat-mensaje.giovana .chat-texto { margin: 0; }
.chat-mensaje.asistente { justify-self: start; }
.chat-mensaje.asistente > .chat-texto { background: var(--papel); border: 1px solid var(--linea); border-radius: 14px 14px 14px 4px; padding: .55rem .9rem; margin: 0 0 .4rem; display: inline-block; }
.chat-tarjeta { background: var(--papel); border: 1px solid var(--linea); border-left-width: 5px; border-radius: var(--radio); padding: .7rem 1rem; margin-top: .4rem; box-shadow: var(--sombra); }
.chat-tarjeta.borde-verde { border-left-color: var(--verde); }
.chat-tarjeta.borde-amarillo { border-left-color: var(--amarillo-borde); }
.chat-tarjeta.borde-rojo { border-left-color: var(--rojo-borde); }
.chat-tarjeta h3 { margin: 0 0 .3rem; font-size: 1.02rem; }
.chat-tarjeta ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .2rem; }
.chat-tarjeta li { overflow-wrap: anywhere; }
.chat-acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.chat-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; }
.chat-ejemplos { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.chip-ejemplo { background: var(--papel); border: 1px solid var(--linea); border-radius: 999px; padding: .4rem .8rem; font: inherit; cursor: pointer; text-align: left; }
.chip-ejemplo:hover { border-color: var(--accion); }
.chat-pregunta { display: flex; gap: .5rem; position: sticky; bottom: 0; background: var(--fondo, #f4f5f7); padding: .6rem 0; }
.chat-pregunta input { flex: 1; min-width: 0; padding: .7rem .9rem; border: 1px solid var(--linea); border-radius: var(--radio); font: inherit; font-size: 1.05rem; }
@media (max-width: 560px) { .chat-pregunta { flex-direction: column; } .chat-mensaje { max-width: 100%; } }
.chat-texto p { margin: .2rem 0; }
.chat-texto ul { margin: .25rem 0; padding-left: 1.2rem; }
.chat-mensaje.asistente > .chat-texto { max-width: 100%; }
.encabezado-chat { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.boton-nueva { display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px; }
.boton-nueva span { font-weight: 700; }
.chat-nueva-abajo { display: flex; justify-content: center; margin-top: .6rem; }

/* Pestañas de la revisión y atajos del resumen */
.pestanas .separador { width: 1px; background: var(--linea); margin: .2rem .35rem; align-self: stretch; }
.atajos-fila { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }

/* En el celular las pestañas van en una fila que se desliza (al final: tiene que ganarle a .pestanas) */
@media (max-width: 620px) {
  .pestanas { flex-wrap: nowrap; overflow-x: auto; padding: 0 1rem .3rem; margin-left: -1rem; margin-right: -1rem; }
  .pestanas a { white-space: nowrap; flex-shrink: 0; }
  .pestanas .separador { display: none; }
}