/* =========================================================================
   Carrocerías Panamericana — cotizador
   Identidad tomada del sitio de la empresa: rojo #C41E3A, Poppins 800 en los
   títulos, Inter en el texto, botones de 12 px en versalita.
   ========================================================================= */

:root {
    /* Paleta, muestreada del sitio de la empresa */
    --cp-rojo: #C41E3A;
    --cp-rojo-oscuro: #9E1830;
    --cp-tinta: #1A1A1A;
    --cp-carbon: #0A0A0A;
    --cp-humo: #F1F5F9;
    --cp-borde: #E2E8F0;
    --cp-gris: #64748B;

    --cp-radio: 12px;
    --cp-radio-chico: 8px;
    --cp-sombra-roja: 0 4px 15px rgba(196, 30, 58, .2);

    --cp-display: "Poppins", system-ui, sans-serif;
    --cp-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

html {
    font-size: 15px;
}

body {
    font-family: var(--cp-texto);
    color: var(--cp-tinta);
    background-color: var(--cp-humo);
}

/* Los números se leen en columna: cifras de ancho fijo. */
.cp-cifras,
table td,
table th,
input[type="number"] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand {
    font-family: var(--cp-display);
    font-weight: 800;
    letter-spacing: -.01em;
}

a {
    color: var(--cp-rojo);
    text-decoration: none;
}

a:hover {
    color: var(--cp-rojo-oscuro);
    text-decoration: underline;
}

/* --- Micro-etiqueta: el recurso que ordena la página ------------------- */
.cp-rotulo {
    font-family: var(--cp-display);
    font-weight: 600;
    font-size: .68rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--cp-rojo);
}

/* --- Barra superior ---------------------------------------------------- */
.navbar {
    background-color: var(--cp-carbon) !important;
    border-bottom: 3px solid var(--cp-rojo);
    padding-block: .55rem;
}

.navbar .navbar-brand {
    color: #fff !important;
    font-size: 1.05rem;
    letter-spacing: -.02em;
}

/* El monograma CP es un disco rojo: sobre la barra negra pone él solo el color
   de la marca, así que el nombre va entero en blanco. */
.navbar .cp-monograma {
    display: block;
    flex-shrink: 0;
}

.navbar .nav-link {
    color: rgba(255, 255, 255, .72) !important;
    font-weight: 500;
    font-size: .92rem;
    padding-inline: .9rem !important;
    border-radius: var(--cp-radio-chico);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus-visible {
    color: #fff !important;
    background-color: rgba(255, 255, 255, .07);
}

.navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, .25);
}

.navbar .navbar-toggler-icon {
    filter: invert(1);
}

/* --- Placa de características ------------------------------------------
   El bloque que resume el furgón, tratado como la placa remachada que lleva
   la carrocería: losa oscura, filete rojo y cifras tabulares. Es el único
   elemento con peso visual de la página; el resto va callado.
   ---------------------------------------------------------------------- */
.cp-placa {
    background: var(--cp-carbon);
    color: #fff;
    border-radius: var(--cp-radio);
    border-left: 4px solid var(--cp-rojo);
    padding: 1rem 1.25rem;
}

.cp-placa .cp-rotulo {
    color: rgba(255, 255, 255, .55);
}

