/* ── Dirección · ¿Compensa? (18/10/2026) ─────────────────────────────────
   Con el aspecto de bulx: tarjetas muy redondeadas, la tinta y el amarillo,
   el veredicto en una tarjeta de tinta con un panal tenue. */
.cmp { --c-tinta: #1D1F1C; --c-am: #FEC833; --c-papel: var(--bxb-papel, #fff); --c-linea: var(--bxb-linea, rgba(29, 31, 28, .09));
  --c-suave: var(--bxb-suave, rgba(29, 31, 28, .52)); --c-texto: var(--bxb-texto, rgba(29, 31, 28, .78)); --c-hundido: var(--bxb-hundido, #F3F3F0);
  display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }

.cmp-filtros { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.cmp-chips { display: inline-flex; gap: 4px; padding: 4px; background: var(--c-hundido); border-radius: 999px !important; }
.cmp-chip { height: 34px; padding: 0 16px; border: 0; border-radius: 999px !important; background: none; color: var(--c-texto);
  font: 600 13px/1 Inter, system-ui, sans-serif; cursor: pointer; transition: background .15s, color .15s; }
.cmp-chip:hover { color: var(--bxb-tinta, #1D1F1C); }
.cmp-chip.on { background: var(--c-tinta); color: var(--c-am); }
.cmp-select { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--c-suave); }
.cmp-select select { height: 38px; padding: 0 34px 0 14px; border: 1px solid var(--c-linea); border-radius: 12px !important; background-color: var(--c-papel); color: var(--bxb-tinta, #1D1F1C); font: 500 13.5px Inter, system-ui, sans-serif; }

/* El veredicto */
.cmp-heroe { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: end;
  padding: 36px 40px; border-radius: 28px !important; background: var(--c-tinta); color: #FBFBFB; }
.cmp-heroe-panal { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cmp-heroe-panal polygon { fill: rgba(251, 251, 251, .02); stroke: rgba(254, 200, 51, .07); stroke-width: 1; }
.cmp-heroe-panal polygon.lleno { fill: rgba(254, 200, 51, .22); stroke: none; }
.cmp-heroe-texto, .cmp-heroe-cifras { position: relative; }
.cmp-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 13px; font-weight: 700; color: rgba(251, 251, 251, .7); }
.cmp-eyebrow .hexito { width: 14px; height: 12px; background: var(--c-am); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.cmp-heroe h2 { margin: 0; font-size: clamp(30px, 3.6vw, 48px); font-weight: 900; letter-spacing: -0.045em; line-height: 1.02; color: #FBFBFB; text-wrap: balance; }
.cmp-heroe h2 b { color: var(--c-am); font-weight: 900; }
.cmp-heroe-no h2 b { color: #FBFBFB; text-decoration: underline 4px rgba(254, 200, 51, .7); text-underline-offset: 6px; }
.cmp-heroe-sub { margin: 14px 0 0; max-width: 560px; font-size: 15.5px; line-height: 1.5; color: rgba(251, 251, 251, .72); }
.cmp-heroe-sub b { color: #FBFBFB; }
.cmp-heroe-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cmp-heroe-cifras div { padding: 16px 16px 14px; border-radius: 18px !important; background: rgba(251, 251, 251, .06); display: flex; flex-direction: column; gap: 6px; }
.cmp-heroe-cifras b { font-size: 26px; font-weight: 900; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; color: #FBFBFB; }
.cmp-heroe-cifras span { font-size: 12px; line-height: 1.3; color: rgba(251, 251, 251, .6); }
.cmp-heroe-cifras .cmp-recupera { background: var(--c-am); }
.cmp-heroe-cifras .cmp-recupera b { color: var(--c-tinta); }
.cmp-heroe-cifras .cmp-recupera span { color: rgba(29, 31, 28, .72); }

/* Cajas */
.cmp-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.cmp-caja { padding: 24px 26px; border-radius: 24px !important; background: var(--c-papel); border: 1px solid var(--c-linea); display: flex; flex-direction: column; gap: 16px; }
.cmp-caja h3 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; color: var(--bxb-tinta, #1D1F1C); }
.cmp-caja-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.cmp-caja-cab p { margin: 0; font-size: 13px; color: var(--c-suave); }

/* Las dos barras */
.cmp-barra { display: flex; flex-direction: column; gap: 9px; }
.cmp-barra-cab { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; font-weight: 600; color: var(--c-texto); }
.cmp-barra-cab b { font-size: 22px; font-weight: 900; letter-spacing: -0.035em; color: var(--bxb-tinta, #1D1F1C); font-variant-numeric: tabular-nums; }
.cmp-barra-pista { display: flex; gap: 3px; height: 30px; }
.cmp-barra-pista i { display: block; height: 100%; border-radius: 999px !important; min-width: 6px; transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.cmp-barra-ley { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--c-suave); }
.cmp-barra-ley span { display: inline-flex; align-items: center; gap: 6px; }
.cmp-barra-ley b { color: var(--bxb-tinta, #1D1F1C); font-weight: 700; }
.cmp-barra-ley i, .cmp-ley i { width: 9px; height: 9px; border-radius: 999px !important; display: inline-block; }
.f1 { background: #FEC833; } .f2 { background: #F2B705; } .f3 { background: #FFE08A; }
.c1 { background: #1D1F1C; } .c2 { background: #6E706A; }
:root[data-tema="oscuro"] .c1 { background: #F6F2E6; } :root[data-tema="oscuro"] .c2 { background: #A5A69F; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .c1 { background: #F6F2E6; } :root:not([data-tema="claro"]) .c2 { background: #A5A69F; } }
.cmp-nota { margin: 0; font-size: 12.5px; color: var(--c-suave); }
.cmp-enlace { border: 0; padding: 0; background: none; color: var(--bxb-tinta, #1D1F1C); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Mes a mes */
.cmp-ley { display: flex; gap: 14px; font-size: 12px; color: var(--c-suave); }
.cmp-ley span { display: inline-flex; align-items: center; gap: 6px; }
.cmp-ley i.linea { width: 16px; height: 3px; border-radius: 3px !important; background: var(--bxb-tinta, #1D1F1C); }
.cmp-grafica { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; align-items: end; height: 190px; }
.cmp-mes { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.cmp-mes-zona { position: relative; flex: 1; display: flex; align-items: flex-end; justify-content: center; }
.cmp-col { display: block; width: 70%; max-width: 34px; min-height: 3px; background: #FEC833; border-radius: 10px 10px 4px 4px !important; transition: height .9s cubic-bezier(.2, .8, .2, 1); }
.cmp-raya { position: absolute; left: 6%; right: 6%; height: 3px; border-radius: 3px !important; background: var(--bxb-tinta, #1D1F1C); }
.cmp-mes > span { font-size: 11px; text-align: center; color: var(--c-suave); text-transform: capitalize; }

/* Persona a persona */
.cmp-personas { display: flex; flex-direction: column; gap: 8px; container-type: inline-size; }
/* Estrecho: nombre y lo que compensa arriba, el umbral en medio, tres cifras abajo.
   Ancho (contenedor ≥ 860 px): todo en una línea. Se mira el ancho de la caja y no el
   de la ventana, porque la barra lateral plegada o desplegada lo cambia. */
.cmp-persona { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "quien compensa" "umbral umbral" "nums nums";
  align-items: center; gap: 12px 16px; padding: 14px 16px; border-radius: 18px !important; background: var(--c-hundido); }
.cmp-persona.sin { opacity: .72; }
.cmp-p-quien { grid-area: quien; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cmp-p-quien b { font-size: 14.5px; font-weight: 700; color: var(--bxb-tinta, #1D1F1C); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-p-quien span { font-size: 12px; color: var(--c-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-p-umbral { grid-area: umbral; display: flex; flex-direction: column; gap: 7px; font-size: 12px; color: var(--c-suave); min-width: 0; }
.cmp-p-umbral b { color: var(--bxb-tinta, #1D1F1C); }
.cmp-p-pista { position: relative; height: 8px; border-radius: 999px !important; background: rgba(29, 31, 28, .1); }
:root[data-tema="oscuro"] .cmp-p-pista { background: rgba(246, 242, 230, .1); }
.cmp-p-pista i { display: block; height: 100%; border-radius: 999px !important; background: #A5A69F; transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.cmp-p-pista i.ok { background: #FEC833; }
.cmp-p-falta { font-weight: 600; color: #B4520A; }
.cmp-p-nums { grid-area: nums; display: flex; gap: 22px; }
.cmp-p-num { display: flex; flex-direction: column; gap: 3px; }
.cmp-p-num span { font-size: 11px; color: var(--c-suave); white-space: nowrap; }
.cmp-p-num b { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; color: var(--bxb-tinta, #1D1F1C); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp-p-compensa { grid-area: compensa; align-items: flex-end; text-align: right; }
.cmp-p-compensa.mas b { color: #1D1F1C; background: #FEC833; padding: 3px 10px; border-radius: 999px !important; }
.cmp-p-compensa.menos b { color: #9B2C1F; }
@container (min-width: 860px) {
  .cmp-persona { grid-template-columns: minmax(150px, 1.1fr) minmax(220px, 1.6fr) auto minmax(96px, auto); grid-template-areas: "quien umbral nums compensa"; gap: 20px; }
  .cmp-p-num { text-align: right; align-items: flex-end; }
}

.cmp-tabla td.num, .cmp-tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
.cmp-tabla td.mas { font-weight: 800; }
.cmp-tabla td.menos { color: #9B2C1F; font-weight: 700; }
.cmp-aviso { padding: 12px 16px; border-radius: 14px !important; background: rgba(254, 200, 51, .16); color: var(--bxb-tinta, #1D1F1C); font-size: 13px; line-height: 1.5; }
.cmp-pie { margin: 2px 4px 8px; font-size: 12px; line-height: 1.55; color: var(--c-suave); max-width: 900px; }

/* Vacío y cargando */
.cmp-vacio { margin-top: 18px; padding: 44px 40px; border-radius: 28px !important; background: var(--c-papel); border: 1px solid var(--c-linea);
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 760px; }
.cmp-vacio h2 { margin: 0; font-size: 26px; font-weight: 900; letter-spacing: -0.04em; color: var(--bxb-tinta, #1D1F1C); }
.cmp-vacio p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--c-texto); }
.cmp-vacio-celdas { position: relative; width: 46px; height: 46px; }
.cmp-vacio-celdas i, .cmp-cargando i { position: absolute; width: 24px; height: 21px; background: #FEC833; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.cmp-vacio-celdas i:nth-child(1) { left: 0; top: 12px; } .cmp-vacio-celdas i:nth-child(2) { left: 21px; top: 0; } .cmp-vacio-celdas i:nth-child(3) { left: 21px; top: 24px; }
.cmp-cargando { position: relative; height: 60px; margin: 40px auto; width: 50px; }
.cmp-cargando i { animation: ihcLate 1s ease-in-out infinite; }
.cmp-cargando i:nth-child(1) { left: 0; top: 12px; } .cmp-cargando i:nth-child(2) { left: 21px; top: 0; animation-delay: .15s; } .cmp-cargando i:nth-child(3) { left: 21px; top: 24px; animation-delay: .3s; }
@keyframes ihcLate { 50% { opacity: .3; transform: scale(.85); } }

@media (max-width: 1100px) {
  .cmp-heroe { grid-template-columns: 1fr; }
  .cmp-rejilla { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cmp-heroe { padding: 28px 22px; border-radius: 24px !important; }
  .cmp-heroe-cifras { grid-template-columns: 1fr 1fr; }
  .cmp-p-nums { gap: 16px; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .cmp * { transition: none !important; animation: none !important; } }
.cmp-p-pista em { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; border-radius: 3px !important; background: var(--bxb-tinta, #1D1F1C); box-shadow: 0 0 0 2px var(--c-hundido); }
/* Tarifas: el cargo se lee entero. */
#ihd-cuerpo .ih-tabla td:first-child .ih-inp { min-width: 150px; }

/* ══ Tarifas, rediseñada con el aspecto de Bulx (18/10/2026) ═══════════════
   Tarjetas redondeadas con su cabecera (celda amarilla + título + una línea),
   los campos con la unidad dentro, nada encima de nada y nada que se salga
   por la derecha. */
.trf { --t-papel: var(--bxb-papel, #fff); --t-linea: var(--bxb-linea, rgba(29, 31, 28, .09)); --t-suave: var(--bxb-suave, rgba(29, 31, 28, .52));
  --t-texto: var(--bxb-texto, rgba(29, 31, 28, .78)); --t-tinta: var(--bxb-tinta, #1D1F1C); --t-hundido: var(--bxb-hundido, #F3F3F0);
  display: flex; flex-direction: column; gap: 16px; margin-top: 18px; max-width: 1180px; }
.trf * { box-sizing: border-box; }
.trf-caja { min-width: 0; padding: 24px 26px; border-radius: 24px !important; background: var(--t-papel); border: 1px solid var(--t-linea); display: flex; flex-direction: column; gap: 18px; }
.trf-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.trf-cab > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.trf-cab h2 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; letter-spacing: -0.025em; color: var(--t-tinta); }
.trf-cab h2 .hexito { flex: none; width: 15px; height: 13px; background: #FEC833; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.trf-cab p { margin: 0; max-width: 760px; font-size: 13.5px; line-height: 1.55; color: var(--t-texto); }
.trf-cab p b { color: var(--t-tinta); }
.trf-anadir { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 1px solid var(--t-linea);
  border-radius: 999px !important; background: var(--t-papel); color: var(--t-tinta); font: 600 13px/1 Inter, system-ui, sans-serif; cursor: pointer; transition: background .12s, border-color .12s; }
.trf-anadir:hover { background: var(--t-hundido); border-color: transparent; }
.trf-anadir svg { width: 14px; height: 14px; }

/* Los campos: etiqueta encima, unidad dentro. */
.trf-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 14px; }
.trf-campos-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trf-campo { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.trf-campo > span:first-child { font-size: 12.5px; font-weight: 600; color: var(--t-texto); }
.trf-entrada { position: relative; display: flex; align-items: center; min-width: 0; height: 44px; border: 1px solid var(--t-linea);
  border-radius: 12px !important; background: var(--t-papel); transition: border-color .12s, box-shadow .12s; }
.trf-entrada:focus-within { border-color: #FEC833; box-shadow: 0 0 0 3px rgba(254, 200, 51, .28); }
.trf-entrada input { flex: 1; min-width: 0; width: 100%; height: 100%; padding: 0 6px 0 14px; border: 0 !important; background: none !important;
  box-shadow: none !important; outline: none; color: var(--t-tinta); font: 600 15px/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.trf-entrada input::placeholder { color: var(--t-suave); font-weight: 500; }
.trf-entrada input::-webkit-inner-spin-button, .trf-entrada input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.trf-entrada input[type=number] { -moz-appearance: textfield; }
.trf-entrada em { flex: none; padding-right: 12px; font-style: normal; font-size: 12px; font-weight: 600; color: var(--t-suave); white-space: nowrap; }

/* La tabla de cargos, con filas en rejilla (no se sale por la derecha). */
.trf-tabla { display: flex; flex-direction: column; gap: 8px; }
.trf-fila { display: grid; grid-template-columns: minmax(180px, 1.6fr) repeat(3, minmax(120px, 1fr)) 40px; align-items: center; gap: 10px;
  padding: 10px; border-radius: 16px !important; background: var(--t-hundido); }
.trf-fila.apagada { opacity: .6; }
.trf-fila-cab { padding: 0 10px; background: none; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--t-suave); }
.trf-cargo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trf-txt { width: 100%; min-width: 0; height: 26px; padding: 0 8px; border: 1px solid transparent !important; border-radius: 8px !important;
  background: none !important; box-shadow: none !important; color: var(--t-tinta); font: 700 14.5px/1 Inter, system-ui, sans-serif; outline: none; }
.trf-txt-dep { height: 22px; font-size: 12.5px; font-weight: 500; color: var(--t-suave); }
.trf-txt:hover { background: var(--t-papel) !important; }
.trf-txt:focus { background: var(--t-papel) !important; border-color: #FEC833 !important; }
.trf-fila .trf-entrada { height: 40px; }
.trf-coste .trf-entrada, .trf-fila .trf-coste { background: var(--t-papel); }
.trf-quitar { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px !important; background: none;
  color: var(--t-suave); cursor: pointer; transition: background .12s, color .12s; }
.trf-quitar:hover { background: rgba(217, 45, 32, .1); color: #B42318; }
.trf-quitar svg { width: 15px; height: 15px; }
.trf-vacio { padding: 22px; border-radius: 16px !important; background: var(--t-hundido); color: var(--t-texto); font-size: 14px; }
.trf-pie { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.trf-pie > span { font-size: 12.5px; color: var(--t-suave); }

/* Jornada y pluses, lado a lado. */
.trf-dos { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 16px; align-items: start; }
.trf-sub { margin: 4px 0 -4px; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--t-tinta); }
.trf-nota { padding: 12px 14px; border-radius: 12px !important; background: rgba(254, 200, 51, .14); font-size: 12.5px; line-height: 1.5; color: var(--t-texto); }
.trf-nota b { color: var(--t-tinta); }
.trf-guardar-dos { display: flex; justify-content: flex-end; margin-top: -4px; }

/* El freelance, con el ejemplo vivo al lado. */
.trf-freelance-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); gap: 18px; align-items: start; }
.trf-freelance-cuerpo .trf-campos { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.trf-ejemplo { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 16px !important; background: #1D1F1C; color: #FBFBFB; }
.trf-ej-tit { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: rgba(251, 251, 251, .6); }
.trf-ej-fila, .trf-ej-total { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: rgba(251, 251, 251, .8); }
.trf-ej-fila b { font-variant-numeric: tabular-nums; color: #FBFBFB; }
.trf-ej-total { margin-top: 4px; padding-top: 10px; border-top: 1px solid rgba(251, 251, 251, .12); font-weight: 700; color: #FBFBFB; }
.trf-ej-total b { font-size: 18px; font-weight: 900; color: #FEC833; font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) {
  .trf-dos, .trf-freelance-cuerpo { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .trf-caja { padding: 20px 18px; border-radius: 20px !important; }
  .trf-cab { flex-direction: column; }
  .trf-fila-cab { display: none; }
  .trf-fila { grid-template-columns: 1fr 1fr 40px; }
  .trf-cargo { grid-column: 1 / -1; }
  .trf-campos-3 { grid-template-columns: 1fr 1fr 1fr; }
}

/* ══ Rodajes y horas · Lo que gana la casa, con el aspecto de Bulx ═════════ */
.dir-bulx { --d-papel: var(--bxb-papel, #fff); --d-linea: var(--bxb-linea, rgba(29, 31, 28, .09)); --d-suave: var(--bxb-suave, rgba(29, 31, 28, .52));
  --d-texto: var(--bxb-texto, rgba(29, 31, 28, .78)); --d-tinta: var(--bxb-tinta, #1D1F1C); --d-hundido: var(--bxb-hundido, #F3F3F0); }
.dir-bulx * { box-sizing: border-box; }
.dir-bulx > .dir-filtros, .dir-bulx > .dir-tejas, .dir-bulx > .dir-caja, .dir-bulx > .dir-vacio, .dir-bulx > .dir-aviso { margin-top: 16px; max-width: 1180px; }

/* Filtros */
.dir-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; padding: 14px 16px; border-radius: 22px !important;
  background: var(--d-papel); border: 1px solid var(--d-linea); }
.dir-pillas { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px !important; background: var(--d-hundido); }
.dir-pilla { height: 34px; padding: 0 15px; border: 0; border-radius: 999px !important; background: none; color: var(--d-texto);
  font: 600 13px/1 Inter, system-ui, sans-serif; cursor: pointer; white-space: nowrap; transition: background .1s, color .1s; }
.dir-pilla:hover { color: var(--d-tinta); }
.dir-pilla.on { background: #1D1F1C; color: #FEC833; }
:root[data-tema="oscuro"] .dir-pilla.on { background: #FEC833; color: #1D1F1C; }
.dir-fechas { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 6px; border: 1px solid var(--d-linea); border-radius: 999px !important; background: var(--d-papel); }
.dir-fechas input { height: 32px; padding: 0 10px; border: 0 !important; border-radius: 999px !important; background: none !important; box-shadow: none !important;
  color: var(--d-tinta); font: 600 13px Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.dir-fechas input:focus { outline: none; background: var(--d-hundido) !important; }
.dir-fechas span { color: var(--d-suave); font-size: 13px; }
.dir-selects { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.dir-select { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--d-suave); }
.dir-select select { height: 42px; min-width: 150px; padding: 0 34px 0 14px; border: 1px solid var(--d-linea) !important; border-radius: 12px !important;
  background-color: var(--d-papel) !important; color: var(--d-tinta); font: 600 13px Inter, system-ui, sans-serif; }

/* Tejas */
.dir-tejas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.dir-tejas-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dir-teja { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: 20px !important; background: var(--d-papel); border: 1px solid var(--d-linea); }
.dir-teja b { font-size: 30px; font-weight: 900; letter-spacing: -0.045em; line-height: 1; color: var(--d-tinta); font-variant-numeric: tabular-nums; }
.dir-teja span { font-size: 12.5px; line-height: 1.35; color: var(--d-suave); }
.dir-teja.aviso { background: rgba(254, 200, 51, .16); border-color: transparent; }
.dir-teja.mal { background: rgba(217, 45, 32, .08); border-color: transparent; }
.dir-teja.mal b { color: #B42318; }
.dir-teja.tinta, .dir-teja.amarilla { border-color: transparent; }
.dir-teja.tinta { background: #1D1F1C; } .dir-teja.tinta b { color: #FEC833; } .dir-teja.tinta span { color: rgba(251, 251, 251, .65); }
.dir-teja.amarilla { background: #FEC833; } .dir-teja.amarilla b { color: #1D1F1C; } .dir-teja.amarilla span { color: rgba(29, 31, 28, .7); }

/* Cajas y filas */
.dir-caja { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; border-radius: 24px !important; background: var(--d-papel); border: 1px solid var(--d-linea); }
.dir-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.dir-cab h3 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; color: var(--d-tinta); }
.dir-cab .hexito { width: 14px; height: 12px; background: #FEC833; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.dir-n { min-width: 26px; height: 24px; padding: 0 8px; display: inline-grid; place-items: center; border-radius: 999px !important; background: var(--d-hundido);
  font: 700 12px/1 Inter, system-ui, sans-serif; color: var(--d-texto); }
.dir-interruptor { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px 0 8px; border: 1px solid var(--d-linea); border-radius: 999px !important;
  background: var(--d-papel); color: var(--d-texto); font: 600 13px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.dir-interruptor i { position: relative; width: 32px; height: 20px; border-radius: 999px !important; background: var(--d-hundido); transition: background .14s; }
.dir-interruptor i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px !important; background: #fff;
  box-shadow: 0 1px 3px rgba(29, 31, 28, .3); transition: transform .14s; }
.dir-interruptor.on { color: var(--d-tinta); }
.dir-interruptor.on i { background: #FEC833; } .dir-interruptor.on i::after { transform: translateX(12px); }
.dir-filas { display: flex; flex-direction: column; gap: 6px; container-type: inline-size; }
.dir-fila { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px 14px; border-radius: 16px !important; background: var(--d-hundido); }
.dir-quien { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dir-quien b { font-size: 14.5px; font-weight: 700; color: var(--d-tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dir-quien > span { font-size: 12px; color: var(--d-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dir-ms { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.dir-m { display: flex; flex-direction: column; gap: 3px; min-width: 64px; }
.dir-m span { font-size: 11px; color: var(--d-suave); white-space: nowrap; }
.dir-m b, .dir-m em { font-size: 15px; font-weight: 800; font-style: normal; letter-spacing: -0.02em; color: var(--d-tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dir-m.nada b, .dir-m em.nada { color: var(--d-suave); font-weight: 600; }
.dir-m.aviso b { align-self: flex-start; padding: 1px 8px; border-radius: 999px !important; background: rgba(254, 200, 51, .3); }
.dir-m.mal b, .dir-m em.mal { color: #B42318; }
.dir-m.fuerte b { font-size: 16px; }
.dir-barra { display: block; height: 6px; margin-top: 4px; border-radius: 999px !important; background: rgba(29, 31, 28, .08); overflow: hidden; }
:root[data-tema="oscuro"] .dir-barra { background: rgba(246, 242, 230, .1); }
.dir-barra i { display: block; height: 100%; border-radius: 999px !important; background: #FEC833; }
@container (min-width: 760px) {
  .dir-fila { grid-template-columns: minmax(180px, 1.2fr) auto; align-items: center; }
  .dir-ms { flex-wrap: nowrap; justify-content: flex-end; }
  .dir-m { min-width: 90px; text-align: right; align-items: flex-end; }
  .dir-m.aviso b { align-self: flex-end; }
}

/* Día a día */
.dir-dias { display: flex; flex-direction: column; gap: 6px; container-type: inline-size; }
.dir-dia { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 14px; border-radius: 16px !important; background: var(--d-hundido); }
.dir-dia > .dir-quien { flex: 1 1 160px; }
.dir-fecha { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px !important; background: var(--d-papel); }
.dir-fecha b { font-size: 17px; font-weight: 900; line-height: 1; color: var(--d-tinta); }
.dir-fecha small { font-size: 10.5px; font-weight: 600; color: var(--d-suave); text-transform: uppercase; letter-spacing: .04em; }
.dir-horario { font: 600 13px/1 Inter, system-ui, sans-serif; color: var(--d-texto); font-variant-numeric: tabular-nums; white-space: nowrap; }
@container (min-width: 760px) {
  .dir-dia { display: grid; grid-template-columns: 48px minmax(160px, 1.2fr) 130px repeat(3, 96px); }
  .dir-dia > .dir-m { text-align: right; align-items: flex-end; }
}

.dir-vacio { padding: 26px 24px; border-radius: 22px !important; background: var(--d-papel); border: 1px solid var(--d-linea); font-size: 14px; line-height: 1.55; color: var(--d-texto); }
.dir-aviso { padding: 12px 16px; border-radius: 14px !important; background: rgba(254, 200, 51, .16); font-size: 13px; color: var(--d-tinta); }

@media (max-width: 760px) {
  .dir-selects { margin-left: 0; width: 100%; }
  .dir-select { flex: 1 1 140px; } .dir-select select { width: 100%; min-width: 0; }
  .dir-tejas-3 { grid-template-columns: 1fr; }
  .dir-fechas { width: 100%; } .dir-fechas input { flex: 1; min-width: 0; }
}
.dir-bulx .dir-select select { min-width: 150px !important; width: auto !important; }