/* =====================================================
   MURO DE CASILLAS (casillas.php y casillas-estado.php)
   Se apoya en sec-pueblo.css (cabecera .ft-hero de Fiestas).
   ===================================================== */
.cs-seccion { padding-top: clamp(2rem, 4vw, 3.5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }

.cs-layout,
.cs-estado-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
}

/* ── Herramientas: zoom y buscador ───────────────────── */
.cs-herramientas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
}
.cs-zoom, .cs-buscar { display: flex; align-items: center; gap: .4rem; }
.cs-zoom input[type="range"] { width: 120px; accent-color: var(--pendon-rojo); }
.cs-btn-icono {
    display: inline-grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid var(--borde);
    background: var(--blanco);
    color: var(--texto);
    font-size: 1.15rem;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.cs-btn-icono:hover { border-color: var(--tinta); }
.cs-btn-texto {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .8rem;
    border-radius: 999px;
    border: 1px solid var(--borde);
    background: var(--blanco);
    color: var(--texto);
    font: 600 .8rem var(--fuente-ui);
    cursor: pointer;
}
.cs-btn-texto:hover { border-color: var(--tinta); }
.cs-btn-texto:disabled { opacity: .45; cursor: default; }
.cs-buscar input {
    width: 7.5rem;
    padding: .5rem .8rem;
    border: 1px solid var(--borde);
    border-radius: 999px;
    font: 500 .85rem var(--fuente-mono);
    background: var(--blanco);
}

/* ── Visor y rejilla ─────────────────────────────────── */
.cs-visor {
    position: relative;
    overflow: auto;
    max-height: min(72vh, 760px);
    padding: 12px;
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: var(--radio-lg);
    overscroll-behavior: contain;
}
.cs-visor--estado { max-height: min(55vh, 520px); }
.cs-rejilla {
    --celda: 32px;
    display: grid;
    grid-template-columns: repeat(var(--cols, 20), var(--celda));
    grid-auto-rows: var(--celda);
    width: max-content;
    margin: 0 auto;
    background: var(--borde);
    box-shadow: 0 0 0 1px var(--borde);
    user-select: none;
    -webkit-user-select: none;
}
.cs-celda {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    margin: 0;
    background: var(--blanco);
    box-shadow: inset 0 0 0 .5px var(--borde);
    font: 500 calc(var(--celda) * .32)/1 var(--fuente-mono);
    color: var(--texto-suave);
    font-variant-numeric: tabular-nums;
    min-width: 0;
}
.cs-sin-num .cs-celda span { display: none; }
.cs-libre { cursor: pointer; transition: background .12s; }
.cs-libre:hover { background: var(--teja-claro); color: var(--teja-osc); }
.cs-libre:focus-visible { outline: 2px solid var(--tinta); outline-offset: -2px; z-index: 4; }
.cs-sel,
.cs-sel:hover {
    background: var(--pendon-rojo);
    color: #fff;
    box-shadow: inset 0 0 0 .5px rgba(255,255,255,.35);
}
.cs-reservada {
    background: repeating-linear-gradient(135deg, var(--crema) 0 4px, var(--crema-med) 4px 8px);
    color: var(--piedra);
    cursor: not-allowed;
}
.cs-vendida, .cs-propia { box-shadow: none; color: transparent; }
.cs-vendida { cursor: pointer; }
.cs-transp { background: transparent !important; }
.cs-hueco { background: transparent; box-shadow: none; color: transparent; }

/* Imagen de un bloque: queda por debajo de las casillas */
.cs-capa {
    position: relative;
    z-index: 1;
    background: center / cover no-repeat;
    pointer-events: none;
}
/* Texto de un bloque: por encima de sus casillas */
.cs-texto {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4%;
    container-type: size;
    pointer-events: none;
    overflow: hidden;
}
.cs-texto span {
    font: 600 var(--tam, 30cqh)/1.02 var(--fuente-display);
    letter-spacing: -0.01em;
    text-align: center;
    overflow-wrap: anywhere;
}

/* En la página de estado se apagan las casillas ajenas (sin transparencia,
   para que las imágenes de otros bloques sigan tapadas donde toca) */
.cs-modo-estado .cs-celda:not(.cs-propia),
.cs-modo-estado .cs-capa:not(.cs-capa--propia),
.cs-modo-estado .cs-texto:not(.cs-texto--propio) { filter: grayscale(1) contrast(.55) brightness(1.25); }
.cs-modo-estado .cs-propia::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 2px var(--pendon-rojo);
    pointer-events: none;
}