.cp-placa-dato {
    font-family: var(--cp-display);
    font-weight: 800;
    font-size: 1.35rem;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.cp-placa-dato small {
    font-family: var(--cp-texto);
    font-weight: 400;
    font-size: .8rem;
    color: rgba(255, 255, 255, .6);
}

.cp-placa-importe {
    font-family: var(--cp-display);
    font-weight: 800;
    font-size: 1.9rem;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.cp-placa hr {
    border-color: rgba(255, 255, 255, .15);
    opacity: 1;
}

/* --- Tarjetas ---------------------------------------------------------- */
.card {
    border: 1px solid var(--cp-borde);
    border-radius: var(--cp-radio);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.card > .card-header {
    background-color: #fff;
    border-bottom: 1px solid var(--cp-borde);
    border-radius: var(--cp-radio) var(--cp-radio) 0 0 !important;
    font-family: var(--cp-display);
    font-weight: 600;
    font-size: .95rem;
    padding: .7rem 1.1rem;
}

.card > .card-body {
    padding: 1.1rem;
}

/* --- Formularios ------------------------------------------------------- */
.form-label {
    font-size: .78rem;
    font-weight: 500;
    color: var(--cp-gris);
    margin-bottom: .25rem;
}

.form-control,
.form-select {
    border-color: var(--cp-borde);
    border-radius: var(--cp-radio-chico);
    font-size: .92rem;
    padding: .45rem .7rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--cp-rojo);
    box-shadow: 0 0 0 3px rgba(196, 30, 58, .12);
}

.form-check-input:checked {
    background-color: var(--cp-rojo);
    border-color: var(--cp-rojo);
}

.form-check-input:focus {
    border-color: var(--cp-rojo);
    box-shadow: 0 0 0 3px rgba(196, 30, 58, .12);
}

.form-check-label {
    color: #334155;
}

/* ASP.NET marca así el resumen de validación cuando no hay errores.
   Sin ocultarlo, el formulario muestra una caja roja vacía. */
.validation-summary-valid {
    display: none;
}

/* --- Botones ----------------------------------------------------------- */
.btn {
    border-radius: var(--cp-radio-chico);
    font-weight: 600;
    font-size: .85rem;
}

.btn-danger,
.btn-primary {
    background-color: var(--cp-rojo);
    border-color: var(--cp-rojo);
    border-radius: var(--cp-radio);
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: .55rem 1.3rem;
    box-shadow: var(--cp-sombra-roja);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--cp-rojo-oscuro);
    border-color: var(--cp-rojo-oscuro);
}

.btn-outline-danger {
    color: var(--cp-rojo);
    border-color: var(--cp-borde);
    border-radius: var(--cp-radio-chico);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background-color: var(--cp-rojo);
    border-color: var(--cp-rojo);
    color: #fff;
}

.btn-outline-secondary {
    color: var(--cp-gris);
    border-color: var(--cp-borde);
    border-radius: var(--cp-radio-chico);
}

/* --- Tablas ------------------------------------------------------------ */
.table {
    font-size: .88rem;
    margin-bottom: 0;
}

.table > thead th {
    background-color: var(--cp-humo);
    border-bottom: 1px solid var(--cp-borde);
    font-family: var(--cp-display);
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cp-gris);
    padding-block: .6rem;
}

.table > tbody td {
    border-color: var(--cp-borde);
    vertical-align: middle;
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(196, 30, 58, .04);
}

/* --- Distintivos -------------------------------------------------------
   Bootstrap 5.1 no trae las clases text-bg-*: llegaron en la 5.2. Usarlas deja
   el distintivo con texto blanco sobre fondo blanco, invisible. Van propias. */
.cp-distintivo {
    background-color: var(--cp-carbon);
    color: #fff;
}

.cp-distintivo-exito {
    background-color: #15803D;
    color: #fff;
}

.cp-distintivo-aviso {
    background-color: #FEF3C7;
    color: #92400E;
}

/* Un envío al cliente que no salió (historial de envíos del detalle). */
.cp-distintivo-error {
    background-color: #FEE2E2;
    color: #991B1B;
}

/* Historial de envíos: el motivo de un fallo se lee entero; la referencia del proveedor
   (Message-Id, SID de Twilio) se recorta y va completa en el título. */
.cp-envio-detalle {
    min-width: 16rem;
}

