/*
 * Estilos específicos de pantallas. Los tokens y los componentes base están en yflow-tema.css.
 */

/* ---------- Selector de meses (cierre) ---------- */

.yf-meses {
    display: grid;
    grid-template-columns: repeat(12, minmax(4.25rem, 1fr));
    gap: 0.25rem;
    padding: 0.5rem;
    margin-bottom: 1rem;
    overflow-x: auto;
}

.yf-mes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.375rem 0.25rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    color: var(--rz-text-color);
    cursor: pointer;
    transition: background-color 150ms ease;
}

.yf-mes:hover {
    background: var(--rz-base-100);
}

.yf-mes--activo {
    border-color: var(--rz-primary);
    background: var(--rz-primary-lighter);
}

.yf-mes__nombre {
    font-size: 0.8125rem;
    font-weight: 600;
}

/* ---------- Editor de reglas ---------- */

.yf-condicion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--rz-base-300);
}

/* ---------- Importación ---------- */

.yf-pasos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    counter-reset: paso;
}

.yf-pasos li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem 0.375rem 0.375rem;
    border-radius: 999px;
    background: var(--rz-base-200);
    color: var(--rz-text-secondary-color);
    font-size: 0.8125rem;
    font-weight: 500;
    counter-increment: paso;
}

.yf-pasos li::before {
    content: counter(paso);
    display: inline-grid;
    place-items: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: #ffffff;
    font-weight: 700;
    font-size: 0.75rem;
}

.yf-pasos li.yf-paso--actual {
    background: var(--rz-primary);
    color: #ffffff;
}

.yf-pasos li.yf-paso--actual::before {
    color: var(--rz-primary);
}

.yf-pasos li.yf-paso--hecho {
    background: var(--yf-ok-suave);
    color: var(--rz-success-dark);
}

.yf-zona-archivo {
    display: grid;
    place-items: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    border: 2px dashed var(--rz-base-400);
    border-radius: 8px;
    background: var(--rz-base-50);
    text-align: center;
}

.yf-mapeo {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.75rem 1rem;
}

/* ---------- Configuración ---------- */

.yf-lista-cuits {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.25rem 0 0.5rem;
}

.yf-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.25rem 0.125rem 0.625rem;
    border-radius: 999px;
    background: var(--rz-base-200);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- ARCA ---------- */

.yf-pasos-arca {
    margin: 0;
    padding-left: 1.25rem;
    display: grid;
    gap: 0.75rem;
}

.yf-pasos-arca li::marker {
    font-family: var(--yf-fuente-titulos);
    font-weight: 700;
    color: var(--rz-primary);
}

/* ---------- Grillas: el texto baja de línea en lugar de cortarse; las cifras nunca se cortan ---------- */

.rz-data-grid .rz-cell-data {
    white-space: normal;
    overflow-wrap: anywhere;
}

.rz-data-grid .rz-cell-data .yf-num {
    overflow-wrap: normal;
}

/* ---------- Zona de archivo: toda la zona es clickeable y acepta arrastrar y soltar ---------- */

label.yf-zona-archivo {
    position: relative;
    display: grid;
    font-size: 0.875rem;
    color: var(--rz-text-color);
    margin: 0;
    transition: border-color 150ms ease, background-color 150ms ease;
}

label.yf-zona-archivo:hover,
label.yf-zona-archivo:focus-within {
    border-color: var(--rz-primary);
    background: var(--rz-primary-lighter);
}

label.yf-zona-archivo input[type=file] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.yf-boton-falso {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: 6px;
    background: var(--rz-primary);
    color: #ffffff;
    font-weight: 600;
}

/* ---------- Planificación ---------- */

.yf-dos-columnas--angosta {
    grid-template-columns: minmax(20rem, 26rem) minmax(0, 1fr);
}

@media (max-width: 1180px) {
    .yf-dos-columnas--angosta {
        grid-template-columns: minmax(0, 1fr);
    }
}

.yf-separado-arriba {
    margin-top: var(--yf-separacion-secciones);
}


/* ---------- Planificación: abanico de caja ---------- */

.yf-abanico {
    margin: 0;
}

