/* =========================================================================
   TicketCity.mx — Flujo de compra
   Hoja de estilos de las vistas: evento, mapa/butacas, acceso y pago.
   Se carga DESPUÉS de style_redesign.css y reutiliza sus variables de tema.
   Todo va prefijado con .tc- para no chocar con Bootstrap ni con el sitio.
   ========================================================================= */

/* ------------------------------------------------------------------
   0. Variables propias del flujo
   ------------------------------------------------------------------ */
:root {
    --tc-panel: #ffffff;
    --tc-panel-2: #f1f3f7;
    --tc-linea: #e3e6ec;
    --tc-fila: #eef0f4;
    --tc-fila-alt: #e6e9ef;
    --tc-sombra: 0 10px 30px rgba(16, 20, 40, .10);
    --tc-wa: #25d366;
    --tc-wa-oscuro: #1da851;
    --tc-ok: #1f9d55;
    --tc-alerta: #d92d20;
    --tc-mapa-fondo: #ffffff;
    --tc-butacas-fondo: #ffffff;
}

[data-theme="dark"] {
    --tc-panel: #121212;
    --tc-panel-2: #1a1a1a;
    --tc-linea: #2e2e2e;
    --tc-fila: #2b2b2b;
    --tc-fila-alt: #232323;
    --tc-sombra: 0 10px 30px rgba(0, 0, 0, .45);
    --tc-mapa-fondo: #0a0a0a;
    --tc-butacas-fondo: #f7f7f9;
}

/* ------------------------------------------------------------------
   1. Estructura base
   ------------------------------------------------------------------ */
.tc-body {
    background: var(--color-fondo);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.tc-main {
    flex: 1 0 auto;
    width: 100%;
    padding: 0 1rem 4rem;
}

.tc-shell {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
}

.tc-shell-ancho {
    max-width: 880px;
}

/* ------------------------------------------------------------------
   2. Header interno
   ------------------------------------------------------------------ */
.tc-topbar {
    border-bottom: 1px solid var(--color-borde);
    background: var(--color-fondo);
    position: sticky;
    top: 0;
    z-index: 40;
}

.tc-topbar-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: .9rem 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.tc-topbar-logo img {
    height: 42px;
    display: block;
}

.tc-topbar-actions {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.tc-topbar-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 700;
    font-size: .95rem;
    color: var(--color-texto-1);
}

.tc-topbar-link i,
.tc-topbar-link span {
    color: var(--color-texto-1);
}

.tc-topbar-link:hover span,
.tc-topbar-link:hover i {
    color: var(--color-acento);
}

.tc-theme {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.tc-theme i {
    color: var(--color-texto-2);
    font-size: .85rem;
}

.tc-switch {
    position: relative;
    width: 46px;
    height: 24px;
    display: block;
}

.tc-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.tc-slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: #cfd3da;
    border-radius: 24px;
    transition: background-color .3s;
}

.tc-slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform .3s;
}

.tc-switch input:checked+.tc-slider {
    background: var(--color-acento);
}

.tc-switch input:checked+.tc-slider::before {
    transform: translateX(22px);
}

.tc-switch input:focus-visible+.tc-slider {
    outline: 2px solid var(--color-acento);
    outline-offset: 2px;
}

/* Menú de cuenta */
.tc-cuenta {
    position: relative;
}

.tc-cuenta-btn {
    background: var(--color-acento);
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: .5rem .9rem;
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.tc-cuenta-btn i {
    color: #fff;
    font-size: .75rem;
}

.tc-cuenta-menu {
    position: absolute;
    right: 0;
    top: calc(100% + .5rem);
    min-width: 190px;
    background: var(--tc-panel);
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    box-shadow: var(--tc-sombra);
    padding: .4rem;
    display: none;
    z-index: 50;
}

.tc-cuenta-menu.abierto {
    display: block;
}

.tc-cuenta-menu a,
.tc-cuenta-menu button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: .55rem .7rem;
    border-radius: 7px;
    font-size: .9rem;
    color: var(--color-texto-1);
    cursor: pointer;
}

.tc-cuenta-menu a:hover,
.tc-cuenta-menu button:hover {
    background: var(--tc-panel-2);
    color: var(--color-acento);
}

.tc-cuenta-nombre {
    display: block;
    padding: .55rem .7rem .3rem;
    font-size: .78rem;
    color: var(--color-texto-2);
    border-bottom: 1px solid var(--color-borde);
    margin-bottom: .3rem;
}

