/**
 * Estilos del wizard del formulario de reservas (Fase 8 plan funcional v2.1).
 *
 * Se carga SOLO en páginas que contengan el shortcode [reservas_kart].
 * Pensado para ser independiente del tema activo: usa selectores propios
 * y no toca .button / .btn / etc. del tema. Si quieres armonizar colores
 * con tu identidad corporativa, edita las variables --kart-* del :root.
 */

:root {
    --kart-primary:        #ff5722;   /* color principal del recinto (naranja kart) */
    --kart-primary-dark:   #d94315;
    --kart-step-done:      #4caf50;
    --kart-step-pending:   #e0e0e0;
    --kart-step-label:     #555;
    --kart-step-label-act: #ff5722;
    --kart-border:         #e0e6ee;
    --kart-bg-soft:        #f7f9fc;
    --kart-text:           #2c3e50;
    --kart-error:          #c62828;
    --kart-success:        #2e7d32;
}

/* ===========================================================
   WRAPPER WIZARD
   =========================================================== */
.kart-wizard {
    /* Fase 9 fix UX (v3): respetar el ancho del contenedor padre del tema.
       Visual Composer envuelve el shortcode en una columna con max-width
       definido por el tema (esa "franja gris" donde aparecen el título y
       las normas de la reserva). Queremos coincidir con ese ancho, NI más
       (full-bleed) NI menos (caja estrecha). Por eso: width 100% del padre. */
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 16px 0;          /* sin padding lateral: ya lo da el contenedor del tema */
    box-sizing: border-box;
    color: var(--kart-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* Para que cada paso (tarjeta blanca con padding) también ocupe el 100%
   del wizard, anulamos cualquier max-width que el tema pudiera imponer. */
.kart-wizard .kart-step,
.kart-wizard .kart-wizard-stepper,
.kart-wizard .kart-wizard-nav {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ===========================================================
   STEPPER SUPERIOR (indicador de pasos)
   =========================================================== */
.kart-wizard-stepper {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin: 8px 0 32px 0;
    padding: 0 8px;
    flex-wrap: nowrap;
}
.kart-step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 0 0 auto;
    min-width: 84px;
    position: relative;
    z-index: 2;
}
.kart-step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--kart-step-pending);
    color: #888;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.25s ease, color 0.25s ease;
}
.kart-step-label {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.2;
    color: var(--kart-step-label);
}
.kart-step-indicator.is-active .kart-step-circle {
    background: var(--kart-primary);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(255, 87, 34, 0.18);
}
.kart-step-indicator.is-active .kart-step-label {
    color: var(--kart-step-label-act);
    font-weight: 600;
}
.kart-step-indicator.is-done .kart-step-circle {
    background: var(--kart-step-done);
    color: #fff;
}
.kart-step-line {
    flex: 1 1 auto;
    height: 2px;
    background: var(--kart-step-pending);
    margin: 19px 6px 0 6px;
    border-radius: 2px;
    z-index: 1;
}

/* En móvil: stepper más compacto */
@media (max-width: 640px) {
    .kart-step-indicator { min-width: 60px; }
    .kart-step-circle { width: 32px; height: 32px; font-size: 13px; }
    .kart-step-label { font-size: 11px; }
    .kart-step-line { margin-top: 15px; }
}

/* ===========================================================
   FORM CONTENEDOR DEL WIZARD
   El form envuelve los 4 .kart-step y la nav. Algunos temas le
   aplican width / max-width / margin que lo encogen, por eso
   forzamos aquí su ancho al 100% del wizard.
   =========================================================== */
#form-reserva {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: block;
}

/* ===========================================================
   PASOS (secciones)
   =========================================================== */
.kart-step {
    background: #fff;
    border: 1px solid var(--kart-border);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    display: none;
    animation: kart-fade-in 0.28s ease;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.kart-step.is-active { display: block; }
.kart-step[hidden]   { display: none; }
.kart-step-title {
    margin: 0 0 18px 0;
    font-size: 22px;
    color: var(--kart-text);
    border-bottom: 2px solid var(--kart-bg-soft);
    padding-bottom: 10px;
}
@keyframes kart-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===========================================================
   CAMPOS DEL FORMULARIO
   =========================================================== */
.kart-field {
    margin-bottom: 18px;
}
.kart-field-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.kart-field-row > .kart-field {
    flex: 1 1 200px;
    min-width: 180px;
}
.kart-field-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 14px;
    color: var(--kart-text);
}
.kart-req { color: #e53935; }
.kart-field-hint {
    margin-top: 6px;
    font-size: 13px;
    color: #666;
}
.kart-field input[type="text"],
.kart-field input[type="email"],
.kart-field input[type="tel"],
.kart-field input[type="date"],
.kart-field select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #cfd6e0;
    border-radius: 5px;
    font-size: 15px;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}