@keyframes cs-destello {
    0%, 100% { box-shadow: inset 0 0 0 .5px var(--borde); }
    30%, 70% { box-shadow: inset 0 0 0 3px var(--pendon-rojo); }
}
.cs-destello { animation: cs-destello 1.4s ease 2; z-index: 4; }

.cs-pista {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .6rem;
    font-size: .8rem;
    color: var(--texto-suave);
}

/* Ficha al tocar una casilla vendida */
.cs-ficha {
    position: absolute;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    max-width: 260px;
    padding: .55rem .8rem;
    background: var(--tinta);
    color: #fff;
    border-radius: var(--radio);
    box-shadow: var(--sombra-hover);
    font-size: .85rem;
    pointer-events: none;
}
.cs-ficha span { font: .72rem var(--fuente-mono); color: var(--pendon-oro); }

/* ── Barra de selección ──────────────────────────────── */
.cs-barra {
    position: sticky;
    bottom: 12px;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.25rem;
    margin-top: 1rem;
    padding: .85rem 1rem .85rem 1.25rem;
    background: var(--tinta);
    color: #fff;
    border-radius: var(--radio-lg);
    box-shadow: 0 18px 40px -16px rgba(22,28,25,.6);
}
.cs-barra::before {
    content: '';
    position: absolute;
    left: 1.25rem; right: 1.25rem; top: 0;
    height: 3px;
    background: var(--pendon-bandas);
    border-radius: 0 0 3px 3px;
}
.cs-barra-info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.cs-barra-info strong { font: 600 1.05rem var(--fuente-ui); }
.cs-barra-info [data-total] { color: var(--pendon-oro); }
.cs-barra-lista {
    font: .74rem var(--fuente-mono);
    color: rgba(255,255,255,.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 46ch;
}
.cs-barra-acciones { display: flex; gap: .5rem; align-items: center; }
.cs-barra .btn:disabled { opacity: .5; cursor: default; transform: none; }
.cs-btn-texto--claro { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.cs-btn-texto--claro:hover { border-color: #fff; }
.cs-aviso {
    flex-basis: 100%;
    font-size: .82rem;
    color: var(--pendon-oro);
}

.cs-cerrado, .cs-vacio, .cs-nueva {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: var(--radio-lg);
    background: var(--crema);
    color: var(--texto-med);
}
.cs-vacio { flex-direction: column; text-align: center; padding: 3rem 1rem; }
.cs-vacio .ti { font-size: 2.5rem; color: var(--teja); }
.cs-nueva { background: #E6F0DF; color: #2C4A1E; margin-bottom: 1.5rem; }
.cs-nueva .ti { font-size: 1.8rem; color: var(--pendon-verde); }
.cs-nueva p { margin: .15rem 0 0; font-size: .9rem; }

/* ── Columna lateral ─────────────────────────────────── */
.cs-lateral {
    position: sticky;
    top: calc(var(--header-h) + 1rem);
    padding: 1.4rem;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio-lg);
}
.cs-lateral-titulo { font: 400 1.6rem/1.1 var(--fuente-display); margin-bottom: 1rem; }
.cs-lateral-sub {
    margin: 1.4rem 0 .6rem;
    font: 500 .7rem var(--fuente-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--texto-suave);
}
.cs-pasos { counter-reset: paso; list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.cs-pasos li {
    counter-increment: paso;
    position: relative;
    padding-left: 2.3rem;
    font-size: .88rem;
    color: var(--texto-med);
    line-height: 1.45;
}
.cs-pasos li::before {
    content: counter(paso, decimal-leading-zero);
    position: absolute;
    left: 0; top: .05rem;
    font: 500 .78rem var(--fuente-mono);
    color: var(--pendon-rojo);
}
.cs-pasos strong { color: var(--texto); }
.cs-leyenda { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; font-size: .84rem; }
.cs-leyenda li { display: flex; align-items: center; gap: .55rem; }
.cs-muestra { width: 18px; height: 18px; border-radius: 3px; border: 1px solid var(--borde); flex: none; }
.cs-muestra--libre { background: var(--blanco); }
.cs-muestra--sel { background: var(--pendon-rojo); border-color: var(--pendon-rojo); }
.cs-muestra--reservada { background: repeating-linear-gradient(135deg, var(--crema) 0 3px, var(--crema-med) 3px 6px); }
.cs-muestra--vendida { background: linear-gradient(135deg, var(--pendon-verde) 50%, var(--pendon-oro) 50%); border-color: transparent; }
.cs-volver {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: 1.4rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--teja);
}

/* ── Diálogo de compra ───────────────────────────────── */
.cs-dialogo {
    /* El reset de style.css pone margin: 0 a todo y eso quita el centrado
       que el navegador da a <dialog>; se devuelve aquí. */
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(860px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    padding: 0;
    border: 0;
    border-radius: var(--radio-xl);
    background: var(--papel);
    color: var(--texto);
    box-shadow: 0 30px 80px -20px rgba(22,28,25,.55);
}
.cs-dialogo::backdrop { background: rgba(22,28,25,.6); backdrop-filter: blur(3px); }
.cs-form { display: flex; flex-direction: column; }
.cs-dialogo-cab {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.4rem 1.5rem 1rem;
    border-top: 6px solid;
    border-image: var(--pendon-bandas) 1;
}
.cs-dialogo-cab h2 { font: 400 1.8rem/1.1 var(--fuente-display); }
.cs-dialogo-cab p { margin-top: .3rem; font: .8rem var(--fuente-mono); color: var(--texto-suave); }
.cs-dialogo-cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 1.5rem;
    padding: 0 1.5rem;
}
.cs-tipos { border: 0; padding: 0; margin: 0 0 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.cs-tipos legend { font-weight: 600; font-size: .88rem; margin-bottom: .5rem; }
.cs-tipos label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem .9rem;
    border: 1.5px solid var(--borde);
    border-radius: 999px;
    background: var(--blanco);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
}
.cs-tipos input { position: absolute; opacity: 0; pointer-events: none; }
.cs-tipos label:has(input:checked) { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.cs-tipos label:has(input:focus-visible) { outline: 2px solid var(--teja); outline-offset: 2px; }
.cs-colores { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.cs-colores input[type="color"] { width: 44px; height: 36px; padding: 2px; border-radius: 8px; cursor: pointer; }
.cs-color-op {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid var(--blanco);
    box-shadow: 0 0 0 1px var(--borde);
    cursor: pointer;
}
.cs-trampa { position: absolute !important; left: -9999px; width: 1px; height: 1px; }

.cs-form-previa { display: flex; flex-direction: column; gap: .6rem; }
.cs-previa-etiqueta {
    font: 500 .7rem var(--fuente-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--texto-suave);
}
.cs-previa-marco {
    display: grid;
    place-items: center;
    min-height: 220px;
    padding: 1rem;
    background: var(--blanco);
    border: 1px dashed var(--borde);
    border-radius: var(--radio-lg);
    overflow: auto;
}
.cs-rejilla--previa { background: transparent; box-shadow: none; }
.cs-previa-nota { font-size: .78rem; color: var(--texto-suave); }

.cs-pago-aviso {
    display: flex;
    gap: .75rem;
    margin: 1rem 1.5rem 0;
    padding: .9rem 1.1rem;
    background: #FFF6DA;
    border-radius: var(--radio);
    font-size: .86rem;
    color: #5A4410;
}
.cs-pago-aviso .ti { font-size: 1.4rem; color: #B07D0B; flex: none; }
.cs-error { margin: .8rem 1.5rem 0; padding: .7rem 1rem; border-radius: var(--radio); background: #FCE8E6; color: #8E1F14; font-size: .88rem; }
.cs-dialogo-pie {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    padding: 1.1rem 1.5rem 1.4rem;
}

/* ── Página de estado ────────────────────────────────── */
.cs-estado {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.3rem 1.4rem;
    border-radius: var(--radio-lg);
    border: 1px solid var(--borde);
    background: var(--blanco);
    margin-bottom: 1.5rem;
}
.cs-estado > .ti { font-size: 2.2rem; flex: none; }
.cs-estado strong { display: block; font: 400 1.9rem/1.1 var(--fuente-display); }
.cs-estado p { margin-top: .35rem; color: var(--texto-med); font-size: .92rem; }
.cs-estado-etiqueta { font: 500 .68rem var(--fuente-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-suave); }
.cs-estado--pendiente { border-color: #F0D58A; background: #FFFBEE; }
.cs-estado--pendiente > .ti { color: #B07D0B; }
.cs-estado--pagada { border-color: #B9D3A7; background: #F1F7EC; }
.cs-estado--pagada > .ti { color: var(--pendon-verde); }
.cs-estado--caducada > .ti, .cs-estado--cancelada > .ti { color: var(--piedra); }
.cs-estado--cancelada { background: #FBF0EE; border-color: #EBC4BC; }

.cs-pago {
    padding: 1.4rem;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio-lg);
    margin-bottom: 2rem;
}
.cs-pago h2, .cs-estado-sub { font: 400 1.6rem/1.1 var(--fuente-display); margin-bottom: .6rem; }
.cs-estado-sub { margin-bottom: .9rem; }
.cs-pago-intro { color: var(--texto-med); }
.cs-codigo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem;
    margin: 1rem 0 1.2rem;
}
.cs-codigo span {
    font: 500 clamp(1.8rem, 5vw, 2.6rem)/1 var(--fuente-mono);
    letter-spacing: .06em;
    padding: .6rem 1rem;
    background: var(--tinta);
    color: var(--pendon-oro);
    border-radius: var(--radio);
}
.cs-medios { display: grid; gap: .6rem; }
.cs-medio {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    padding: .8rem 1rem;
    background: var(--crema);
    border-radius: var(--radio);
}
.cs-medio-nombre { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.cs-medio-dato { font: 500 .95rem var(--fuente-mono); overflow-wrap: anywhere; }
.cs-medio-dato small { display: block; font: .78rem var(--fuente-ui); color: var(--texto-suave); margin-top: .15rem; }
.cs-pago-nota { margin-top: 1rem; font-size: .85rem; color: var(--texto-suave); }

.cs-qr-tarjeta { text-align: center; }
.cs-qr {
    width: 200px;
    aspect-ratio: 1;
    margin: 0 auto .8rem;
    padding: 8px;
    background: #fff;
    border-radius: var(--radio);
    box-shadow: 0 0 0 1px var(--borde);
}
.cs-qr svg { width: 100%; height: 100%; display: block; }
.cs-qr-tarjeta > p { font-size: .85rem; color: var(--texto-suave); }
.cs-qr-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1rem 0 1.2rem; }
.cs-ficha-datos { text-align: left; display: grid; gap: .1rem; margin: 0; font-size: .86rem; }
.cs-ficha-datos dt { font: 500 .66rem var(--fuente-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); margin-top: .55rem; }
.cs-ficha-datos dd { margin: 0; }

/* ── Móvil ───────────────────────────────────────────── */
@media (max-width: 900px) {
    .cs-layout, .cs-estado-layout { grid-template-columns: minmax(0, 1fr); }
    .cs-dialogo-cuerpo > * { min-width: 0; }
    .cs-lateral { position: static; }
    .cs-dialogo-cuerpo { grid-template-columns: minmax(0, 1fr); }
    .cs-form-previa { order: -1; }
    .cs-previa-marco { min-height: 150px; }
}
@media (max-width: 560px) {
    .cs-visor { padding: 8px; max-height: 64vh; border-radius: var(--radio); }
    .cs-zoom input[type="range"] { width: 90px; }
    .cs-barra { bottom: 8px; padding: .75rem .85rem .75rem 1rem; }
    .cs-barra-acciones { width: 100%; }
    .cs-barra-acciones .btn { flex: 1; justify-content: center; }
    .cs-dialogo { border-radius: var(--radio-lg); }
    .cs-dialogo-cab, .cs-dialogo-cuerpo, .cs-dialogo-pie { padding-left: 1rem; padding-right: 1rem; }
    .cs-pago-aviso, .cs-error { margin-left: 1rem; margin-right: 1rem; }
    .cs-dialogo-pie { flex-direction: column-reverse; }
    .cs-dialogo-pie .btn { justify-content: center; }
    .cs-medio { grid-template-columns: 1fr auto; }
    .cs-medio-nombre { grid-column: 1 / -1; }
}

/* ── Sorteo del premio ───────────────────────────────── */
.cs-hero-sorteo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    padding: .55rem 1rem;
    border-radius: 999px;
    background: var(--pendon-oro);
    color: var(--tinta);
    font: 600 .9rem var(--fuente-ui);
    text-decoration: none;
    box-shadow: var(--sombra);
}
.cs-hero-sorteo:hover { background: #ffe58c; }
.cs-sorteo {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--borde);
    scroll-margin-top: calc(var(--header-h) + 1rem);
}
.cs-sorteo-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}
.cs-premio { position: sticky; top: calc(var(--header-h) + 1rem); }
.cs-premio-foto { display: block; border-radius: var(--radio-lg); overflow: hidden; box-shadow: var(--sombra); position: relative; }
.cs-premio-foto::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--pendon-bandas); }
.cs-premio-foto img { display: block; width: 100%; height: auto; }
.cs-sorteo-etiqueta {
    display: inline-flex; align-items: center; gap: .35rem;
    font: 600 .75rem var(--fuente-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--pendon-rojo);
}
.cs-sorteo-texto h2 { font: 400 clamp(1.7rem, 3.2vw, 2.4rem)/1.1 var(--fuente-display); margin: .35rem 0 1rem; }
.cs-sorteo-texto h3 { font: 400 1.35rem/1.2 var(--fuente-display); margin: 1.6rem 0 .6rem; }
.cs-premio-lista { background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio); padding: .8rem 1rem; }
.cs-premio-lista summary { cursor: pointer; font: 600 .9rem var(--fuente-ui); }
.cs-premio-lista ul { margin: .6rem 0 0; padding-left: 1.1rem; columns: 2 16rem; column-gap: 1.5rem; font-size: .9rem; color: var(--texto-med); }
.cs-premio-lista li { break-inside: avoid; margin-bottom: .25rem; }
.cs-bases { color: var(--texto-med); line-height: 1.6; }
.cs-bases p { margin: 0 0 .8rem; }
.cs-bases ul { margin: 0 0 .9rem; padding-left: 1.2rem; }
.cs-bases li { margin-bottom: .35rem; }
.cs-bases strong { color: var(--texto); }
.cs-comprobador {
    margin-top: 1.2rem;
    padding: 1rem;
    border-radius: var(--radio);
    background: var(--crema);
}
.cs-comprobador label { display: block; font: 600 .9rem var(--fuente-ui); margin-bottom: .5rem; }
.cs-comprobador-fila { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.cs-comprobador input {
    width: 8.5rem; padding: .55rem .8rem;
    border: 1px solid var(--borde); border-radius: 999px;
    font: 600 1.05rem var(--fuente-mono); letter-spacing: .05em; background: var(--blanco);
}
.cs-comprobador output { font-size: .9rem; color: var(--texto-suave); }
.cs-comprobador output.ok { color: var(--texto); }
.cs-comprobador output b { font-family: var(--fuente-mono); }
.cs-ganadora {
    display: flex; align-items: center; gap: 1rem;
    margin-bottom: 1.5rem; padding: 1rem 1.2rem;
    border-radius: var(--radio-lg);
    background: var(--pendon-oro);
}
.cs-ganadora-num {
    flex: none; display: grid; place-items: center;
    min-width: 4.2rem; height: 4.2rem; padding: 0 .5rem; border-radius: var(--radio);
    background: var(--pendon-rojo); color: #fff;
    font: 700 1.7rem var(--fuente-mono);
}
.cs-ganadora p { margin: .2rem 0 0; }
@media (max-width: 900px) {
    .cs-sorteo-grid { grid-template-columns: 1fr; }
    .cs-premio { position: static; max-width: 520px; }
}

/* ── Tus compras (recordadas en este navegador) ──────── */
.cs-mias { margin-bottom: 1.6rem; }
.cs-mias h2 { font: 400 1.5rem/1.1 var(--fuente-display); margin-bottom: .7rem; }
.cs-mias-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: .7rem; }
.cs-mia {
    display: flex; align-items: center; gap: .8rem;
    padding: .8rem 1rem; border-radius: var(--radio);
    border: 1px solid var(--borde); background: var(--blanco);
    color: var(--texto); text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}
.cs-mia:hover { border-color: var(--tinta); box-shadow: var(--sombra); }
.cs-mia > .ti:first-child { font-size: 1.7rem; flex: none; color: var(--texto-suave); }
.cs-mia-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cs-mia-fila { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.cs-mia-codigo { font: 600 .95rem var(--fuente-mono); letter-spacing: .03em; white-space: nowrap; }
.cs-mia-estado { font: 600 .72rem var(--fuente-ui); padding: .12rem .55rem; border-radius: 999px; background: var(--crema); white-space: nowrap; }
.cs-mia-datos { font-size: .82rem; color: var(--texto-med); }
.cs-mia-nota { font-size: .76rem; color: var(--texto-suave); }
.cs-mia-flecha { color: var(--texto-suave); }
.cs-mia--pendiente { border-color: #F0D58A; background: #FFFBEE; }
.cs-mia--pendiente > .ti:first-child { color: #8a6100; }
.cs-mia--pendiente .cs-mia-estado { background: #F7E3A6; color: #6b4b00; }
.cs-mia--pagada { border-color: #B9D3A7; background: #F1F7EC; }
.cs-mia--pagada > .ti:first-child { color: #3d6b22; }
.cs-mia--pagada .cs-mia-estado { background: #CFE5BF; color: #2d5a1b; }
.cs-mia--caducada, .cs-mia--cancelada { opacity: .75; }