/* =============================================================================
   Cotizaciones de Eventos — páginas públicas
   -----------------------------------------------------------------------------
   Formulario de solicitud, propuesta con token, gracias y aviso de cerrado.
   Usa los tokens de styles.css (--dif-*): no define colores propios salvo los
   estados, para que el módulo siga la paleta de la plataforma.
   ============================================================================= */

.cot-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-md) var(--spacing-2xl);
}

/* ------------------------------------------------------------------ Cabecera */

.cot-head {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}
.cot-head h1 {
    margin: 0 0 var(--spacing-xs);
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--dif-text);
    line-height: 1.25;
}
.cot-head p {
    margin: 0;
    font-size: var(--font-size-base);
    color: var(--dif-muted);
    line-height: 1.55;
}

/* ------------------------------------------------------- Foto ampliable */

.cot-zoom {
    position: relative;
    display: block;
    cursor: zoom-in;
    overflow: hidden;
}
.cot-zoom:focus {
    outline: 2px solid var(--dif-primary);
    outline-offset: 2px;
}

/* La lupa aparece al pasar por encima; en táctil se muestra siempre, porque
   ahí no hay hover que delate que la foto se puede ampliar. */
.cot-zoom__lupa {
    position: absolute;
    right: 3px;
    bottom: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(15, 23, 42, .65);
    color: #fff;
    opacity: 0;
    transition: opacity var(--transition-fast);
    pointer-events: none;
}
.cot-zoom:hover .cot-zoom__lupa,
.cot-zoom:focus .cot-zoom__lupa { opacity: 1; }

@media (hover: none) {
    .cot-zoom__lupa { opacity: 1; }
}

/* ----------------------------------------------------------- Visor de fotos */

.cot-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    background: rgba(15, 23, 42, .88);
    z-index: 9999;
}
.cot-lightbox.is-abierto { display: flex; }

.cot-lightbox__marco {
    margin: 0;
    max-width: 100%;
    text-align: center;
}
.cot-lightbox__marco img {
    display: block;
    max-width: 100%;
    max-height: 82vh;
    margin: 0 auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    background: var(--dif-surface);
}
.cot-lightbox__marco figcaption {
    margin-top: var(--spacing-sm);
    color: #fff;
    font-size: var(--font-size-base);
    font-weight: 600;
}

.cot-lightbox__cerrar {
    position: absolute;
    top: 14px;
    right: 18px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.cot-lightbox__cerrar:hover { background: rgba(255, 255, 255, .28); }

@media (max-width: 640px) {
    .cot-lightbox { padding: var(--spacing-sm); }
    .cot-lightbox__marco img { max-height: 70vh; }
}

/* -------------------------------------------------------------------- Portada */

.cot-portada {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-md);
    background: var(--dif-surface);
    line-height: 0;
}
.cot-portada__media {
    display: block;
    width: 100%;
    max-height: 380px;
    object-fit: cover;
}

.cot-descripcion {
    font-size: var(--font-size-base);
    line-height: 1.65;
    color: var(--dif-text);
}

.cot-caracteristicas {
    list-style: none;
    margin: var(--spacing-md) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-xs) var(--spacing-md);
}
.cot-caracteristicas li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--dif-text);
}
.cot-caracteristicas svg {
    flex: 0 0 18px;
    margin-top: 2px;
    color: var(--dif-success);
}

/* -------------------------------------------------------------------- Tarjeta */

.cot-card {
    background: var(--dif-surface);
    border: 1px solid var(--dif-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.cot-paso {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--dif-text);
}
.cot-paso__numero {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--dif-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
}

/* --------------------------------------------------------------------- Campos */

.cot-campo { margin-bottom: var(--spacing-md); }
.cot-campo:last-child { margin-bottom: 0; }

.cot-label {
    display: block;
    margin: 0 0 6px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--dif-text);
}
.cot-ayuda {
    margin: 6px 0 0;
    font-size: var(--font-size-xs);
    color: var(--dif-muted);
    line-height: 1.5;
}
.cot-req { color: var(--dif-danger); margin-left: 3px; }

.cot-input,
.cot-select,
.cot-textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--dif-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
    font-family: inherit;
    color: var(--dif-text);
    background: var(--dif-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.cot-textarea { min-height: 96px; resize: vertical; }

.cot-input:focus,
.cot-select:focus,
.cot-textarea:focus {
    outline: none;
    border-color: var(--dif-primary);
    box-shadow: 0 0 0 3px var(--dif-primary-100);
}

.cot-fila { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }
.cot-fila > div { flex: 1 1 150px; min-width: 0; }

/* ------------------------------------------------------------ Tipos de evento */

.cot-tipos { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }

.cot-tipo {
    flex: 1 1 160px;
    display: block;
    position: relative;
    border: 1px solid var(--dif-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md) var(--spacing-sm);
    text-align: center;
    cursor: pointer;
    background: var(--dif-surface);
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
    -webkit-user-select: none;
    user-select: none;
}
.cot-tipo:hover { border-color: var(--dif-primary); background: var(--dif-primary-50); }
.cot-tipo input { position: absolute; opacity: 0; pointer-events: none; }
.cot-tipo.is-activa {
    border-color: var(--dif-primary);
    background: var(--dif-primary-50);
    box-shadow: 0 0 0 1px var(--dif-primary) inset;
}
.cot-tipo__icono {
    display: block;
    margin-bottom: 6px;
    font-size: 26px;
    line-height: 1;
}
.cot-tipo__nombre {
    display: block;
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--dif-text);
}
.cot-tipo__desc {
    display: block;
    margin-top: 3px;
    font-size: var(--font-size-xs);
    color: var(--dif-muted);
    line-height: 1.4;
}

/* -------------------------------------------------------------------- Grupos */

/* Cada grupo es su propia tarjeta: el paso 3 puede traer ocho, y todos
   juntos en una sola caja se leían como una lista interminable. */
.cot-paso--suelto {
    padding: 0 2px;
    margin-bottom: var(--spacing-sm);
}

.cot-grupo__cabecera {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--dif-border);
}
.cot-grupo__icono {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--dif-primary-100);
    color: var(--dif-primary-700);
    font-size: 16px;
}
.cot-grupo__titulos { flex: 1; min-width: 0; }

.cot-grupo__titulo {
    margin: 0 0 2px;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--dif-text);
    line-height: 1.3;
}
.cot-grupo__desc {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--dif-muted);
    line-height: 1.5;
}

/* Dice de una si se marca una opción o varias, sin tener que probar */
.cot-grupo__tag {
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: 14px;
    background: var(--dif-bg);
    color: var(--dif-muted);
    font-size: var(--font-size-xs);
    font-weight: 600;
    white-space: nowrap;
}

