@charset "utf-8";

/* =====================================================================
   BOTONES — Teatro Andino Kusi Wasi (Design System, Fase 2)

   UN solo componente para todos los botones del sitio público. Las clases antiguas
   (.t2, .btn-card, .card-btnN, .btn-reservar, .alq-btn, .nos-btn, .ctc-cta, .btn-ingresar,
   .btn-comentar, .btn-red-action, .btn-danger-dark) siguen existiendo en el HTML y aquí se
   definen JUNTAS, así que ya no hay que tocar cada página para cambiar el aspecto de un botón.
   Para botones nuevos: <a class="btn-kw">, con .btn-kw--secondary o .btn-kw--ghost si hace falta.

   Variantes (DESIGN_SYSTEM.md §8):
     Primario   → rojo cochinilla, texto blanco. UNO por pantalla: la acción que queremos (cotizar, ver, enviar).
     Secundario → borde oro ocre + texto oro claro. Acción alternativa sobre fondo liso.
     Ghost      → borde crema al 40 % + texto crema. Sobre fotos o fondos con imagen.
   Todos: 48 px de alto mínimo, Roboto 600, 15 px, MAYÚSCULAS, pastilla, foco visible.

   Se carga DESPUÉS de tokens.css y ANTES del CSS de cada página. Las páginas solo conservan
   la colocación del botón (márgenes, alineación), nunca su aspecto.
   ===================================================================== */

.btn-kw,
.t2,
.btn-card,
.card-btnN,
.btn-reservar,
.alq-btn,
.nos-btn,
.ctc-cta,
.btn-ingresar,
.btn.btn-comentar,
.btn-red-action,
.btn.btn-danger-dark {
    /* ── Variante Primario (los demás solo cambian estas variables) ── */
    --btn-bg:           var(--gradient-primary);
    --btn-bg-hover:     var(--gradient-primary-hover);
    --btn-bg-active:    var(--color-primary-active);
    --btn-color:        var(--color-text-on-primary);
    --btn-color-hover:  var(--color-text-on-primary);
    --btn-border:       transparent;
    --btn-border-hover: transparent;
    --btn-shadow-hover: var(--shadow-cta);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    box-sizing: border-box;
    min-height: var(--touch-target);
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: var(--space-3) clamp(1.25rem, 6vw, 2rem);
    background: var(--btn-bg);
    color: var(--btn-color);
    border: 1.5px solid var(--btn-border);
    border-radius: var(--radius-pill);
    box-shadow: none;
    font-family: var(--font-ui);
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    letter-spacing: var(--letter-spacing-button);
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    cursor: pointer;
    transition: background-color var(--duration-base) var(--ease),
                border-color var(--duration-base) var(--ease),
                color var(--duration-base) var(--ease),
                box-shadow var(--duration-base) var(--ease),
                transform var(--duration-base) var(--ease);
}

/* Los íconos dentro del botón: 18 px, a la izquierda de la acción (WhatsApp, descargar) */
.btn-kw > i,
.t2 > i,
.alq-btn > i,
.nos-btn > i,
.ctc-cta > i,
.btn-reservar > i {
    font-size: 1.125rem;
    line-height: 1;
}

/* ── Variante Secundario: acción alternativa sobre fondo liso (todavía sin uso en el sitio; lista para las próximas pantallas) ── */
.btn-kw--secondary {
    --btn-bg:           transparent;
    --btn-bg-hover:     rgba(228, 180, 74, 0.12);
    --btn-bg-active:    rgba(228, 180, 74, 0.22);
    --btn-color:        var(--color-accent);
    --btn-color-hover:  var(--color-accent);
    --btn-border:       var(--color-gold-line);
    --btn-border-hover: var(--color-accent);
    --btn-shadow-hover: none;
}