/* ------------------------------------------------------------------
   3. Footer interno
   ------------------------------------------------------------------ */
.tc-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--color-borde);
    padding: 1.4rem 1rem;
    text-align: center;
}

.tc-footer p {
    margin: 0;
    font-size: .88rem;
    color: var(--color-texto-2);
}

.tc-footer-links {
    margin-top: .4rem !important;
    display: flex;
    gap: 1.2rem;
    justify-content: center;
    flex-wrap: wrap;
}

.tc-footer-links a {
    color: var(--color-acento);
    font-size: .82rem;
}

.tc-footer-links a:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------------
   4. Encabezado de página (flecha + título + regla)
   ------------------------------------------------------------------ */
.tc-page-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 2rem 0 .8rem;
    border-bottom: 2px solid var(--color-borde);
    margin-bottom: 1.6rem;
}

.tc-back {
    flex: 0 0 auto;
    width: 38px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: var(--color-acento);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tc-back i {
    color: #fff;
}

.tc-page-title {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: .3px;
    color: var(--color-texto-1);
    margin: 0;
    text-transform: uppercase;
}

.tc-sub-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-texto-1);
    margin: 2rem 0 .6rem;
    padding-bottom: .6rem;
    border-bottom: 2px solid var(--color-borde);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ------------------------------------------------------------------
   5. Bloques del evento (barra rosa + filas)
   ------------------------------------------------------------------ */
.tc-poster {
    max-width: 320px;
    width: 100%;
    border-radius: 4px;
    display: block;
    margin-bottom: 1.8rem;
}

.tc-card {
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 1.8rem;
}

.tc-card-head {
    background: var(--color-acento);
    color: #fff;
    padding: .75rem 1.1rem;
    font-weight: 700;
    font-size: 1.02rem;
}

.tc-card-head,
.tc-card-head * {
    color: #fff;
}

.tc-fila-dato {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .85rem 1.1rem;
    background: var(--tc-fila);
    border-bottom: 1px solid var(--color-fondo);
}

.tc-fila-dato:nth-child(even) {
    background: var(--tc-fila-alt);
}

.tc-fila-dato:last-child {
    border-bottom: 0;
}

.tc-fila-dato i {
    color: var(--color-acento);
}

.tc-fila-texto {
    flex: 1 1 auto;
    font-weight: 700;
    letter-spacing: .4px;
    color: var(--color-texto-1);
    font-size: .95rem;
}

.tc-fila-lugar {
    font-weight: 400;
    letter-spacing: 0;
    color: var(--color-texto-1);
}

.tc-agotado {
    color: var(--color-acento);
    font-weight: 700;
    font-size: .92rem;
}

/* ------------------------------------------------------------------
   6. Botones
   ------------------------------------------------------------------ */
.tc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 0;
    border-radius: 6px;
    padding: .6rem 1.15rem;
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .6px;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .15s ease, opacity .15s ease, background-color .2s ease;
}

.tc-btn:hover {
    transform: translateY(-1px);
    opacity: .93;
}

.tc-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}

.tc-btn:focus-visible {
    outline: 2px solid var(--color-acento);
    outline-offset: 3px;
}

.tc-btn-primario {
    background: var(--color-acento);
    color: #fff;
}

.tc-btn-primario,
.tc-btn-primario * {
    color: #fff;
}

.tc-btn-fantasma {
    background: transparent;
    border: 1px solid var(--color-borde);
    color: var(--color-acento);
}

.tc-btn-fantasma:hover {
    border-color: var(--color-acento);
}

.tc-btn-claro {
    background: var(--tc-panel);
    border: 1px solid var(--color-borde);
    color: var(--color-acento);
}

.tc-btn-wa {
    background: var(--tc-wa);
    color: #fff;
    border-radius: 999px;
    padding: .8rem 1.6rem;
    font-size: .95rem;
    text-transform: none;
    letter-spacing: 0;
}

.tc-btn-wa,
.tc-btn-wa * {
    color: #fff;
}

.tc-btn-wa:hover {
    background: var(--tc-wa-oscuro);
}

.tc-btn-wa-linea {
    background: transparent;
    border: 1px solid var(--tc-wa);
    color: var(--tc-wa);
    border-radius: 999px;
    padding: .75rem 1.5rem;
    font-size: .95rem;
    text-transform: none;
    letter-spacing: 0;
}