.cp-referencia {
    display: inline-block;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* El botón de enviar del listado, cuando la cotización ya se le mandó al cliente. */
.cp-accion.cp-enviada {
    color: #15803D;
    border-color: #86EFAC;
}

.badge {
    font-weight: 600;
    font-size: .68rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: .3rem .6rem;
}

/* --- Avisos ------------------------------------------------------------ */
.alert {
    border-radius: var(--cp-radio);
    border: 1px solid var(--cp-borde);
    font-size: .9rem;
}

.alert-warning {
    background-color: #FFF8E6;
    border-color: #F5DFA8;
    color: #7A5A12;
}

.alert-danger {
    background-color: #FDF0F2;
    border-color: #F3C7CF;
    color: var(--cp-rojo-oscuro);
}

/* --- Accesorios ---------------------------------------------------------
   Un renglón por accesorio, como en el Excel: el nombre a la izquierda y a la
   derecha su control —interruptor, cantidad u opción— en una columna fija para
   que todos los valores queden alineados y se lean de un vistazo. */
.cp-accesorios {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem;
}

@media (max-width: 991px) {
    .cp-accesorios {
        /* minmax(0, …): una opción larga no debe ensanchar la columna. */
        grid-template-columns: minmax(0, 1fr);
    }
}

.cp-accesorio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    /* Misma altura con interruptor o con lista, para que las dos columnas casen. */
    min-height: 3rem;
    padding: .35rem 0;
    border-bottom: 1px solid var(--cp-borde);
}

.cp-accesorio-nombre {
    font-size: .84rem;
    line-height: 1.3;
    color: #334155;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.cp-accesorio-controles {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .4rem;
    flex: 0 0 auto;
}

.cp-accesorio .cp-valor {
    width: 9.5rem;
}

.cp-accesorio .cp-complemento {
    width: 12rem;
}

/* Por qué un accesorio no se puede elegir con la configuración actual (el excedente
   de piso sin piso en fibra de vidrio). */
.cp-accesorio-nota {
    display: block;
    margin-top: .1rem;
    font-size: .75rem;
    color: #B45309;
}

.cp-accesorio-nota[hidden] {
    display: none;
}

/* Un accesorio que no lleva se atenúa: se ve de un vistazo qué entra. */
.cp-accesorio.cp-no-lleva .cp-accesorio-nombre {
    color: #94A3B8;
}

.cp-accesorio .form-switch .form-check-input {
    width: 2.4em;
    height: 1.25em;
    cursor: pointer;
}

/* En el teléfono no caben nombre, dato secundario y cantidad en una línea:
   los controles bajan debajo del nombre y se reparten el ancho. */
@media (max-width: 575px) {
    .cp-accesorio .cp-valor {
        width: 9rem;
    }

    .cp-accesorio:has(.cp-complemento) {
        flex-wrap: wrap;
        row-gap: .35rem;
    }

    .cp-accesorio:has(.cp-complemento) .cp-accesorio-nombre,
    .cp-accesorio:has(.cp-complemento) .cp-accesorio-controles {
        flex: 1 1 100%;
        min-width: 0;
    }

    .cp-accesorio .cp-complemento {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }
}

/* Espesor de aislante bajo su lista: dato calculado, no elegible, como en el Excel. */
.cp-espesor {
    margin: .3rem 0 0;
    font-size: .76rem;
    color: var(--cp-gris);
}

.cp-espesor strong {
    color: var(--cp-tinta);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* --- Resumen económico en vivo -----------------------------------------
   El bloque del pie de la hoja del Excel, pegado al borde inferior mientras se
   recorre el formulario: se ve moverse con cada opción. Al llegar al final de la
   página queda en su sitio, antes del pie. Misma losa oscura que la placa. */
.cp-resumen {
    position: sticky;
    bottom: .75rem;
    z-index: 1020;
    background: var(--cp-carbon);
    color: #fff;
    border-radius: var(--cp-radio);
    border-left: 4px solid var(--cp-rojo);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .28);
    padding: .8rem 1.2rem;
}

.cp-resumen-cifras {
    display: grid;
    /* El total toma el ancho que necesita; los seis importes se reparten el resto. */
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
    gap: .35rem 1.1rem;
    align-items: end;
    margin: 0;
}