.yf-abanico svg {
    display: block;
    width: 100%;
    height: auto;
}

.yf-abanico__grilla { stroke: var(--yf-borde); stroke-width: 1; }
.yf-abanico__eje { fill: var(--yf-texto-apagado); font-size: 11px; font-family: var(--yf-fuente-cuerpo); }
.yf-abanico__cero { stroke: var(--yf-error); stroke-width: 1.25; stroke-dasharray: 5 4; }
.yf-abanico__cero-texto { fill: var(--yf-error); font-size: 11px; font-weight: 600; font-family: var(--yf-fuente-cuerpo); }
.yf-abanico__banda { fill: var(--yf-primario-suave); stroke: none; }
.yf-abanico__mediana { fill: none; stroke: var(--yf-primario); stroke-width: 2.5; stroke-linejoin: round; }
.yf-abanico__base { fill: none; stroke: var(--yf-texto-tenue); stroke-width: 1.5; stroke-dasharray: 3 3; }
.yf-abanico__real { fill: none; stroke: var(--yf-texto); stroke-width: 2.5; }

.yf-abanico__leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--yf-esp-2) var(--yf-esp-5);
    margin-top: var(--yf-esp-2);
    font-size: var(--yf-texto-xs);
    color: var(--yf-texto-apagado);
}

.yf-abanico__leyenda span {
    display: inline-flex;
    align-items: center;
    gap: var(--yf-esp-2);
}

.yf-abanico__muestra {
    display: inline-block;
    width: 1.25rem;
    height: 0.625rem;
    border-radius: 3px;
}

.yf-abanico__muestra--banda { background: var(--yf-primario-suave); }
.yf-abanico__muestra--mediana { height: 3px; background: var(--yf-primario); }
.yf-abanico__muestra--base { height: 0; border-top: 2px dashed var(--yf-texto-tenue); }
.yf-abanico__muestra--real { height: 3px; background: var(--yf-texto); }

/* ---------- Planificación: tornado ---------- */

.yf-tornado {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--yf-esp-3);
}

.yf-tornado__fila {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(8rem, 1fr);
    gap: var(--yf-esp-4);
    align-items: center;
}

.yf-tornado__pista {
    position: relative;
    height: 1.25rem;
    border-radius: var(--yf-radio-pildora);
    background: var(--yf-superficie-2);
}

.yf-tornado__barra {
    position: absolute;
    top: 0.1875rem;
    bottom: 0.1875rem;
    border-radius: var(--yf-radio-pildora);
}

.yf-tornado__barra--mala { background: #f2b8b3; }
.yf-tornado__barra--buena { background: #c9bde6; }

.yf-tornado__base {
    position: absolute;
    top: -0.125rem;
    bottom: -0.125rem;
    width: 2px;
    margin-left: -1px;
    background: var(--yf-texto);
    z-index: 1;
}

/* ---------- Planificación: campo con rango ---------- */

.yf-estimacion__campos {
    display: grid;
    grid-template-columns: minmax(4rem, 1fr) minmax(5rem, 1.25fr) minmax(4rem, 1fr) auto;
    gap: var(--yf-esp-1);
    align-items: center;
}

.yf-estimacion__campos .rz-numeric {
    width: 100%;
}

.yf-estimacion__extremo input {
    color: var(--yf-texto-apagado);
}

.yf-estimacion__probable input {
    font-weight: 600;
}

.yf-estimacion__sufijo {
    font-size: var(--yf-texto-xs);
    color: var(--yf-texto-apagado);
    padding-left: var(--yf-esp-1);
}

/* ---------- Planificación: tira de riesgo, tablas y respuesta ---------- */

.yf-riesgo-meses {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(3.5rem, 1fr);
    gap: 0.25rem;
    overflow-x: auto;
    padding-bottom: var(--yf-esp-1);
}

.yf-riesgo-mes {
    display: grid;
    justify-items: center;
    gap: 0.25rem;
    padding: var(--yf-esp-2) 0.125rem;
    border-radius: var(--yf-radio-sm);
    font-size: var(--yf-texto-xs);
    background: var(--yf-superficie-2);
}

.yf-riesgo-mes strong {
    font-variant-numeric: tabular-nums;
    font-size: var(--yf-texto-sm);
}

.yf-riesgo-mes--alerta { background: var(--yf-atencion-suave); color: var(--yf-atencion); }
.yf-riesgo-mes--error { background: var(--yf-error-suave); color: var(--yf-error); }

.yf-respuesta {
    font-family: var(--yf-fuente-titulos);
    font-size: var(--yf-texto-lg);
    line-height: 1.45;
    font-weight: 500;
    letter-spacing: -0.005em;
    margin: 0;
    max-width: 70ch;
}

.yf-respuesta strong {
    font-weight: 700;
}

.yf-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--yf-esp-5);
    border-bottom: 1px solid var(--yf-borde);
    margin-bottom: var(--yf-separacion-secciones);
}