.tc-btn-wa-linea i {
    color: var(--tc-wa);
}

.tc-btn-bloque {
    width: 100%;
}

.tc-btn-lg {
    padding: .8rem 2.6rem;
    font-size: .95rem;
}

.tc-acciones-centro {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1.6rem 0;
}

/* ------------------------------------------------------------------
   7. Descripción del evento
   ------------------------------------------------------------------ */
.tc-descripcion {
    background: var(--tc-panel);
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    padding: 1.6rem;
    line-height: 1.65;
}

.tc-descripcion h3 {
    color: var(--color-acento);
    font-size: .98rem;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 .9rem;
    letter-spacing: .3px;
}

.tc-descripcion p {
    color: var(--color-texto-1);
    margin: 0 0 .9rem;
    font-size: .95rem;
    max-width: 68ch;
}

.tc-descripcion ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.1rem;
}

.tc-descripcion li {
    color: var(--color-texto-1);
    font-size: .95rem;
    margin-bottom: .5rem;
    max-width: 68ch;
}

.tc-descripcion li strong {
    color: var(--color-texto-1);
}

.tc-descripcion a {
    color: #4c9aff;
}

.tc-firma {
    color: var(--color-texto-2);
    font-size: .9rem;
}

/* ------------------------------------------------------------------
   8. Mapa SVG de zonas
   ------------------------------------------------------------------ */
.tc-mapa-wrap {
    background: var(--tc-mapa-fondo);
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    padding: 1rem;
    overflow: hidden;
}

.tc-mapa-wrap svg {
    width: 100%;
    height: auto;
    display: block;
    touch-action: manipulation;
}

.tc-zona {
    cursor: pointer;
}

.tc-zona .tc-zona-figura {
    stroke: #12131a;
    stroke-width: 1;
    transition: filter .15s ease, stroke .15s ease, stroke-width .15s ease;
}

.tc-zona:hover .tc-zona-figura {
    filter: brightness(1.08);
    stroke: var(--color-acento);
    stroke-width: 2.5;
}

.tc-zona:focus {
    outline: none;
}

.tc-zona:focus-visible .tc-zona-figura {
    stroke: var(--color-acento);
    stroke-width: 3;
}

.tc-zona.activa .tc-zona-figura {
    stroke: var(--color-acento);
    stroke-width: 3;
    filter: brightness(1.12);
}

.tc-zona text,
.tc-zona tspan {
    fill: #14161d;
    font-family: 'Lato', system-ui, sans-serif;
    font-weight: 700;
    pointer-events: none;
    user-select: none;
    color: #14161d;
}

.tc-escenario rect {
    fill: #d7d7d7;
    stroke: #12131a;
    stroke-width: 1;
}

.tc-escenario text,
.tc-escenario tspan {
    fill: #14161d;
    font-family: 'Lato', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
    color: #14161d;
}

.tc-mapa-mini {
    max-width: 420px;
    margin: 0 auto;
    padding: .6rem;
}

.tc-mapa-ayuda {
    text-align: center;
    color: var(--color-texto-2);
    font-size: .88rem;
    margin: .9rem 0 0;
}

/* Leyenda de categorías */
.tc-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .9rem;
    justify-content: center;
    margin-top: 1rem;
}

.tc-leyenda span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    color: var(--color-texto-2);
}

.tc-leyenda i {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    border: 1px solid #12131a;
    display: inline-block;
}

/* ------------------------------------------------------------------
   9. Selección de butacas
   ------------------------------------------------------------------ */
.tc-butacas {
    background: var(--tc-butacas-fondo);
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    padding: 1.2rem .8rem;
    overflow-x: auto;
}

.tc-butacas-grid {
    display: inline-block;
    min-width: 100%;
}

.tc-butacas-fila {
    display: flex;
    align-items: center;
    gap: .45rem;
    justify-content: center;
    margin-bottom: .3rem;
}

.tc-fila-id {
    width: 20px;
    flex: 0 0 20px;
    text-align: center;
    font-weight: 700;
    font-size: .8rem;
    color: #1c1f26;
}

.tc-seat {
    width: 22px;
    height: 20px;
    flex: 0 0 22px;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
    border-radius: 3px;
}

.tc-seat span {
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 2px;
    height: 11px;
    border-radius: 3px;
    border: 1.5px solid #6b7280;
    background: transparent;
    display: block;
}

