/* Etapa 2 del rediseño: estilos propios de las pantallas del grupo "operacion".
   Solo reglas que el sistema de componentes de app.css no cubre. */

/* ---------- solicitudes: la cabecera de cada tarjeta ----------
   El anuncio y las fechas a la izquierda, el canal como píldora a la derecha
   (maqueta Solicitudes). */
.sol-cuenta{font-size:var(--t-md); font-weight:600; margin:var(--e3) 0 var(--e2)}
.sol-cab{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--e2)}
.sol-titulo{margin:0}
.sol-titulo strong{font-size:var(--t-lg); font-weight:600; letter-spacing:-.01em}
.sol-fechas{color:var(--mute); font-size:var(--t-md); margin-left:var(--e1)}

/* ---------- detalle de reserva: migas y cabecera ---------- */
.res-volver{margin:0 0 var(--e2); font-size:var(--t-md)}
.res-volver a{color:var(--mute); text-decoration:none}
.res-volver a:hover{color:var(--ink); text-decoration:underline}
.res-cab{display:flex; align-items:center; flex-wrap:wrap; gap:var(--e2)}
.res-cab h1{margin:0}

/* ---------- detalle de reserva: los dos documentos fiscales ---------- */
.doc-res{border:1px solid var(--line); border-radius:var(--r-md); padding:var(--e2) var(--e3); margin-bottom:var(--e2)}
.doc-res.pend{border-style:dashed}
.doc-res-cab{display:flex; align-items:center; justify-content:space-between; gap:var(--e2); flex-wrap:wrap}
.doc-res p{margin:var(--e1) 0}
.doc-res-monto strong{font-size:var(--t-lg)}
.doc-res-acciones{display:flex; gap:var(--e2); align-items:center; flex-wrap:wrap}
.doc-res-acciones form{margin:0}

/* ---------- tareas: hoy / esta semana como control segmentado ----------
   `.cal-nav a` (la flecha de mes) le ganaría al segmentado en cascada. */
.cal-nav .segmentado > a{background:none; border:0; border-radius:var(--r-pill); padding:0 16px;
  color:var(--mute); font-size:var(--t-sm)}
