/* ------------------------------------------------------------------------------------------------
   Edición de cotizaciones (Components/Pages/Cotizacion/Edicion/*).
   Solo lo que Radzen no trae hecho. Todo cuelga de .cot y usa las variables del tema Radzen, así
   que sigue el tema activo (claro/oscuro) sin colores propios.
   ------------------------------------------------------------------------------------------------ */

.cot { --cot-gap: 1.25rem; }

.cot .cot-empuja-derecha { margin-left: auto; }
.cot .cot-hr { border: 0; border-top: 1px solid var(--rz-base-300); margin: 0; width: 100%; }
.cot .cot-icono-pequeno { font-size: 1rem; vertical-align: -0.2em; }
.cot-camion-punto { display: inline-block; width: .7rem; height: .7rem; margin-right: .35rem; border-radius: 50%; vertical-align: baseline; border: 1px solid rgba(0, 0, 0, .15); }

/* ---- encabezado y resumen (Diseño A) -------------------------------------------------------- */
.cot .cot-encabezado { padding-bottom: .25rem; }
.cot .cot-sticky { position: sticky; top: 4.75rem; max-height: calc(100vh - 5.5rem); overflow-y: auto; }

@media (max-width: 991.98px) {
    .cot .cot-sticky { position: static; max-height: none; overflow: visible; }
}