.yf-subnav a {
    padding: var(--yf-esp-2) 0;
    color: var(--yf-texto-apagado);
    font-weight: 600;
    font-size: var(--yf-texto-sm);
    text-decoration: none;
    box-shadow: inset 0 -2px 0 transparent;
}

.yf-subnav a:hover {
    color: var(--yf-texto);
}

.yf-subnav a.active {
    color: var(--yf-texto);
    box-shadow: inset 0 -2px 0 var(--yf-primario);
}

.yf-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--yf-texto-base);
}

.yf-tabla th {
    text-align: left;
    font-size: var(--yf-texto-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--yf-texto-apagado);
    background: var(--yf-superficie-2);
    padding: var(--yf-esp-2) var(--yf-esp-3);
    border-bottom: 1px solid var(--yf-borde);
    white-space: nowrap;
}

.yf-tabla td {
    padding: var(--yf-esp-2) var(--yf-esp-3);
    border-bottom: 1px solid var(--yf-borde);
    vertical-align: middle;
}

.yf-tabla tr:last-child td {
    border-bottom: 0;
}

.yf-tabla--meses {
    min-width: max-content;
}

.yf-tabla--meses td:first-child,
.yf-tabla--meses th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--yf-superficie);
    min-width: 13rem;
}

.yf-tabla--meses th:first-child {
    background: var(--yf-superficie-2);
}

.yf-tabla--meses tr.yf-fila-total td {
    font-weight: 700;
    background: var(--yf-superficie-2);
}

.yf-tabla--meses tr.yf-fila-total td:first-child {
    background: var(--yf-superficie-2);
}

.yf-desplazable {
    overflow-x: auto;
    border-radius: 0 0 var(--yf-radio-lg) var(--yf-radio-lg);
}

.yf-negativo {
    color: var(--yf-error);
}

.yf-plantillas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--yf-esp-3);
}

.yf-plantilla {
    display: grid;
    gap: var(--yf-esp-1);
    padding: var(--yf-esp-4);
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    background: var(--yf-superficie);
    border: 1px solid var(--yf-borde);
    border-radius: var(--yf-radio-lg);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.yf-plantilla:hover,
.yf-plantilla:focus-visible {
    border-color: var(--yf-primario);
    box-shadow: var(--yf-sombra-md);
}

.yf-plantilla .rzi {
    font-size: 1.5rem;
    color: var(--yf-primario);
}


/* ---------- Planificación: editor ---------- */

.yf-oferta {
    padding: var(--yf-esp-4) 0;
    border-bottom: 1px solid var(--yf-borde);
}

.yf-oferta:last-child {
    border-bottom: 0;
}

.yf-oferta__encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--yf-esp-3);
    margin-bottom: var(--yf-esp-3);
}

.yf-oferta__campos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: var(--yf-esp-4) var(--yf-esp-5);
    align-items: start;
}

.yf-oferta__campos label {
    display: block;
    font-size: var(--yf-texto-xs);
    font-weight: 600;
    color: var(--yf-texto-apagado);
    margin-bottom: 0.3125rem;
}

.yf-politica {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--yf-esp-2);
    font-size: var(--yf-texto-sm);
    color: var(--yf-texto-apagado);
}


/* ---------- Planificación: real vs plan ---------- */

