/* =====================================================================
   Simulador de Voto — Máquina de Votación (Boleta Única Electrónica)
   Modelo fiel al simulador oficial del TSJE (simuladoroficial.tsje.gov.py)
   Uso educativo / capacitación — NO OFICIAL.
   ===================================================================== */

:root {
  --sim-bg: #0f172a;
  --sim-panel: #e6e5e4;
  --sim-header-bg: #111111;
  --sim-title-bg: #ffffff;
  --sim-title-fg: #111111;
  --sim-verde: #2e9b3f;
  --sim-verde-h: #26852f;
  --sim-naranja: #fc7b02;
  --sim-naranja-h: #e06e00;
  --sim-gris-btn: #9aa0a6;
  --sim-borde: #c9c9c9;
  --sim-rojo: #dc2626;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--sim-bg);
  color: #e2e8f0;
  font-family: 'Outfit', 'Nimbus Sans L', Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ */
/*  Marco de página                                                    */
/* ------------------------------------------------------------------ */
.sim-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(15, 23, 42, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(148, 163, 184, .18);
}
.sim-topbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 13px;
}
.sim-topbar .brand img { width: 30px; height: 30px; object-fit: contain; }
.sim-topbar .brand small {
  display: block;
  font-size: 9px;
  color: #94a3b8;
  letter-spacing: .18em;
  font-weight: 700;
}
.sim-topbar a.back {
  color: #cbd5e1;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px;
  border: 1px solid rgba(148,163,184,.25);
  border-radius: 10px;
  background: rgba(30,41,59,.6);
}
.sim-topbar a.back:hover { background: rgba(51,65,85,.7); }

.sim-stage-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 10px 16px 40px;
}