.tc-seat span::before,
.tc-seat span::after {
    content: "";
    position: absolute;
    top: -6px;
    width: 4px;
    height: 8px;
    border-radius: 2px;
    border: 1.5px solid #6b7280;
    background: transparent;
}

.tc-seat span::before {
    left: -1px;
}

.tc-seat span::after {
    right: -1px;
}

.tc-seat.ocupado {
    cursor: not-allowed;
}

.tc-seat.ocupado span,
.tc-seat.ocupado span::before,
.tc-seat.ocupado span::after {
    border-color: #b0141f;
    background: #d92d20;
}

.tc-seat.elegido span,
.tc-seat.elegido span::before,
.tc-seat.elegido span::after {
    border-color: #7936bf;
    background: #a0308a;
}

.tc-seat:not(.ocupado):hover span,
.tc-seat:not(.ocupado):hover span::before,
.tc-seat:not(.ocupado):hover span::after {
    border-color: #7936bf;
}

.tc-seat:focus-visible {
    outline: 2px solid #7936bf;
    outline-offset: 1px;
}

.tc-butacas-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .9rem;
    padding: 0 .4rem;
}

.tc-butacas-zona {
    font-weight: 900;
    color: #14161d;
    font-size: 1rem;
}

.tc-butacas-precio {
    color: #7d2350;
    font-weight: 700;
    font-size: .95rem;
}

.tc-seat-leyenda {
    display: flex;
    gap: 1.1rem;
    justify-content: center;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.tc-seat-leyenda span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    color: #3c414d;
}

.tc-seat-muestra {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1.5px solid #6b7280;
    display: inline-block;
}

.tc-seat-muestra.ocupado {
    background: #d92d20;
    border-color: #b0141f;
}

.tc-seat-muestra.elegido {
    background: #a0308a;
    border-color: #7936bf;
}

/* ------------------------------------------------------------------
   10. Tabla de selección / resumen
   ------------------------------------------------------------------ */
.tc-tabla {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.2rem;
}

.tc-tabla th {
    text-align: left;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--color-texto-1);
    padding: .7rem .4rem;
    border-bottom: 1px solid var(--color-borde);
}

.tc-tabla th:nth-child(2) {
    text-align: center;
}

.tc-tabla th:last-child {
    text-align: right;
}

.tc-tabla td {
    padding: .75rem .4rem;
    border-bottom: 1px solid var(--color-borde);
    font-size: .95rem;
    color: var(--color-acento);
}

.tc-tabla td:nth-child(2) {
    text-align: center;
}

.tc-tabla td:nth-child(3) {
    text-align: right;
}

.tc-tabla td.tc-td-quitar {
    width: 38px;
    text-align: right;
}

.tc-quitar {
    background: none;
    border: 0;
    color: var(--color-texto-2);
    cursor: pointer;
    padding: .2rem .35rem;
    border-radius: 5px;
}

.tc-quitar:hover {
    color: var(--color-acento);
    background: var(--tc-panel-2);
}

.tc-vacio {
    color: var(--color-texto-2) !important;
    font-style: italic;
}

.tc-tabla-servicio td {
    color: var(--color-texto-1);
    border-bottom: 0;
}

.tc-total {
    background: var(--tc-panel);
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    padding: .9rem 1.2rem;
    display: flex;
    align-items: baseline;
    gap: .7rem;
    margin: 1rem 0 1.6rem;
}

.tc-total strong {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-texto-1);
}

.tc-total span {
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--color-acento);
}

/* ------------------------------------------------------------------
   11. Modales
   ------------------------------------------------------------------ */
.tc-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .72);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 4rem 1rem 2rem;
    z-index: 100;
    overflow-y: auto;
}

.tc-modal.abierto {
    display: flex;
}

.tc-modal-caja {
    background: var(--tc-panel);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    width: 100%;
    max-width: 580px;
    box-shadow: var(--tc-sombra);
    animation: tc-aparece .18s ease-out;
}

@keyframes tc-aparece {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tc-modal-caja {
        animation: none;
    }

    .tc-btn:hover {
        transform: none;
    }
}

.tc-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.4rem;
    border-bottom: 1px solid var(--color-borde);
}

.tc-modal-head h3 {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--color-texto-1);
}

.tc-modal-cerrar {
    background: none;
    border: 0;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-texto-2);
}

.tc-modal-cerrar:hover {
    color: var(--color-acento);
}