.yf-real-plan tbody th {
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--yf-texto-sm);
    font-weight: 600;
    color: var(--yf-texto);
    background: var(--yf-superficie);
    white-space: nowrap;
}

.yf-real-plan td {
    text-align: right;
    vertical-align: top;
    min-width: 5.5rem;
}

/* Real arriba, plan debajo y más apagado. */
.yf-real-plan__real,
.yf-real-plan__plan {
    display: block;
    white-space: nowrap;
}

.yf-real-plan__real { font-weight: 600; color: var(--yf-texto); }
.yf-real-plan__real.yf-estado { display: inline-block; }

.yf-real-plan__plan {
    font-size: var(--yf-texto-xs);
    color: var(--yf-texto-apagado);
}

.yf-real-plan__total { background: var(--yf-superficie-2); }

.yf-real-plan__caja th,
.yf-real-plan__caja td {
    border-top: 2px solid var(--yf-borde);
    background: var(--yf-superficie-2);
}

.yf-plantilla--real { border-style: dashed; }


/* ---------- Planificación: cotizador ---------- */

.yf-cotizador {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--yf-esp-5);
    align-items: start;
}

.yf-cotizador__carga,
.yf-cotizador__resultado {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--yf-esp-5);
}

/* El resultado acompaña el scroll mientras se carga. */
.yf-cotizador__resultado {
    position: sticky;
    top: var(--yf-esp-5);
}

.yf-formulario--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.yf-formulario--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.yf-panel__fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--yf-esp-3);
    margin-bottom: var(--yf-esp-3);
}

.yf-panel__fila .yf-seccion-titulo { margin: 0; }

.yf-cotizador__lineas {
    display: grid;
    gap: var(--yf-esp-2);
}

.yf-cotizador__linea {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) minmax(15rem, 1.6fr) 7.5rem 2rem;
    gap: var(--yf-esp-2);
    align-items: center;
}

.yf-cotizador__linea--costo { grid-template-columns: minmax(8rem, 1fr) minmax(15rem, 1.6fr) 2rem; }

.yf-cotizador__linea--titulos span {
    font-size: var(--yf-texto-xs);
    font-weight: 600;
    color: var(--yf-texto-apagado);
}

.yf-cotizador__linea .rz-textbox,
.yf-cotizador__linea .rz-numeric { width: 100%; }

.yf-cotizador__precio { border-color: var(--yf-primario-suave); }

.yf-cotizador__cifra {
    margin: 0;
    font-family: var(--yf-fuente-titulos);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--yf-primario);
    font-variant-numeric: tabular-nums;
}

.yf-cotizador__cifra span {
    font-size: var(--yf-texto-md);
    font-weight: 600;
    color: var(--yf-texto-apagado);
}

.yf-tabla--desglose td { padding-block: var(--yf-esp-2); }

.yf-tabla--desglose tr.yf-fila-total td {
    font-weight: 700;
    border-top: 1px solid var(--yf-borde);
    background: var(--yf-superficie-2);
}

.yf-lista-simple { margin: 0; padding-left: 1.25rem; }

.yf-histograma {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 120px;
    padding-bottom: 1px;
    border-bottom: 1px solid var(--yf-borde);
}

.yf-histograma__barra {
    flex: 1;
    min-height: 1px;
    border-radius: 3px 3px 0 0;
    background: var(--yf-texto-apagado);
    opacity: 0.35;
}

.yf-histograma__barra--cubierta { background: var(--yf-primario); opacity: 0.7; }

