/* Misma paleta que la app: superficies translúcidas sobre el fondo oscuro del canal,
   acento lavanda y rojo suave para lo irreversible. */
.td-wrapper {
    display: flex;
    justify-content: center;
    padding: 24px 16px 40px;
}

.td-panel {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 22px;
    color: #fff;
    max-width: 720px;
    padding: 24px;
    width: 100%;
}

.td-title {
    color: #fff;
    font-family: Poppins_Bold, sans-serif;
    font-size: 1.7rem;
    margin: 0 0 20px;
}

.td-tabs {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    padding: 4px;
}

.td-tab {
    background: transparent;
    border: 0;
    border-radius: 11px !important;
    color: rgba(255, 255, 255, .68);
    flex: 1 1 50%;
    font-size: .86rem;
    min-height: 40px;
    padding: 6px 10px;
    transition: background-color 140ms ease, color 140ms ease;
}

.td-tab--activa {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-family: Poppins_Bold, sans-serif;
}

.td-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.td-card {
    align-items: center;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 17px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px;
}

.td-card--solo-lectura {
    opacity: .78;
}

.td-card__icon {
    align-items: center;
    background: #fff;
    border-radius: 50%;
    color: #171220;
    display: flex;
    flex: 0 0 46px;
    font-size: 1.15rem;
    height: 46px;
    justify-content: center;
}

.td-card__content {
    flex: 1 1 240px;
    min-width: 0;
}

.td-card__content h2 {
    color: #fff;
    font-family: Poppins_Bold, sans-serif;
    font-size: 1.05rem;
    letter-spacing: .06em;
    margin: 0 0 2px;
}

.td-card__holder {
    color: rgba(255, 255, 255, .72);
    font-size: .82rem;
    margin: 0 0 8px;
}

.td-card__meta {
    align-items: center;
    color: rgba(255, 255, 255, .62);
    display: flex;
    flex-wrap: wrap;
    font-size: .8rem;
    gap: 8px;
}

.td-status {
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .74rem;
    padding: 3px 11px;
}

.td-status--activa {
    background: rgba(102, 209, 158, .13);
    border-color: rgba(102, 209, 158, .4);
    color: #9ce8c3;
}

.td-status--pendiente {
    background: rgba(222, 217, 255, .14);
    border-color: rgba(222, 217, 255, .42);
    color: #eae6ff;
}

.td-status--suspendida {
    background: rgba(255, 153, 153, .11);
    border-color: rgba(255, 153, 153, .4);
    color: #ffc0c0;
}

.td-status--cancelada {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .22);
    color: rgba(255, 255, 255, .6);
}

/* Recuadros de acción, como los de la app: el peso lo dan el icono y el color. */
.td-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.td-action {
    align-items: center;
    aspect-ratio: 1;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    /* app.css redondea todo botón a 50px con !important: sin esto los recuadros salen circulares. */
    border-radius: 14px !important;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 7px;
    justify-content: center;
    padding: 10px 8px;
    transition: background-color 140ms ease;
    width: 96px;
}

.td-action:hover:not(:disabled) {
    background: rgba(255, 255, 255, .1);
}

.td-action:disabled {
    opacity: .45;
}

