/* Lista de grupos con inversión de un toque, reloj visible y banderas de provincia. Se carga al final. */

/* ---------------------------------------------------------------- tarjeta de grupo */
.g-tarjeta { display: grid; grid-template-columns: 1fr 76px; grid-template-rows: 1fr auto; cursor: default; }
.g-abrir { grid-column: 1; grid-row: 1; display: grid; grid-template-columns: 40px 1fr; border: 0; padding: 0; background: none; cursor: pointer; text-align: left; min-width: 0; }
.g-banda { min-width: 0; }
.g-banda > span { display: grid; min-width: 0; }
.g-banda > span, .g-banda small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-banda small { font: 600 11px var(--texto); text-transform: none; opacity: .9; }
.g-rapido { grid-column: 2; grid-row: 1; display: grid; place-content: center; border: 0; border-left: 1px solid #23801f; background: linear-gradient(#5fd35a, #2fa12a); color: #fff; font: 800 15px/1 var(--titulos); cursor: pointer; }
.g-rapido small { font: 600 10px var(--texto); opacity: .9; margin-top: 2px; }
.g-rapido:disabled { background: #c9ced4; border-color: #b0b7be; cursor: not-allowed; }
.g-rapido:active { filter: brightness(.9); }
.g-pista { grid-column: 1; grid-row: 2; }
.g-lider { grid-column: 2; grid-row: 2; }

/* ---------------------------------------------------------------- reloj en listas y ventanas */
.reloj-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 8px; background: #eef4fb; color: var(--celeste-osc); font: 700 16px var(--titulos); flex: none; }
.reloj-chip.urgente { background: #fde3e3; color: var(--rojo); animation: latido 1s infinite; }
.cajon-cab { gap: 8px; }
.cajon-cab b { flex: 1; }
.cajon-caja { font: 700 15px var(--titulos); color: var(--tinta); }
.vg-cab .reloj-chip { position: absolute; left: 12px; top: 10px; z-index: 2; }
.vp-cab .reloj-chip { position: absolute; right: 60px; top: 12px; z-index: 2; background: rgba(255, 255, 255, .92); }
.vp-cab .reloj-chip.urgente { background: #fde3e3; }

/* ---------------------------------------------------------------- banderas */
.bandera { height: .8em; width: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18), 0 2px 4px rgba(0, 0, 0, .2); vertical-align: -.05em; margin-right: .2em; }
.bandera.mini { height: 10px; border-radius: 1px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.rep-prov h3 { display: flex; align-items: center; justify-content: center; gap: 12px; }
.rep-prov h3 .bandera { height: 1.15em; border-radius: 6px; margin: 0; box-shadow: 0 0 0 2px rgba(255, 255, 255, .15), 0 4px 12px rgba(0, 0, 0, .45); }

/* La lista de vices entra completa en la ficha. */
.vice-ops { gap: 4px; margin-top: 6px; }
.vice-op { padding: 4px 10px; }
.vice-op img, .vo-sin { width: 40px; height: 40px; }
.vice-op + .ayuda, .vice-ops + .ayuda { font-size: 12px; margin: 6px 0 0; }

/* ---------------------------------------------------------------- decisiones de campaña */
.caja-modal.decision { width: min(620px, 100%); }
.decision header { background: linear-gradient(120deg, #2a2340, #1b6c86); }
.dec-lugar { display: block; font: 700 12px var(--titulos); letter-spacing: .12em; text-transform: uppercase; color: var(--sol); margin-bottom: 4px; }
.decision header h3 { font-size: 26px; line-height: 1.05; text-transform: none; }
.dec-contexto { margin: 0 0 12px; color: var(--gris); font-size: 14px; }
.dec-opciones { display: grid; gap: 8px; }
.dec-op { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border: 2px solid var(--borde); border-radius: 12px; background: #fff; cursor: pointer; text-align: left; font: 600 16px/1.25 var(--texto); }
.dec-op:hover:not(:disabled) { border-color: var(--naranja); background: #fff8f1; }
.dec-op:disabled { opacity: .5; cursor: not-allowed; }
.dec-letra { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #1c2733; color: #fff; font: 800 18px var(--titulos); flex: none; }
.dec-costo { font: 800 15px var(--titulos); background: #111316; color: #fff; padding: 3px 8px; border-radius: 6px; }
.dec-elegida { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-weight: 600; }
.dec-efectos { margin-bottom: 6px; }
.dec-efectos .chip { font-size: 13px; padding: 4px 10px; }

/* ---------------------------------------------------------------- teléfono: lista de grupos y lobbys */
@media (max-width: 900px) {
  .cajon { position: absolute; inset: 0; width: 100%; z-index: 7; }
  .cajon-cab { padding: 8px 10px; }
  .cajon-cab b { font-size: 17px; }
  .cajon-sub { display: none; }
  .cajon-lista { display: grid; grid-auto-rows: auto; align-content: start; gap: 6px; padding: 8px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .g-tarjeta { grid-template-columns: 1fr 70px; min-height: 64px; }
  .g-abrir { grid-template-columns: 36px 1fr; }
  .g-ico { font-size: 18px; }
  .g-banda { font-size: 14px; padding: 6px 8px; }
  .g-rapido { font-size: 15px; }
  .g-pista { padding: 4px 6px; }
  .g-celdas { height: 12px; }
}

/* ---------------------------------------------------------------- fotos reales en lobbys y regiones */
.g-tarjeta .g-banda, .vg-cab { background: linear-gradient(100deg, color-mix(in srgb, var(--ic) 92%, #000) 30%, color-mix(in srgb, var(--ic) 45%, transparent)), var(--foto) center / cover, var(--ic); }
.g-banda > span { text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.g-tarjeta.region .g-abrir { grid-column: 1 / -1; }
.g-tarjeta.activa { outline: 3px solid var(--ic); outline-offset: -1px; }

/* Aporte del vice dentro de la ficha. */
.de-vice { display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 5px; background: #e6eefb; color: #2c5fa8; font: 700 11px var(--texto); font-style: normal; vertical-align: 1px; }
.ficha-lista small { font-size: .78em; color: var(--gris); }