.yf-histograma__eje {
    display: flex;
    justify-content: space-between;
    margin-top: var(--yf-esp-1);
    font-size: var(--yf-texto-xs);
    color: var(--yf-texto-apagado);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1100px) {
    .yf-cotizador { grid-template-columns: minmax(0, 1fr); }
    .yf-cotizador__resultado { position: static; }
    .yf-formulario--tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Horas y costos ---------- */

.yf-formulario--cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.yf-aviso--error {
    background: var(--yf-error-suave);
    color: var(--yf-error);
}

.yf-horas-vacio {
    display: flex;
    align-items: center;
    gap: var(--yf-esp-3);
}

.yf-horas-vacio > .rzi { font-size: 2rem; color: var(--yf-texto-apagado); }

/* Grilla semanal: proyecto × tarea en filas, días en columnas. En pantallas angostas se desplaza horizontalmente. */
.yf-grilla-horas { min-width: 52rem; }

.yf-grilla-horas__dia,
.yf-grilla-horas__total { text-align: center; white-space: nowrap; }

.yf-grilla-horas__dia--finde { background: var(--yf-superficie-2); }

.yf-grilla-horas__clave { min-width: 13rem; }

.yf-grilla-horas__celda { width: 4.75rem; padding-inline: var(--yf-esp-1); text-align: center; }

.yf-grilla-horas__input { width: 4rem; }

.yf-grilla-horas__input input { text-align: right; font-variant-numeric: tabular-nums; }

.yf-grilla-horas__descripcion { min-width: 14rem; }

.yf-grilla-horas__extra {
    display: inline-flex;
    align-items: center;
    gap: var(--yf-esp-1);
    margin-top: var(--yf-esp-1);
    font-size: var(--yf-texto-xs);
    color: var(--yf-texto-apagado);
}

.yf-grilla-horas tfoot td { font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }

/* Fases de un producto propio, en el orden en que ocurren. */
.yf-linea-fases { display: flex; flex-wrap: wrap; gap: var(--yf-esp-1); }

.yf-linea-fases__tramo {
    padding: 0.125rem var(--yf-esp-2);
    border-radius: var(--yf-radio-pildora);
    font-size: var(--yf-texto-xs);
    background: var(--yf-superficie-2);
    color: var(--yf-texto-secundario);
}

.yf-linea-fases__tramo--investigacion { background: var(--yf-violeta-suave); color: var(--yf-violeta); }
.yf-linea-fases__tramo--desarrollo { background: var(--yf-primario-suave); color: var(--yf-primario); font-weight: 600; }
.yf-linea-fases__tramo--disponible { background: var(--yf-ok-suave); color: var(--yf-ok); }

/* Usuario simulado en el encabezado. */
.yf-usuario {
    display: inline-flex;
    align-items: center;
    gap: var(--yf-esp-2);
    padding: 0.25rem var(--yf-esp-2) 0.25rem 0.25rem;
    border: 1px solid transparent;
    border-radius: var(--yf-radio-pildora);
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.yf-usuario:hover,
.yf-usuario[aria-expanded="true"] { border-color: var(--yf-borde); background: var(--yf-superficie-2); }

.yf-usuario__texto { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.yf-usuario__nombre { font-size: var(--yf-texto-sm); font-weight: 600; }
.yf-usuario__rol { font-size: var(--yf-texto-xs); color: var(--yf-texto-apagado); }

.yf-usuario__panel { min-width: 20rem; }

.yf-usuario__lista { list-style: none; margin: var(--yf-esp-2) 0 0; padding: 0; }

.yf-usuario__opcion {
    display: block;
    width: 100%;
    padding: var(--yf-esp-2);
    border: 0;
    border-radius: var(--yf-radio-sm);
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.yf-usuario__opcion:hover,
.yf-usuario__opcion:focus-visible { background: var(--yf-superficie-2); }

.yf-usuario__opcion--activa { background: var(--yf-primario-suave); }

.yf-usuario__descripcion { display: block; font-size: var(--yf-texto-xs); color: var(--yf-texto-apagado); }

/* Campana de recordatorios. */
.yf-campana__contador {
    position: absolute;
    top: -0.125rem;
    right: -0.125rem;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 0.25rem;
    border-radius: var(--yf-radio-pildora);
    background: var(--yf-error);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.05rem;
    text-align: center;
    pointer-events: none;
}

.yf-campana__panel { min-width: 22rem; max-width: 26rem; }

/* Costos. */
.yf-costos-alta { border-bottom: 1px solid var(--yf-borde); }

.yf-boton-archivo { display: inline-flex; align-items: center; gap: var(--yf-esp-1); cursor: pointer; }

.yf-boton-archivo:focus-within { outline: 2px solid var(--yf-primario); outline-offset: 2px; }

/* Fila de control de los reportes: el total tiene que cuadrar con el costo del equipo. */
.yf-fila-control td {
    background: var(--yf-superficie-2);
    font-size: var(--yf-texto-sm);
    color: var(--yf-texto-secundario);
}

/* Cierre: tira de meses y lista de chequeo. */
.yf-tira-meses {
    display: flex;
    gap: var(--yf-esp-2);
    overflow-x: auto;
    padding-bottom: var(--yf-esp-1);
}

.yf-tira-meses__mes {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--yf-esp-1);
    min-width: 7.5rem;
    padding: var(--yf-esp-2) var(--yf-esp-3);
    border: 1px solid var(--yf-borde);
    border-radius: var(--yf-radio-md);
    background: var(--yf-superficie);
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.yf-tira-meses__mes:hover { border-color: var(--yf-borde-fuerte); }

.yf-tira-meses__mes--activo { border-color: var(--yf-primario); box-shadow: inset 0 0 0 1px var(--yf-primario); }

.yf-tira-meses__mes > span:first-child { font-weight: 600; text-transform: capitalize; }

.yf-chequeo { list-style: none; margin: 0; padding: 0; }

.yf-chequeo__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: var(--yf-esp-3);
    padding: var(--yf-esp-3) var(--yf-esp-4);
    border-bottom: 1px solid var(--yf-borde);
}

.yf-chequeo__item:last-child { border-bottom: 0; }

/* Historial: valor anterior → nuevo. */
.yf-historial__anterior { color: var(--yf-texto-apagado); text-decoration: line-through; }
.yf-historial__nuevo { font-weight: 600; }

@media (max-width: 1100px) {
    .yf-formulario--cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .yf-formulario--cuatro,
    .yf-formulario--tres { grid-template-columns: 1fr; }
    .yf-usuario__texto { display: none; }
    .yf-campana__panel,
    .yf-usuario__panel { min-width: min(20rem, calc(100vw - 2rem)); }
}

/* Chips dentro de celdas de grilla: si no entran, bajan de línea en lugar de cortarse. */
.rz-cell-data:has(.yf-estado) { white-space: normal; overflow: visible; }
.rz-cell-data .yf-estado + .yf-estado { margin-top: 0.25rem; }

/* ---------- Caja chica ---------- */

/* Revisión: imagen a la izquierda (queda fija al desplazar) y datos a la derecha; en pantallas angostas, uno debajo del otro. */
.yf-cc-revision {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--yf-esp-5);
    align-items: start;
}

.yf-cc-visor {
    position: sticky;
    top: calc(var(--yf-alto-header) + var(--yf-esp-4));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.yf-cc-visor__imagen {
    display: block;
    width: 100%;
    max-height: calc(100vh - var(--yf-alto-header) - 8rem);
    object-fit: contain;
    background: var(--yf-superficie-2);
}

.yf-cc-visor__pdf {
    width: 100%;
    height: calc(100vh - var(--yf-alto-header) - 8rem);
    min-height: 28rem;
    border: 0;
    background: var(--yf-superficie-2);
}

.yf-cc-visor__pie {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--yf-esp-3);
    padding: var(--yf-esp-2) var(--yf-esp-4);
    border-top: 1px solid var(--yf-borde);
}

.yf-cc-visor__pestanias {
    display: flex;
    gap: var(--yf-esp-1);
    padding: var(--yf-esp-2) var(--yf-esp-3) 0;
    border-bottom: 1px solid var(--yf-borde);
}

.yf-cc-visor__pestania {
    padding: var(--yf-esp-2) var(--yf-esp-3);
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--yf-texto-secundario);
    font: inherit;
    font-size: var(--yf-texto-sm);
    cursor: pointer;
}

.yf-cc-visor__pestania.activa { border-bottom-color: var(--yf-primario); color: var(--yf-texto); font-weight: 600; }

.yf-cc-campos { border: 0; padding: 0; margin: 0; min-width: 0; }

.yf-cc-campos label { display: flex; align-items: center; gap: var(--yf-esp-2); flex-wrap: wrap; }

.yf-cc-numero > div { display: flex; align-items: center; gap: var(--yf-esp-1); }
.yf-cc-numero .rz-numeric:first-child { width: 5.5rem; flex: none; }
.yf-cc-numero .rz-numeric:last-child { flex: 1; min-width: 0; }

.yf-confianza { font-size: var(--yf-texto-xs); padding-block: 0; }

.yf-cc-lineas { margin-top: var(--yf-esp-4); }

.yf-cc-lineas__titulo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--yf-texto-sm);
    font-weight: 600;
    color: var(--yf-texto-secundario);
    margin-bottom: var(--yf-esp-2);
}