.td-action__icon {
    color: var(--lavender, #ded9ff);
    font-size: 1.3rem;
    line-height: 1;
}

.td-action__label {
    font-size: .74rem;
    line-height: 1.25;
    text-align: center;
}

.td-action--danger .td-action__icon {
    color: var(--soft-red, #ff6b6b);
}

.td-card__solo-app {
    align-items: center;
    background: rgba(255, 255, 255, .05);
    border-radius: 12px;
    color: rgba(255, 255, 255, .7);
    display: flex;
    flex: 1 1 100%;
    font-size: .8rem;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
}

/* El arte de la tarjeta, igual que en la app. */
/* Tarjeta holográfica: mismas capas y colores que en SanFra Móvil. Solo la tarjeta gira como
   capa de GPU; el holograma y el brillo se pintan dentro de ella, así color-dodge se mezcla al
   pintar. Si esas capas llevan su propio will-change, WebKit mezcla al componer y el color
   sale en cuadros. */
.sanfra-holo-card {
    --holo-bands: repeating-linear-gradient(
        115deg,
        rgba(255, 60, 180, .42) 0%,
        rgba(90, 215, 255, .42) 12%,
        rgba(174, 255, 91, .4) 24%,
        rgba(255, 226, 105, .38) 36%,
        rgba(135, 105, 255, .42) 48%,
        rgba(255, 60, 180, .42) 60%
    );
    aspect-ratio: 1200 / 753;
    margin: 4px auto 26px;
    max-width: 340px;
    position: relative;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    width: 92%;
}

.sanfra-holo-card__shadow {
    background: rgba(8, 4, 24, .55);
    border-radius: 7% / 11%;
    filter: blur(14px);
    inset: 10% 7% -3%;
    pointer-events: none;
    position: absolute;
    transform: translate3d(0, 10px, 0);
    will-change: transform;
}

.sanfra-holo-card__body {
    border-radius: 5.4% / 8.6%;
    inset: 0;
    isolation: isolate;
    overflow: hidden;
    position: absolute;
    transform: perspective(1000px);
    will-change: transform;
}

.sanfra-holo-card__image {
    display: block;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    width: 100%;
}

.sanfra-holo-card__holo,
.sanfra-holo-card__glare,
.sanfra-holo-card__edge {
    border-radius: inherit;
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.sanfra-holo-card__holo {
    --background-x: 50%;
    --background-y: 50%;
    background-blend-mode: soft-light, normal;
    background-image: url("/assets/sanfra-card-grain.webp"), var(--holo-bands);
    background-position: center, var(--background-x) var(--background-y);
    background-size: 320px 320px, 260% 260%;
    filter: saturate(1.35) contrast(1.1);
    mix-blend-mode: color-dodge;
    opacity: .08;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
}

/* La elipse 118% x 188% es un círculo del tamaño de la diagonal de la tarjeta (1200 / 753). */
.sanfra-holo-card__glare {
    --pointer-x: 50%;
    --pointer-y: 50%;
    background: radial-gradient(
        ellipse 118% 188% at var(--pointer-x) var(--pointer-y),
        rgba(255, 255, 255, .75) 0%,
        rgba(255, 255, 255, .35) 8%,
        rgba(255, 255, 255, .1) 18%,
        rgba(255, 255, 255, 0) 30%
    );
    mix-blend-mode: screen;
    opacity: 0;
}

.sanfra-holo-card__edge {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .32),
        inset 0 1px 0 rgba(255, 255, 255, .45);
}

/* Se deja la capa vacía para no descuadrar la lista de background-position. */
.sanfra-holo-card--lite .sanfra-holo-card__holo {
    background-image: none, var(--holo-bands);
    filter: none;
}

.sanfra-holo-card--lite .sanfra-holo-card__shadow {
    filter: none;
    inset: 8% 5% -2%;
    opacity: .45;
}

.td-state {
    align-items: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 34px 16px;
    text-align: center;
}

.td-state__icon {
    color: var(--lavender, #ded9ff);
    font-size: 2rem;
    opacity: .75;
}

.td-state h2 {
    font-family: Poppins_Bold, sans-serif;
    font-size: 1.1rem;
    margin: 0;
}

.td-state p {
    color: rgba(255, 255, 255, .7);
    margin: 0;
}

.td-boton {
    background: var(--lavender, #ded9ff);
    border: 0;
    border-radius: 50px;
    color: #171220;
    font-family: Poppins_Bold, sans-serif;
    min-height: 42px;
    padding: 8px 26px;
}

.td-boton--texto {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
}

/* Diálogos */
.td-modal {
    background: #1b1626;
    border: 1px solid rgba(187, 168, 246, .28);
    border-radius: 20px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
    color: #fff;
    max-width: 440px;
    padding: 24px;
    width: min(440px, calc(100vw - 32px));
}

.td-modal h2 {
    font-family: Poppins_Bold, sans-serif;
    font-size: 1.15rem;
    margin: 0 0 6px;
    text-align: center;
}

.td-modal__subtitle {
    color: rgba(255, 255, 255, .72);
    font-size: .88rem;
    margin: 0 0 18px;
    text-align: center;
}

.td-modal label {
    color: #fff;
    display: block;
    font-family: Poppins_Bold, sans-serif;
    font-size: .8rem;
    margin-bottom: 6px;
}

/* El fondo del select lo impone app.css con !important: el texto va oscuro sobre él. */
.td-modal .form-select {
    border-radius: 12px !important;
    color: #171220;
    font-size: .92rem;
    min-height: 46px;
}

.td-modal__aviso {
    align-items: flex-start;
    background: rgba(255, 255, 255, .08);
    border-radius: 14px;
    color: rgba(255, 255, 255, .82);
    display: flex;
    font-size: .78rem;
    gap: .5rem;
    line-height: 1.35;
    margin: .75rem 0 0;
    padding: .7rem .85rem;
}

.td-modal__aviso--critica {
    background: rgba(255, 138, 128, .14);
    border: 1px solid rgba(255, 138, 128, .45);
    color: #ffd9d5;
}

.td-modal__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 22px;
}

/* Overlay propio: no depende de MudBlazor para centrar y oscurecer el diálogo. */
.td-overlay {
    align-items: center;
    background: rgba(0, 0, 0, .62);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 16px;
    position: fixed;
    z-index: 1400;
}

/* El token trae su propio layout con columnas de Bootstrap pensado para el móvil: dentro del
   panel de escritorio esas columnas lo dejaban en una tira de 270px con el texto partido. Se
   neutralizan las columnas y se le da un ancho cómodo, sin tocar el componente. */
.td-token {
    display: block;
    margin: 0 auto;
    max-width: 520px;
    width: 100%;
}

.td-token .row {
    --bs-gutter-x: 0;
    justify-content: center;
    margin-left: 0;
    margin-right: 0;
}

.td-token [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 0;
    padding-right: 0;
    width: 100% !important;
}

/* Los seis recuadros del código se reparten el ancho en lugar de amontonarse. */
.td-token input {
    max-width: 100%;
}

/* Pasos del wizard: el indicador de arriba lo pinta el propio componente. */
.td-paso {
    margin: 0 auto;
    max-width: 520px;
    width: 100%;
}

.td-paso__subtitulo {
    color: rgba(255, 255, 255, .72);
    font-size: .9rem;
    margin: 0 0 18px;
    text-align: center;
}

.td-paso label {
    color: #fff;
    display: block;
    font-family: Poppins_Bold, sans-serif;
    font-size: .8rem;
    margin-bottom: 6px;
}

.td-paso .form-select {
    border-radius: 12px !important;
    color: #171220;
    font-size: .92rem;
    min-height: 46px;
}

.td-aviso {
    align-items: flex-start;
    background: rgba(255, 255, 255, .08);
    border-radius: 14px;
    color: rgba(255, 255, 255, .82);
    display: flex;
    font-size: .82rem;
    gap: .5rem;
    line-height: 1.4;
    margin: 1rem 0 0;
    padding: .8rem .9rem;
}

.td-aviso--critico {
    background: rgba(255, 138, 128, .14);
    border: 1px solid rgba(255, 138, 128, .45);
    color: #ffd9d5;
}

.td-paso__acciones {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 24px;
}