.cp-cifra dt {
    font-family: var(--cp-display);
    font-weight: 600;
    font-size: .62rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-cifra dd {
    margin: 0;
    font-weight: 600;
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: opacity .15s;
}

.cp-cifra-total {
    text-align: right;
}

.cp-cifra-total dd {
    font-family: var(--cp-display);
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1.1;
    letter-spacing: -.02em;
}

/* Cuánto movió el total el último cambio: lo que el asesor quiere saber de cada opción. */
.cp-delta {
    display: inline-block;
    margin-right: .5rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    font-family: var(--cp-texto);
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: 0;
    vertical-align: middle;
    color: rgba(255, 255, 255, .85);
}

.cp-resumen-estado {
    color: var(--cp-rojo);
    text-transform: none;
    letter-spacing: 0;
}

.cp-resumen[data-cp-estado="calculando"] .cp-cifra dd {
    opacity: .55;
}

.cp-resumen[data-cp-listo="no"] .cp-cifra dd {
    color: rgba(255, 255, 255, .35);
}

.cp-resumen-mensaje {
    margin: 0 0 .5rem;
    font-size: .82rem;
    color: rgba(255, 255, 255, .8);
}

.cp-resumen-mensaje[hidden] {
    display: none;
}

.cp-resumen-avisos {
    margin: .5rem 0 0;
    font-size: .76rem;
    color: #FCD34D;
}

@keyframes cp-destello {
    from { color: #FDA4AF; }
    to { color: inherit; }
}

.cp-cambio {
    animation: cp-destello 1s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .cp-cambio {
        animation: none;
    }
}

/* El detalle solo se pliega donde no cabe en una línea. */
.cp-resumen-conmutador {
    display: none;
}

/* Portátil pequeño y tableta: los seis importes en una fila y el total debajo,
   a la derecha, como en la factura. */
@media (max-width: 1199px) {
    .cp-resumen-cifras {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        column-gap: .8rem;
    }

    .cp-cifra dd {
        font-size: .88rem;
    }

    .cp-cifra-total {
        grid-column: 1 / -1;
        display: flex;
        justify-content: flex-end;
        align-items: baseline;
        gap: .9rem;
        border-top: 1px solid rgba(255, 255, 255, .12);
        padding-top: .45rem;
        margin-top: .15rem;
    }

    .cp-cifra-total dd {
        font-size: 1.35rem;
    }
}

/* Teléfono y tableta: solo el total a la vista; el detalle, a pedido. */
@media (max-width: 767px) {
    .cp-resumen {
        bottom: .5rem;
        padding: .65rem .9rem;
    }

    .cp-resumen-cifras {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cp-cifra-total {
        display: block;
        text-align: left;
    }

    .cp-resumen:not(.cp-abierto) .cp-cifra-detalle {
        display: none;
    }

    .cp-resumen:not(.cp-abierto) .cp-cifra-total {
        border-top: 0;
        padding-top: 0;
        margin-top: 0;
    }

    .cp-cifra-total dd {
        font-size: 1.3rem;
    }

    .cp-resumen-conmutador {
        display: block;
        margin: .35rem 0 0 auto;
        padding: 0;
        border: 0;
        background: none;
        color: rgba(255, 255, 255, .7);
        font-size: .76rem;
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 2px;
    }
}

/* Botón de acción con ícono en el listado: cuadrado, del alto de los demás. */
.btn.cp-accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .25rem .45rem;
    line-height: 1;
}

/* Eliminar va en gris como las demás acciones y solo se tiñe al apuntarlo: en
   una tabla de 25 filas, 25 botones rojos gritarían más que el dato. */
.btn.cp-eliminar:hover,
.btn.cp-eliminar:focus-visible {
    color: #fff;
    background-color: var(--cp-rojo);
    border-color: var(--cp-rojo);
}

/* --- Medidas externas o internas -------------------------------------- */
.cp-tipo-medida {
    flex: 0 0 4.4rem;
    max-width: 4.4rem;
    padding-left: .5rem;
    padding-right: 1.6rem;
    background-position: right .4rem center;
}

.cp-medida-derivada {
    min-height: 1.1rem;
    margin: .25rem 0 0;
    font-size: .74rem;
    color: var(--cp-gris);
    font-variant-numeric: tabular-nums;
}

/* --- Cliente de Ofima: resultados bajo el buscador ----------------------- */
.cp-buscar-cliente {
    position: relative;
}

.cp-resultados {
    position: absolute;
    z-index: 1030;
    left: calc(var(--bs-gutter-x) * .5);
    right: calc(var(--bs-gutter-x) * .5);
    max-height: 18rem;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--cp-borde);
    border-radius: var(--cp-radio-chico);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}

.cp-resultado {
    display: block;
    width: 100%;
    text-align: left;
    padding: .45rem .7rem;
    border: 0;
    border-bottom: 1px solid var(--cp-borde);
    background: none;
    font-size: .86rem;
}

.cp-resultado:hover,
.cp-resultado:focus-visible {
    background: rgba(196, 30, 58, .06);
}

.cp-resultado span {
    color: var(--cp-gris);
}

/* --- Accesorios: búsqueda, altura del riel y adicionales ----------------- */
.cp-filtro-accesorios {
    max-width: 18rem;
}

.cp-accesorio .cp-complemento-texto {
    width: 9rem;
}

.cp-adicional + .cp-adicional {
    margin-top: .1rem;
}

.btn-link {
    color: var(--cp-rojo);
    font-weight: 600;
    text-decoration: none;
}

.btn-link:hover {
    color: var(--cp-rojo-oscuro);
}

/* --- Desglose del cálculo ---------------------------------------------- */
.cp-desglose > summary {
    cursor: pointer;
    border-bottom: 1px solid var(--cp-borde);
}

.cp-desglose-seccion > td {
    background-color: var(--cp-humo) !important;
    font-family: var(--cp-display);
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--cp-gris);
}