.yf-cc-linea {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: var(--yf-esp-2);
    align-items: center;
    margin-bottom: var(--yf-esp-2);
}

.yf-cc-aviso { display: flex; align-items: center; gap: var(--yf-esp-3); }
.yf-cc-aviso > .rzi { font-size: 1.75rem; color: var(--yf-texto-apagado); }
.yf-cc-aviso--error { background: var(--yf-error-suave); }
.yf-cc-aviso--error > .rzi { color: var(--yf-error); }

.yf-cc-observaciones { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--yf-esp-2); }
.yf-cc-observaciones li { display: flex; gap: var(--yf-esp-2); align-items: flex-start; }
.yf-cc-observacion--error .rzi { color: var(--yf-error); }
.yf-cc-observacion--aviso .rzi { color: var(--yf-atencion); }

/* Carga: botones grandes para el pulgar y miniaturas de las páginas elegidas. */
.yf-cc-input-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.yf-cc-botones-carga { flex-wrap: wrap; }
.yf-cc-boton-archivo { display: inline-flex; align-items: center; gap: var(--yf-esp-2); cursor: pointer; min-height: 2.75rem; }
.yf-cc-input-oculto:focus-visible + .yf-cc-boton-archivo,
.yf-cc-boton-archivo:focus-within { outline: 2px solid var(--yf-primario); outline-offset: 2px; }