.tc-modal-cuerpo {
    padding: 1.4rem;
}

.tc-modal-pie {
    padding: 0 1.4rem 1.4rem;
    display: flex;
    justify-content: flex-end;
    gap: .8rem;
}

/* Lista de precios */
.tc-precios-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tc-precios-lista li {
    display: flex;
    justify-content: space-between;
    padding: .45rem 0;
    font-size: 1rem;
    color: var(--color-texto-1);
}

.tc-precios-lista li b {
    font-weight: 700;
    color: var(--color-texto-1);
}

/* Selector de cantidad (zonas generales) */
.tc-cantidad {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    margin: 1.6rem 0 1rem;
}

.tc-cantidad button {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--color-borde);
    background: var(--tc-panel-2);
    color: var(--color-acento);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tc-cantidad button:hover:not(:disabled) {
    border-color: var(--color-acento);
    background: var(--color-acento);
    color: #fff;
}

.tc-cantidad button:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.tc-cantidad output {
    min-width: 64px;
    text-align: center;
    font-size: 2rem;
    font-weight: 900;
    color: var(--color-texto-1);
}

.tc-modal-zona {
    text-align: center;
    color: var(--color-texto-1);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}

.tc-modal-precio {
    text-align: center;
    color: var(--color-texto-2);
    margin: .3rem 0 0;
    font-size: .95rem;
}

.tc-modal-subtotal {
    text-align: center;
    color: var(--color-acento);
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0;
}

/* ------------------------------------------------------------------
   12. Acceso (login / registro)
   ------------------------------------------------------------------ */
.tc-aviso {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    color: var(--color-texto-1);
    font-size: .98rem;
    margin: 1.8rem 0 1rem;
}

.tc-aviso i {
    color: var(--color-acento);
    font-size: 1.15rem;
}

.tc-panel-form {
    background: var(--tc-panel);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: 1.6rem;
}

.tc-panel-form h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-texto-1);
    margin: 0 0 1rem;
    padding-bottom: .7rem;
    border-bottom: 2px solid var(--color-borde);
}

.tc-form {
    max-width: 320px;
    margin: 0 auto;
}

.tc-campo {
    margin-bottom: 1rem;
}

.tc-campo label {
    display: block;
    font-weight: 700;
    font-size: .92rem;
    color: var(--color-texto-1);
    margin-bottom: .35rem;
}

.tc-campo input {
    width: 100%;
    padding: .6rem .8rem;
    border-radius: 6px;
    border: 1px solid var(--color-borde);
    background: var(--color-fondo);
    color: var(--color-texto-1);
    font-size: .95rem;
}

.tc-campo input:focus {
    border-color: var(--color-acento);
    box-shadow: 0 0 0 2px rgba(255, 81, 121, .18);
}

.tc-campo input[aria-invalid="true"] {
    border-color: var(--tc-alerta);
}

.tc-error {
    display: block;
    min-height: 1rem;
    margin-top: .3rem;
    font-size: .8rem;
    color: var(--tc-alerta);
}

.tc-form-acciones {
    text-align: center;
    margin-top: 1.2rem;
}

.tc-link-suave {
    display: block;
    text-align: center;
    margin-top: .9rem;
    color: var(--color-acento);
    font-size: .9rem;
}

.tc-link-suave:hover {
    text-decoration: underline;
}

/* Ayuda breve bajo un campo del formulario.
   (Sustituye a .tc-demo-hint, retirado junto con las credenciales demo.) */
.tc-campo-ayuda {
    display: block;
    font-size: .78rem;
    color: var(--color-texto-2);
    margin-top: .3rem;
}

.tc-resumen-mini {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 1.6rem;
}

.tc-resumen-mini img {
    width: 110px;
    height: 92px;
    object-fit: cover;
    border-radius: 4px;
    flex: 0 0 110px;
}

.tc-resumen-mini .tc-resumen-bloque {
    flex: 1 1 auto;
}

.tc-resumen-bloque .tc-card-head {
    border-radius: 4px 4px 0 0;
}

/* ------------------------------------------------------------------
   13. Pago
   ------------------------------------------------------------------ */
.tc-total-destacado {
    background: var(--tc-panel);
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    padding: 1rem;
    text-align: center;
    margin-bottom: 1.8rem;
}

.tc-total-destacado span {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--color-acento);
}