.cp-desglose-componente > td {
    font-size: .8rem;
    color: var(--cp-gris);
}

.cp-desglose-componente > td:nth-child(2) {
    padding-left: 1.6rem;
}

/* --- Comparación de precios -------------------------------------------
   Cifras a la derecha para leerlas en columna; en amarillo lo que conviene
   revisar antes de dar por buenos los precios de la base. */
.cp-tabla-precios th,
.cp-tabla-precios td {
    text-align: right;
}

.cp-tabla-precios th:first-child,
.cp-tabla-precios td:first-child,
.cp-tabla-precios .text-start {
    text-align: left;
}

.cp-tabla-precios tr.cp-revisar > td {
    background-color: #FFFBEB;
}

.cp-tabla-precios tr.cp-sin-cambio > td {
    color: var(--cp-gris);
}

/* Marca discreta de las cotizaciones hechas con precios de la base, mientras
   se comparan con las del libro. */
.cp-fuente-precios {
    color: #92400E;
}

.cp-aviso-precio {
    color: #92400E;
    font-size: .74rem;
    line-height: 1.3;
    margin-top: .15rem;
}

/* --- Pie de página ------------------------------------------------------ */
.footer {
    border-top: 1px solid var(--cp-borde);
    background-color: #fff;
    color: var(--cp-gris);
    font-size: .82rem;
}

/* --- Accesibilidad ------------------------------------------------------ */
:focus-visible {
    outline: 2px solid var(--cp-rojo);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* --- Listado de cotizaciones ------------------------------------------- */
.cp-tabla-centrada > thead th,
.cp-tabla-centrada > tbody td {
    text-align: center;
}

/* El listado de cotizaciones: sus diez columnas caben en la página (19-oct-2026: con el botón «Pedido», las
   acciones quedaban fuera, detrás del desplazamiento horizontal). Las acciones van en dos filas de ancho fijo, el
   correo del asesor se recorta (completo en el título) y la etiqueta del origen se parte en dos renglones. */
.cp-tabla-cotizaciones .cp-acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem;
    width: 7.4rem;
    margin-inline: auto;
}