.cot-opcion {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--dif-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-xs);
    cursor: pointer;
    background: var(--dif-surface);
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.cot-opcion:last-child { margin-bottom: 0; }
.cot-opcion:hover { border-color: var(--dif-primary); background: var(--dif-primary-50); }

/* La opción elegida se marca en toda la fila: el radio nativo es chico y se
   pierde entre la foto, el nombre, la descripción y el precio. */
.cot-opcion.is-elegida {
    border-color: var(--dif-primary);
    background: var(--dif-primary-50);
    box-shadow: 0 0 0 1px var(--dif-primary) inset;
}
.cot-opcion.is-elegida .cot-opcion__nombre { font-weight: 600; }
.cot-opcion.is-elegida .cot-opcion__precio { color: var(--dif-primary-700); }
.cot-opcion input[type="radio"],
.cot-opcion input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--dif-primary);
}
.cot-opcion__foto {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-sm);
    background: var(--dif-bg);
}
.cot-opcion__foto img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-sm);
    object-fit: cover;
}

/* Marcador cuando la opción no tiene foto: mantiene alineado el texto de
   todas las filas del grupo, tengan imagen o no. */
.cot-opcion__foto--vacia {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    border: 1px dashed var(--dif-border);
    color: var(--dif-muted);
    background: transparent;
}
.cot-opcion__foto-texto {
    font-size: 9px;
    line-height: 1;
    letter-spacing: .2px;
}
.cot-opcion__texto { flex: 1; min-width: 0; }
.cot-opcion__nombre { display: block; font-weight: 500; color: var(--dif-text); }
.cot-opcion__detalle {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--dif-muted);
    line-height: 1.45;
}
.cot-opcion__precio {
    flex: 0 0 auto;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--dif-text);
    white-space: nowrap;
}
.cot-opcion__cantidad {
    flex: 0 0 72px;
    width: 72px;
    padding: 6px 8px;
    border: 1px solid var(--dif-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-family: inherit;
}

/* -------------------------------------------------------------------- Botones */

.cot-boton {
    display: block;
    width: 100%;
    padding: 15px;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--dif-primary);
    color: #fff;
    font-size: var(--font-size-lg);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.cot-boton:hover { background: var(--dif-primary-600); }
.cot-boton:disabled { background: var(--dif-muted); cursor: default; }

.cot-acciones { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); }
.cot-acciones .cot-boton { flex: 1 1 160px; width: auto; }

.cot-boton--ok { background: var(--dif-success); }
.cot-boton--ok:hover { background: #0e9f6e; }
.cot-boton--no {
    background: var(--dif-surface);
    color: var(--dif-danger);
    border: 1px solid var(--dif-danger);
}
.cot-boton--no:hover { background: #fef2f2; }

/* ------------------------------------------------------- Barra de resumen */

/* Acompaña mientras se arma el evento: dice cuánto llevas elegido y cuánto
   suma, sin tener que bajar hasta el final para enterarse. */
.cot-barra {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: 10px max(var(--spacing-md), env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom));
    background: var(--dif-navy);
    color: #fff;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, .18);
    transform: translateY(110%);
    transition: transform var(--transition-base);
}
.cot-barra.is-visible { transform: translateY(0); }

.cot-barra__dato {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.cot-barra__label {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, .7);
}
.cot-barra__monto {
    font-size: var(--font-size-lg);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Cuando no hay monto que mostrar el texto no debe gritar como una cifra */
.cot-barra__monto.es-texto {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
}

.cot-barra__boton {
    flex: 0 0 auto;
    padding: 12px 22px;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--dif-primary);
    color: #fff;
    font-size: var(--font-size-base);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.cot-barra__boton:hover { background: var(--dif-primary-600); }

/* En pantallas anchas la barra sigue el ancho del contenido, no el del monitor */
@media (min-width: 860px) {
    .cot-barra {
        left: 50%;
        right: auto;
        bottom: var(--spacing-md);
        width: 100%;
        max-width: 720px;
        transform: translate(-50%, 160%);
        border-radius: var(--radius-lg);
        padding: 12px var(--spacing-lg);
    }
    .cot-barra.is-visible { transform: translate(-50%, 0); }
}

/* Con la barra abajo, el último bloque necesita aire para no quedar tapado */
.cot-wrap { padding-bottom: 96px; }

/* --------------------------------------------------------------------- Avisos */

.cot-aviso {
    display: none;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}
.cot-ok {
    display: none;
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    text-align: center;
    font-size: var(--font-size-base);
    line-height: 1.6;
}

.cot-terminos {
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-xs);
    color: var(--dif-muted);
    line-height: 1.6;
}

/* ------------------------------------------------------------------ Propuesta */

.cot-numero {
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--dif-muted);
}

.cot-datos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-md);
}
.cot-dato {
    flex: 1 1 140px;
    background: var(--dif-bg);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}
.cot-dato__label {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--dif-muted);
}
.cot-dato__valor { font-weight: 600; color: var(--dif-text); }

.cot-mensaje {
    background: var(--dif-bg);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-top: var(--spacing-md);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: var(--dif-text);
}

.cot-bloque-titulo {
    margin: var(--spacing-md) 0 4px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--dif-muted);
}
.cot-bloque-titulo:first-child { margin-top: 0; }

.cot-linea {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--dif-border);
}
.cot-linea:last-child { border-bottom: 0; }
.cot-linea__foto {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    background: var(--dif-bg);
}
.cot-linea__foto img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-sm);
    object-fit: cover;
}
.cot-linea__foto--vacia {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--dif-border);
    color: var(--dif-muted);
    background: transparent;
}
.cot-linea__texto { flex: 1; min-width: 0; }
.cot-linea__nombre { font-weight: 500; color: var(--dif-text); }
.cot-linea__detalle {
    font-size: var(--font-size-xs);
    color: var(--dif-muted);
    line-height: 1.45;
}
.cot-linea__precio {
    flex: 0 0 auto;
    font-weight: 600;
    white-space: nowrap;
    color: var(--dif-text);
}
.cot-linea__precio.is-convenir { color: var(--dif-muted); font-weight: 400; }

.cot-total-fila {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    color: var(--dif-muted);
    font-size: var(--font-size-sm);
}
.cot-total-final {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: #ecfdf5;
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin-top: 10px;
    color: #065f46;
}
.cot-total-final__monto { font-size: var(--font-size-xl); font-weight: 700; }

.cot-vigencia {
    margin-top: var(--spacing-sm);
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--dif-muted);
}