/* ---- tarjeta "Información General" ---------------------------------------------------------------- */
.cot .cot-resumen-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.cot .cot-resumen-controles { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.cot .cot-fecha-linea { display: flex; align-items: center; gap: .5rem; margin-top: -.35rem; padding-bottom: .35rem; font-size: .8125rem; color: var(--rz-text-secondary-color); }
.cot .cot-fecha-linea .rz-label { font-size: .8125rem; }

/* Barra fija inferior (solo cuando el resumen ya no queda a la vista: pantallas bajo 992 px) */
.cot .cot-barra-inferior { display: none; }
@media (max-width: 991.98px) {
    .cot .cot-barra-inferior {
        position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: .75rem; margin-top: .5rem;
        padding: .65rem 1rem; background: var(--rz-base-background-color); border: 1px solid var(--rz-base-300);
        border-radius: var(--rz-border-radius); box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
    }
    .cot .cot-barra-inferior .cot-pie-total { margin-right: auto; }
}
@media (max-width: 575.98px) {
    .cot .cot-barra-inferior { gap: .5rem; padding-inline: .75rem; }
    .cot .cot-barra-inferior .cot-boton-vista .rz-button-text { display: none; }
}

.cot .cot-total { color: var(--rz-primary-dark); font-variant-numeric: tabular-nums; font-weight: 700; }

.cot .cot-linea { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2.25rem; font-variant-numeric: tabular-nums; }
.cot .cot-linea-total { border-top: 1px solid var(--rz-base-300); margin-top: .35rem; padding-top: .6rem; font-size: 1.1rem; }

/* ---- línea de tiempo entrega → evento → retiro ----------------------------------------------- */
.cot .cot-timeline { border: 1px solid var(--rz-primary-lighter); background: var(--rz-primary-lighter); border-radius: var(--rz-border-radius); padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: .75rem; }
.cot .cot-timeline-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.cot .cot-hito { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.cot .cot-hito > .rzi { flex: none; color: var(--rz-primary); }
.cot .cot-hito > div { display: flex; flex-direction: column; min-width: 0; }
.cot .cot-hito small { font-size: .72rem; letter-spacing: .05em; color: var(--rz-text-secondary-color); }
.cot .cot-hito strong { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 575.98px) {
    .cot .cot-timeline-fila { grid-template-columns: 1fr; }
}

/* ---- stepper (estado comercial y despacho) --------------------------------------------------- */
.cot .cot-stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.cot .cot-step { position: relative; text-align: center; padding: 0 .35rem; }
.cot .cot-step::before,
.cot .cot-step::after { content: ""; position: absolute; top: 1.05rem; height: 3px; background: var(--rz-base-300); }
.cot .cot-step::before { left: 0; right: 50%; }
.cot .cot-step::after { left: 50%; right: 0; }
.cot .cot-step:first-child::before,
.cot .cot-step:last-child::after { display: none; }
.cot .cot-step-hecho::before,
.cot .cot-step-hecho::after,
.cot .cot-step-actual::before { background: var(--rz-primary); }

.cot .cot-step-dot {
    position: relative; z-index: 1; width: 2.25rem; height: 2.25rem; padding: 0; border-radius: 50%;
    border: 2px solid var(--rz-base-600); background: var(--rz-base-background-color); color: var(--rz-text-secondary-color);
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; cursor: pointer;
}
.cot .cot-step-dot:disabled { cursor: default; }
.cot .cot-step-hecho .cot-step-dot { background: var(--rz-primary); border-color: var(--rz-primary); color: var(--rz-on-primary); }
.cot .cot-step-actual .cot-step-dot { border: 3px solid var(--rz-primary); color: var(--rz-primary); }
.cot .cot-step-inner { width: .65rem; height: .65rem; border-radius: 50%; background: currentColor; }
.cot .cot-step-text { display: flex; flex-direction: column; margin-top: .5rem; }
.cot .cot-step-title { font-weight: 600; }
.cot .cot-step-actual .cot-step-title { font-weight: 700; color: var(--rz-text-title-color); }
.cot .cot-step-sub { font-size: .8125rem; color: var(--rz-text-secondary-color); }

/* Estados fuera del avance normal: no colorean la línea que llega hasta ellos y toman un tono propio al estar activos */
.cot .cot-step-lateral.cot-step-actual::before { background: var(--rz-base-300); }
.cot .cot-step-tono-warning.cot-step-actual .cot-step-dot { border-color: var(--rz-warning); color: var(--rz-warning); }
.cot .cot-step-tono-danger.cot-step-actual .cot-step-dot { border-color: var(--rz-danger); color: var(--rz-danger); }
.cot .cot-step-tono-danger.cot-step-actual .cot-step-title { color: var(--rz-danger); }

/* Versión compacta: vive en el encabezado, junto al título */
.cot .cot-stepper-compacto { flex: 1 1 26rem; min-width: min(100%, 26rem); max-width: 40rem; }
.cot .cot-stepper-compacto .cot-step { padding: 0 .15rem; }
.cot .cot-stepper-compacto .cot-step::before,
.cot .cot-stepper-compacto .cot-step::after { top: .85rem; height: 2px; }
.cot .cot-stepper-compacto .cot-step-dot { width: 1.75rem; height: 1.75rem; font-size: .8rem; }
.cot .cot-stepper-compacto .cot-step-dot .rzi { font-size: 1rem; }
.cot .cot-stepper-compacto .cot-step-inner { width: .5rem; height: .5rem; }
.cot .cot-stepper-compacto .cot-step-text { margin-top: .2rem; }
.cot .cot-stepper-compacto .cot-step-title { font-size: .76rem; line-height: 1.1; }
.cot .cot-stepper-compacto .cot-step-sub { display: none; }

/* Contenedor que permite deslizar el stepper en pantallas muy angostas (móvil) */
.cot .cot-scroll-x { overflow-x: auto; padding-bottom: .25rem; }
.cot .cot-scroll-x .cot-stepper { min-width: 30rem; max-width: none; flex: none; }
/* Los nombres del despacho son largos («Despachada/Entregada»): cada paso necesita su ancho para no montarse con el vecino */
.cot .cot-scroll-x .cot-stepper:not(.cot-stepper-compacto) { min-width: max(30rem, calc(var(--n, 3) * 8.5rem)); }

/* ---- búsqueda y filtros de productos --------------------------------------------------------- */
.cot .cot-buscador { flex: 1 1 18rem; min-width: 14rem; max-width: 28rem; }

/* ---- tabla de productos (Diseño A) ------------------------------------------------------------ */
.cot .cot-tabla { container-type: inline-size; border: 1px solid var(--rz-base-300); border-radius: var(--rz-border-radius); overflow: hidden; }

.cot .cot-fila {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) 118px 132px 104px 76px; column-gap: .9rem; align-items: center;
    padding: .6rem 1rem; border-bottom: 1px solid var(--rz-base-200); background: var(--rz-base-background-color);
}
.cot .cot-fila-cab {
    padding-top: .55rem; padding-bottom: .55rem; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--rz-text-secondary-color); background: var(--rz-base-100);
}
.cot .cot-fila-alerta { background: var(--rz-danger-lighter); }
.cot .cot-derecha { text-align: right; }