/* ── Variante Ghost: sobre fotos o fondos con imagen ── */
.btn-kw--ghost,
.t2-outline,
.alq-btn-outline,
.nos-btn-outline,
.btn-rider-secundario {
    --btn-bg:           transparent;
    --btn-bg-hover:     rgba(243, 238, 228, 0.08);
    --btn-bg-active:    rgba(243, 238, 228, 0.16);
    --btn-color:        var(--color-text);
    --btn-color-hover:  var(--color-text);
    --btn-border:       rgba(243, 238, 228, 0.4);
    --btn-border-hover: var(--color-text);
    --btn-shadow-hover: none;
}

/* ── Estados ── */
/* Hover solo en dispositivos con mouse: en el celular se quedaba "pegado" después de tocar */
@media (hover: hover) and (pointer: fine) {
    .btn-kw:hover,
    .t2:hover,
    .btn-card:hover,
    .card-btnN:hover,
    .btn-reservar:hover,
    .alq-btn:hover,
    .nos-btn:hover,
    .ctc-cta:hover,
    .btn-ingresar:hover,
    .btn.btn-comentar:hover,
    .btn-red-action:hover,
    .btn.btn-danger-dark:hover {
        background: var(--btn-bg-hover);
        color: var(--btn-color-hover);
        border-color: var(--btn-border-hover);
        box-shadow: var(--btn-shadow-hover);
        transform: translateY(-1px);
    }
}

.btn-kw:active,
.t2:active,
.btn-card:active,
.card-btnN:active,
.btn-reservar:active,
.alq-btn:active,
.nos-btn:active,
.ctc-cta:active,
.btn-ingresar:active,
.btn.btn-comentar:active,
.btn-red-action:active,
.btn.btn-danger-dark:active {
    background: var(--btn-bg-active);
    color: var(--btn-color-hover);
    border-color: var(--btn-border-hover);
    box-shadow: none;
    transform: none;
}

.btn-kw:focus-visible,
.t2:focus-visible,
.btn-card:focus-visible,
.card-btnN:focus-visible,
.btn-reservar:focus-visible,
.alq-btn:focus-visible,
.nos-btn:focus-visible,
.ctc-cta:focus-visible,
.btn-ingresar:focus-visible,
.btn.btn-comentar:focus-visible,
.btn-red-action:focus-visible,
.btn.btn-danger-dark:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
    box-shadow: none;
}

.btn-kw:disabled,
.t2:disabled,
.card-btnN:disabled,
.btn-ingresar:disabled,
.btn.btn-comentar:disabled,
.btn-red-action:disabled,
.btn.btn-danger-dark:disabled,
.btn-kw[aria-disabled="true"],
.btn-kw.disabled {
    background: var(--color-disabled-bg);
    color: var(--color-text-disabled);
    border-color: transparent;
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
    opacity: 1;
}

/* "3. Agregar fecha +" vive en una columna angosta junto a los campos de fecha y hora: sin mayúsculas para que no se parta en 2 líneas */
.btn-red-action {
    padding-inline: var(--space-3);
    letter-spacing: 0.02em;
    text-transform: none;
}

/* Botón que ocupa todo el ancho de su caja (formularios y ventanas) */
.btn-ingresar,
.btn-red-action.w-100,
.btn.btn-danger-dark.w-100 {
    width: 100%;
}

/* Celular angosto: los botones de un mismo grupo se apilan a lo ancho (el Primario va primero en el HTML) */
@media (max-width: 480px) {
    /* letras y bordes un poco más justos para que "ESCRÍBENOS POR WHATSAPP" quepa en una línea */
    .btn-kw,
    .t2,
    .btn-card,
    .card-btnN,
    .btn-reservar,
    .alq-btn,
    .nos-btn,
    .ctc-cta,
    .btn-ingresar,
    .btn.btn-comentar,
    .btn-red-action,
    .btn.btn-danger-dark {
        padding-inline: var(--space-4);
        letter-spacing: 0.05em;
    }
    .home-cta__acciones,
    .alq-hero-actions,
    .nos-cta__actions {
        flex-direction: column;
        align-items: center;
        gap: var(--space-3);
    }
    .home-cta__acciones > .t2,
    .alq-hero-actions > .alq-btn,
    .nos-cta__actions > .nos-btn {
        width: 100%;
        max-width: 360px;
    }
}