.cal-nav .segmentado > a:hover{color:var(--ink)}
.cal-nav .segmentado > a.on{background:var(--accent); color:#fff}
/* `main a:not(.btn):not(...)` (app.css) tiene más especificidad que cualquier selector de acá:
   pinta de tinta y subraya todo enlace del contenido. */
.cal-nav .segmentado > a{text-decoration:none !important}
.cal-nav .segmentado > a.on{color:#fff !important}

/* ---------- bloque 8: canales, vista Semana, hoy y tareas por propiedad ----------
   Un color por canal (maqueta Operacion: Airbnb océano, Booking ámbar, directa
   verde, Vrbo azul). Es una variable `--canal-*` y no un color por clase, para
   que celda, barra, punto y leyenda salgan del mismo valor. El color nunca es
   el único portador: la leyenda lo rotula y cada barra/celda lleva el canal en
   su `title`. */
.canal-airbnb{--canal-bg:rgba(16,68,79,.14); --canal-line:var(--ocean-700); --canal-ink:var(--ocean-800)}
.canal-booking{--canal-bg:rgba(201,138,16,.22); --canal-line:var(--amber-800); --canal-ink:var(--amber-950)}
.canal-vrbo{--canal-bg:rgba(45,110,130,.16); --canal-line:var(--info); --canal-ink:var(--ocean-800)}
.canal-directa{--canal-bg:var(--ok-bg); --canal-line:var(--ok); --canal-ink:var(--ok)}
.canal-otro{--canal-bg:rgba(27,38,36,.08); --canal-line:var(--mute); --canal-ink:var(--ink)}
table.cal td.occ[class*="canal-"]{--occ-bg:var(--canal-bg); --occ-line:var(--canal-line)}
.mes-barra[class*="canal-"]{background:var(--canal-bg); color:var(--canal-ink)}

.op-leyenda{list-style:none; display:flex; flex-wrap:wrap; gap:var(--e1) 18px; margin:0 0 var(--e2); padding:0;
  font-size:var(--t-sm); color:var(--mute)}
.op-leyenda li{display:flex; align-items:center; gap:var(--e1)}
.op-punto{width:12px; height:12px; border-radius:50%; background:var(--canal-bg); border:2px solid var(--canal-line)}

.op-nav .segmentado{margin-right:var(--e2)}

/* KPIs de hoy: cuatro tarjetas con el ícono a la derecha (maqueta Operación). */
.op-kpis{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:20px; margin:0 0 20px}
.op-kpi{display:flex; align-items:center; justify-content:space-between; gap:var(--e2); background:var(--bg);
  border-radius:var(--r-lg); box-shadow:var(--sh-float); padding:18px 22px}
.op-kpi span{display:block; color:var(--mute); font-size:var(--t-sm)}
.op-kpi strong{font-size:var(--cifra); font-weight:600; font-variant-numeric:tabular-nums; line-height:1.2}
.op-kpi.warn strong{color:var(--warn)}
.op-kpi small{font-size:var(--t-sm); font-weight:400; color:var(--mute)}
.op-kpi-ic{flex:none; width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:var(--brand-tint); color:var(--accent)}
.op-kpi.warn .op-kpi-ic{background:var(--warn-bg); color:var(--warn)}
.op-kpi-ic .ico{width:20px; height:20px}

/* Cabecera de la pantalla: título a la izquierda, controles a la derecha. */
.op-cab{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:var(--e4)}
.op-cab-t{flex:1 1 300px; min-width:0}
.op-cab-t h1{margin:0}
.op-cab-t .sub{margin:4px 0 0}
.op-cab-acc{display:flex; align-items:center; gap:var(--e3); flex-wrap:wrap}
.op-pager{display:inline-flex; align-items:center; gap:var(--e1)}
.op-pager .btn-icono{font-size:20px; line-height:1; text-decoration:none}
.op-cab-acc .segmentado > a{text-decoration:none !important}
.op-cab-acc .segmentado > a.on{color:#fff !important}

/* El calendario en una tarjeta: título + leyenda arriba, nota abajo. */
.op-cal{padding:0; overflow:hidden; margin-bottom:20px}
.op-cal-cab{display:flex; align-items:center; justify-content:space-between; gap:var(--e3); flex-wrap:wrap; padding:20px 24px 12px}
.op-cal-cab .op-leyenda{margin:0}
.op-cal-pie{margin:0; padding:12px 24px 16px}
.op-cal .cal-scroll{margin:0; border:0; border-radius:0}

/* Vista Semana: siete columnas iguales; la barra se posiciona en % de la semana
   (geometría de `barras_por_semana`), y el alto del carril crece con los carriles. */
.op-sem{min-width:640px}
.op-sem-cab, .op-sem-fila{display:grid; grid-template-columns:190px 1fr; align-items:stretch}
.op-sem-cab{background:var(--soft); border-bottom:1px solid var(--line-strong)}
.op-sem-fila{border-top:1px solid var(--line-strong)}
.op-sem-cab:first-child{border-top:0}
.op-sem-prop{display:flex; align-items:center; gap:var(--e1); padding:8px var(--e3); font-size:var(--t-md);
  color:var(--ink); text-decoration:none; min-width:0}
.op-sem-prop span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.op-sem-dias{display:grid; grid-template-columns:repeat(var(--dias, 7), 1fr)}
.op-sem-dias span{display:flex; flex-direction:column; align-items:center; padding:6px 2px; text-align:center; text-transform:uppercase; letter-spacing:.03em; font-size:var(--t-xs); font-size:var(--t-sm); color:var(--mute);
  border-left:1px solid var(--line)}
.op-sem-dias b{color:var(--ink); font-weight:600; font-size:var(--t-sm)}
.op-sem-dias .finde{background:var(--soft)}
.op-sem-dias .hoy{box-shadow:inset 0 -2px 0 var(--accent)}
.op-sem-lane{position:relative; height:calc(var(--carriles, 1) * 36px + 8px);
  background:repeating-linear-gradient(to right, transparent 0, transparent calc(100% / var(--dias, 7) - 1px),
    var(--line) calc(100% / var(--dias, 7) - 1px), var(--line) calc(100% / var(--dias, 7)))}
.op-barra{position:absolute; top:calc(4px + var(--carril, 0) * 36px); height:30px; box-sizing:border-box;
  background:var(--canal-bg); color:var(--canal-ink); border-left:3px solid var(--canal-line);
  border-radius:var(--r-sm); font-size:var(--t-sm); line-height:30px}
.op-barra span{display:block; padding:0 8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.op-barra i{font-style:normal; opacity:.75}
.op-limpieza{position:absolute; bottom:2px; width:calc(100% / var(--dias, 7)); text-align:center; font-size:11px; color:var(--mute)}

/* Movimientos de hoy */
.op-hoy{margin-top:var(--e3)}
.op-mov{list-style:none; margin:0; padding:0}
.op-mov li{display:grid; grid-template-columns:56px auto 1fr auto; align-items:center; gap:var(--e2);
  padding:var(--e2) 0; border-top:1px solid var(--line)}
.op-mov li:first-child{border-top:0}
.op-mov-hora{font-variant-numeric:tabular-nums; font-weight:600}
.op-mov .dim{color:var(--mute); font-size:var(--t-sm)}

/* Tareas agrupadas por propiedad */
.tareas-grupo{margin:0 0 var(--e4, 24px)}
.tareas-grupo-cab{display:flex; align-items:baseline; gap:var(--e2); margin:0 0 var(--e2); font-size:var(--t-lg); font-weight:600}
.tareas-grupo-cuenta{font-size:var(--t-sm); font-weight:400; color:var(--mute)}

/* ---------- reservas: vistas guardadas, chips de filtro y columnas ----------
   Bloque 5 de docs/96 (maqueta Reservas). Todo con tokens de app.css. */
.rv-layout{display:grid; grid-template-columns:220px minmax(0,1fr); gap:24px; align-items:start}
.rv-vistas{background:var(--bg); border-radius:var(--r-lg); box-shadow:var(--sh-card); padding:16px 12px}
.rv-vistas .eyebrow{font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--mute); padding:12px 8px 6px}
.rv-vistas .eyebrow:first-child{padding-top:0}
.rv-vista{display:block; padding:7px 10px; border-radius:10px; font-size:13px; font-weight:500;
  color:var(--ink); text-decoration:none !important; overflow-wrap:anywhere}
.rv-vista:hover{background:var(--crema)}
.rv-vista.on{background:var(--brand-tint); color:var(--ocean-700); font-weight:600}
.rv-vista-fila{display:flex; align-items:center; gap:4px}
.rv-vista-fila .rv-vista{flex:1}
.rv-vista-fila form{margin:0}
.rv-x{border:0; background:transparent; color:var(--mute); cursor:pointer; width:24px; height:24px; border-radius:50%; font-size:16px; line-height:1; padding:0}
.rv-x:hover{background:var(--crema); color:var(--ink)}
.rv-guardar{display:flex; flex-direction:column; gap:8px; margin-top:10px; padding:0 4px}
.rv-chips{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:10px 0}
.rv-chip{display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 6px 0 12px; border:1px solid var(--line-input);
  border-radius:var(--r-pill); background:var(--bg); font-size:12.5px; font-weight:600}
.rv-chip a{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%;
  background:var(--crema); text-decoration:none !important; color:var(--ink)}
.rv-panel{position:relative}
.rv-panel > summary{list-style:none; cursor:pointer}
.rv-panel > summary::-webkit-details-marker{display:none}
.rv-panel-cuerpo{position:absolute; z-index:5; top:calc(100% + 6px); left:0; min-width:240px; display:flex; flex-direction:column; gap:10px;
  background:var(--bg); border-radius:var(--r-md); box-shadow:var(--sh-lift); padding:14px}
.rv-panel-cuerpo label{display:flex; flex-direction:column; gap:4px; font-size:12.5px; font-weight:600}
.rv-panel-cuerpo label.rv-check{flex-direction:row; align-items:center; gap:8px; font-weight:500}
@media (max-width:900px){.rv-layout{grid-template-columns:1fr}}

/* ---------- Hoy: tablero (maqueta Main) ----------
   Una columna de tarjetas con 20px entre cada una y 24px de aire adentro, como
   el artboard. `.hoy` apila todo; las dos grillas de 2fr/1fr (`.hoy-dos`) llevan
   la bandeja y la agenda a la izquierda y la columna lateral a la derecha. */
.hoy{display:flex; flex-direction:column; gap:20px}
.hoy .card{margin-bottom:0; padding:24px}
.hoy .hoy-cab{margin-bottom:0}
.hoy-cab-acc{display:flex; align-items:center; gap:14px; flex-wrap:wrap}

/* La franja del freno del operador. */
.op-banda{display:flex; align-items:center; gap:12px; border-radius:var(--r-md); padding:14px 20px;
  font-weight:600; font-size:var(--t-md); background:var(--warn-bg); color:var(--warn)}

/* La franja fiscal */
.hoy .card.hoy-fiscal{display:flex; align-items:center; gap:16px; padding:18px 24px}
.hoy-fiscal-ic{flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center}
.hoy-fiscal-ic .ico{width:22px; height:22px}
.hoy-fiscal-ic.ok{background:var(--ok-bg); color:var(--ok)}
.hoy-fiscal-ic.warn{background:var(--warn-bg); color:var(--warn)}
.hoy-fiscal-t{flex:1; min-width:0}
.hoy-fiscal-t strong{display:block; font-size:var(--t-lg); font-weight:600}
.hoy-fiscal-t span{color:var(--mute); font-size:var(--t-sm)}
.hoy-fiscal .lnk{white-space:nowrap}

/* Las cifras: cuatro de ingresos/IVA y tres de lo que ya existía. 27px / 600 como
   la maqueta; `.rp-kpi` es de Reportes y no se toca. */
.hoy .rp-kpis, .hoy-tiles{display:grid; gap:20px; margin:0}
.hoy .rp-kpis{grid-template-columns:repeat(auto-fit, minmax(210px, 1fr))}
.hoy-tiles{grid-template-columns:repeat(auto-fit, minmax(240px, 1fr))}
.hoy .rp-kpi{padding:20px 22px; gap:6px}
.hoy .rp-kpi .cifra{font-size:var(--cifra); font-weight:600}
.hoy .rp-kpi .cifra-rot{font-size:var(--t-xs); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--mute)}

/* Gráficos */
.hoy .hoy-graficos{margin:0; gap:20px}

/* Grilla 2fr/1fr de la bandeja, la agenda y sus columnas laterales. */
.hoy-dos{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:20px; align-items:start}
.hoy-dos-solo{grid-template-columns:minmax(0,1fr)}
.hoy-lado{display:flex; flex-direction:column; gap:20px; min-width:0}
.hoy-dos-solo > .hoy-lado{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr))}
.hoy-dos-solo > .hoy-al-dia{margin:0}
.hoy-lado .pt-dia-vacio{margin:0}
.hoy .rp-t{font-size:var(--t-lg); margin:0}