.kart-field input:focus,
.kart-field select:focus {
    outline: none;
    border-color: var(--kart-primary);
    box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.18);
}

/* ===========================================================
   STEPPER +/- (nº participantes)
   =========================================================== */
.kart-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid #cfd6e0;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.kart-stepper-btn {
    background: var(--kart-bg-soft);
    border: none;
    width: 44px;
    height: 44px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    color: var(--kart-text);
    transition: background-color 0.15s ease;
    line-height: 1;
}
.kart-stepper-btn:hover { background: #e8eef5; }
.kart-stepper-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.kart-stepper-input {
    width: 70px !important;
    text-align: center;
    border: none !important;
    font-size: 18px !important;
    font-weight: 600;
    background: #fff !important;
    padding: 8px 0 !important;
    box-shadow: none !important;
    -moz-appearance: textfield;
}
.kart-stepper-input::-webkit-outer-spin-button,
.kart-stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ===========================================================
   CARDS RADIO (modalidad)
   =========================================================== */
.kart-modalidad-cards {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.kart-card-radio {
    flex: 1 1 240px;
    min-width: 220px;
    border: 2px solid var(--kart-border);
    border-radius: 8px;
    padding: 12px 16px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff;
}
/* Fase 11.10.fix (2026-05-18): el radio nativo se ve como un rectángulo
   en Chrome/Firefox cuando es :checked + focus. Lo ocultamos visualmente
   pero sigue siendo accesible (teclado, screen reader) porque está dentro
   del <label>. El feedback visual de selección lo da el borde naranja y
   el fondo de la card vía .kart-card-radio:has(input:checked). */
.kart-card-radio input[type="radio"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    /* Mantenemos el accent-color por si en algún contexto vuelve a hacerse
       visible (ej. reset de tema), que al menos respete la paleta. */
    accent-color: var(--kart-primary);
}
.kart-card-radio:has(input:checked) {
    border-color: var(--kart-primary);
    background: rgba(255, 87, 34, 0.04);
}
.kart-card-title {
    font-weight: 600;
    margin-bottom: 4px;
}
.kart-card-sub {
    font-size: 13px;
    color: #666;
}

/* ===========================================================
   RADIO PILLS (franja horaria)
   =========================================================== */
.kart-radio-inline { display: flex; gap: 8px; flex-wrap: wrap; }
.kart-radio-pill {
    border: 1px solid var(--kart-border);
    border-radius: 999px;
    padding: 6px 14px;
    cursor: pointer;
    background: #fff;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.kart-radio-pill input[type="radio"] {
    margin: 0;
    accent-color: var(--kart-primary);
}
.kart-radio-pill:has(input:checked) {
    border-color: var(--kart-primary);
    background: rgba(255, 87, 34, 0.08);
}

/* ===========================================================
   CATÁLOGO DE PRODUCTOS
   =========================================================== */
.reservas-productos {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0 16px 0;
    font-size: 14px;
}
.reservas-productos th {
    background: var(--kart-bg-soft);
    text-align: left;
    padding: 10px 12px;
    border-bottom: 2px solid var(--kart-border);
    font-weight: 600;
}
.reservas-productos td {
    padding: 12px;
    border-bottom: 1px solid #f0f2f5;
    vertical-align: middle;
}
.reservas-productos td:nth-child(4) {
    text-align: center;
    white-space: nowrap;
}

/* ===========================================================
   BOTONES CANTIDAD (+/-) DEL CATÁLOGO
   Fix Fase 9: en el catálogo el botón "+" se salía de la caja porque
   el CSS del tema (Visual Composer) forzaba width:100% en buttons.
   Reforzamos con !important en width/height/border-radius y
   wrappeamos los tres elementos en flex para que no salten de línea.
   =========================================================== */
.reservas-productos td:nth-child(4) {
    width: 140px;             /* ancho fijo para que la columna no se estreche */
    min-width: 140px;
    white-space: nowrap;
    text-align: center;
}
.reservas-productos .increase,
.reservas-productos .decrease {
    display: inline-block !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    line-height: 1 !important;
    border: none !important;
    border-radius: 50% !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    cursor: pointer;
    color: #fff !important;
    padding: 0 !important;
    margin: 0 4px !important;
    text-align: center !important;
    transition: filter 0.15s ease;
}
.reservas-productos .decrease { background: #e53935 !important; }
.reservas-productos .increase { background: #43a047 !important; }
.reservas-productos .decrease:hover,
.reservas-productos .increase:hover { filter: brightness(1.1); }
.reservas-productos .cantidad {
    display: inline-block;
    min-width: 28px;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    vertical-align: middle;
    margin: 0 2px;
}

/* ===========================================================
   RESUMEN PEDIDO
   =========================================================== */
.kart-pedido-resumen {
    background: var(--kart-bg-soft);
    border-radius: 6px;
    padding: 14px 18px;
    margin: 16px 0;
}
.kart-pedido-resumen h4 {
    margin: 0 0 8px 0;
    font-size: 15px;
    color: var(--kart-text);
}
.kart-pedido-total {
    margin: 8px 0 0 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--kart-primary);
}

/* ===========================================================
   INFO BOX (kart propio total, paso 2 propio)
   =========================================================== */
.kart-info-box {
    background: #fff8e1;
    border-left: 4px solid #ffb900;
    padding: 12px 16px;
    border-radius: 4px;
    margin: 12px 0;
}
.kart-info-box--blue {
    background: #e3f2fd;
    border-left-color: #1976d2;
}
.kart-cesta-importada-aviso {
    background: #f1f8f4;
    border: 1px solid #b8dcc5;
    border-left: 4px solid #2e7d32;
    border-radius: 6px;
    color: #24442f;
    margin: 12px 0;
    padding: 12px 16px;
}
.kart-cesta-importada-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}
.kart-cesta-importada-body {
    font-size: 14px;
    line-height: 1.45;
}
.kart-cesta-importada-body ul {
    margin: 6px 0 0 18px;
    padding: 0;
}
.kart-cesta-importada-body li {
    margin: 2px 0;
}
.kart-cesta-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid #b8c2cc;
    border-radius: 6px;
    background: #ffffff;
    color: var(--kart-text);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: none;
}
.kart-cesta-reset:hover,
.kart-cesta-reset:focus {
    border-color: var(--kart-primary);
    color: var(--kart-primary-dark);
    outline: none;
}

/* ===========================================================
   TABLA RESUMEN (paso 4)
   =========================================================== */
.kart-resumen-tabla {
    background: var(--kart-bg-soft);
    border-radius: 6px;
    padding: 18px;
    margin-bottom: 16px;
}
.kart-resumen-tabla table {
    width: 100%;
    border-collapse: collapse;
}
.kart-resumen-tabla th,
.kart-resumen-tabla td {
    text-align: left;
    padding: 8px 6px;
    border-bottom: 1px solid #e0e6ee;
}
.kart-resumen-tabla th {
    font-weight: 600;
    color: #555;
    width: 40%;
}
.kart-resumen-tabla tr:last-child th,
.kart-resumen-tabla tr:last-child td { border-bottom: none; }
.kart-resumen-total {
    font-size: 20px;
    font-weight: 700;
    color: var(--kart-primary);
}

/* ===========================================================
   PAGOS (paso 4)
   =========================================================== */
.kart-pagos {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    align-items: stretch;
}
.kart-btn-pagar {
    background: var(--kart-primary);
    color: #fff;
    border: none;
    padding: 14px 20px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.kart-btn-pagar:hover:not(:disabled) { background: var(--kart-primary-dark); }
.kart-btn-pagar:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.kart-paypal-wrap {
    min-height: 50px;
}
.disabled-paypal {
    pointer-events: none;
    opacity: 0.45;
}

/* ===========================================================
   NAVEGACIÓN (botones Anterior/Siguiente)
   =========================================================== */
.kart-wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--kart-border);
}
.kart-nav-btn {
    border: 1px solid var(--kart-border);
    background: #fff;
    color: var(--kart-text);
    padding: 10px 22px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.kart-nav-btn:hover:not(:disabled) {
    background: var(--kart-bg-soft);
    border-color: var(--kart-primary);
}
.kart-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.kart-nav-btn--next {
    background: var(--kart-primary);
    color: #fff;
    border-color: var(--kart-primary);
}
.kart-nav-btn--next:hover:not(:disabled) {
    background: var(--kart-primary-dark);
    border-color: var(--kart-primary-dark);
}

/* ===========================================================
   ERRORES POR PASO
   =========================================================== */
.kart-step-error {
    margin-top: 12px;
    padding: 0 12px;
    color: var(--kart-error);
    font-size: 14px;
    min-height: 1.2em;
    font-weight: 500;
}
.kart-step-error:empty { display: none; }

/* =====================================================================
   FASE 10 — REDISEÑO UI (cards, iconos, resumen 2 columnas, responsive)
   ===================================================================== */

/* ----- 10.B fix UX: tarjeta de "Nº participantes" con bandera de meta ----- */
.kart-participantes-card {
    border: 2px solid var(--kart-border);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    padding: 0;          /* el padding lo da .kart-participantes-body */
    margin-bottom: 18px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.kart-participantes-card:focus-within {
    border-color: var(--kart-primary);
    box-shadow: 0 4px 14px rgba(255, 87, 34, 0.18);
}
/* Bandera de meta clásica: cuadros blancos y negros 16×16px alternos.
   Se usa en dos franjas (arriba y abajo) para enmarcar la tarjeta. */
.kart-checkered-flag {
    height: 16px;
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #111 25%, transparent 25%),
        linear-gradient(-45deg, #111 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #111 75%),
        linear-gradient(-45deg, transparent 75%, #111 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.kart-participantes-body {
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}
.kart-participantes-head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--kart-text);
}
.kart-icon-persona { color: var(--kart-primary); }
.kart-participantes-titulo {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
}
.kart-stepper--centered {
    align-self: center;
}
.kart-paso-tipo {
    font-size: 13px;
    color: #666;
    max-width: 340px;
    line-height: 1.4;
}

/* Iconos de personitas que se rellenan según el nº participantes */
.kart-personas-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin: 2px 0 4px 0;
    min-height: 28px;
}
.kart-persona-icon {
    fill: #cfd6e0;
    transition: fill 0.2s ease, transform 0.2s ease;
}
.kart-persona-icon.is-active {
    fill: var(--kart-primary);
    transform: scale(1.12);
}
.kart-personas-extra {
    display: inline-block;
    background: var(--kart-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    margin-left: 6px;
    letter-spacing: 0.3px;
}
.kart-personas-extra[hidden] { display: none; }

/* ----- 10.B: iconos en tarjetas de modalidad y stepper grande ----- */
.kart-card-radio {
    align-items: center;
}
.kart-card-icon {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--kart-primary);
    background: rgba(255, 87, 34, 0.08);
    border-radius: 12px;
    transition: background-color 0.2s ease;
}
.kart-card-radio:has(input:checked) .kart-card-icon {
    background: rgba(255, 87, 34, 0.18);
}

.kart-stepper--lg .kart-stepper-btn {
    width: 56px;
    height: 56px;
    font-size: 24px;
}
.kart-stepper--lg .kart-stepper-input {
    width: 90px !important;
    font-size: 24px !important;
    padding: 10px 0 !important;
}

/* ----- 10.A: catálogo en grid de tarjetas ----- */
.kart-catalogo-title {
    margin: 0 0 16px 0;
    font-size: 20px;
    color: var(--kart-text);
}
.kart-catalogo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    margin-bottom: 20px;
}