.cot .cot-thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--rz-base-200); }
.cot .cot-thumb-grande { width: 64px; height: 64px; }

.cot .cot-fila-nombre { display: flex; flex-direction: column; min-width: 0; }
.cot .cot-fila-precio { display: flex; align-items: center; gap: .35rem; }

/* Leyenda en rojo (encabezado de precios de la tabla y campo de precio de la tarjeta) cuando faltan las fechas del evento */
.cot .cot-leyenda-fechas {
    display: block; margin-top: .15rem; color: var(--rz-danger); font-size: .7rem; font-weight: 600; line-height: 1.15;
    text-transform: none; letter-spacing: 0;
}
.cot .cot-fila-total { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.cot .cot-fila-acciones { display: flex; justify-content: flex-end; }

.cot .cot-solo-ancho { display: none; }
.cot .cot-solo-angosto { display: block; margin-top: .25rem; }

@container (min-width: 1000px) {
    .cot .cot-fila { grid-template-columns: 44px minmax(0, 1fr) 150px 118px 132px 104px 76px; }
    .cot .cot-solo-ancho { display: block; }
    .cot .cot-solo-angosto { display: none; }
}

.cot .cot-grupo {
    display: flex; align-items: center; gap: .6rem; padding: .35rem 1rem .35rem .5rem; background: var(--rz-base-200);
    border-bottom: 1px solid var(--rz-base-300);
}
.cot .cot-tabla-pie { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; padding: .85rem 1rem; background: var(--rz-base-100); }
.cot .cot-subtotal { margin-left: .5rem; font-size: 1.15rem; font-variant-numeric: tabular-nums; }

/* ---- asistente móvil (Diseño B) ---------------------------------------------------------------- */
.cot .cot-asistente { display: flex; flex-direction: column; min-height: calc(100dvh - 5rem); }
.cot .cot-asistente-barra {
    position: sticky; top: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; padding: .25rem 0.3rem .25rem; border-radius: 5px;
    background: var(--rz-body-background-color); background-color: ghostwhite;
}
.cot .cot-asistente-titulo { flex: 1; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
/* Estado comercial dentro de la barra: ocupa su propia línea (también en pantalla de computador). Si no cabe, se desliza hacia los lados. */
.cot .cot-asistente-estado { flex: 0 0 100%; min-width: 0; overflow-x: auto; padding: .1rem 0 .2rem; scrollbar-width: none; }
.cot .cot-asistente-estado::-webkit-scrollbar { display: none; }
.cot .cot-asistente-estado .cot-stepper-compacto { flex: none; width: 100%; max-width: 40rem; min-width: calc(var(--n, 3) * 5.5rem); margin-inline: auto; }
/* Cabecera de pasos de Radzen: en pantallas angostas solo el paso actual muestra su nombre, para que quepan en una fila. */
@media (max-width: 575.98px) {
    /* Estado y «Sin guardar» juntos, en una sola línea bajo el título */
    .cot .cot-asistente-titulo { gap: .1rem .35rem; }
    .cot .cot-asistente-titulo strong { flex-basis: 100%; }
    .cot .cot-asistente-titulo .rz-badge { font-size: .65rem; padding: .15rem .45rem; }
    .cot .cot-asistente .rz-steps-item:not(.rz-steps-current) .rz-steps-title { display: none; }
    .cot .cot-asistente .rz-steps ul { flex-wrap: nowrap; }
}

.cot .cot-paso { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.25rem 0 6rem; }

.cot .cot-pie-asistente {
    position: sticky; bottom: 0; z-index: 5; margin-top: auto; display: flex; align-items: center; justify-content: flex-end; gap: .75rem;
    padding: .75rem 1rem; background: var(--rz-base-background-color); border-top: 1px solid var(--rz-base-300); box-shadow: 0 -2px 8px rgba(0, 0, 0, .06);
}
.cot .cot-pie-asistente > * { min-width: 0; }
.cot .cot-pie-total { display: flex; flex-direction: column; margin-right: auto; line-height: 1.15; }
.cot .cot-pie-total strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }

.cot .cot-boton-tactil { min-width: 44px; min-height: 44px; }
.cot .cot-boton-ancho { width: 100%; }

.cot .cot-resumen-fila { display: flex; align-items: center; gap: .75rem; padding: .65rem 0; border-bottom: 1px solid var(--rz-base-200); }
.cot .cot-resumen-fila:last-child { border-bottom: 0; }
.cot .cot-resumen-fila > .rzi { color: var(--rz-primary); }
.cot .cot-resumen-texto { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cot .cot-resumen-texto small { font-size: .72rem; letter-spacing: .05em; color: var(--rz-text-secondary-color); }

/* Lista de tarjetas: 1 columna en teléfono, 2 o más en tablet */
.cot .cot-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .75rem; }

/* ---- tarjeta de producto (móvil) ---------------------------------------------------------------- */
.cot .cot-tarjeta { padding: .75rem; display: flex; flex-direction: column; gap: .6rem; }
.cot .cot-tarjeta-sel { border-color: var(--rz-primary); background: var(--rz-primary-lighter); }
.cot .cot-tarjeta-alerta { border-color: var(--rz-danger); }
.cot .cot-tarjeta-cuerpo { display: flex; gap: .75rem; align-items: flex-start; }
.cot .cot-tarjeta-info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.cot .cot-tarjeta-control { display: flex; align-items: center; gap: .4rem; }
.cot .cot-cantidad-movil { flex: 1; min-width: 3rem; }
.cot .cot-cantidad-movil input { text-align: center; font-weight: 700; }

/* ---- botones de acción en el encabezado --------------------------------------------------------- */
.cot .cot-acciones { flex-wrap: nowrap; }

/* ---- aviso de cotización pendiente (listado de cotizaciones) ------------------------------------- */
.cot-borrador {
    display: flex; align-items: center; gap: 1rem; margin: 0 0 1rem; padding: .85rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--rz-warning) 40%, var(--rz-base-300));
    border-left: 4px solid var(--rz-warning);
    border-radius: var(--rz-border-radius);
    background: linear-gradient(90deg, color-mix(in srgb, var(--rz-warning) 13%, var(--rz-base-background-color)), var(--rz-base-background-color) 70%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.cot-borrador-icono {
    flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--rz-warning) 22%, var(--rz-base-background-color)); color: var(--rz-warning-dark, var(--rz-warning));
}
.cot-borrador-icono .rzi { font-size: 1.4rem; }
.cot-borrador-cuerpo { flex: 1 1 auto; min-width: 0; }
.cot-borrador-titulo { font-weight: 700; color: var(--rz-text-title-color); }
.cot-borrador-detalle { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem 1rem; font-size: .875rem; color: var(--rz-text-secondary-color); }
.cot-borrador-detalle strong { color: var(--rz-text-color); }
.cot-borrador-detalle > span { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.cot-borrador-detalle .rzi { font-size: 1rem; color: var(--rz-base-500); }
.cot-borrador-acciones { flex: none; display: flex; align-items: center; gap: .4rem; }

@media (max-width: 575.98px) {
    .cot-borrador { flex-wrap: wrap; gap: .6rem .75rem; padding: .75rem .9rem; }
    .cot-borrador-cuerpo { flex-basis: calc(100% - 3.5rem); }
    .cot-borrador-acciones { flex-basis: 100%; justify-content: flex-end; }
}

/* ---- productos adicionales (fuera de inventario) --------------------------------------------------- */
.cot .cot-extra-vacio {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .6rem 1rem;
    border: 1px dashed var(--rz-base-400); border-radius: var(--rz-border-radius); background: var(--rz-base-100);
    color: var(--rz-text-secondary-color); font-size: .875rem;
}
.cot .cot-extra-vacio .rzi { color: var(--rz-primary); }
.cot .cot-extra-vacio > span { flex: 1 1 18rem; min-width: 0; }

.cot .cot-extras { container-type: inline-size; border: 1px solid var(--rz-base-300); border-radius: var(--rz-border-radius); overflow: hidden; }
.cot .cot-extra-fila {
    display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem 8.5rem 8rem 6rem 7.5rem 2.75rem; column-gap: .75rem; row-gap: .5rem; align-items: start;
    padding: .65rem 1rem; border-bottom: 1px solid var(--rz-base-200); background: var(--rz-base-background-color);
}
.cot .cot-extras-sin-costo .cot-extra-fila { grid-template-columns: minmax(0, 1fr) 5.5rem 8.5rem 6rem 7.5rem; }
.cot .cot-extra-cab {
    align-items: center; padding-top: .55rem; padding-bottom: .55rem; font-size: .75rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--rz-text-secondary-color); background: var(--rz-base-100);
}
.cot .cot-extra-celda { min-width: 0; }
.cot .cot-extra-celda::before { content: attr(data-etiqueta); display: none; margin-bottom: .15rem; font-size: .72rem; color: var(--rz-text-secondary-color); }
.cot .cot-extra-pordia, .cot .cot-extra-total, .cot .cot-extra-quitar { align-self: center; }
.cot .cot-extra-total { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.cot .cot-extra-obs { grid-column: 1 / -1; }
.cot .cot-extra-error { display: block; margin-top: .2rem; color: var(--rz-danger); }
.cot .cot-extra-invalido .cot-extra-desc input { border-color: var(--rz-danger); }
.cot .cot-extras-pie {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .25rem 1rem;
    padding: .65rem 1rem; background: var(--rz-base-100); font-size: .875rem;
}

/* Ancho medio (columna de contenido de un escritorio normal, tablet): cada adicional ocupa tres filas con sus etiquetas
   fila 1: descripción + total · fila 2: cantidad, precio, costo y cobro · fila 3: observación + quitar */
@container (max-width: 919px) {
    .cot .cot-extra-cab { display: none; }
    .cot .cot-extra-fila, .cot .cot-extras-sin-costo .cot-extra-fila { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cot .cot-extra-celda::before { display: block; }
    .cot .cot-extra-desc { grid-column: 1 / 4; grid-row: 1; }
    .cot .cot-extra-total { grid-column: 4; grid-row: 1; text-align: right; align-self: start; }
    .cot .cot-extra-cant, .cot .cot-extra-precio, .cot .cot-extra-costo, .cot .cot-extra-pordia { grid-row: 2; align-self: start; }
    .cot .cot-extra-obs { grid-column: 1 / 4; grid-row: 3; }
    .cot .cot-extra-quitar { grid-column: 4; grid-row: 3; justify-self: end; align-self: end; }
    .cot .cot-extra-quitar::before { display: none; }
}

/* Ancho angosto (teléfono): tarjeta de dos columnas */
@container (max-width: 559px) {
    .cot .cot-extra-fila, .cot .cot-extras-sin-costo .cot-extra-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cot .cot-extra-desc, .cot .cot-extra-obs { grid-column: 1 / -1; grid-row: auto; }
    .cot .cot-extra-total, .cot .cot-extra-cant, .cot .cot-extra-precio, .cot .cot-extra-costo, .cot .cot-extra-pordia, .cot .cot-extra-quitar { grid-column: auto; grid-row: auto; }
    .cot .cot-extra-total { text-align: left; }
}

/* Aviso interno de stock (Observacion_Interna / conObservacion): franja llamativa arriba de la cotización. Solo Admin y Vendedor. */
.cot .cot-aviso-stock { font-size: 0.95rem; box-shadow: 0 2px 8px rgba(176, 90, 0, .35); }
.cot .cot-aviso-stock .cot-aviso-stock__titulo,
.cot .cot-aviso-stock .cot-aviso-stock__texto,
.cot .cot-aviso-stock .cot-aviso-stock__nota { display: block; }
.cot .cot-aviso-stock .cot-aviso-stock__texto { margin-top: .15rem; }
.cot .cot-aviso-stock .cot-aviso-stock__nota { margin-top: .35rem; opacity: .85; font-size: .8rem; }