/* La bandeja: UNA tarjeta, un bloque por cola. Los `pt-bloque` de app.css son
   tarjetas por sí solos; acá van sin sombra ni fondo y se separan con una línea. */
.hoy-bandeja-cab{margin-bottom:8px}
.hoy-bandeja-cab .hint{margin:4px 0 0}
.hoy-bandeja .pt-bloque{background:none; box-shadow:none; border-radius:0; overflow:visible;
  border-top:1px solid var(--line); padding:18px 0 4px}
.hoy-bandeja .pt-bloque:first-of-type{border-top:0; padding-top:10px}
.hoy-bandeja .pt-bloque-cab, .hoy-bandeja .pt-bloque-cab.bad, .hoy-bandeja .pt-bloque-cab.warn{
  display:grid; grid-template-columns:34px minmax(0,1fr); column-gap:12px; align-items:start;
  padding:0; border:0; background:none; margin-bottom:6px}
.hoy-bandeja .pt-bloque-cab > .blq-ic{grid-row:1 / span 2}
.hoy-bandeja .pt-bloque-cab > strong{grid-column:2; font-size:var(--t-md); display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.hoy-bandeja .pt-bloque-cab > .hint{grid-column:2; margin:2px 0 0}
.hoy-bandeja .pt-bloque-cab:not(:has(.blq-ic)) > strong, .hoy-bandeja .pt-bloque-cab:not(:has(.blq-ic)) > .hint{grid-column:1 / -1}
.blq-ic{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none}
.blq-ic .ico{width:18px; height:18px}
.blq-ic.warn{background:var(--warn-bg); color:var(--warn)}
.blq-ic.info{background:var(--info-bg); color:var(--info)}
.blq-ic.err{background:var(--err-bg); color:var(--err)}
.blq-ic.ok{background:var(--ok-bg); color:var(--ok)}

/* Cada fila de una cola: nombre y motivo a la izquierda, espera y botón a la derecha. */
.hoy-f{display:flex; align-items:center; gap:12px; padding:10px 0 10px 46px; border-top:1px dashed var(--line)}
.hoy-f:first-of-type{border-top:0}
.hoy-f-t{flex:1; min-width:0; font-size:var(--t-sm)}
.hoy-f-t b{font-weight:600}
.hoy-f-t span{color:var(--mute)}
.hoy-f-t .hoy-f-m{display:block; margin-top:2px; font-size:12px; color:var(--warn); font-weight:500}
.hoy-f-t .hoy-f-m.bad{color:var(--err)}
.hoy-f-esp{font-size:12px; color:var(--mute); white-space:nowrap}
.hoy-f-esp.hot{color:var(--err); font-weight:600}
.hoy-f .btn-chico{flex:none}

/* Avisos de canales y mensajes: las filas heredadas (`.paso`) como los cuadros de la maqueta. */
.hoy-bandeja .paso{margin:8px 0 8px 46px; border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px; background:var(--bg)}
.hoy-bandeja .paso > strong{display:block; font-size:var(--t-md); font-weight:600}
.hoy-bandeja .paso .hint{margin:2px 0 0}
.hoy-bandeja .paso form{display:flex; justify-content:flex-end; margin:10px 0 0}

/* Columna lateral: IVA y renta como tarjetas con la cifra arriba (maqueta). */
.hoy-lado .pt-bloque{background:var(--bg); border-radius:var(--r-lg); box-shadow:var(--sh-float); padding:24px; overflow:visible}
.hoy-lado .pt-bloque-cab, .hoy-lado .pt-bloque-cab.warn, .hoy-lado .pt-bloque-cab.bad{padding:0; border:0; background:none; margin-bottom:6px}
.hoy-lado .pt-bloque-cab > strong{display:block; font-size:var(--t-lg)}
.hoy-lado-cifra{display:block; margin-top:6px}
.hoy-lado .cmp-fila{padding:12px 0; border-top:1px solid var(--line)}
.hoy-lado .cmp-fila:first-of-type{border-top:0}
.hoy-lado .pt-bloque-pie{padding:10px 0 0; border:0; background:none; display:flex; justify-content:flex-end}

/* La agenda de la semana */
.hoy-agenda-lista{list-style:none; margin:12px 0 0; padding:0}
.hoy-agenda-lista li{display:flex; align-items:center; gap:14px; padding:14px 0; border-top:1px solid var(--line)}
.hoy-agenda-lista li:first-child{border-top:0; padding-top:4px}
.hoy-fecha{flex:none; width:46px; height:46px; border-radius:12px; background:var(--brand-tint); color:var(--accent);
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.1}
.hoy-fecha b{font-size:17px; font-weight:700}
.hoy-fecha i{font-style:normal; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em}
.hoy-agenda-t{flex:1; min-width:0}
.hoy-agenda-t strong{display:block; font-weight:600; font-size:var(--t-md)}
.hoy-agenda-t span{color:var(--mute); font-size:var(--t-sm)}
.hoy-mov{font-size:var(--t-sm); font-weight:600; color:var(--mute); white-space:nowrap}
.hoy-mov.in{color:var(--ok)}
.hoy-mov.out{color:var(--accent)}
.hoy-agenda .rp-pie{margin-top:12px}

@media (max-width:900px){
  .hoy-dos{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .hoy .card{padding:18px}
  .hoy .card.hoy-fiscal{flex-wrap:wrap; padding:16px 18px}
  .hoy-fiscal .lnk{flex-basis:100%; padding-left:60px}
  .hoy-f{flex-wrap:wrap; padding-left:0}
  .hoy-f-t{flex-basis:100%}
  .hoy-bandeja .paso{margin-left:0}
  .hoy-agenda-lista li{flex-wrap:wrap}
  .hoy-agenda-t{flex-basis:calc(100% - 70px)}
}

/* Cabecera del gráfico de ingresos: título y leyenda. */
.hoy-graf-cab{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap}
.hoy-leyenda{display:flex; gap:16px; align-items:center; font-size:var(--t-sm); color:var(--mute)}
.hoy-leyenda span{display:inline-flex; align-items:center; gap:6px}
.hoy-sw{width:10px; height:10px; border-radius:3px; display:inline-block}
.hoy-sw.actual{background:var(--chart-1)}
.hoy-sw.previo{background:color-mix(in srgb, var(--chart-1) 30%, transparent)}
/* "Hoy no hay llegadas ni salidas": una tarjeta de una línea, no un texto suelto. */
.hoy-lado .pt-dia-vacio{background:var(--bg); border-radius:var(--r-lg); box-shadow:var(--sh-float);
  padding:20px 24px; color:var(--ink); font-size:var(--t-md)}

/* IVA por emisor y renta en la columna lateral: el emisor arriba, la glosa a la
   izquierda y el monto a la derecha (la fila `.rr` de la maqueta). */
.hoy-lado .cmp-fila:hover{background:none}
.hoy-lado .pt-iva-fila .cmp-linea{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; align-items:baseline}
.hoy-lado .pt-iva-fila .cmp-id{grid-column:1 / -1; font-weight:600}
.hoy-lado .pt-iva-fila .pt-ventas{grid-column:1; order:0; flex:none; white-space:normal}
.hoy-lado .pt-iva-fila .pt-debito{grid-column:2; font-size:var(--t-lg)}

/* ---------- Reservas: cabecera, fila de búsqueda/chips, huésped y origen (maqueta Reservas) ---------- */
/* El freno del operador va arriba de todo, a todo el ancho (también en Reservas). */
.op-banda.warn{background:var(--warn-bg); color:var(--warn)}
.op-banda{margin:0 0 var(--e4)}
.hoy .op-banda{margin:0}
.rv-cab{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:var(--e3)}
.rv-cab-t{flex:1 1 280px; min-width:0}
.rv-cab-t h1{margin:0}
.rv-cab-t .sub{margin:4px 0 0}
.rv-acts{display:flex; align-items:center; gap:var(--e2); flex-wrap:wrap}
.rv-acts .exportar{margin:0}
.rv-chips .buscador{margin:0; flex:0 1 300px}
.rv-chips .buscador input[type="search"]{max-width:none}
.rv-chips #buscador-estado{display:contents}
.rv-chips #buscador-estado .hint{margin:0}
.rv-cuenta{margin:0 0 var(--e2)}
.rv-huesped{display:flex; align-items:center; gap:10px}
.rv-ini{flex:none; width:32px; height:32px; border-radius:50%; background:var(--brand-tint); color:var(--accent);
  display:grid; place-items:center; font-size:var(--t-xs); font-weight:700}
.rv-nm{display:block; font-weight:600}
.rv-sub{display:block; color:var(--mute); font-size:12px}
.rv-origen{display:inline-flex; align-items:center; gap:8px}
.rv-dot{width:8px; height:8px; border-radius:50%; background:var(--canal-line, var(--mute)); flex:none}
.rv-leyenda{margin-top:var(--e4)}
.rv-leyenda .eyebrow{font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--mute)}
.rv-leyenda-pills{display:flex; flex-wrap:wrap; gap:var(--e1) var(--e2); margin-top:var(--e2)}
.rv-lista td{white-space:nowrap}
.rv-lista td:has(.rv-huesped){white-space:normal}
.rv-layout > *{min-width:0}
@media (max-width:900px){
  .rv-layout{grid-template-columns:minmax(0,1fr)}
  /* En teléfono la lista va primero y las vistas debajo: antes de ver una sola
     reserva había que pasar medio alto de pantalla de vistas guardadas. */
  .rv-vistas{order:2}
  .rv-chips .buscador{flex:1 1 100%}
}

/* El mes ocupa todo el ancho de la fila: 28-31 columnas, con scroll en pantallas angostas. */
.op-mes{min-width:calc(190px + var(--dias, 30) * 30px)}
.op-mes .op-barra{font-size:12px}
.op-mes .op-sem-dias span{font-size:10px}
.op-mes .op-sem-prop{padding-left:var(--e4)}

/* Hoy + Tareas de hoy, lado a lado. */
.op-bot{display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:20px; align-items:start}
.op-bot .card{margin:0}
.op-card-cab{display:flex; align-items:baseline; justify-content:space-between; gap:var(--e2); margin-bottom:var(--e2)}
.op-tarea-lista{list-style:none; margin:0; padding:0}
.op-tarea-lista li{display:flex; align-items:center; gap:var(--e3); padding:12px 0; border-top:1px solid var(--line)}
.op-tarea-lista li:first-child{border-top:0}
.op-tarea-t{flex:1; min-width:0}
.op-tarea-quien{display:inline-flex; align-items:center; gap:8px; font-size:var(--t-sm); color:var(--mute)}
.op-card-pie{margin:var(--e2) 0 0; text-align:right}
.op-cab-acc .segmentado > a{background:none; border:0; border-radius:var(--r-pill); padding:0 16px; color:var(--mute); font-size:var(--t-sm)}
.op-cab-acc .segmentado > a:hover{color:var(--ink)}
.op-cab-acc .segmentado > a.on{background:var(--accent)}
@media (max-width:640px){
  .op-kpis{grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px}
  .op-kpi{padding:14px 16px}
  .op-kpi-ic{display:none}
  .op-cal-cab{padding:16px 18px 8px}
  .op-cal-pie{padding:10px 18px 14px}
}

/* ---------- Tareas (maqueta Tareas) ---------- */
/* La fecha o el rango con sus flechas, bajo la cabecera. */
.op-rango{display:flex; flex-wrap:wrap; align-items:center; gap:var(--e2); margin:0 0 var(--e3)}
.op-rango strong{min-width:150px; text-align:center}
.op-rango .btn-icono{font-size:20px; line-height:1; text-decoration:none}
/* La cabecera de cada propiedad: tile + nombre + cuenta. */
.tareas-grupo{margin:0 0 var(--e5)}
.tareas-grupo-cab{align-items:center}
.tareas-grupo-cab .tile{flex:none}
.tareas-lista .tarea-card{padding:24px}
/* Los bloques: asignado | costo | fotos, la columna de fotos más ancha a la derecha. */
.tarea-bloques{padding-top:var(--e3); border-top:1px solid var(--line)}
/* "Agregar fotos": el botón punteado de la maqueta, en minúsculas normales (el
   `label` global es de rótulo en mayúsculas). */
.evid-boton{text-transform:none; letter-spacing:0; border-style:dashed; border-color:var(--line-input);
  border-radius:var(--r-pill); background:transparent; padding:7px 16px; font-size:var(--t-sm)}
.evid-foto img{width:56px; height:56px}

/* ---------- Detalle de reserva (maqueta ReservaDetalle) ---------- */
.rd-cab{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:var(--e3)}
.rd-cab-t{flex:1 1 320px; min-width:0}
.rd-cab .res-cab h1{margin:0}
.rd-cab .sub{margin:4px 0 0}
/* El recorrido de la estadía: cinco pasos con su punto y la fecha debajo. */
.rd-pasos{list-style:none; margin:0 0 20px; padding:16px 24px; display:flex; gap:var(--e3); flex-wrap:wrap;
  background:var(--bg); border-radius:var(--r-lg); box-shadow:var(--sh-float)}
.rd-pasos li{flex:1 1 140px; display:flex; align-items:center; gap:10px; color:var(--mute); font-size:var(--t-sm); font-weight:500}
.rd-pasos small{display:block; font-size:var(--t-xs); font-weight:400; color:var(--mute)}
.rd-dot{flex:none; width:26px; height:26px; border-radius:50%; border:2px solid var(--line-strong);
  display:grid; place-items:center; font-size:var(--t-xs); font-weight:700; color:#fff; line-height:1}
.rd-pasos .done{color:var(--ink)}
.rd-pasos .done .rd-dot{background:var(--ok); border-color:var(--ok)}
.rd-pasos .cur .rd-dot{background:var(--accent); border-color:var(--accent)}
.rd-pasos .cur{font-weight:600}
/* Dos columnas: la reserva y sus mensajes a la izquierda; documentos, datos del
   huésped y cancelación a la derecha. */
.rd-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:20px; align-items:start}
.rd-col{display:flex; flex-direction:column; gap:20px; min-width:0}
.rd-col > .card{margin:0; padding:24px}
.rd-col .card h2{margin:0 0 var(--e2); font-size:var(--t-lg)}
@media (max-width:900px){
  .rd-grid{grid-template-columns:minmax(0,1fr)}
  .rd-pasos{padding:14px 16px}
}

/* ---------- Mensajes: bandeja + conversación (maqueta Mensajes) ---------- */
.msg-bandeja{padding:0; overflow:hidden; margin:0 0 20px}
.msg-th{display:block; padding:14px 20px; border-top:1px solid var(--line); color:var(--ink); text-decoration:none !important; font-weight:400}
.msg-th:first-child{border-top:0}
.msg-th:hover{background:var(--soft)}
.msg-th.on{background:var(--brand-tint)}
.msg-th-l1{display:flex; justify-content:space-between; gap:var(--e2); align-items:baseline}
.msg-th-nm{font-weight:600; font-size:var(--t-md)}
.msg-th-fe{color:var(--mute); font-size:12px; white-space:nowrap}
.msg-th-l2{display:block; color:var(--mute); font-size:var(--t-sm); margin-top:2px}
.msg-th-pv{display:block; margin-top:4px; font-size:var(--t-sm); color:var(--mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* La lista abierta sin conversación: la bandeja a todo el ancho; con un hilo,
   la bandeja a la izquierda, la conversación en el medio y el panel de la reserva. */
.msg-split{display:grid; grid-template-columns:minmax(260px, 330px) minmax(0, 1fr) 270px; gap:20px; align-items:start}
.msg-split > .msg-bandeja{margin:0}
.msg-split > .card.msg-hilo{margin:0; padding:24px}
.msg-split .hilo-panel{flex:none; width:auto; margin:0}
.msg-nombre{margin:0; font-size:var(--t-h2)}
.msg-volver{display:none}
.msg-hilo .chat{max-width:none}
.msg-hilo .responder{max-width:none}
@media (max-width:1180px){
  .msg-split{grid-template-columns:minmax(240px, 300px) minmax(0, 1fr)}
  .msg-split .hilo-panel{grid-column:1 / -1}
}
@media (max-width:900px){
  .msg-split{grid-template-columns:minmax(0, 1fr)}
  /* En el teléfono se ve UNA cosa a la vez: la conversación abierta, con su
     enlace de vuelta a la bandeja (que en escritorio va a la izquierda). */
  .msg-split > .msg-bandeja{display:none}
  .msg-volver{display:block}
}
/* Chromium reciente esconde el contenido de un `<details>` cerrado en su propio
   `::details-content`, y la regla de app.css (que fuerza el contenido a los
   hijos) ya no alcanza: sin esto el panel de la reserva quedaba vacío en escritorio. */
@media (min-width:861px){
  .hilo-panel::details-content{content-visibility:visible; display:block}
}
.msg-split .hilo-panel{background:var(--bg); border:0; border-radius:var(--r-lg); box-shadow:var(--sh-float); padding:20px 24px}

/* ---------- Importar (maqueta Importar) ---------- */
.imp-pasos{list-style:none; margin:14px 0 20px; padding:0; display:flex; align-items:center; gap:var(--e3); flex-wrap:wrap}
.imp-pasos li{display:flex; align-items:center; gap:10px; color:var(--mute); font-size:var(--t-md); font-weight:500}
.imp-pasos li b{width:26px; height:26px; border-radius:50%; border:2px solid var(--line-strong); display:grid; place-items:center;
  font-size:var(--t-xs); color:var(--mute)}
.imp-pasos li:not(:last-child)::after{content:""; width:28px; height:2px; background:var(--line-strong); margin-left:var(--e1)}
.imp-pasos li.done{color:var(--ink)}
.imp-pasos li.done b{background:var(--ok); border-color:var(--ok); color:var(--bg)}
.imp-pasos li.on{color:var(--ink); font-weight:600}
.imp-pasos li.on b{background:var(--accent); border-color:var(--accent); color:var(--bg)}
.imp-pila{display:flex; flex-direction:column; gap:20px; max-width:1000px}
.imp-pila > .card{margin:0; padding:24px}
.imp-eyebrow{display:block; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--mute); margin-bottom:var(--e1)}

/* La clave de 50 digitos no tiene donde cortar: sin esto empujaba el ancho en el telefono. */
.doc-res .mono{overflow-wrap:anywhere}

/* ---------- Hoy 2 (QA 02-oct): chispas en las KPI y barra de avance del IVA ---------- */
.hoy .rp-var.con-chispa{justify-content:space-between; flex-wrap:nowrap}
.rp-chispa{flex:none; fill:none}
.rp-chispa polyline{fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.rp-avance{height:6px; border-radius:var(--r-pill); background:var(--crema); overflow:hidden; margin-top:6px}
.rp-avance i{display:block; height:100%; background:var(--brand); border-radius:var(--r-pill)}

/* Primeros pasos (maqueta Hoy): la tarjeta con el siguiente paso arriba y los
   cuatro pasos como tarjetitas en una fila, con su explicación debajo. */
.hoy .hoy-pp-fila{align-items:center}
.hoy .hoy-pp .paso-cta{margin:0}
.hoy .hoy-pp .pp-lista{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin:12px 0 0}
.hoy .hoy-pp .pp-lista-fila{display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; font-size:var(--t-sm)}
.hoy .hoy-pp .pp-lista-fila:not(.hecho){border-color:var(--line-strong); background:var(--soft)}
.hoy .hoy-pp .pp-cab-paso{display:flex; align-items:center; gap:8px; font-weight:600}
.hoy .hoy-pp .pp-cab-paso .n{color:var(--ink)}
.hoy .hoy-pp .pp-det{color:var(--mute); font-size:12px; line-height:1.45}
.hoy .hoy-pp .pp-tick:not(.pendiente){background:var(--ok-bg); color:var(--ok)}
.hoy .hoy-pp .pp-tick.pendiente{background:var(--warn-bg); color:var(--warn)}
@media (max-width:900px){ .hoy .hoy-pp .pp-lista{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:640px){ .hoy .hoy-pp .pp-lista{grid-template-columns:minmax(0,1fr)} }

/* Ingresos por canal: la dona con el total al centro a la izquierda y la
   leyenda con monto y % a la derecha (maqueta). Gana a `reportes.css`, que la
   apila, por especificidad. */
.hoy .hoy-graficos .gr-torta{flex-direction:row; align-items:center; gap:20px}
.hoy .hoy-graficos .gr-anillo{max-width:140px; flex:none; margin:0}
.hoy .hoy-graficos .gr-lista{flex:1; min-width:0}
@media (max-width:640px){ .hoy .hoy-graficos .gr-torta{flex-direction:column; align-items:stretch} .hoy .hoy-graficos .gr-anillo{margin:0 auto} }

/* La píldora y el "vs. período anterior" en su renglón; la chispa a la derecha. */
.hoy .rp-var.con-chispa{display:grid; grid-template-columns:auto 1fr; align-items:center; gap:4px 10px}
.hoy .rp-var.con-chispa .rp-chispa{justify-self:end; grid-column:2; grid-row:1}
.hoy .rp-var.con-chispa .hint{grid-column:1 / -1; grid-row:2}
.hoy .rp-var.con-chispa > .hint:first-child{grid-column:1; grid-row:1}
.hoy .hoy-graficos .gr-anillo{max-width:120px}

/* Cambiar las fechas de una reserva: los dos campos de fecha lado a lado. */
.mover-fechas .mover-fechas-campos{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin-bottom:12px}
.mover-fechas .mover-fechas-campos input{width:100%}
@media (max-width:640px){ .mover-fechas .mover-fechas-campos{grid-template-columns:minmax(0,1fr)} }