.yf-cc-miniaturas {
    list-style: none;
    margin: var(--yf-esp-4) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: var(--yf-esp-3);
}

.yf-cc-miniatura {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--yf-esp-1);
    padding: var(--yf-esp-2);
    border: 1px solid var(--yf-borde);
    border-radius: var(--yf-radio-md);
    background: var(--yf-superficie);
}

.yf-cc-miniatura img,
.yf-cc-miniatura__pdf {
    grid-column: 1 / -1;
    width: 100%;
    height: 7rem;
    object-fit: cover;
    border-radius: var(--yf-radio-sm);
    background: var(--yf-superficie-2);
}

.yf-cc-miniatura__pdf { display: flex; align-items: center; justify-content: center; }
.yf-cc-miniatura__pdf .rzi { font-size: 2.5rem; color: var(--yf-error); }
.yf-cc-miniatura__nombre { font-size: var(--yf-texto-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yf-cc-miniatura .rz-button { grid-row: 2 / span 2; grid-column: 2; align-self: center; }

.yf-cc-listo { display: flex; gap: var(--yf-esp-4); align-items: flex-start; }
.yf-cc-listo > .rzi { font-size: 2.5rem; color: var(--yf-ok); }

@media (max-width: 1100px) {
    .yf-cc-revision { grid-template-columns: minmax(0, 1fr); }
    .yf-cc-visor { position: static; }
    .yf-cc-visor__pdf { height: 70vh; }
}

@media (max-width: 640px) {
    .yf-cc-botones-carga > .yf-cc-boton-archivo { flex: 1 1 100%; justify-content: center; }
    .yf-cc-linea { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
    .yf-cc-linea > :first-child { grid-column: 1 / -1; width: 100% !important; }
}

/* ---------- Pantallas angostas (tablet y celular) ---------- */

/* Los descendientes con position: absolute (p. ej. los textos solo para lectores de pantalla de Radzen)
   se escapan del recorte si el contenedor no es su bloque contenedor y hacen desplazar toda la página. */
.yf-desplazable { position: relative; }

/* Las pestañas que no entran se desplazan en lugar de empujar la página. */
.rz-tabview-nav {
    overflow-x: auto;
    scrollbar-width: thin;
}

.rz-tabview-nav > li { flex-shrink: 0; }

/* Las grillas usan table-layout: fixed: en pantallas angostas las columnas sin ancho quedaban en cero
   y el texto se partía letra por letra. Con un ancho mínimo, la grilla se desplaza horizontalmente. */
@media (max-width: 1024px) {
    .rz-data-grid .rz-grid-table { min-width: 44rem; }
}

/* En celular el menú lateral se superpone al contenido en lugar de achicarlo. */
.yf-sidebar-fondo { display: none; }

@media (max-width: 768px) {
    .rz-sidebar-responsive.rz-sidebar-expanded {
        position: fixed;
        top: var(--yf-alto-header);
        bottom: 0;
        left: 0;
        z-index: 1001;
        overflow-y: auto;
        box-shadow: var(--yf-sombra-lg);
    }

    .yf-sidebar-fondo {
        display: block;
        position: fixed;
        inset: var(--yf-alto-header) 0 0 0;
        z-index: 1000;
        background: rgba(20, 16, 32, 0.35);
    }
}

@media (max-width: 1100px) {
    .yf-header__cuit { display: none; }
}

@media (max-width: 860px) {
    .yf-header__empresa {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .yf-subnav {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .yf-subnav a { flex-shrink: 0; }
}

@media (max-width: 640px) {
    :root { --yf-gutter-pagina: var(--yf-esp-4); }

    .yf-contenido { padding-top: var(--yf-esp-5); }

    .yf-panel--cuerpo { padding: var(--yf-esp-4); }
    .yf-panel--pestanias { padding: var(--yf-esp-1) var(--yf-esp-4) var(--yf-esp-4); }
    .yf-panel__encabezado { padding: var(--yf-esp-3) var(--yf-esp-4); }
    .yf-barra-filtros { padding: var(--yf-esp-4); }

    /* Encabezado: queda el período y los accesos; la empresa y el texto del estado se ven en pantallas más anchas. */
    .yf-header {
        gap: var(--yf-esp-1);
        padding: 0 var(--yf-esp-2) 0 0;
    }

    .yf-header__contexto { gap: var(--yf-esp-1); }
    .yf-header__empresa { display: none; }
    .yf-header .rz-dropdown { width: 9.5rem !important; flex-shrink: 0; }
    .yf-header .yf-estado { font-size: 0; gap: 0; padding: 0.25rem; }
    .yf-header .yf-estado .rzi { font-size: 1rem; }
    .yf-usuario { padding: 0.125rem; }
    .yf-usuario > .rzi { display: none; }

    /* Los paneles emergentes del encabezado ocupan el ancho de la pantalla. */
    .yf-header .yf-popover__panel {
        position: fixed;
        top: calc(var(--yf-alto-header) + 0.25rem);
        left: var(--yf-esp-3);
        right: var(--yf-esp-3);
        min-width: 0;
        max-width: none;
        max-height: calc(100vh - var(--yf-alto-header) - 1rem);
        overflow-y: auto;
    }

    .yf-formulario--dos { grid-template-columns: minmax(0, 1fr); }
    .yf-formulario--dos > *,
    .yf-formulario--tres > *,
    .yf-formulario--cuatro > * { grid-column: 1 / -1 !important; }

    .yf-tornado__fila { grid-template-columns: minmax(0, 1fr); gap: var(--yf-esp-1); }
}

/* Cotizador: cada línea en bloque; el nombre arriba con el botón de quitar y los importes debajo. */
@media (max-width: 900px) {
    .yf-cotizador__linea--titulos { display: none; }

    .yf-cotizador__linea,
    .yf-cotizador__linea--costo {
        grid-template-columns: minmax(0, 1fr) 2rem;
        padding-bottom: var(--yf-esp-2);
        border-bottom: 1px solid var(--yf-borde);
    }

    .yf-cotizador__linea > :nth-child(2),
    .yf-cotizador__linea > :nth-child(3) { grid-column: 1 / -1; }

    .yf-cotizador__linea > :last-child { grid-row: 1; grid-column: 2; }
}