/* Tarjeta de Raids para móvil — independiente de raids.css (que sigue
   gobernando la versión de escritorio sin cambios). Todo acá vive bajo
   .rc-mobile-card como ancestro: eso le da a estas reglas más especificidad
   que las de raids.css sobre las mismas clases de botón reutilizadas
   (.rc-btn, .rc-diff-*), así que ganan sin importar el orden de carga entre
   los dos archivos. Ver docs/MOBILE-ARCHITECTURE.md. */
@layer vsg-sections {

.rc-mobile-card {
    display: none; /* se activa por media query — el JS que la genera solo
                       corre en viewport móvil, pero esto es una red de
                       seguridad extra si algo la deja en el DOM en escritorio */
}

@media (max-width: 900px) {

.rc-mobile-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
    padding: 14px;
    border: 1px solid rgba(125, 211, 252, .16);
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(13, 24, 52, .96), rgba(6, 11, 27, .98));
    box-shadow: 0 14px 30px rgba(1, 5, 18, .28);
    animation: rcMobileFadeIn .35s ease both;
}
@keyframes rcMobileFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.rc-mobile-card-cancel { opacity: .8; border-color: rgba(239, 68, 68, .3); gap: 10px; }
.rc-mobile-cancel-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rc-mobile-cancel-row strong { display: block; color: #e2e8f0; font-size: .92rem; }
.rc-mobile-cancel-row small { display: block; margin-top: 2px; color: #7f91ad; font-size: .72rem; }

.rc-mobile-card .rc-mobile-top { display: flex; align-items: flex-start; gap: 10px; }
.rc-mobile-card .rc-mobile-guild-logo {
    flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px; object-fit: cover;
    border: 1px solid rgba(125, 211, 252, .3); background: rgba(15, 23, 42, .5);
}
.rc-mobile-card .rc-mobile-date {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    flex: 0 0 46px; height: 46px; border-radius: 10px;
    background: rgba(56, 189, 248, .1); border: 1px solid rgba(56, 189, 248, .25);
}
.rc-mobile-card .rc-mobile-date strong { color: #7dd3fc; font-size: .95rem; line-height: 1.1; }
.rc-mobile-card .rc-mobile-date span { color: #93c5fd; font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }

.rc-mobile-card .rc-mobile-heading { min-width: 0; flex: 1 1 auto; }
.rc-mobile-card .rc-mobile-title {
    margin: 0; color: #f4faff; font-size: .98rem; font-weight: 800; line-height: 1.28;
    /* a diferencia de .rc2-title en escritorio, acá NO se recorta con
       ellipsis — el título envuelve a varias líneas si hace falta. */
    overflow-wrap: anywhere;
}
.rc-mobile-card .rc-mobile-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.rc-mobile-card .rc-mobile-badge {
    display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, .25); background: rgba(15, 23, 42, .55);
    color: #94a3b8; font-size: .62rem; font-weight: 800; letter-spacing: .02em; white-space: nowrap;
}
.rc-mobile-card .rc-mobile-badge-ok { border-color: rgba(52, 211, 153, .35); color: #86efac; }
.rc-mobile-card .rc-mobile-badge-cancel { border-color: rgba(239, 68, 68, .4); color: #fca5a5; background: rgba(239, 68, 68, .1); }
.rc-mobile-card .rc-mobile-badge-pending { border-color: rgba(251, 191, 36, .4); color: #fde68a; }
.rc-mobile-card .rc-mobile-badge.rc-diff-mythic { border-color: rgba(249, 115, 22, .45); color: #fdba74; }
.rc-mobile-card .rc-mobile-badge.rc-diff-heroic { border-color: rgba(167, 139, 250, .45); color: #c4b5fd; }
.rc-mobile-card .rc-mobile-badge.rc-diff-lfr { border-color: rgba(56, 189, 248, .45); color: #7dd3fc; }
.rc-mobile-card .rc-mobile-badge.rc-diff-normal { border-color: rgba(148, 163, 184, .35); color: #cbd5e1; }

/* 2 estadísticas clave arriba (asistencia/jefes) — el resto de los "tops"
   vive en .rc-mobile-tops más abajo, ya no se esconde nada. */
.rc-mobile-card .rc-mobile-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.rc-mobile-card .rc-mobile-stat {
    display: flex; flex-direction: column; gap: 2px; padding: 8px 6px; border-radius: 10px;
    background: rgba(15, 23, 42, .5); border: 1px solid rgba(148, 163, 184, .1); text-align: center;
}
.rc-mobile-card .rc-mobile-stat-label { color: #7f91ad; font-size: .58rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.rc-mobile-card .rc-mobile-stat strong { color: #eaf6ff; font-size: .92rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-mobile-card .rc-mobile-stat strong small { color: #7f91ad; font-size: .68rem; font-weight: 700; }

/* Los 6 tops (DPS/Healer/Defensivos/Supervivencia/Cortes/Dispels): antes
   solo se veía el top DPS en móvil, el resto quedaba invisible.
   Alineación: el grid vive en el CONTENEDOR (.rc-mobile-tops), no en cada
   fila por separado — antes cada .rc-mobile-top-row era su propio grid, así
   que el ancho de columnas se recalculaba fila por fila según su propio
   contenido, y las columnas quedaban escalonadas en vez de alineadas.
   display:contents en la fila hace que sus 3 hijos pasen a ser ítems
   directos del grid del contenedor, que sí comparte una sola plantilla de
   columnas para las 6 filas.
   Texto sin recortar: cuando el top no es de la guild se muestra la
   etiqueta "TOP DPS (PUG)"/"TOP HEALER (PUG)" (mismo criterio que la
   tarjeta de escritorio) y el dato de Supervivencia es una frase, no un
   número — con white-space:nowrap + ellipsis quedaban cortados a la mitad.
   Ahora esas columnas pueden partirse en 2 líneas si hace falta en vez de
   esconder el resto del texto. */
.rc-mobile-card .rc-mobile-tops {
    display: grid; grid-template-columns: 66px minmax(0, 1fr) 84px; align-items: start;
    column-gap: 8px; row-gap: 8px; padding: 10px; border-radius: 10px;
    background: rgba(15, 23, 42, .35); border: 1px solid rgba(148, 163, 184, .1);
}
.rc-mobile-card .rc-mobile-top-row { display: contents; }
.rc-mobile-card .rc-mobile-top-label { padding-top: 2px; color: #7f91ad; font-size: .6rem; font-weight: 850; letter-spacing: .02em; text-transform: uppercase; line-height: 1.25; }
.rc-mobile-card .rc-mobile-top-value {
    display: flex; flex-wrap: wrap; align-items: center; gap: 3px 5px; min-width: 0;
    overflow-wrap: anywhere; white-space: normal; font-size: .75rem; font-weight: 700; line-height: 1.25;
}
.rc-mobile-card .rc-mobile-top-value img { width: 15px; height: 15px; border-radius: 50%; flex: 0 0 auto; }
.rc-mobile-card .rc-mobile-top-value.rc-mobile-top-empty { color: #64748b; font-style: italic; font-weight: 500; }
.rc-mobile-card .rc-mobile-top-amount {
    overflow-wrap: anywhere; white-space: normal; text-align: right;
    color: #94a3b8; font-size: .64rem; font-weight: 700; line-height: 1.3;
}
.rc-mobile-card .rc-mobile-trophy { flex: 0 0 auto; }

/* Jefes: antes era una fila de íconos con el nombre solo en el title
   (tooltip, inútil al tacto). Ahora es un menú colapsable — mismo patrón
   visual que el roster — con el nombre de cada jefe fila por fila. */
.rc-mobile-card .rc-mobile-boss-panel {
    display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows .25s ease;
}
.rc-mobile-card .rc-mobile-boss-panel.is-open { grid-template-rows: 1fr; }
.rc-mobile-card .rc-mobile-boss-list { min-height: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.rc-mobile-card .rc-mobile-boss-list-row {
    display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px;
    padding: 6px 9px; border-radius: 8px; background: rgba(15, 23, 42, .5); border: 1px solid rgba(148, 163, 184, .12);
}
.rc-mobile-card .rc-mobile-boss-list-row img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.rc-mobile-card .rc-mobile-boss-list-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #eaf6ff; font-size: .78rem; font-weight: 700; }
.rc-mobile-card .rc-mobile-boss-list-status { flex: 0 0 auto; font-size: .66rem; font-weight: 800; white-space: nowrap; }
.rc-mobile-card .rc-mobile-boss-list-row.is-kill { border-color: rgba(52, 211, 153, .3); }
.rc-mobile-card .rc-mobile-boss-list-row.is-kill .rc-mobile-boss-list-status { color: #86efac; }
.rc-mobile-card .rc-mobile-boss-list-row.is-wipe .rc-mobile-boss-list-status { color: #fca5a5; }

.rc-mobile-card .rc-mobile-empty { margin: 0; color: #7f91ad; font-size: .78rem; font-style: italic; }

/* Botones (admin y "ver detalles"): reusan las clases de botón de escritorio
   (rc-btn, wcl-quick-save, btn-more-raid-data, etc.) para que los handlers
   ya enlazados a nivel documento funcionen sin JS nuevo — pero el
   tamaño/forma para dedo lo define esta regla, que gana por especificidad
   (.rc-mobile-card .rc-mobile-btn son 2 clases con ancestro, más específico
   que el .rc-btn suelto de raids.css). Ocupan el ancho de su contenido, no
   el 100% del contenedor — se acomodan en fila y saltan de línea si hace falta. */
.rc-mobile-card .rc-mobile-admin-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-mobile-card .rc-mobile-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; flex: 0 1 auto;
    min-height: 42px; padding: 9px 14px; border-radius: 10px; font-size: .78rem; font-weight: 800; white-space: nowrap;
}
.rc-mobile-card .rc-mobile-wcl-input-row { display: flex; align-items: center; gap: 8px; }
.rc-mobile-card .rc-mobile-wcl-input-row input { flex: 1 1 auto; min-width: 0; min-height: 42px; font-size: .82rem; }
.rc-mobile-card .rc-mobile-wcl-input-row .rc-mobile-btn { flex: 0 0 auto; }

.rc-mobile-card .rc-mobile-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    min-height: 42px; padding: 9px 12px; border: 1px solid rgba(148, 163, 184, .18); border-radius: 10px;
    background: rgba(15, 23, 42, .4); color: #94a3b8; font-size: .78rem; font-weight: 800; cursor: pointer;
}
.rc-mobile-card .rc-mobile-toggle-arrow { transition: transform .2s ease; }
.rc-mobile-card .rc-mobile-toggle.is-open .rc-mobile-toggle-arrow { transform: rotate(180deg); }
.rc-mobile-card .rc-mobile-roster-panel {
    display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows .25s ease;
}
.rc-mobile-card .rc-mobile-roster-panel.is-open { grid-template-rows: 1fr; }
.rc-mobile-card .rc-mobile-roster-groups { min-height: 0; display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.rc-mobile-card .rc-mobile-roster-group h4 {
    display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: #94a3b8;
    font-size: .68rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase;
}
.rc-mobile-card .rc-mobile-roster-count { padding: 1px 6px; border-radius: 999px; background: rgba(148, 163, 184, .15); color: #cbd5e1; font-size: .64rem; font-weight: 800; }
.rc-mobile-card .rc-mobile-roster-list { min-height: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rc-mobile-card .rc-mobile-roster-pill {
    display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, .2); background: rgba(15, 23, 42, .5); font-size: .74rem; font-weight: 700; min-height: 32px;
}
.rc-mobile-card .rc-mobile-roster-pill img { width: 16px; height: 16px; border-radius: 50%; }
.rc-mobile-card .rc-mobile-roster-pill.off { opacity: .5; color: #94a3b8; border-style: dashed; }

} /* /media */
}