.cp-tabla-cotizaciones .cp-correo {
    max-width: 10rem;
    margin-inline: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-tabla-cotizaciones .badge.cp-ajustable {
    white-space: normal;
    line-height: 1.25;
    max-width: 7.5rem;
}

/* --- Bot: el simulador y la transcripción ------------------------------
   Un chat de WhatsApp sencillo con la identidad de la aplicación: la cabecera
   negra con la línea roja de la barra de navegación, los mensajes propios en un
   rosado muy claro y los del asistente en blanco. */
.cp-chat {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--cp-borde);
    border-radius: var(--cp-radio);
    overflow: hidden;
}

.cp-chat-cabecera {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem 1rem;
    background: var(--cp-carbon);
    border-bottom: 3px solid var(--cp-rojo);
    color: #fff;
}

.cp-chat-cabecera img {
    border-radius: 50%;
    background: #fff;
    padding: 2px;
}

.cp-chat-nombre {
    font-family: var(--cp-display);
    font-weight: 600;
    line-height: 1.2;
}

.cp-chat-estado {
    font-size: .78rem;
    color: #CBD5E1;
}

.cp-chat-boton-nueva {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .35);
    white-space: nowrap;
}

.cp-chat-boton-nueva:hover,
.cp-chat-boton-nueva:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, .12);
}

.cp-chat-cuerpo {
    height: min(62vh, 560px);
    min-height: 320px;
    overflow-y: auto;
    padding: 1rem;
    background: var(--cp-humo);
}

.cp-chat-transcripcion .cp-chat-cuerpo {
    height: auto;
    max-height: 75vh;
}

.cp-chat-mensajes {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.cp-chat-vacio {
    margin: 2rem auto;
    max-width: 26rem;
    text-align: center;
    color: var(--cp-gris);
    font-size: .9rem;
}

.cp-globo {
    position: relative;
    max-width: min(85%, 34rem);
    padding: .45rem .7rem 1.1rem;
    border-radius: var(--cp-radio);
    box-shadow: 0 1px 1px rgba(15, 23, 42, .08);
    font-size: .93rem;
    overflow-wrap: anywhere;
}

.cp-globo-texto {
    white-space: pre-wrap;
}

.cp-globo-usuario {
    align-self: flex-end;
    background: #FBE9EC;
    border-bottom-right-radius: 3px;
}

.cp-globo-asistente {
    align-self: flex-start;
    background: #fff;
    border: 1px solid var(--cp-borde);
    border-bottom-left-radius: 3px;
}

.cp-globo-pendiente {
    opacity: .6;
}

.cp-globo-hora {
    position: absolute;
    right: .6rem;
    bottom: .2rem;
    font-size: .68rem;
    color: var(--cp-gris);
}

.cp-globo-error {
    margin-top: .25rem;
    font-size: .76rem;
    color: #991B1B;
}

.cp-globo-pdf {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    padding-right: 3rem;
}

.cp-globo-pdf > svg {
    flex: none;
    color: var(--cp-rojo);
    margin-top: .1rem;
}

/* Lo que hizo el motor por dentro: solo en la transcripción de Administración. */
.cp-chat-nota {
    align-self: center;
    max-width: 90%;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: #E2E8F0;
    color: var(--cp-gris);
    font-size: .74rem;
    text-align: center;
}

.cp-chat-nota .cp-globo-hora {
    position: static;
    margin-left: .35rem;
}

/* Los tres puntos de "escribiendo…". */
.cp-escribiendo {
    display: inline-flex;
    gap: .25rem;
    padding: .7rem .8rem;
}

.cp-escribiendo span {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--cp-gris);
    animation: cp-escribiendo 1.2s infinite ease-in-out;
}

.cp-escribiendo span:nth-child(2) { animation-delay: .15s; }
.cp-escribiendo span:nth-child(3) { animation-delay: .3s; }