.tc-total-destacado strong {
    font-size: 1.25rem;
    color: var(--color-texto-1);
    font-weight: 700;
}

.tc-cronometro {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-size: .9rem;
    color: var(--color-texto-2);
    margin-bottom: 1.4rem;
}

.tc-cronometro b {
    color: var(--color-acento);
    font-variant-numeric: tabular-nums;
    font-size: 1rem;
}

.tc-cronometro.agotando b {
    color: var(--tc-alerta);
}

.tc-metodo {
    background: var(--tc-panel);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.tc-metodo.abierto {
    border-color: var(--color-acento);
}

.tc-metodo-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.3rem;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
}

.tc-metodo-titulo {
    flex: 1 1 auto;
}

.tc-metodo-titulo b {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-texto-1);
}

.tc-metodo-titulo small {
    display: block;
    font-size: .72rem;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--color-texto-2);
    margin-top: .15rem;
}

.tc-metodo-marcas {
    display: flex;
    gap: .4rem;
    align-items: center;
}

.tc-marca {
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .5px;
    padding: .25rem .45rem;
    border-radius: 4px;
    color: #fff;
    line-height: 1;
}

.tc-marca.visa {
    background: #1a1f71;
}

.tc-marca.amex {
    background: #1379bf;
}

.tc-marca.spei {
    background: var(--tc-panel-2);
    color: var(--color-texto-2);
    border: 1px solid var(--color-borde);
}

.tc-marca.mc {
    background: transparent;
    padding: 0;
    display: inline-flex;
}

.tc-marca.mc i {
    font-size: 1.5rem;
    color: #eb001b;
}

.tc-metodo-monto {
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--color-texto-1);
    white-space: nowrap;
}

.tc-metodo-cuerpo {
    display: none;
    padding: 0 1.3rem 1.4rem;
    border-top: 1px solid var(--color-borde);
}

.tc-metodo.abierto .tc-metodo-cuerpo {
    display: block;
}

.tc-metodo-texto {
    text-align: center;
    color: var(--color-texto-1);
    font-size: .95rem;
    max-width: 60ch;
    margin: 1.3rem auto;
    line-height: 1.6;
}

.tc-metodo-texto strong {
    color: var(--color-acento);
}

.tc-metodo-acciones {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
}

.tc-separador {
    border: 0;
    border-top: 1px solid var(--color-borde);
    margin: 1.5rem 0;
}

.tc-volver-link {
    display: block;
    text-align: center;
    color: var(--color-acento);
    font-size: .92rem;
    margin-top: 1.2rem;
    text-decoration: underline;
}

/* Datos bancarios */
.tc-datos-banco {
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1.2rem;
}

.tc-dato {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--color-borde);
}

.tc-dato:last-child {
    border-bottom: 0;
}

.tc-dato dt {
    flex: 0 0 165px;
    font-size: .72rem;
    letter-spacing: .9px;
    text-transform: uppercase;
    color: var(--color-texto-2);
    font-weight: 700;
    margin: 0;
}

.tc-dato dd {
    flex: 1 1 auto;
    margin: 0;
    color: var(--color-texto-1);
    font-size: 1rem;
}

.tc-dato dd.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 1px;
}

.tc-copiar {
    flex: 0 0 auto;
    background: var(--tc-panel-2);
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    padding: .35rem .7rem;
    font-size: .8rem;
    color: var(--color-texto-1);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.tc-copiar:hover {
    border-color: var(--color-acento);
    color: var(--color-acento);
}

.tc-nota-alerta {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    border-left: 3px solid var(--tc-alerta);
    background: rgba(217, 45, 32, .08);
    padding: .9rem 1rem;
    border-radius: 0 6px 6px 0;
    margin-bottom: 1.4rem;
}

.tc-nota-alerta i {
    color: var(--tc-alerta);
    margin-top: .15rem;
}

.tc-nota-alerta p {
    margin: 0;
    font-size: .9rem;
    color: var(--color-texto-1);
    line-height: 1.55;
}

.tc-pie-metodo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    flex-wrap: wrap;
}

.tc-terminos {
    text-align: center;
    font-size: .8rem;
    color: var(--color-texto-2);
    margin: .9rem 0 0;
}

.tc-terminos a {
    color: var(--color-acento);
    text-decoration: underline;
}

/* Pantalla de confirmación */
.tc-confirmacion {
    text-align: center;
    padding: 2.5rem 1rem;
}