.cot-estado {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: var(--font-size-xs);
    font-weight: 700;
}
.cot-estado--ok     { background: #ecfdf5; color: #065f46; }
.cot-estado--espera { background: #fffbeb; color: #92400e; }
.cot-estado--no     { background: #fef2f2; color: #991b1b; }

/* ---------------------------------------------------------- Páginas de aviso */

.cot-mensaje-card {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    background: var(--dif-surface);
    border: 1px solid var(--dif-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-2xl) var(--spacing-lg);
}
.cot-mensaje-card__icono {
    width: 68px;
    height: 68px;
    margin: 0 auto var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 32px;
    background: var(--dif-bg);
    color: var(--dif-muted);
}
.cot-mensaje-card__icono.is-ok { background: #ecfdf5; color: var(--dif-success); }
.cot-mensaje-card__icono.is-aviso { background: #fffbeb; color: var(--dif-warning); }
.cot-mensaje-card h1 {
    margin: 0 0 10px;
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--dif-text);
}
.cot-mensaje-card p {
    margin: 0;
    font-size: var(--font-size-base);
    color: var(--dif-muted);
    line-height: 1.6;
}

.cot-volver {
    display: inline-block;
    margin-top: var(--spacing-lg);
    padding: 12px 22px;
    border-radius: var(--radius-md);
    background: var(--dif-primary);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: background var(--transition-fast);
}
.cot-volver:hover { background: var(--dif-primary-600); color: #fff; }

/* --------------------------------------------------------------------- Móvil */

@media (max-width: 640px) {
    .cot-wrap { padding: var(--spacing-md) var(--spacing-sm) var(--spacing-xl); }
    .cot-card { padding: var(--spacing-md); border-radius: var(--radius-md); }
    .cot-head h1 { font-size: var(--font-size-lg); }
    .cot-fila > div { flex: 1 1 100%; }
    .cot-opcion__precio { font-size: var(--font-size-xs); }
    .cot-mensaje-card { padding: var(--spacing-xl) var(--spacing-md); }
}

/* ============================================================
   Cotizaciones generales (plantillas): 2026-10-09
   ============================================================ */
.cot-tipo__foto { display: block; width: 100%; height: 90px; border-radius: 8px; overflow: hidden; margin-bottom: 8px; }
.cot-tipo__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cot-sino { display: flex; gap: 18px; }
.cot-sino label { display: flex; align-items: center; gap: 6px; font-weight: 500; cursor: pointer; }
.cot-opcion.is-destacada { border-color: var(--dif-primary, #0e8faa); }
.cot-opcion__sello { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 10px; background: #e6f6ec; color: #1c7a45; font-size: 11px; font-weight: 700; vertical-align: middle; }
.cot-opcion__foto--vacia i, .cot-linea__foto--vacia i { color: #b8c2cc; font-size: 16px; }
.cot-titulo { margin: 4px 0 8px; font-size: var(--font-size-xl); font-weight: 700; line-height: 1.25; }
.cot-sub { margin: 0; color: var(--dif-muted, #64748b); }
.cot-volver-link { color: var(--dif-muted, #64748b); font-weight: 600; }

/* ============================================================================
   Formulario de cotización con el formato de /core/reserva (2026-10-11)
   Cabecera con ícono, tarjetas con cabecera, resumen a la derecha.
   ============================================================================ */
.cotf {
    max-width: 1160px;
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-md) 110px;
}
.cotf-muted { color: var(--dif-muted); }

/* Cabecera */
.cotf-hero {
    display: flex;
    gap: var(--spacing-lg);
    align-items: center;
    background: var(--dif-surface);
    border: 1px solid var(--dif-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-lg) var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
}
.cotf-hero__texto { flex: 1 1 auto; min-width: 0; }
.cotf-hero__titulo { display: flex; align-items: center; gap: 14px; }
.cotf-hero__icono {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--dif-primary-50); color: var(--dif-primary); font-size: 20px;
}
.cotf-hero h1 { margin: 0; font-size: 2rem; font-weight: 800; letter-spacing: -.5px; color: var(--dif-navy); line-height: 1.15; }
.cotf-hero__bajada { margin: 10px 0 0; font-size: var(--font-size-base); color: var(--dif-muted); line-height: 1.55; }
.cotf-hero__desc { margin-top: 10px; font-size: var(--font-size-sm); color: var(--dif-text); line-height: 1.6; }
.cotf-beneficios { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cotf-beneficios li { padding: 5px 12px; border-radius: 999px; background: #ecfdf5; color: #047857; font-size: var(--font-size-xs); font-weight: 600; }
.cotf-beneficios .fa { margin-right: 4px; }

/* Columnas */
.cotf-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--spacing-lg); align-items: start; }
.cotf-main { min-width: 0; }
.cotf-aside { position: sticky; top: var(--spacing-md); }

/* Tarjetas con cabecera, como "Servicio" y "Tus datos" de Reservas */
.cotf-card {
    background: var(--dif-surface);
    border: 1px solid var(--dif-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-lg);
    overflow: hidden;
}
/* Grilla y no flex: el ícono queda siempre al lado del título, también en el celular */
.cotf-card__cab {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px;
    padding: 16px var(--spacing-lg);
    border-bottom: 1px solid var(--dif-border);
    background: linear-gradient(180deg, #fbfdfe 0%, #ffffff 100%);
}
.cotf-card__cab > div { min-width: 0; }
.cotf-card__cab h2 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--dif-navy); line-height: 1.3; }
.cotf-card__cab p { margin: 3px 0 0; font-size: var(--font-size-xs); color: var(--dif-muted); line-height: 1.45; }
.cotf-card__icono {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--dif-primary-50); color: var(--dif-primary); font-size: 15px;
}
.cotf-card__tag {
    flex: 0 0 auto; align-self: center; padding: 4px 10px; border-radius: 999px;
    background: var(--dif-bg); color: var(--dif-muted); font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.cotf-card__cuerpo { padding: var(--spacing-lg); }
.cotf-card .cot-fila > div { flex: 1 1 200px; }

/* Elegir plantilla: tarjetas con imagen o ícono */
.cotf-tipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.cotf-tipo {
    position: relative; display: flex; flex-direction: column; cursor: pointer;
    border: 1.5px solid var(--dif-border); border-radius: var(--radius-lg); overflow: hidden;
    background: var(--dif-surface); transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cotf-tipo:hover { border-color: var(--dif-primary); transform: translateY(-1px); }
.cotf-tipo input { position: absolute; opacity: 0; pointer-events: none; }
.cotf-tipo.is-activa { border-color: var(--dif-primary); box-shadow: 0 0 0 3px rgba(91, 186, 208, .22); }
.cotf-tipo__media { height: 104px; display: flex; align-items: center; justify-content: center; background: var(--dif-primary-50); color: var(--dif-primary); font-size: 30px; }
.cotf-tipo__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cotf-tipo__texto { padding: 10px 12px 12px; }
.cotf-tipo__texto b { display: block; color: var(--dif-navy); font-size: var(--font-size-sm); }
.cotf-tipo__texto small { display: block; margin-top: 3px; color: var(--dif-muted); font-size: 12px; line-height: 1.4; }
.cotf-tipo__check {
    position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%;
    display: none; align-items: center; justify-content: center; background: var(--dif-primary); color: #fff; font-size: 12px;
    box-shadow: 0 2px 6px rgba(15, 45, 61, .25);
}
.cotf-tipo.is-activa .cotf-tipo__check { display: flex; }

/* Portada de la plantilla elegida */
.cotf-plantilla__media { background: var(--dif-bg); }
.cotf-plantilla__media img, .cotf-plantilla__media video { display: block; width: 100%; max-height: 340px; object-fit: cover; }
.cotf-plantilla__texto { display: flex; gap: 12px; align-items: flex-start; padding: 16px var(--spacing-lg); }
.cotf-plantilla__texto h2 { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--dif-navy); }
.cotf-plantilla__texto p { margin: 4px 0 0; font-size: var(--font-size-sm); color: var(--dif-muted); line-height: 1.55; }

/* Sí / No como botones */
.cotf-sino { display: flex; gap: 8px; }
.cotf-sino label { margin: 0; cursor: pointer; position: relative; }
.cotf-sino input { position: absolute; opacity: 0; pointer-events: none; }
.cotf-sino span {
    display: inline-block; min-width: 72px; text-align: center; padding: 9px 16px;
    border: 1.5px solid var(--dif-border); border-radius: var(--radius-md); font-weight: 600; color: var(--dif-text);
}
.cotf-sino input:checked + span { border-color: var(--dif-primary); background: var(--dif-primary-50); color: var(--dif-primary-700); }

/* Opciones del grupo: en columnas, con check a la derecha */
.cotf-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.cotf-opcion { position: relative; margin: 0; padding: 12px 40px 12px 12px; border-radius: var(--radius-lg); align-items: flex-start; }
.cotf-opcion input[type="radio"], .cotf-opcion input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.cotf-opcion .cot-opcion__foto { flex-basis: 64px; width: 64px; height: 64px; }
.cotf-opcion .cot-opcion__foto--vacia { border-style: solid; border-color: transparent; background: var(--dif-bg); font-size: 18px; }
.cotf-opcion .cot-opcion__precio { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 6px; background: var(--dif-bg); font-size: 12.5px; }
.cotf-opcion.is-elegida .cot-opcion__precio { background: #fff; }
.cotf-opcion .cot-opcion__cantidad { align-self: center; flex-basis: 64px; width: 64px; }
.cotf-opcion__check {
    position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%;
    border: 1.5px solid var(--dif-border); background: #fff; color: transparent;
    display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.cotf-opcion.is-elegida .cotf-opcion__check { border-color: var(--dif-primary); background: var(--dif-primary); color: #fff; }
.cotf-opcion.is-destacada { border-color: #fcd34d; }

/* Resumen a la derecha: como "Resumen de la reserva" */
.cotf-resumen { background: var(--dif-surface); border: 1px solid var(--dif-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); overflow: hidden; }
.cotf-resumen__cab { padding: 18px 20px; background: linear-gradient(135deg, var(--dif-navy) 0%, var(--dif-navy-light) 100%); color: #fff; }
.cotf-resumen__cab b { display: block; font-size: 1.02rem; }
.cotf-resumen__cab .fa { margin-right: 6px; }
.cotf-resumen__cab span { display: block; margin-top: 3px; font-size: var(--font-size-xs); color: rgba(255, 255, 255, .75); }
.cotf-resumen__cuerpo { padding: 16px 20px 20px; }
.cotf-resumen__fila { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: var(--font-size-sm); color: var(--dif-muted); }
.cotf-resumen__fila strong { color: var(--dif-text); text-align: right; }
.cotf-resumen__fila--lista { flex-direction: column; gap: 4px; border-bottom: 1px solid var(--dif-border); padding-bottom: 12px; }
.cotf-resumen__fila--lista ul { list-style: none; margin: 0; padding: 0; }
.cotf-resumen__fila--lista li { position: relative; padding: 3px 0 3px 16px; color: var(--dif-text); font-size: var(--font-size-sm); }
.cotf-resumen__fila--lista li:before { content: "\2022"; position: absolute; left: 4px; color: var(--dif-primary); }
.cotf-resumen__fila--lista li.cotf-muted { padding-left: 0; color: var(--dif-muted); }
.cotf-resumen__fila--lista li.cotf-muted:before { content: none; }
.cotf-resumen__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 0; }
.cotf-resumen__total span { font-size: var(--font-size-base); color: var(--dif-muted); }
.cotf-resumen__total strong { font-size: 1.5rem; font-weight: 800; color: var(--dif-primary-700); text-align: right; }
.cotf-resumen__total strong.es-texto { font-size: var(--font-size-sm); font-weight: 600; color: var(--dif-muted); }
.cotf-resumen .cot-boton { display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--radius-lg); }
.cotf-resumen__nota { margin: 12px 0 0; padding: 9px 12px; border-radius: 999px; background: #ecfdf5; color: #047857; font-size: 12px; font-weight: 600; text-align: center; }
.cotf-resumen__nota .fa { margin-right: 4px; }
.cotf-resumen .cot-terminos { margin-top: 12px; }

.cotf-volver { text-align: center; margin-top: var(--spacing-md); }
.cotf-volver a { color: var(--dif-muted); font-weight: 600; }

/* La barra fija solo en el celular: en pantalla grande está el resumen */
@media (min-width: 992px) {
    .cotf .cot-barra { display: none; }
}
@media (max-width: 991px) {
    .cotf-grid { grid-template-columns: minmax(0, 1fr); }
    .cotf-aside { position: static; }
    .cotf-hero { flex-direction: column; align-items: stretch; padding: var(--spacing-lg); }
}
@media (max-width: 575px) {
    .cotf { padding-left: 12px; padding-right: 12px; }
    .cotf-hero h1 { font-size: 1.5rem; }
    .cotf-hero__icono { width: 38px; height: 38px; font-size: 17px; }
    .cotf-card__cab, .cotf-card__cuerpo, .cotf-plantilla__texto { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
    .cotf-card__cab { grid-template-columns: auto minmax(0, 1fr); }
    .cotf-card__tag { grid-column: 2; justify-self: start; }
    .cotf-tipos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cotf-tipo__media { height: 80px; }
    .cotf-opciones { grid-template-columns: minmax(0, 1fr); }
}

/* Espacio parejo entre campos: la fila separa igual que un campo suelto,
   también cuando se parte en dos líneas en el celular */
.cotf .cot-campo { margin-bottom: 18px; }
.cotf .cot-fila { column-gap: 14px; row-gap: 18px; margin-bottom: 18px; }
.cotf .cot-fila > .cot-campo { margin-bottom: 0; }
.cotf .cot-fila:empty { display: none; }
.cotf-card__cuerpo { padding: 20px var(--spacing-lg); }
.cotf-card__cuerpo > :last-child { margin-bottom: 0; }
.cotf .cot-label { margin-bottom: 6px; }
.cotf .cot-ayuda { margin: -10px 0 18px; }
.cotf .cot-campo > .cot-ayuda { margin: 6px 0 0; }

/* Descripción de la plantilla escrita con el editor del panel */
.cotf-plantilla__desc { margin-top: 6px; font-size: var(--font-size-sm); color: var(--dif-muted); line-height: 1.6; }
.cotf-plantilla__desc p { margin: 0 0 8px; }
.cotf-plantilla__desc p:last-child { margin-bottom: 0; }
.cotf-plantilla__desc ul, .cotf-plantilla__desc ol { margin: 0 0 8px; padding-left: 20px; }
.cotf-plantilla__desc a { color: var(--dif-primary-700); }

/* Propuesta: botones del PDF */
.cot-pdf { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--spacing-md); }
.cot-pdf .cot-boton { flex: 1 1 180px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.cot-boton--suave { background: var(--dif-primary-50); color: var(--dif-primary-700); border: 1px solid #cfe9ee; box-shadow: none; }
.cot-boton--suave:hover { background: #e3f4f7; color: var(--dif-primary-700); }

/* La plantilla ya no lleva ícono propio: va en la cabecera */
.cotf-plantilla__texto > div { flex: 1 1 auto; min-width: 0; }

/* Fechas y personas en una fila: tres columnas parejas mientras quepan */
.cotf .cot-fila > .cot-campo { flex: 1 1 170px; }
.cotf .cot-fila > .cot-campo--ancho { flex-basis: 100%; }

/* "Tus datos": resultado de buscar el correo entre los clientes */
.cotf .cot-cliente { margin: 8px 0 0; padding: 10px 12px; border-radius: 8px; font-size: 14px; line-height: 1.4; background: #f3f5f8; color: #4a5361; }
.cotf .cot-cliente.is-conocido { background: #eaf7ee; color: #1f6b3a; }
.cotf .cot-cliente a { color: inherit; text-decoration: underline; margin-left: 4px; }
.cotf .cot-cliente .fa { margin-right: 4px; }

/* Correo con lupa para buscarlo entre los clientes */
.cotf .cot-buscar { position: relative; display: flex; }
.cotf .cot-buscar .cot-input { flex: 1; padding-right: 52px; }
.cotf .cot-buscar__boton { position: absolute; top: 4px; right: 4px; bottom: 4px; width: 42px; border: 0; border-radius: 6px; background: var(--dif-primary, #2b6cb0); color: #fff; font-size: 16px; cursor: pointer; }
.cotf .cot-buscar__boton:hover { filter: brightness(1.08); }
.cotf .cot-buscar__boton:focus-visible { outline: 2px solid var(--dif-primary, #2b6cb0); outline-offset: 2px; }

/* ============================================================================
   Rediseño 2026-10-12: estilo limpio tipo SaaS, alineado con styles.css
   (header claro fijo, botones sólidos --dif-primary-strong, campos de 48px).
   Va al final para pisar lo anterior sin reescribirlo.
   ============================================================================ */

/* Página en columna: el pie queda abajo aunque el contenido sea corto */
body.booking-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(1200px 420px at 50% -140px, rgba(91, 186, 208, 0.14), transparent 70%),
        var(--dif-bg);
}
body.booking-page > main { flex: 1 0 auto; width: 100%; }

/* --- Campos --- */
.cot-input,
.cot-select,
.cot-textarea {
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--dif-border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    font-size: 1rem;
}
.cot-textarea { min-height: 112px; line-height: 1.5; }
.cot-input::placeholder,
.cot-textarea::placeholder { color: #94A3B8; }
.cot-input:hover:not(:focus),
.cot-textarea:hover:not(:focus) { border-color: #94A3B8; }
.cot-input:focus,
.cot-select:focus,
.cot-textarea:focus {
    border-color: var(--dif-primary);
    box-shadow: var(--dif-ring);
}
.cot-label { font-size: 0.875rem; font-weight: 600; color: var(--dif-text); }
.cot-ayuda { font-size: 0.8125rem; }

/* --- Botones --- */
.cot-boton,
.cot-volver,
.cot-barra__boton,
.cotf .cot-buscar__boton {
    background: var(--dif-primary-strong);
    color: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.cot-boton:hover,
.cot-volver:hover,
.cot-barra__boton:hover,
.cotf .cot-buscar__boton:hover {
    background: var(--dif-primary-strong-hover);
    color: #fff;
    filter: none;
    box-shadow: 0 4px 12px -2px rgba(43, 127, 144, 0.45);
}
.cot-boton:active,
.cot-barra__boton:active { transform: scale(0.99); }
.cot-boton:focus-visible,
.cot-volver:focus-visible,
.cot-barra__boton:focus-visible { outline: none; box-shadow: var(--dif-ring); }
.cot-boton {
    min-height: 52px;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    font-size: 1rem;
    letter-spacing: -0.005em;
}
.cot-boton:disabled { background: #94A3B8; box-shadow: none; cursor: not-allowed; }
.cot-boton--ok { background: #059669; }
.cot-boton--ok:hover { background: #047857; box-shadow: 0 4px 12px -2px rgba(5, 150, 105, 0.4); }
.cot-boton--no,
.cot-boton--no:hover {
    background: var(--dif-surface);
    color: #B91C1C;
    border: 1px solid #FCA5A5;
    box-shadow: var(--shadow-xs);
}
.cot-boton--no:hover { background: #FEF2F2; }
.cot-boton--suave,
.cot-boton--suave:hover {
    background: var(--dif-surface);
    color: var(--dif-text);
    border: 1px solid var(--dif-border-strong);
    box-shadow: var(--shadow-xs);
}
.cot-boton--suave:hover { background: var(--dif-surface-2); border-color: #94A3B8; }
.cot-volver { min-height: 48px; display: inline-flex; align-items: center; padding: 0 24px; }

/* --- Tarjetas --- */
.cot-card,
.cotf-card,
.cot-mensaje-card {
    border: 1px solid var(--dif-border);
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
}
.cot-card { padding: 1.75rem; }

/* --- Formulario: cabecera --- */
.cotf { padding-top: clamp(1.25rem, 3vw, 2.25rem); }
.cotf-hero {
    border-radius: 1.25rem;
    box-shadow: var(--shadow-sm);
    padding: 2rem 2.25rem;
}
.cotf-hero__titulo { gap: 16px; }
.cotf-hero__icono {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--dif-primary-100);
    color: var(--dif-primary-strong);
    font-size: 21px;
}
.cotf-hero h1 {
    font-size: clamp(1.5rem, 2.6vw, 2.125rem);
    font-weight: 750;
    letter-spacing: -0.025em;
    color: var(--dif-text);
}
.cotf-hero__bajada { font-size: 1.0625rem; margin-top: 12px; }
.cotf-hero__desc { color: #475569; }
.cotf-beneficios { margin-top: 18px; }
.cotf-beneficios li {
    padding: 6px 12px;
    background: var(--dif-surface);
    border: 1px solid var(--dif-border);
    color: var(--dif-text);
    font-weight: 500;
    font-size: 0.8125rem;
}
.cotf-beneficios li .fa { color: #059669; }

/* --- Tarjetas con cabecera --- */
.cotf-card__cab {
    background: var(--dif-surface);
    padding: 18px 24px;
    align-items: center;
}
.cotf-card__cab h2 { color: var(--dif-text); font-size: 1.0625rem; letter-spacing: -0.01em; }
.cotf-card__cab p { font-size: 0.8125rem; }
.cotf-card__icono {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--dif-primary-100);
    color: var(--dif-primary-strong);
    font-size: 16px;
}
.cotf-card__tag {
    background: #F1F5F9;
    color: #475569;
    font-weight: 600;
    font-size: 0.75rem;
}
.cotf-card__cuerpo { padding: 22px 24px; }

/* --- Elegir plantilla --- */
.cotf-tipo { border: 1px solid var(--dif-border); border-radius: 0.875rem; box-shadow: var(--shadow-xs); }
.cotf-tipo:hover { border-color: var(--dif-primary); box-shadow: var(--shadow-md); }
.cotf-tipo.is-activa { border-color: var(--dif-primary-strong); box-shadow: var(--dif-ring); }
.cotf-tipo__media { background: var(--dif-primary-50); color: var(--dif-primary-strong); }
.cotf-tipo__texto b { color: var(--dif-text); }
.cotf-tipo__check { background: var(--dif-primary-strong); }
.cotf-plantilla__texto h2 { color: var(--dif-text); font-weight: 750; letter-spacing: -0.015em; }

/* --- Opciones --- */
.cot-opcion {
    border: 1px solid var(--dif-border);
    box-shadow: var(--shadow-xs);
}
.cot-opcion:hover { border-color: #94A3B8; background: var(--dif-surface); }
.cot-opcion.is-elegida {
    border-color: var(--dif-primary-strong);
    background: var(--dif-primary-50);
    box-shadow: 0 0 0 1px var(--dif-primary-strong) inset;
}
.cot-opcion.is-elegida .cot-opcion__precio { color: var(--dif-primary-strong); }
.cotf-opcion .cot-opcion__foto,
.cotf-opcion .cot-opcion__foto img { border-radius: 10px; }
.cotf-opcion .cot-opcion__precio { background: #F1F5F9; font-weight: 600; }
.cotf-opcion__check { border-color: var(--dif-border-strong); }
.cotf-opcion.is-elegida .cotf-opcion__check { border-color: var(--dif-primary-strong); background: var(--dif-primary-strong); }
.cotf-opcion.is-destacada { border-color: #FCD34D; }
/* Elegida manda sobre recomendada: un solo color de borde */
.cotf-opcion.is-destacada.is-elegida { border-color: var(--dif-primary-strong); }
.cot-opcion__sello { background: #FEF3C7; color: #92400E; border-radius: 999px; }
.cot-opcion__cantidad { min-height: 40px; border-color: var(--dif-border-strong); border-radius: 8px; font-size: 1rem; }
.cotf-sino span { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--dif-border-strong); }
.cotf-sino input:checked + span { border-color: var(--dif-primary-strong); color: var(--dif-primary-strong); box-shadow: 0 0 0 1px var(--dif-primary-strong) inset; }
.cotf-sino input:focus-visible + span { box-shadow: var(--dif-ring); }

/* --- Resumen lateral --- */
/* Deja libre la altura del header fijo */
.cotf-aside { top: calc(var(--header-h) + 20px); }
.cotf-resumen { border-radius: 1.25rem; box-shadow: var(--shadow-lg); }
.cotf-resumen__cab {
    background: var(--dif-surface);
    color: var(--dif-text);
    border-bottom: 1px solid var(--dif-border);
    padding: 20px 22px 16px;
}
.cotf-resumen__cab .fa { color: var(--dif-primary-strong); }
.cotf-resumen__cab span { color: var(--dif-muted); }
.cotf-resumen__cuerpo { padding: 16px 22px 22px; }
.cotf-resumen__total {
    margin: 10px 0 14px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: var(--dif-surface-2);
    border: 1px solid var(--dif-border);
}
.cotf-resumen__total strong { color: var(--dif-text); letter-spacing: -0.02em; }
.cotf-resumen__fila--lista li:before { color: var(--dif-primary-strong); }
.cotf-resumen__nota {
    background: transparent;
    color: var(--dif-muted);
    font-weight: 500;
    border-radius: 0;
    padding: 0;
}
.cotf-resumen__nota .fa { color: #059669; }

/* --- Barra inferior del celular: clara, como el header --- */
.cot-barra {
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    color: var(--dif-text);
    border-top: 1px solid var(--dif-border);
    box-shadow: 0 -8px 24px -8px rgba(15, 23, 42, 0.12);
}
.cot-barra__label { color: var(--dif-muted); }
.cot-barra__monto.es-texto { color: var(--dif-muted); }
.cot-barra__boton { min-height: 48px; padding: 0 22px; }

/* --- Avisos --- */
.cot-aviso { border-radius: var(--radius-md); padding: 14px 16px; }
.cotf .cot-cliente { border-radius: var(--radius-md); background: var(--dif-surface-2); border: 1px solid var(--dif-border); color: #475569; }
.cotf .cot-cliente.is-conocido { background: #ECFDF5; border-color: #A7F3D0; color: #047857; }
.cotf .cot-buscar__boton { top: 5px; right: 5px; bottom: 5px; width: 40px; border-radius: 8px; }

/* --- Propuesta --- */
.cot-numero { color: var(--dif-primary-strong); letter-spacing: .08em; }
.cot-titulo { font-size: clamp(1.375rem, 2.4vw, 1.75rem); font-weight: 750; letter-spacing: -0.02em; color: var(--dif-text); }
.cot-dato { background: var(--dif-surface-2); border: 1px solid var(--dif-border); border-radius: var(--radius-md); }
.cot-dato__label { font-size: 0.6875rem; letter-spacing: .06em; }
.cot-mensaje { background: var(--dif-primary-50); border: 1px solid var(--dif-primary-100); border-radius: var(--radius-md); }
.cot-linea__foto,
.cot-linea__foto img { border-radius: 10px; }
.cot-total-final {
    background: var(--dif-text);
    color: #fff;
    border-radius: var(--radius-md);
    padding: 16px 18px;
}
.cot-total-final__monto { letter-spacing: -0.02em; }
.cot-acciones { gap: 10px; }

/* --- Páginas de aviso --- */
.cot-mensaje-card { padding: 3rem 2rem; animation: dif-rise 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.cot-mensaje-card h1 { font-weight: 750; letter-spacing: -0.02em; }
.cot-mensaje-card__icono { width: 64px; height: 64px; font-size: 28px; font-weight: 700; }
.cot-mensaje-card__icono.is-ok { background: #D1FAE5; color: #059669; }
.cot-mensaje-card__icono.is-aviso { background: #FEF3C7; color: #D97706; }
.cot-wrap:has(.cot-mensaje-card) { display: flex; align-items: center; justify-content: center; padding-top: 3rem; }

/* --- Celular --- */
@media (max-width: 575px) {
    .cotf-hero { padding: 1.5rem 1.25rem; border-radius: 1rem; }
    .cotf-card { border-radius: 0.875rem; margin-bottom: 14px; }
    .cotf-card__cab { padding: 16px; }
    .cotf-card__cuerpo { padding: 18px 16px; }
    .cot-card { padding: 1.25rem; border-radius: 0.875rem; }
    .cot-mensaje-card { padding: 2.25rem 1.25rem; }
    .cot-acciones .cot-boton { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .cot-mensaje-card { animation: none; }
}

/* Propuesta: abono para reservar y saldo */
.cot-abono { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 14px; border-radius: var(--radius-md); background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; font-weight: 600; }
.cot-abono b { font-size: 1.1rem; }
.cot-abono .fa { margin-right: 6px; }

/* Ventana emergente de avisos del formulario (falta un dato, error al enviar) */
.cot-popup {
    position: fixed; inset: 0; z-index: 10000; display: none;
    align-items: center; justify-content: center; padding: 16px;
    background: rgba(15, 23, 42, .55);
}
.cot-popup.is-abierto { display: flex; animation: cotPopupFondo .15s ease-out; }
.cot-popup__caja {
    width: 100%; max-width: 380px; padding: 28px 24px 22px; border-radius: 16px; text-align: center;
    background: var(--dif-surface, #fff); box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
    animation: cotPopupCaja .18s ease-out;
}
.cot-popup__icono {
    display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 12px;
    border-radius: 50%; background: #fdecec; color: var(--dif-danger, #d64545); font-size: 22px;
}
.cot-popup__titulo { margin: 0 0 6px; font-size: 1.15rem; font-weight: 700; color: var(--dif-navy, var(--dif-text)); }
.cot-popup__texto { margin: 0 0 20px; font-size: var(--font-size-sm, 15px); color: var(--dif-muted); line-height: 1.5; }
.cot-popup__boton { width: 100%; }
@keyframes cotPopupFondo { from { opacity: 0; } to { opacity: 1; } }
@keyframes cotPopupCaja { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }

/* Propuesta: el descuento en rojo */
.cot-total-fila--descuento span:last-child { color: #d92d20; font-weight: 700; }

/* Propuesta confirmada (y aceptada en espera): comprobante para el cliente */
.cot-confirmada { text-align: center; padding: 8px 4px 4px; }
.cot-confirmada__icono {
    display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 12px;
    border-radius: 50%; background: #ecfdf5; color: #059669; font-size: 28px;
    box-shadow: 0 0 0 8px rgba(5, 150, 105, .08);
}
.cot-confirmada--espera .cot-confirmada__icono { background: #eff6ff; color: #2563eb; box-shadow: 0 0 0 8px rgba(37, 99, 235, .08); }
.cot-confirmada__titulo { margin: 0 0 6px; font-size: 1.35rem; font-weight: 800; color: var(--dif-navy, var(--dif-text)); }
.cot-confirmada__texto { margin: 0 auto 18px; max-width: 460px; color: var(--dif-muted); line-height: 1.55; }
.cot-confirmada__resumen {
    list-style: none; margin: 0 auto 16px; padding: 4px 16px; max-width: 420px; text-align: left;
    border: 1px solid var(--dif-border); border-radius: 12px; background: var(--dif-bg, #f8fafc);
}
.cot-confirmada__resumen li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--dif-border); font-size: 14px; }
.cot-confirmada__resumen li:last-child { border-bottom: 0; }
.cot-confirmada__resumen span { color: var(--dif-muted); }
.cot-confirmada__resumen b { color: var(--dif-text); text-align: right; }
.cot-confirmada__pasos { margin: 0 auto 16px; max-width: 420px; text-align: left; font-size: 13.5px; color: var(--dif-muted); }
.cot-confirmada__pasos p { margin: 0 0 6px; }
.cot-confirmada__pasos .fa { width: 18px; color: #059669; }

/* Propuesta aceptada: avance (propuesta → aceptada → confirmación), comentario y qué sigue */
.cot-avance { list-style: none; display: flex; justify-content: center; gap: 0; margin: 0 auto 18px; padding: 0; max-width: 420px; }
.cot-avance li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--dif-muted); }
.cot-avance li:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: calc(50% + 18px); right: calc(-50% + 18px); height: 2px; background: var(--dif-border); }
.cot-avance li.is-ok:not(:last-child)::after { background: #a7f3d0; }
.cot-avance li > span { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
    background: #f2f4f7; color: #98a2b3; border: 2px solid var(--dif-border); }
.cot-avance li.is-ok > span { background: #ecfdf5; color: #059669; border-color: #a7f3d0; }
.cot-avance li.is-ok { color: #065f46; }
.cot-avance li.is-actual > span { background: #eff6ff; color: #2563eb; border-color: #93c5fd; }
.cot-avance li.is-actual { color: #1d4ed8; }
.cot-aceptada__comentario { margin: 0 auto 16px; max-width: 420px; padding: 10px 14px; text-align: left; border-left: 3px solid #93c5fd;
    background: #eff6ff; border-radius: 0 10px 10px 0; color: #1e3a8a; font-size: 14px; line-height: 1.5; }
.cot-aceptada__comentario small { display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #2563eb; }
.cot-aceptada__titulo-pasos { font-weight: 700; color: var(--dif-text); margin-bottom: 8px !important; }
.cot-confirmada--espera .cot-confirmada__pasos .fa { color: #2563eb; }

/* Paneles de los demás estados (vencida, rechazada, cerrada) */
.cot-confirmada--neutro .cot-confirmada__icono { background: #f1f5f9; color: #64748b; box-shadow: 0 0 0 8px rgba(100, 116, 139, .08); }
.cot-confirmada > .cot-estado { display: table; margin: 0 auto 8px; }

/* Botones que son enlaces (Descargar comprobante, PDF): sin subrayado en ningún estado */
a.cot-boton, a.cot-boton:hover, a.cot-boton:focus, a.cot-boton:active, a.cot-boton:visited { text-decoration: none; }

/* Ver PDF: ventana emergente con el PDF en un iframe (en celular abre otra pestaña) */
.cot-pdfpop { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 23, 42, .6); }
.cot-pdfpop.is-abierto { display: flex; animation: cotPopupFondo .15s ease-out; }
.cot-pdfpop__caja { display: flex; flex-direction: column; width: 100%; max-width: 900px; height: 100%; max-height: 92vh; border-radius: 14px; overflow: hidden; background: var(--dif-surface, #fff); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); animation: cotPopupCaja .18s ease-out; }
.cot-pdfpop__cab { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--dif-border); }
.cot-pdfpop__cab b { flex: 1; font-size: 15px; color: var(--dif-navy, var(--dif-text)); }
.cot-pdfpop__cab b .fa { color: #dc2626; margin-right: 6px; }
.cot-pdfpop__accion { padding: 7px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--dif-primary-700, var(--dif-primary)); text-decoration: none; }
.cot-pdfpop__accion:hover { background: var(--dif-primary-50, #f0f9fa); text-decoration: none; }
.cot-pdfpop__cerrar { width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; font-size: 26px; line-height: 1; color: var(--dif-muted); cursor: pointer; }
.cot-pdfpop__cerrar:hover { background: var(--dif-bg, #f1f5f9); color: var(--dif-text); }
.cot-pdfpop__cuerpo { position: relative; flex: 1; background: #525659; }
.cot-pdfpop__cuerpo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .2s; }
.cot-pdfpop.is-listo .cot-pdfpop__cuerpo iframe { opacity: 1; }
.cot-pdfpop__cargando { position: absolute; top: 50%; left: 0; right: 0; text-align: center; transform: translateY(-50%); color: #e5e7eb; font-size: 15px; }

/* Cabecera: píldora del módulo, como "Mi carrito" en el carro */
.header-badge-modulo {
    margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    padding: 6px 14px; border-radius: 999px; white-space: nowrap;
    background: var(--dif-surface, #fff); border: 1px solid var(--dif-border, #e2e8f0);
    color: var(--dif-primary-700, var(--dif-primary)); font-size: 13px; font-weight: 600;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.header-badge-modulo svg { color: var(--dif-primary); }
@media (max-width: 575px) {
    .header-badge-modulo { padding: 5px 10px; font-size: 12px; }
}

/* ===== Página de pago /core/cotizacion/pagar/{token} (2026-10-13) ===== */
.cotp .cot-boton { display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.cot-boton--wa { background: #25D366; }
.cot-boton--wa:hover { background: #1ebe5a; }
.cotp-aviso { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: #f8fafc; border: 1px solid #e5e9f0; margin: 0 0 16px; }
.cotp-aviso > i { font-size: 22px; line-height: 1; color: #64748b; margin-top: 2px; }
.cotp-aviso b { display: block; font-size: 15px; color: #0f172a; }
.cotp-aviso span { display: block; font-size: 13.5px; color: #475467; margin-top: 2px; line-height: 1.5; }
.cotp-aviso--ok { background: #ecfdf5; border-color: #a7f3d0; }
.cotp-aviso--ok > i { color: #059669; }
.cotp-aviso--malo { background: #fef3f2; border-color: #fecdca; }
.cotp-aviso--malo > i { color: #d92d20; }
.cotp-resumen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 18px; }
.cotp-resumen > div { padding: 12px; border-radius: 12px; background: #f8fafc; border: 1px solid #eef1f5; text-align: center; }
.cotp-resumen span { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: #64748b; }
.cotp-resumen b { display: block; font-size: 17px; color: #0f172a; margin-top: 2px; white-space: nowrap; }
.cotp-resumen__saldo { background: #fffaeb !important; border-color: #fedf89 !important; }
.cotp-resumen__saldo b { color: #b54708; }
.cotp-paso { font-weight: 700; color: #0f172a; margin: 0 0 10px; }
.cotp-opciones { display: grid; gap: 10px; margin-bottom: 16px; }
.cotp-opcion { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 2px solid #e5e9f0; border-radius: 14px; cursor: pointer; margin: 0; background: #fff; transition: border-color .12s ease, background .12s ease; }
.cotp-opcion:hover { border-color: #b9e1ea; }
.cotp-opcion.is-activa { border-color: var(--dif-primary-600, #338E9F); background: #f2fafb; }
.cotp-opcion input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--dif-primary-600, #338E9F); }
.cotp-opcion__texto { flex: 1 1 auto; min-width: 0; }
.cotp-opcion__texto b { display: block; font-size: 15px; color: #0f172a; }
.cotp-opcion__texto small { display: block; font-size: 12.5px; color: #64748b; margin-top: 2px; line-height: 1.45; }
.cotp-opcion__monto { font-size: 18px; font-weight: 800; color: #0f172a; white-space: nowrap; }
.cotp-pagar { width: 100%; font-size: 16px; padding: 14px; }
.cotp-nota { font-size: 12.5px; color: #64748b; margin: 8px 0 0; text-align: center; }
.cotp-nota i { margin-right: 4px; }
.cotp-transferencia { margin-top: 16px; border: 1px solid #e5e9f0; border-radius: 14px; overflow: hidden; }
.cotp-transferencia summary { cursor: pointer; padding: 13px 16px; font-weight: 600; color: #334155; list-style: none; }
.cotp-transferencia summary::-webkit-details-marker { display: none; }
.cotp-transferencia summary i { margin-right: 6px; color: var(--dif-primary-600, #338E9F); }
.cotp-transferencia__cuerpo { padding: 0 16px 16px; }
.cotp-transferencia__monto { margin: 0 0 10px; }
.cotp-transferencia__datos { padding: 12px 14px; background: #f8fafc; border-radius: 10px; font-size: 14px; line-height: 1.6; margin-bottom: 8px; }
.cotp-transferencia__datos p { margin: 0 0 4px; }
.cotp-transferencia .cot-boton--wa { margin-top: 12px; }
.cotp-volver { text-align: center; margin: 18px 0 0; font-size: 13.5px; }
@media (max-width: 480px) { .cotp-resumen b { font-size: 15px; } .cotp-opcion__monto { font-size: 16px; } }
.cotp-cta { display: grid; gap: 8px; margin: 14px 0 16px; }
.cotp-cta .cot-boton { display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.cotp-cta__texto { margin: 0 0 2px; font-size: 14px; color: #334155; }
.cotp-cta__texto i { color: var(--dif-primary-600, #338E9F); margin-right: 4px; }