@keyframes cp-escribiendo {
    0%, 60%, 100% { opacity: .25; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

.cp-chat-pie {
    display: flex;
    flex-wrap: wrap;
    padding: .65rem;
    border-top: 1px solid var(--cp-borde);
    background: #fff;
}

.cp-chat-texto {
    resize: none;
    max-height: 9rem;
    min-height: 2.5rem;
}

.cp-chat-adjuntar,
.cp-chat-enviar {
    flex: none;
    width: 2.6rem;
    height: 2.5rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cp-chat-adjuntar {
    color: var(--cp-gris);
    border: 1px solid var(--cp-borde);
}

.cp-chat-adjuntar:hover {
    color: var(--cp-rojo);
}

/* Los mensajes de opciones del bot (mostrar_opciones), como en WhatsApp: la tarjeta con su foto
   y sus botones, el carrusel que se desliza, la lista que se despliega y el respaldo numerado. En
   el simulador se tocan; en la transcripción de Administración, no. */
.cp-globo-opciones {
    padding: 0 0 1.1rem;
    overflow: hidden;
    max-width: min(85%, 22rem);
}

.cp-globo-opciones .cp-wa-cuerpo {
    padding: .45rem .7rem .3rem;
}

.cp-opciones-imagen,
.cp-globo-imagen img {
    display: block;
    width: 100%;
    height: auto;
    background: #fff;
}

.cp-globo-imagen {
    padding: .25rem;
    max-width: min(85%, 22rem);
}

.cp-globo-imagen img {
    border-radius: var(--cp-radio-chico);
}

.cp-opcion-boton {
    display: block;
    width: 100%;
    padding: .5rem;
    border: 0;
    border-top: 1px solid #E9EDEF;
    background: transparent;
    color: #027EB5;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
}

.cp-opcion-boton:hover:not(:disabled),
.cp-opcion-boton:focus-visible {
    background: #F5F6F6;
}

.cp-opcion-boton:disabled {
    cursor: default;
    opacity: 1;
}

.cp-carrusel {
    align-self: stretch;
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: .1rem .1rem .45rem;
    overscroll-behavior-x: contain;
}

.cp-carrusel-tarjeta {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
}

.cp-carrusel-tarjeta .cp-wa-cuerpo {
    flex: 1 1 auto;
}

.cp-lista-opciones > summary {
    list-style: none;
}

.cp-lista-opciones > summary::-webkit-details-marker {
    display: none;
}

.cp-lista-opciones[open] > summary {
    color: var(--cp-gris);
}

.cp-opcion-fila {
    width: 100%;
    border: 0;
    border-top: 1px solid #E9EDEF;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.cp-opcion-fila:hover:not(:disabled),
.cp-opcion-fila:focus-visible {
    background: #F5F6F6;
}

.cp-opcion-fila:disabled {
    cursor: default;
    color: inherit;
}

.cp-opciones-nota {
    align-self: flex-start;
    max-width: 90%;
    margin-top: -.2rem;
    font-size: .72rem;
    color: var(--cp-gris);
}

.cp-filtro-bot .nav-link {
    color: var(--cp-tinta);
    border-radius: var(--cp-radio-chico);
}

.cp-filtro-bot .nav-link.active {
    background-color: var(--cp-rojo);
}

@media (max-width: 575.98px) {
    .cp-chat-cuerpo {
        height: 60vh;
        padding: .6rem;
    }

    .cp-globo {
        max-width: 92%;
    }
}


/* =========================================================================
   Catálogo visual (Administración): miniaturas, contadores de los límites
   de WhatsApp y la vista previa de la tarjeta y de la fila de la lista.
   ========================================================================= */

.cp-miniatura {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--cp-borde);
    border-radius: var(--cp-radio-chico);
}

.cp-miniatura-vacia {
    color: var(--cp-gris);
}

.cp-contador {
    font-size: .8rem;
    color: var(--cp-gris);
    font-variant-numeric: tabular-nums;
}

.cp-contador.cp-excedido {
    color: var(--cp-rojo);
    font-weight: 600;
}

/* Los colores de WhatsApp: el fondo del chat, la burbuja blanca y el azul de los botones. */
.cp-wa-fondo {
    background: #EFEAE2;
    border-radius: var(--cp-radio);
    padding: 1rem;
}

.cp-wa-rotulo {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #54656F;
    margin-bottom: .35rem;
}

.cp-wa-burbuja {
    background: #fff;
    border-radius: 8px;
    max-width: 290px;
    overflow: hidden;
    box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
    font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: .92rem;
    color: #111B21;
}

.cp-wa-burbuja img {
    display: block;
    width: 100%;
    height: auto;
}

.cp-wa-sin-imagen {
    padding: 2.5rem 0;
    text-align: center;
    color: #8696A0;
    background: #F0F2F5;
}

.cp-wa-cuerpo {
    padding: .45rem .6rem .5rem;
}

.cp-wa-boton {
    border-top: 1px solid #E9EDEF;
    padding: .5rem;
    text-align: center;
    color: #027EB5;
    font-weight: 500;
}

.cp-wa-fila {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding: .55rem .75rem;
}

.cp-wa-fila-titulo {
    font-weight: 500;
}

.cp-wa-fila-descripcion {
    font-size: .82rem;
    color: #667781;
}

.cp-wa-radio {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 2px solid #8696A0;
    border-radius: 50%;
}

/* --- Mini CRM: la bandeja de leads y la ficha ------------------------------
   Los mismos distintivos y el mismo chat del bot; la línea de tiempo del lead suma
   sus eventos (en gris, al centro) y los mensajes del asesor (del lado de la empresa,
   con su nombre). */
.cp-distintivo-info {
    background-color: #DBEAFE;
    color: #1E3A8A;
}

.cp-distintivo-suave {
    background-color: #E2E8F0;
    color: #334155;
}

/* Un texto de aviso (lo que falta, una nota del libro, un dato para revisar): el ámbar oscuro de
   .cp-distintivo-aviso. text-warning-emphasis es de Bootstrap 5.3 y aquí no existe. */
.cp-texto-aviso {
    color: #92400E;
}

/* fw-semibold y fw-medium llegaron en Bootstrap 5.2; con la 5.1 del sitio esos textos salían sin peso. */
.fw-semibold {
    font-weight: 600 !important;
}

.fw-medium {
    font-weight: 500 !important;
}

/* Las notas de un chasis en la tabla de chasis de producción: el distintivo las abre debajo del nombre. */
.cp-notas-chasis {
    display: inline-block;
    vertical-align: middle;
}

.cp-notas-chasis[open] {
    display: block;
}

.cp-notas-chasis > summary {
    cursor: pointer;
    list-style: none;
}

.cp-notas-chasis > summary::-webkit-details-marker {
    display: none;
}

.cp-notas-chasis ul {
    max-width: 34rem;
    margin: .35rem 0 0;
    padding-left: 1.1rem;
    font-size: .8rem;
    color: #334155;
}

.cp-tabla-leads td {
    vertical-align: top;
}

.cp-fieldset {
    display: contents;
}

.cp-chat-evento {
    align-self: center;
    max-width: 92%;
    padding: .25rem .7rem;
    border-radius: var(--cp-radio-chico);
    border: 1px dashed var(--cp-borde);
    background: #F8FAFC;
    color: #475569;
    font-size: .76rem;
    text-align: center;
}

.cp-chat-evento .cp-globo-hora {
    position: static;
    margin-left: .35rem;
}

.cp-globo-asesor {
    border-left: 3px solid var(--cp-rojo);
}

.cp-globo-autor {
    font-size: .72rem;
    font-weight: 600;
    color: var(--cp-rojo-oscuro);
    margin-bottom: .1rem;
}

.cp-globo-retenida {
    margin-top: .2rem;
    color: #92400E;
}