.tc-confirmacion i {
    font-size: 3rem;
    color: var(--tc-wa);
}

.tc-confirmacion h2 {
    color: var(--color-texto-1);
    font-size: 1.5rem;
    margin: 1rem 0 .6rem;
}

.tc-confirmacion p {
    color: var(--color-texto-2);
    max-width: 52ch;
    margin: 0 auto 1rem;
}

.tc-folio {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: var(--tc-panel-2);
    border: 1px dashed var(--color-borde);
    border-radius: 6px;
    padding: .5rem 1rem;
    color: var(--color-acento);
    letter-spacing: 1px;
    margin-bottom: 1.4rem;
}

/* ------------------------------------------------------------------
   14. Toast
   ------------------------------------------------------------------ */
.tc-toast {
    position: fixed;
    left: 50%;
    bottom: 2rem;
    transform: translate(-50%, 1rem);
    background: #1c1c1c;
    color: #fff;
    padding: .7rem 1.2rem;
    border-radius: 999px;
    font-size: .9rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 200;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

.tc-toast.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ------------------------------------------------------------------
   15. Responsive
   ------------------------------------------------------------------ */
@media (max-width: 720px) {
    .tc-topbar-inner {
        padding: .7rem .9rem;
        gap: .6rem;
    }

    .tc-topbar-logo img {
        height: 34px;
    }

    .tc-topbar-link span {
        display: none;
    }

    .tc-topbar-actions {
        gap: .7rem;
    }

    .tc-page-title {
        font-size: 1.1rem;
    }

    .tc-poster {
        max-width: 100%;
    }

    .tc-dato {
        flex-wrap: wrap;
        gap: .35rem .8rem;
    }

    .tc-dato dt {
        flex: 0 0 100%;
    }

    .tc-metodo-head {
        flex-wrap: wrap;
        gap: .6rem;
        padding: 1rem;
    }

    .tc-metodo-titulo {
        flex: 1 1 100%;
    }

    .tc-metodo-monto {
        margin-left: auto;
    }

    .tc-butacas {
        padding: 1rem .4rem;
    }

    .tc-seat {
        width: 19px;
        flex: 0 0 19px;
    }

    .tc-total {
        flex-direction: column;
        gap: .2rem;
        align-items: flex-start;
    }
}

@media (max-width: 420px) {
    .tc-acciones-centro .tc-btn {
        width: 100%;
    }

    .tc-cantidad {
        gap: 1rem;
    }
}

/* ------------------------------------------------------------------
   16. Vista dedicada de ENTRADAS GENERALES (generales.html)
   Sustituye al modal flotante de la fase anterior.
   ------------------------------------------------------------------ */
.tc-tabla-generales td {
    padding: .9rem .4rem;
    vertical-align: middle;
}

.tc-tabla-generales .tc-gen-tipo {
    color: var(--color-acento);
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.tc-tabla-generales .tc-gen-precio {
    color: var(--color-acento);
    font-weight: 600;
    white-space: nowrap;
}

/* Fila de la localidad que el usuario tocó en el plano */
.tc-tabla-generales .tc-fila-activa {
    background: var(--tc-panel-2);
}

/* Selector de cantidad: se mantiene claro en ambos temas, como el diseño */
.tc-select-cantidad {
    appearance: auto;
    -webkit-appearance: menulist;
    background: var(--tc-butacas-fondo);
    color: #111;
    border: 1px solid var(--color-borde);
    border-radius: 4px;
    padding: .35rem 1.6rem .35rem .6rem;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
    min-width: 68px;
    cursor: pointer;
}

.tc-select-cantidad:focus-visible {
    outline: 2px solid var(--color-acento);
    outline-offset: 2px;
}

.tc-gen-resumen {
    text-align: center;
    color: var(--color-texto-2);
    font-size: .95rem;
    margin: 0 0 1.2rem;
}

@media (max-width: 480px) {

    .tc-tabla-generales th,
    .tc-tabla-generales td {
        font-size: .88rem;
        padding: .7rem .25rem;
    }

    .tc-select-cantidad {
        min-width: 58px;
        padding: .3rem 1.3rem .3rem .45rem;
    }
}

/* El póster de la ficha de evento ahora declara width/height en el HTML para
   evitar saltos de maquetación mientras carga. Con height:auto el navegador
   usa esas medidas sólo como reserva y respeta la proporción real del archivo,
   así la imagen nunca se deforma aunque exportes otro tamaño. */
.tc-poster {
    height: auto;
}

/* ------------------------------------------------------------------
   17. Fila virtual (fila-virtual.html)
   Sala de espera entre el acceso y el pago. Reutiliza las variables de
   tema del flujo; no introduce colores nuevos fuera de las existentes.
   ------------------------------------------------------------------ */
.tc-fila {
    text-align: center;
    padding: 2.2rem 1rem 1rem;
}

/* --- Anillo de carga --- */
.tc-fila-anillo {
    position: relative;
    width: 132px;
    height: 132px;
    margin: 0 auto 1.6rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--tc-panel);
    border: 1px solid var(--color-borde);
    box-shadow: var(--tc-sombra);
}

.tc-fila-anillo::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 4px solid transparent;
    border-top-color: var(--color-acento);
    border-right-color: var(--color-acento);
    animation: tc-girar 1.15s linear infinite;
}