.kart-producto-card {
    background: #fff;
    border: 1px solid var(--kart-border);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.kart-producto-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.kart-producto-foto {
    position: relative;
    background: var(--kart-bg-soft);
    aspect-ratio: 16 / 10;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kart-producto-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.kart-producto-foto-placeholder {
    font-size: 64px;
    opacity: 0.4;
}
.kart-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #555;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.kart-badge--nino   { background: #1976d2; }
.kart-badge--adulto { background: #6a1b9a; }

.kart-producto-info {
    padding: 14px 16px 4px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.kart-producto-nombre {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--kart-text);
}
.kart-producto-tanda {
    margin: 0;
    font-size: 12px;
    color: var(--kart-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.kart-producto-desc,
.kart-producto-cond {
    margin: 0;
    font-size: 13px;
    color: #555;
    line-height: 1.4;
}
.kart-producto-cond strong { color: var(--kart-text); }

.kart-producto-footer {
    border-top: 1px solid #f0f2f5;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.kart-producto-precio {
    font-size: 22px;
    font-weight: 800;
    color: var(--kart-primary);
}
.kart-producto-stepper {
    display: flex;
    align-items: center;
    gap: 6px;
}
.kart-producto-stepper .decrease,
.kart-producto-stepper .increase {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    border: none !important;
    border-radius: 50% !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    cursor: pointer;
    color: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    transition: filter 0.15s ease;
}
.kart-producto-stepper .decrease { background: #e53935 !important; }
.kart-producto-stepper .increase { background: #43a047 !important; }
.kart-producto-stepper .decrease:hover,
.kart-producto-stepper .increase:hover { filter: brightness(1.1); }
.kart-producto-stepper .cantidad {
    min-width: 28px;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
}

/* ----- 10.D: paso 4 resumen 2 columnas ----- */
.kart-resumen-tabla { background: transparent; padding: 0; }
.kart-resumen-2col {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    align-items: start;
}
.kart-resumen-col-izq,
.kart-resumen-col-der {
    background: var(--kart-bg-soft);
    border-radius: 8px;
    padding: 18px;
}
.kart-resumen-subtitle {
    margin: 0 0 12px 0;
    font-size: 16px;
    color: var(--kart-text);
    border-bottom: 1px solid var(--kart-border);
    padding-bottom: 8px;
}
.kart-resumen-dl {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
}
.kart-resumen-dl dt {
    font-weight: 600;
    color: #555;
    font-size: 14px;
}
.kart-resumen-dl dd {
    margin: 0;
    color: var(--kart-text);
    font-size: 14px;
}
.kart-resumen-karts {
    margin: 0;
    padding-left: 18px;
}
.kart-mini-badge {
    background: var(--kart-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 4px;
    vertical-align: middle;
}
.kart-mini-badge--grupo { background: #6a1b9a; }

.kart-resumen-card-total {
    background: linear-gradient(135deg, var(--kart-primary) 0%, var(--kart-primary-dark) 100%);
    color: #fff;
    border-radius: 8px;
    padding: 22px 18px;
    text-align: center;
    box-shadow: 0 4px 14px rgba(255, 87, 34, 0.3);
}
.kart-resumen-card-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    opacity: 0.9;
    margin-bottom: 8px;
}
.kart-resumen-card-importe {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 12px;
}
.kart-resumen-card-nota {
    font-size: 12px;
    opacity: 0.92;
    line-height: 1.5;
}

/* ----- 10.D: pagos paso 4 ----- */
.kart-pagos {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: stretch;
}
.kart-btn-pagar {
    background: var(--kart-primary);
    color: #fff;
    border: none;
    padding: 16px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
    box-shadow: 0 2px 8px rgba(255, 87, 34, 0.25);
}
.kart-btn-pagar:hover:not(:disabled) {
    background: var(--kart-primary-dark);
    transform: translateY(-1px);
}
.kart-paypal-wrap { min-height: 50px; align-self: center; }

/* ----- 10.F: responsive móvil ----- */
@media (max-width: 768px) {
    .kart-resumen-2col {
        grid-template-columns: 1fr;
    }
    .kart-pagos {
        grid-template-columns: 1fr;
    }
    .kart-modalidad-cards .kart-card-radio {
        flex: 1 1 100%;
    }
    .kart-field-row {
        flex-direction: column;
    }
    .kart-field-row > .kart-field {
        flex: 1 1 100%;
    }
    .kart-catalogo-grid {
        grid-template-columns: 1fr;
    }
    .kart-producto-card {
        flex-direction: row;
        align-items: stretch;
    }
    .kart-producto-foto {
        width: 120px;
        flex: 0 0 120px;
        aspect-ratio: auto;
    }
    .kart-producto-info { padding: 10px 12px 6px 12px; }
    .kart-producto-footer {
        flex-direction: column;
        gap: 10px;
        padding: 10px 12px;
    }
    .kart-stepper--lg .kart-stepper-btn {
        width: 48px;
        height: 48px;
        font-size: 22px;
    }
    .kart-stepper--lg .kart-stepper-input {
        width: 70px !important;
        font-size: 20px !important;
    }
    .kart-card-icon { width: 48px; height: 48px; flex: 0 0 48px; }
    .kart-card-icon svg { width: 36px; height: 36px; }
    .kart-resumen-card-importe { font-size: 36px; }
    .kart-nav-btn { padding: 12px 18px; font-size: 14px; }
}
@media (max-width: 480px) {
    .kart-producto-card { flex-direction: column; }
    .kart-producto-foto {
        width: 100%;
        flex: none;
        aspect-ratio: 16 / 10;
    }
}

/* ===========================================================
   FASE 11.7 — Densidad del TICKET DE ÉXITO (2026-05-17)
   /ticket/ y /ticket-vale/ tenían demasiado aire entre los datos
   y mucho espacio en blanco a la derecha. Compactamos el wrap
   y reducimos la columna de valores para que no se estire.
   =========================================================== */
.kart-ticket-wrap {
    /* Más estrecho que el wizard: el ticket es solo info de
       confirmación, no necesita 760 px. */
    max-width: 720px;
    margin: 24px auto;
}
/* Dentro del ticket, la dl de datos NO debe estirar la columna
   de valores: dejamos ambas columnas a "max-content" para que el
   bloque se centre y no quede medio vacío. */
.kart-ticket-wrap .kart-resumen-col-izq .kart-resumen-dl {
    grid-template-columns: max-content max-content;
    justify-content: start;
    column-gap: 24px;
}
/* La columna derecha (card total) se ensancha levemente para
   compensar y mantener proporción visual. */
.kart-ticket-wrap .kart-resumen-2col {
    grid-template-columns: minmax(0, 1.4fr) minmax(180px, 1fr);
    gap: 18px;
}
/* La tabla de productos no necesita ocupar 100% del wrap (queda
   muy aérea). La reducimos y centramos. */
.kart-ticket-wrap .kart-resumen-tabla {
    max-width: 100%;
}
.kart-ticket-wrap .kart-resumen-tabla table {
    width: 100%;
    table-layout: auto;
}
/* En móvil ya tenemos 1fr arriba por el grid genérico (line 927). */


/* ===========================================================
   FASE 11.8 — ROSTER DE PILOTOS (2026-05-18)
   Look "panel de equipo F1" para el shortcode
   [kart_completar_reserva]. Header negro con bandera a cuadros,
   banda con datos clave, cards de piloto con dorsal numerado.
   =========================================================== */

.kart-roster-wrap {
    max-width: 780px;
    margin: 24px auto;
    padding: 0 16px;
    color: var(--kart-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ----- HEADER PADDOCK ----- */
.kart-roster-header {
    position: relative;
    background: #1a1a1a;
    color: #fff;
    border-radius: 10px 10px 0 0;
    padding: 20px 24px;
    overflow: hidden;
}
/* Bandera a cuadros decorativa al fondo derecho del header.
   Pura CSS (sin imagen externa) usando linear-gradients superpuestos. */
.kart-roster-header::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 140px;
    height: 100%;
    background-image:
        linear-gradient(45deg,  #1a1a1a 25%, transparent 25%),
        linear-gradient(-45deg, #1a1a1a 25%, transparent 25%),
        linear-gradient(45deg,  transparent 75%, #1a1a1a 75%),
        linear-gradient(-45deg, transparent 75%, #1a1a1a 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-color: #ffffff;
    opacity: 0.18;
    pointer-events: none;
}
.kart-roster-header-row {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 1;
}
.kart-roster-helmet {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--kart-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.25);
}
.kart-roster-title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
}
.kart-roster-subtitle {
    margin: 2px 0 0;
    font-size: 13px;
    color: #9aa0a6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ----- BANDA F1 con datos clave ----- */
.kart-roster-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    background: #2c2c2c;
    color: #fff;
    border-top: 3px solid var(--kart-primary);
}
.kart-roster-strip-item {
    padding: 12px 16px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.kart-roster-strip-item:last-child { border-right: none; }
.kart-roster-strip-label {
    font-size: 10px;
    color: #9aa0a6;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 4px;
    font-weight: 600;
}
.kart-roster-strip-value {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

/* ----- STOCK de vehículos reservados ----- */
.kart-roster-stock {
    background: #fff;
    padding: 14px 24px;
    border-bottom: 1px solid var(--kart-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.kart-roster-stock-label {
    font-size: 12px;
    color: #555;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.kart-roster-stock-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--kart-bg-soft);
    color: var(--kart-text);
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--kart-border);
}
.kart-roster-stock-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--kart-primary);
    color: #fff;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

/* ----- BODY ----- */
.kart-roster-body {
    background: #fff;
    padding: 18px 18px 24px;
    border-radius: 0 0 10px 10px;
    border-top: 1px solid var(--kart-border);
}
.kart-roster-intro {
    margin: 0 0 16px;
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}
.kart-roster-section-title {
    margin: 0 0 12px;
    font-size: 15px;
    color: var(--kart-text);
    font-weight: 600;
    border-bottom: 1px solid var(--kart-border);
    padding-bottom: 6px;
}
.kart-roster-list {
    display: grid;
    gap: 12px;
}

/* ----- CARD DE PILOTO ----- */
.kart-pilot-card {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--kart-border);
    border-left: 4px solid var(--kart-primary);
    border-radius: 10px;
    padding: 14px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    position: relative;
}
.kart-pilot-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}
/* Estado: completo (cambia el dorsal y el borde lateral a verde). */
.kart-pilot-card.is-complete {
    background: #f4f9f4;
    border-color: #c8e6c9;
    border-left-color: var(--kart-success);
}
.kart-pilot-card.is-complete .kart-pilot-dorsal {
    background: var(--kart-success);
}
/* Estado: lectura (datos ya guardados). */
.kart-pilot-card.is-readonly {
    background: var(--kart-bg-soft);
}

/* Dorsal */
.kart-pilot-dorsal {
    background: var(--kart-primary);
    color: #fff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 4px;
    align-self: stretch;
    transition: background-color 0.2s ease;
}
.kart-pilot-dorsal-num {
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
}
.kart-pilot-dorsal-label {
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.85;
    margin-top: 2px;
}

/* Campos de la card */
.kart-pilot-fields {
    display: grid;
    gap: 8px;
    min-width: 0; /* evita overflow en grid */
}
.kart-pilot-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.kart-pilot-row--compact {
    grid-template-columns: max-content 1fr;
    align-items: center;
}
/* Si NO hay select de vehículo (modalidad propio), el toggle ocupa 1 sola
   columna. */
.kart-pilot-row--compact:not(:has(.kart-completar-vehiculo)) {
    grid-template-columns: max-content;
}

/* Inputs y selects del piloto. !important para ganar a estilos del tema. */
.kart-pilot-input,
.kart-pilot-select,
.kart-roster-wrap .kart-completar-vehiculo {
    width: 100%;
    padding: 8px 10px !important;
    border: 1px solid #cfd6e0 !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    background: #fff !important;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
    color: var(--kart-text);
}
.kart-pilot-input:focus,
.kart-pilot-select:focus,
.kart-roster-wrap .kart-completar-vehiculo:focus {
    outline: none !important;
    border-color: var(--kart-primary) !important;
    box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.15) !important;
}

/* Toggle Adulto/Menor */
.kart-age-toggle {
    display: inline-flex;
    border: 1px solid #cfd6e0;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.kart-age-btn {
    background: #fff !important;
    border: none !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #555 !important;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.15s ease, color 0.15s ease;
    line-height: 1.2 !important;
    box-shadow: none !important;
}
.kart-age-btn:hover {
    background: var(--kart-bg-soft) !important;
}
.kart-age-btn.is-on {
    background: var(--kart-primary) !important;
    color: #fff !important;
}

/* Select oculto (es el que lee kart-completar.js para el change). */
.kart-pilot-hidden-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Card de pilotos ya guardados (read-only): nombre grande + pills */
.kart-pilot-readonly-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--kart-text);
    margin-bottom: 6px;
}
.kart-pilot-readonly-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ----- FOOTER (progreso + botón) ----- */
.kart-roster-footer {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.kart-roster-progress {
    font-size: 12px;
    color: #777;
    font-weight: 600;
}
.kart-btn-confirmar {
    /* Hereda de .kart-btn-pagar pero con icono inline (vertical-align). */
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}

/* ----- AVISOS ----- */
.kart-roster-notice {
    padding: 14px 18px;
    border-radius: 6px;
    border-left: 4px solid;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.5;
}
.kart-roster-notice--ok {
    background: #e8f5e9;
    border-left-color: var(--kart-success);
    color: #1b5e20;
}

/* ----- FEEDBACK ----- */
.kart-roster-feedback {
    margin: 14px 0 0;
    font-size: 14px;
    color: var(--kart-error);
    min-height: 1.2em;
}

/* ----- RESPONSIVE MÓVIL ----- */
@media (max-width: 560px) {
    .kart-roster-header { padding: 16px 18px; }
    .kart-roster-title { font-size: 18px; }
    .kart-roster-helmet { width: 40px; height: 40px; flex-basis: 40px; }
    .kart-roster-helmet svg { width: 22px; height: 22px; }
    .kart-roster-strip { grid-template-columns: 1fr 1fr; }
    .kart-roster-stock { padding: 12px 18px; }
    .kart-roster-body { padding: 14px 14px 18px; }
    .kart-pilot-card { grid-template-columns: 52px 1fr; padding: 12px; gap: 10px; }
    .kart-pilot-dorsal-num { font-size: 22px; }
    .kart-pilot-row { grid-template-columns: 1fr; }
    .kart-pilot-row--compact { grid-template-columns: 1fr; }
    .kart-age-toggle { width: 100%; }
    .kart-age-btn { flex: 1; padding: 10px 4px !important; }
}

/* ===========================================================
   FASE 11.2 — UNIFICACIÓN VISUAL DE VALES REGALO (2026-05-17)
   Aplicado al shortcode [vales_regalo] (public-display-vales.php).
   Reutiliza .kart-wizard / .kart-step / .kart-field / .kart-resumen-*
   y añade lo específico: tarjetas de importe + aviso de caducidad.
   =========================================================== */

/* Wrapper específico (por si el día de mañana queremos overrides
   que afecten SOLO a la página de vales). */
.kart-vales-wrap { /* hereda todo de .kart-wizard */ }

/* Grid de tarjetas de importe. Mismo patrón que .kart-catalogo-grid
   pero con tarjetas más estrechas (180px en vez de 280px) porque solo
   muestran un icono + un precio. */
.kart-vales-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 12px;
}

/* Tarjeta clicable de importe. Se usa tanto en los <button> de importes
   preset como en el <label> de importe libre. */
.kart-vale-card {
    /* Reset agresivo: dentro del form, muchos temas estilizan <button>
       con altura, padding, colores propios. Forzamos look unificado. */
    -webkit-appearance: none !important;
    appearance: none !important;
    background: #fff !important;
    border: 2px solid var(--kart-border) !important;
    border-radius: 12px !important;
    padding: 18px 14px !important;
    margin: 0 !important;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--kart-text) !important;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.2;
    text-align: center;
    transition: border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    min-height: 130px;
    box-sizing: border-box;
}

.kart-vale-card:hover {
    border-color: var(--kart-primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Estado seleccionado: borde naranja + tinte suave. */
.kart-vale-card.is-active {
    border-color: var(--kart-primary) !important;
    background: rgba(255, 87, 34, 0.06) !important;
    box-shadow: 0 4px 14px rgba(255, 87, 34, 0.18);
}
.kart-vale-card.is-active .kart-vale-card-icon { color: var(--kart-primary); }
.kart-vale-card.is-active .kart-vale-card-importe { color: var(--kart-primary); }

/* Icono (regalo / euro). El color se toma de currentColor del SVG. */
.kart-vale-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #888;
    transition: color 0.15s ease;
}

/* Precio destacado (25 €, 50 €...). */
.kart-vale-card-importe {
    font-size: 22px;
    font-weight: 800;
    color: var(--kart-text);
    letter-spacing: -0.5px;
}

/* Tarjeta de "Otro importe": contiene un <input number> dentro. */
.kart-vale-card--custom {
    /* El <label> tiene comportamiento de bloque y queremos que se
       comporte igual que los <button> hermanos. */
    cursor: text;
}
.kart-vale-card--custom .kart-vale-card-importe {
    font-size: 14px;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.kart-vale-card-input {
    width: 100% !important;
    max-width: 130px;
    padding: 8px 10px !important;
    border: 1px solid #cfd6e0 !important;
    border-radius: 6px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-align: center !important;
    background: #fff !important;
    color: var(--kart-text) !important;
    box-sizing: border-box;
    /* Quitamos las flechitas del number input para look más limpio. */
    -moz-appearance: textfield;
}
.kart-vale-card-input::-webkit-outer-spin-button,
.kart-vale-card-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.kart-vale-card-input:focus {
    outline: none !important;
    border-color: var(--kart-primary) !important;
    box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.18) !important;
}

/* Textarea del mensaje opcional: mismo look que los .kart-field input. */
.kart-vales-wrap .kart-textarea {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1px solid #cfd6e0 !important;
    border-radius: 5px !important;
    font-size: 15px !important;
    font-family: inherit !important;
    line-height: 1.5;
    background: #fff !important;
    box-sizing: border-box;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.kart-vales-wrap .kart-textarea:focus {
    outline: none !important;
    border-color: var(--kart-primary) !important;
    box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.18) !important;
}

/* También aseguramos que los <input> dentro del wrap de vales hereden
   el look del wizard aunque no estén envueltos en .kart-field (lo
   están en el HTML actual, pero por defensa). */
.kart-vales-wrap input[type="text"],
.kart-vales-wrap input[type="email"],
.kart-vales-wrap input[type="tel"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #cfd6e0;
    border-radius: 5px;
    font-size: 15px;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.kart-vales-wrap input[type="text"]:focus,
.kart-vales-wrap input[type="email"]:focus,
.kart-vales-wrap input[type="tel"]:focus {
    outline: none;
    border-color: var(--kart-primary);
    box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.18);
}

/* Pagos: si solo hay 1 botón (tarjeta), ocupa todo el ancho. */
.kart-pagos--single { grid-template-columns: 1fr; }

/* Aviso de caducidad: misma franja amarilla del .kart-step-error pero
   en clave informativa, no de error. */
.kart-vale-aviso {
    margin-top: 18px;
    padding: 14px 18px;
    background: #fff8e1;
    border-left: 4px solid #ffb900;
    border-radius: 4px;
    color: #856404;
    font-size: 14px;
    line-height: 1.5;
}
.kart-vale-aviso strong { color: #6a4f00; }

/* Responsive móvil para vales. */
@media (max-width: 768px) {
    .kart-vales-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .kart-vale-card { min-height: 110px; padding: 14px 10px !important; }
    .kart-vale-card-importe { font-size: 18px; }
    .kart-vale-card-icon svg { width: 28px; height: 28px; }
}
@media (max-width: 380px) {
    .kart-vales-grid { grid-template-columns: 1fr 1fr; }
}