.sim-lede {
  text-align: center;
  margin: 2px auto 12px;
  max-width: 680px;
}
.sim-lede h1 {
  margin: 0 0 4px;
  font-size: clamp(1.15rem, 2.8vw, 1.55rem);
  font-weight: 800;
  color: #fff;
}
.sim-lede p { margin: 0; color: #94a3b8; font-size: 12px; line-height: 1.55; }
@media (max-width: 560px) {
  .sim-lede { margin-bottom: 16px; }
  .sim-lede p { display: none; }
}

/* ------------------------------------------------------------------ */
/*  "Máquina de votación" — bezel + pantalla                           */
/* ------------------------------------------------------------------ */
.maquina {
  position: relative;
  margin: 0 auto;
  max-width: 900px;
  background: linear-gradient(180deg, #4b5563, #374151);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.65), inset 0 2px 0 rgba(255,255,255,.06);
}
.maquina::after {
  /* ranura de la impresora */
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 46%;
  height: 6px;
  transform: translateX(-50%);
  background: #1f2937;
  border-radius: 4px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.7);
}

.pantalla {
  position: relative;
  width: 100%;
  height: clamp(430px, calc(100dvh - 232px), 620px);
  background: var(--sim-panel);
  border-radius: 10px;
  overflow: hidden;
  color: #1f2937;
  display: flex;
  flex-direction: column;
  border: 3px solid #0b1220;
}
@media (max-width: 560px) { .pantalla { height: clamp(400px, calc(100dvh - 188px), 620px); } }

/* pantallas de "guía" tienen fondo claro y su propio layout */
.pantalla.is-guia { background: #e6e5e4; }

/* ------------------------------------------------------------------ */
/*  Encabezado de la máquina                                           */
/* ------------------------------------------------------------------ */
.m-header {
  flex: 0 0 auto;
  background: var(--sim-header-bg);
  color: #fff;
  font-size: clamp(8px, 1.35vw, 12px);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 12px;
  line-height: 1.2;
}
.m-header .logo {
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #444;
  padding-right: 12px;
}
.m-header .logo b { font-size: 1.15em; }
.m-header .logo span { font-size: .8em; color: #cbd5e1; font-weight: 600; }
.m-header .ubic {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.m-header .ubic i { color: #9ca3af; font-style: normal; }

.m-titulo {
  flex: 0 0 auto;
  background: var(--sim-title-bg);
  color: var(--sim-title-fg);
  text-align: center;
  font-weight: 800;
  font-size: clamp(10px, 1.8vw, 16px);
  padding: 7px 10px;
  border-bottom: 1px solid var(--sim-borde);
  text-transform: uppercase;
  letter-spacing: .01em;
}

.m-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
  -webkit-overflow-scrolling: touch;
}
.m-body::-webkit-scrollbar { width: 8px; }
.m-body::-webkit-scrollbar-thumb { background: #b4b4b4; border-radius: 8px; }

/* ------------------------------------------------------------------ */
/*  Barra inferior de la máquina                                       */
/* ------------------------------------------------------------------ */
.m-barra {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 6px;
  background: #d7d7d5;
  border-top: 1px solid var(--sim-borde);
  min-height: 44px;
}
.m-barra .sp { flex: 1 1 auto; }
.m-btn {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  font-size: clamp(9px, 1.4vw, 13px);
  color: #fff;
  border-radius: 6px;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.m-btn svg { width: 1.25em; height: 1.25em; flex: 0 0 auto; }
.m-btn:focus-visible,
.conf-col .mod:focus-visible,
.guia .next:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
.m-btn.gris { background: var(--sim-gris-btn); color: #1f2937; }
.m-btn.gris:hover { background: #868b90; }
.m-btn.verde { background: var(--sim-verde); }
.m-btn.verde:hover { background: var(--sim-verde-h); }
.m-btn.naranja { background: var(--sim-naranja); }
.m-btn.naranja:hover { background: var(--sim-naranja-h); }
.m-btn.negro { background: #111; }
.m-btn.negro:hover { background: #333; }

/* ------------------------------------------------------------------ */
/*  Grilla de listas / partidos (pantalla de categoría)                */
/* ------------------------------------------------------------------ */
.listas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 560px) { .listas-grid { grid-template-columns: repeat(2, 1fr); } }

/* pocas listas (ej: una sola lista + voto en blanco): centrado y más grande */
.listas-grid.pocas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 14px;
  min-height: 100%;
}
.listas-grid.pocas .lista-card {
  width: min(340px, 44%);
  min-height: 180px;
  justify-content: center;
}
.listas-grid.pocas .lista-card .foto { width: 76px; height: 76px; }
.listas-grid.pocas .lista-card.blanco { min-height: 180px; }
@media (max-width: 560px) {
  .listas-grid.pocas .lista-card { width: 100%; min-height: 130px; }
}

.lista-card {
  position: relative;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 6px;
  padding: 10px;
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 120px;
  transition: transform .06s ease, box-shadow .12s ease;
  user-select: none;
}
.lista-card:hover { box-shadow: 0 0 0 3px rgba(37,99,235,.55); z-index: 2; }
.lista-card:active { transform: scale(.985); }
.lista-card:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
.lista-card.sel {
  box-shadow: 0 0 0 4px #1d4ed8, 0 0 0 8px rgba(29,78,216,.35);
  transform: scale(.97);
  z-index: 3;
}

.lista-card .partido {
  font-weight: 800;
  font-size: clamp(10px, 1.5vw, 13px);
  text-transform: uppercase;
  line-height: 1.15;
}
.lista-card .fila {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.lista-card .foto {
  width: 52px;
  height: 52px;
  border-radius: 4px;
  object-fit: cover;
  background: #fff;
  border: 1px solid rgba(0,0,0,.15);
  flex: 0 0 auto;
}
.lista-card .num { line-height: 1; }
.lista-card .num b {
  display: block;
  font-size: clamp(18px, 3.4vw, 30px);
  font-weight: 900;
}
.lista-card .num span { font-size: clamp(8px, 1.2vw, 11px); font-weight: 700; letter-spacing: .04em; }
.lista-card .cand {
  margin-top: auto;
  font-weight: 700;
  font-size: clamp(9px, 1.3vw, 12px);
  text-transform: uppercase;
  line-height: 1.2;
}
.lista-card.blanco {
  background: #fff;
  color: #111;
  justify-content: center;
  align-items: center;
  font-weight: 800;
  font-size: clamp(11px, 1.8vw, 16px);
  text-transform: uppercase;
}
.lista-card.grande .num b { font-size: clamp(26px, 5vw, 44px); }

/* ------------------------------------------------------------------ */
/*  Pantalla de preferencia (Opción 1..N)                              */
/* ------------------------------------------------------------------ */
.pref-head {
  border-radius: 6px;
  color: #fff;
  text-align: center;
  padding: 10px;
  margin-bottom: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
.pref-head b { display: block; font-size: clamp(14px, 2.6vw, 22px); }
.pref-head span { font-size: clamp(9px, 1.4vw, 13px); font-weight: 700; }

.pref-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (max-width: 720px) { .pref-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .pref-grid { grid-template-columns: repeat(2, 1fr); } }

.pref-card {
  border: 1px solid var(--sim-borde);
  border-radius: 6px;
  background: #fff;
  padding: 8px;
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: box-shadow .12s ease, transform .06s ease;
  user-select: none;
}
.pref-card:hover { box-shadow: 0 0 0 3px rgba(37,99,235,.55); }
.pref-card:active { transform: scale(.985); }
.pref-card:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
.pref-card.sel {
  box-shadow: 0 0 0 4px #1d4ed8, 0 0 0 8px rgba(29,78,216,.3);
  transform: scale(.96);
}
.pref-card .foto {
  width: 66px;
  height: 66px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid var(--sim-borde);
  background: #f1f5f9;
}
.pref-card .op { font-weight: 800; font-size: clamp(10px, 1.5vw, 14px); }
.pref-card .op b { display: block; font-size: 1.5em; }
.pref-card .nm { font-weight: 700; font-size: clamp(9px, 1.25vw, 11px); text-transform: uppercase; line-height: 1.2; }

/* ------------------------------------------------------------------ */
/*  Confirmación                                                       */
/* ------------------------------------------------------------------ */
.conf-wrap {
  display: flex;
  gap: 8px;
  height: 100%;
}
.conf-cols {
  flex: 1 1 auto;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
}
@media (max-width: 560px) {
  .conf-wrap { flex-direction: column; }
  .conf-cols { grid-auto-flow: row; grid-auto-columns: auto; }
}
.conf-col {
  border-radius: 6px;
  color: #fff;
  padding: 12px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.conf-col .cat { font-weight: 800; text-transform: uppercase; font-size: clamp(10px, 1.5vw, 13px); opacity: .95; }
.conf-col .par { font-weight: 800; text-transform: uppercase; font-size: clamp(11px, 1.7vw, 15px); }
.conf-col .lis { font-weight: 900; font-size: clamp(11px, 1.7vw, 15px); }
.conf-col .foto {
  width: clamp(66px, 14vw, 104px);
  height: clamp(66px, 14vw, 104px);
  border-radius: 6px;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.7);
  background: #fff;
}
.conf-col .nom { font-weight: 800; text-transform: uppercase; font-size: clamp(10px, 1.5vw, 14px); line-height: 1.25; }
.conf-col .opc { font-weight: 700; font-size: clamp(9px, 1.3vw, 12px); }
.conf-col .mod {
  margin-top: auto;
  background: var(--sim-gris-btn);
  color: #1f2937;
  border: 0;
  border-radius: 5px;
  padding: 7px 18px;
  font-weight: 800;
  font-family: inherit;
  text-transform: uppercase;
  cursor: pointer;
  font-size: clamp(9px, 1.3vw, 12px);
}
.conf-col .mod:hover { background: #868b90; }

.conf-side {
  flex: 0 0 clamp(96px, 16%, 150px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (max-width: 560px) { .conf-side { flex-basis: auto; flex-direction: row; } }
.conf-side .m-btn {
  flex: 1;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 6px;
  border-radius: 8px;
  white-space: pre-line;
}
.conf-side .m-btn svg { width: 1.8em; height: 1.8em; }

/* ------------------------------------------------------------------ */
/*  Mensajes de pantalla completa (imprimiendo / cargando)             */
/* ------------------------------------------------------------------ */
.m-msg {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 24px;
}
.m-msg h2 { margin: 0; font-size: clamp(14px, 2.4vw, 22px); }
.m-msg p { margin: 0; color: #475569; font-size: 13px; }
.spinner {
  width: 44px; height: 44px;
  border: 5px solid #cbd5e1;
  border-top-color: var(--sim-rojo);
  border-radius: 50%;
  animation: sim-spin 1s linear infinite;
}
@keyframes sim-spin { to { transform: rotate(360deg); } }

/* boletín impreso (verificación) */
.boletin {
  background: #fff;
  color: #111;
  width: min(320px, 78%);
  border: 1px solid #999;
  box-shadow: 0 12px 30px -8px rgba(0,0,0,.4);
  padding: 12px;
  text-align: left;
  font-size: 11.5px;
  flex: 0 0 auto;
  transform: rotate(-1deg);
}
.boletin h4 { margin: 0 0 2px; font-size: 12px; text-transform: uppercase; }
.boletin .sub { color: #666; font-size: 10px; margin-bottom: 8px; }
.boletin .row {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 6px 0; border-top: 1px dashed #bbb;
}
.boletin .row b { text-transform: uppercase; }
.boletin .bc {
  margin-top: 10px; height: 34px;
  background: repeating-linear-gradient(90deg, #111 0 2px, #fff 2px 4px, #111 4px 5px, #fff 5px 9px);
}
.boletin .foot { margin-top: 8px; font-size: 9px; color: #666; text-transform: uppercase; letter-spacing: .05em; }

/* ------------------------------------------------------------------ */
/*  Pantallas de guía (instructivo)                                    */
/* ------------------------------------------------------------------ */
.guia {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.guia .guia-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 18px 24px 8px;
  scrollbar-width: none;
}
.guia .guia-scroll::-webkit-scrollbar { display: none; }
.guia .grafico {
  max-height: min(38vh, 300px);
  max-width: 74%;
  width: auto;
  object-fit: contain;
}
.guia .guia-scroll:has(.boletin) .grafico { max-height: min(22vh, 160px); opacity: .9; }
.guia h2 {
  margin: 0;
  color: #111;
  font-weight: 600;
  font-size: clamp(.9rem, 2vw, 1.3rem);
  max-width: 86%;
  line-height: 1.4;
}
.guia h2 b { font-weight: 800; }
.guia .demo {
  font-size: clamp(2rem, 7vw, 4rem);
  font-weight: 800;
  color: #111;
  line-height: .95;
  letter-spacing: -.02em;
}
.guia .demo small { display: block; font-weight: 400; color: #9aa0a6; font-size: .42em; letter-spacing: 0; }
.guia .guia-botones {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  justify-content: center;
  margin: 10px auto 16px;
}
.guia .next {
  background: #2f6fb3;
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  height: 46px;
  padding: 0 30px;
  cursor: pointer;
  white-space: nowrap;
}
.guia .next:hover { background: #285f99; }
.guia .next.verde { background: var(--sim-verde); }
.guia .next.verde:hover { background: var(--sim-verde-h); }
.guia .next.ghost {
  background: transparent;
  color: #475569;
  border: 1px solid #b6bcc4;
  font-weight: 600;
}
.guia .next.ghost:hover { background: rgba(0,0,0,.04); }
.guia .next[disabled] { opacity: .6; cursor: default; }

/* ---- pantalla de identificación ---- */
.ident {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  max-width: 460px;
  margin: 0 auto;
  padding: 4px 4px 8px;
}
.ident-ico {
  width: 62px; height: 62px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: #e2e8f0; color: #334155;
}
.ident-ico svg { width: 34px; height: 34px; }
.ident-ico.ok { background: #dcfce7; color: #15803d; }
.ident h2 {
  margin: 0;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  font-weight: 800;
  color: #111;
}
.ident-sub { margin: 0; font-size: 12.5px; line-height: 1.55; color: #475569; }
.ident-form {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 360px;
  margin-top: 4px;
}
.ident-form input {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  border: 2px solid #c9c9c9;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 17px;
  font-family: inherit;
  letter-spacing: .06em;
  text-align: center;
  color: #111;
  background: #fff;
}
.ident-form input:focus { outline: none; border-color: #2f6fb3; }
.ident-form .next { height: 46px; padding: 0 20px; }
.ident-msg {
  min-height: 0;
  font-size: 12px;
  font-weight: 600;
  color: #b91c1c;
  line-height: 1.4;
}
.ident-msg.show { min-height: 1.2em; }
.link-res {
  margin-top: 6px;
  background: none;
  border: 0;
  color: #2f6fb3;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.link-res:hover { color: #1d4ed8; }
.ident .guia-botones { margin: 6px auto 0; }
.guia .pasos {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
.guia .pasos i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #c3c3c3;
}
.guia .pasos i.on { background: var(--sim-rojo); }

/* ------------------------------------------------------------------ */
/*  Alto contraste                                                     */
/* ------------------------------------------------------------------ */
.pantalla.alto-contraste .lista-card,
.pantalla.alto-contraste .pref-card { filter: contrast(1.15) saturate(1.1); }
.pantalla.alto-contraste .lista-card:hover,
.pantalla.alto-contraste .pref-card:hover { box-shadow: 0 0 0 4px #ffdf00; }
.pantalla.alto-contraste .m-titulo { background: #000; color: #ffdf00; }

/* pie de fuente */
.sim-fuente {
  max-width: 980px;
  margin: 14px auto 0;
  text-align: center;
  color: #64748b;
  font-size: 10.5px;
  line-height: 1.6;
}

/* ================================================================== */
/*  Página de resultados                                               */
/* ================================================================== */
.res-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 14px 16px 60px;
}
.res-root { display: flex; flex-direction: column; gap: 16px; }
.res-loading {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 60px 20px; color: #94a3b8; font-size: 13px;
}

.res-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 520px) { .res-kpis { grid-template-columns: 1fr; } }
.res-kpi {
  background: #111827;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
}
.res-kpi-val { font-size: clamp(1.4rem, 5vw, 2rem); font-weight: 900; color: #fff; line-height: 1; }
.res-kpi-lbl { font-size: 11px; color: #94a3b8; text-transform: uppercase; letter-spacing: .06em; margin-top: 6px; font-weight: 700; }
.res-kpi-extra { font-size: 10.5px; color: #64748b; margin-top: 2px; }

.res-card {
  background: #111827;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 16px;
  padding: 16px 18px;
}
.res-card h3 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 800;
  color: #e2e8f0;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.res-note, .res-empty { margin: 0 0 10px; font-size: 11.5px; color: #94a3b8; }
.res-empty { padding: 8px 0; }

.res-bar { margin-bottom: 12px; }
.res-bar:last-child { margin-bottom: 0; }
.res-bar-top {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin-bottom: 5px;
}
.res-bar-label { font-size: 12.5px; font-weight: 700; color: #e2e8f0; }
.res-bar-label em { font-style: normal; color: #94a3b8; font-weight: 600; font-size: .9em; }
.res-bar-val { font-size: 12px; color: #94a3b8; white-space: nowrap; }
.res-bar-val b { color: #fff; }
.res-bar-track {
  height: 12px; border-radius: 8px;
  background: rgba(148,163,184,.15);
  overflow: hidden;
}
.res-bar-fill {
  height: 100%; border-radius: 8px;
  transition: width .5s cubic-bezier(.16,1,.3,1);
  min-width: 3px;
}

.res-bar-foto { display: flex; align-items: center; gap: 10px; }
.res-bar-img {
  width: 40px; height: 40px; border-radius: 10px;
  object-fit: cover; flex: none;
  background: rgba(148,163,184,.15);
  border: 1px solid rgba(148,163,184,.25);
}
.res-bar-img.sin-foto { visibility: hidden; }
.res-bar-foto .res-bar-body { flex: 1; min-width: 0; }

.res-foot {
  display: flex; align-items: center; gap: 12px;
  margin-top: 18px; flex-wrap: wrap;
}
.res-btn {
  background: #1e293b;
  border: 1px solid rgba(148,163,184,.3);
  color: #e2e8f0;
  font-family: inherit; font-weight: 700; font-size: 12.5px;
  padding: 9px 18px; border-radius: 10px; cursor: pointer;
}
.res-btn:hover { background: #334155; }
.res-btn.wide { width: 100%; margin-top: 4px; padding: 12px; }
.res-btn[disabled] { opacity: .6; cursor: default; }
#resActualizado { font-size: 11px; color: #64748b; }

.res-detalle { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
.res-tabla-wrap { overflow-x: auto; }
.res-tabla { width: 100%; border-collapse: collapse; font-size: 12px; }
.res-tabla th, .res-tabla td { padding: 7px 10px; text-align: left; border-bottom: 1px solid rgba(148,163,184,.15); white-space: nowrap; }
.res-tabla th { color: #94a3b8; text-transform: uppercase; font-size: 10px; letter-spacing: .04em; }
.res-tabla td { color: #e2e8f0; }

/* toast */
.sim-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(140%);
  background: rgba(17,24,39,.96);
  color: #fff;
  border: 1px solid rgba(148,163,184,.3);
  border-radius: 12px;
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 600;
  z-index: 60;
  transition: transform .3s cubic-bezier(.16,1,.3,1);
  max-width: 90vw;
}
.sim-toast.show { transform: translateX(-50%) translateY(0); }