@keyframes tc-girar {
    to {
        transform: rotate(360deg);
    }
}

.tc-fila-cuenta {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-acento);
    font-variant-numeric: tabular-nums;
}

.tc-fila-cuenta small {
    display: block;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-texto-2);
    margin-top: .35rem;
}

/* --- Textos --- */
.tc-fila-titulo {
    color: var(--color-texto-1);
    font-size: 1.45rem;
    margin: 0 0 .6rem;
}

.tc-fila-mensaje {
    color: var(--color-texto-2);
    max-width: 54ch;
    margin: 0 auto 1.6rem;
    line-height: 1.55;
}

/* --- Barra de progreso --- */
.tc-barra {
    width: 100%;
    max-width: 460px;
    height: 10px;
    margin: 0 auto 1.4rem;
    background: var(--tc-panel-2);
    border: 1px solid var(--color-borde);
    border-radius: 999px;
    overflow: hidden;
}

.tc-barra-relleno {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: var(--color-acento);
    transition: width .25s linear;
}

/* --- Pasos del flujo --- */
.tc-pasos {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem 1.4rem;
    padding: 0;
    margin: 0 0 1.8rem;
    font-size: .82rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-texto-2);
}

.tc-pasos li {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.tc-pasos i {
    font-size: .8rem;
}

.tc-pasos .hecho {
    color: var(--tc-ok);
}

.tc-pasos .activo {
    color: var(--color-acento);
    font-weight: 700;
}

/* --- Ficha resumida de la orden --- */
.tc-fila-orden {
    max-width: 460px;
    margin: 0 auto 1.6rem;
    padding: 1rem 1.1rem;
    text-align: left;
    background: var(--tc-panel);
    border: 1px solid var(--color-borde);
    border-radius: 10px;
}

.tc-fila-orden h2 {
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-texto-2);
    margin: 0 0 .7rem;
}

.tc-fila-orden dl {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .4rem 1rem;
}

.tc-fila-orden dt {
    color: var(--color-texto-2);
    font-weight: 500;
    font-size: .88rem;
}

.tc-fila-orden dd {
    margin: 0;
    color: var(--color-texto-1);
    font-size: .92rem;
    font-weight: 600;
    text-align: right;
}

/* --- Aviso de no cerrar la pestaña --- */
.tc-fila-nota {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: 54ch;
    margin: 0 auto 1.4rem;
    padding: .65rem 1rem;
    border-radius: 8px;
    background: var(--tc-panel-2);
    border: 1px solid var(--color-borde);
    color: var(--color-texto-2);
    font-size: .87rem;
    text-align: left;
}

.tc-fila-nota i {
    color: var(--color-acento);
    flex: 0 0 auto;
}

@media (max-width: 480px) {
    .tc-fila {
        padding: 1.4rem .4rem 1rem;
    }

    .tc-fila-anillo {
        width: 112px;
        height: 112px;
    }

    .tc-fila-cuenta {
        font-size: 2rem;
    }

    .tc-fila-titulo {
        font-size: 1.2rem;
    }

    .tc-pasos {
        gap: .4rem .9rem;
        font-size: .74rem;
    }
}

/* Respeta la preferencia del sistema: sin giro ni transiciones */
@media (prefers-reduced-motion: reduce) {

    .tc-fila-anillo::before {
        animation: none;
        border-color: var(--color-acento) transparent transparent var(--color-acento);
    }

    .tc-barra-relleno {
        transition: none;
    }
}