/* ══════════════════════════════════════════════════════════════════════
   paises.css — Vista regional del SIIT sobre el Resumen del portafolio.
   Mismo lenguaje que .emp-card, .tile y el comparador (.cmp-modal):
   tipografías, radios, líneas y sombras de biblioteca.css; el vidrio con
   sus tokens (--glass, --glass-edge, --glass-blur, --glass-shadow). Sin
   dependencias nuevas. Todo movimiento se apaga con prefers-reduced-motion
   y, además, el JS solo lo enciende si _reduceMotion no lo pide.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Chip del filtro activo, junto a los botones del saludo ─────────────── */
.pais-chip { display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 4px 0 13px;
  font-family:var(--font); font-size:12.5px; color:var(--teal-ink); background:var(--teal-soft);
  border:1px solid rgba(14,138,154,.32); border-radius:var(--pill); white-space:nowrap; }
.pais-chip[hidden] { display:none; }
.pais-chip b { font-weight:600; }
.pais-chip button { display:inline-grid; place-items:center; width:30px; height:30px; border:0; border-radius:50%;
  background:transparent; color:var(--teal-ink); font-size:12px; cursor:pointer; transition:background .14s; }
.pais-chip button:hover { background:rgba(14,138,154,.16); }
.pais-chip button:focus-visible { outline:2px solid var(--teal); outline-offset:1px; }

/* «Nuevo análisis» que no puede cumplir: nace deshabilitado y con motivo
   (doctrina de la masterbar). Es un <a>, así que el estado va por aria. */
.ui-btn[aria-disabled="true"] { opacity:.58; cursor:not-allowed; transform:none !important; box-shadow:none; }
[data-nuevo][aria-disabled="true"] { opacity:.58; cursor:not-allowed; }
.page-head__cta[aria-disabled="true"]:hover { transform:none; }

/* ── Columna: país sin proyectos. Ausencia, no cero. ────────────────────── */
.pais-vacio { display:flex; flex-direction:column; gap:6px; padding:16px 14px; background:var(--white);
  border:1px dashed rgba(35,40,43,.2); border-radius:var(--r-md); }
.pais-vacio b { font-family:var(--tight); font-size:13px; font-weight:600; color:var(--ink); }
.pais-vacio p { font-size:12px; line-height:1.5; color:var(--ink-soft); }

/* ── El diálogo: vidrio sobre el portafolio desenfocado ─────────────────── */
.pais-dialog { margin:auto; padding:0; border:1px solid var(--glass-edge, rgba(35,40,43,.09));
  border-radius:22px; width:min(1160px, calc(100vw - 32px)); max-height:min(92vh, 900px);
  max-height:min(92dvh, 900px); overflow:hidden; color:var(--ink);
  background:linear-gradient(var(--glass, rgba(240,237,229,.55)), var(--glass, rgba(240,237,229,.55))), rgba(255,255,255,.62);
  -webkit-backdrop-filter:var(--glass-blur, blur(9px) saturate(112%)); backdrop-filter:var(--glass-blur, blur(9px) saturate(112%));
  box-shadow:var(--glass-shadow, 0 1px 3px rgba(20,40,44,.05)), 0 30px 80px -28px rgba(10,31,38,.42); }
.pais-dialog::backdrop { background:rgba(10,31,38,.26);
  -webkit-backdrop-filter:blur(7px) saturate(108%); backdrop-filter:blur(7px) saturate(108%); }
.pais-dlg { display:flex; flex-direction:column; max-height:inherit; }

.pais-dlg__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:22px 26px 16px; border-bottom:1px solid var(--line-soft); }
.pais-dlg__titulos { display:flex; flex-direction:column; gap:3px; min-width:0; }
.pais-dlg__kicker { font-family:var(--tight); font-size:10.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--teal-ink); }
.pais-dlg__head h2 { font-family:var(--brand); font-size:22px; font-weight:600; letter-spacing:-.015em; line-height:1.15; color:var(--ink); }
.pais-dlg__head p { font-size:13px; color:var(--ink-soft); }
.pais-dlg__x { flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line); background:rgba(255,255,255,.7); color:var(--ink-soft); font-size:13px; cursor:pointer;
  transition:background .14s, border-color .14s, color .14s; }
.pais-dlg__x:hover { background:var(--white); border-color:rgba(14,138,154,.4); color:var(--teal-ink); }
.pais-dlg__x:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }

.pais-dlg__cuerpo { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  padding:20px 26px 6px; display:flex; flex-direction:column; gap:14px; scrollbar-width:thin; }

.pais-dlg__pie { display:flex; align-items:center; gap:8px; padding:12px 26px 16px; border-top:1px solid var(--line-soft);
  font-size:12px; color:var(--ink-soft); }
.pais-dlg__pie svg { width:15px; height:15px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.pais-dlg__atrib { margin-left:auto; font-size:11px; color:var(--ink-soft); text-align:right; }

/* ── Tarjetas ───────────────────────────────────────────────────────────── */
.pais-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; justify-content:center; }
.pais-card { position:relative; display:flex; flex-direction:column; width:100%; min-width:0; padding:0; text-align:left;
  font-family:inherit; color:inherit; cursor:pointer; overflow:hidden;
  background:rgba(255,255,255,.9); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-s);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s; }
.pais-card:hover, .pais-card:focus-visible { transform:translateY(-3px); border-color:rgba(14,138,154,.38); box-shadow:var(--shadow-m); }
.pais-card:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
.pais-card[aria-current="true"] { border-color:var(--teal); box-shadow:0 0 0 1px var(--teal), var(--shadow-s); }
.pais-card[aria-current="true"]:hover, .pais-card[aria-current="true"]:focus-visible { box-shadow:0 0 0 1px var(--teal), var(--shadow-m); }

.pais-card__mapa { position:relative; display:block; aspect-ratio:16/10; overflow:hidden;
  border-bottom:1px solid var(--line-soft); background:var(--navy); }
.pais-card__activo { position:absolute; top:10px; left:10px; padding:3px 8px; border-radius:var(--pill);
  font-family:var(--tight); font-size:10px; font-weight:600; letter-spacing:.04em; color:#fff; background:var(--teal-ink); }
.pais-card__activo--en-linea { position:static; flex:none; }

/* Vista satelital en negativo: la imagen manda dentro del país; fuera, un velo
   de la tinta de la casa. Hover y foco aclaran el velo y avivan el contorno. */
.pais-sil { display:block; width:100%; height:100%; color:#f2f4ed; }
.pais-sil__img { transition:transform .5s var(--ease); transform-origin:50% 50%; }
.pais-sil__velo { fill:var(--navy); fill-opacity:.58; transition:fill-opacity .2s; }
.pais-sil__trazo { stroke-width:1.2; stroke-opacity:.9; stroke-linejoin:round; transition:stroke .2s, stroke-opacity .2s; }
.pais-card:hover .pais-sil__velo, .pais-card:focus-visible .pais-sil__velo { fill-opacity:.46; }
.pais-card:hover .pais-sil, .pais-card:focus-visible .pais-sil,
.pais-card[aria-current="true"] .pais-sil { color:var(--teal-bright); }
.pais-card:hover .pais-sil__img, .pais-card:focus-visible .pais-sil__img { transform:scale(1.025); }
.pais-sil__halo { fill:var(--navy); fill-opacity:.62; }
.pais-sil__pt { stroke:#fff; stroke-width:1.5; }
.pais-sil__pt--alto { fill:var(--sig-alto); }
.pais-sil__pt--medio { fill:var(--sig-medio); }
.pais-sil__pt--bajo { fill:var(--sig-bajo); }

.pais-card__cuerpo { display:flex; flex-direction:column; gap:10px; flex:1 1 auto; padding:14px 15px 15px; }
.pais-card__head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.pais-card__nombre { font-family:var(--brand); font-size:18px; font-weight:600; letter-spacing:-.01em; line-height:1.15; color:var(--ink); }
.pais-card__iso { flex:none; font-family:var(--tight); font-size:10.5px; font-weight:600; letter-spacing:.08em;
  color:var(--ink-soft); border:1px solid var(--line); border-radius:5px; padding:1px 5px; }

/* Estado como texto, con la paleta de .ui-status--* */
.pais-estado { align-self:flex-start; display:inline-flex; align-items:center; gap:6px; padding:3px 9px 3px 8px;
  border:1px solid; border-radius:var(--pill); font-family:var(--tight); font-size:11px; font-weight:600; }
.pais-estado::before { content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.pais-estado--success { color:#3f6638; border-color:rgba(85,127,77,.26); background:rgba(85,127,77,.08); }
.pais-estado--warning { color:#79591f; border-color:rgba(148,109,39,.26); background:rgba(180,137,63,.1); }
.pais-estado--info    { color:#155e67; border-color:rgba(14,116,130,.24); background:rgba(14,116,130,.07); }

/* Tres cifras: filas etiqueta · valor, con las líneas de .tiles. */
.pais-cifras { display:flex; flex-direction:column; border:1px solid var(--line-soft); border-radius:var(--r-sm); background:var(--white); }
.pais-cifra { display:flex; align-items:baseline; justify-content:space-between; gap:10px; min-width:0; padding:7px 11px;
  border-bottom:1px solid var(--line-soft); cursor:help; }
.pais-cifra:last-child { border-bottom:0; }
/* Cifra con nota («27 con datos · 124 registradas»): la etiqueta arriba, entera,
   y la cifra con su nota debajo, a la derecha. En una sola fila la etiqueta se
   partía en cuatro renglones. */
.pais-cifra--nota { flex-wrap:wrap; row-gap:1px; }
.pais-cifra--nota .pais-cifra__l { flex:1 0 100%; }
.pais-cifra--nota .pais-cifra__v { margin-left:auto; white-space:normal; text-align:right; }
.pais-cifra__v { order:2; flex:none; font-family:var(--brand); font-size:18px; font-weight:700; letter-spacing:-.015em; line-height:1.15; color:var(--ink); white-space:nowrap; }
.pais-cifra__v small { font-family:var(--tight); font-size:11px; font-weight:500; color:var(--ink-soft); letter-spacing:0; }
.pais-cifra__v--sin { font-family:var(--tight); font-size:12px; font-weight:600; line-height:1.7; color:var(--ink-soft); }
.pais-cifra__l { order:1; min-width:0; font-family:var(--tight); font-size:11.5px; line-height:1.35; color:var(--ink-soft); }

.pais-card__linea { font-size:12px; line-height:1.45; color:var(--ink-soft); min-height:3em; }
.pais-card__accion { display:inline-flex; align-items:center; gap:6px; margin-top:auto; font-family:var(--accent);
  font-size:12.5px; font-weight:700; color:var(--teal-ink); }
.pais-card__accion svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round;
  stroke-linejoin:round; transition:transform .18s var(--ease); }
.pais-card:hover .pais-card__accion svg, .pais-card:focus-visible .pais-card__accion svg { transform:translateX(3px); }

/* País con dominio (servicio por país): la tarjeta y, debajo, «Ir al SIIT en
   Venezuela». Van juntos en una celda; la tarjeta sigue llenando la altura. */
.pais-celda { display:flex; flex-direction:column; gap:8px; min-width:0; }
.pais-celda .pais-card { flex:1 1 auto; }
.pais-card__ir, .pais-vacio__ir { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px;
  padding:0 14px; border:1px solid rgba(14,138,154,.38); border-radius:var(--pill); background:rgba(255,255,255,.9);
  font-family:var(--accent); font-size:12.5px; font-weight:700; color:var(--teal-ink); text-decoration:none;
  transition:background .14s, border-color .14s; }
.pais-card__ir svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.pais-card__ir:hover, .pais-vacio__ir:hover { background:var(--teal-wash, #eaf6f7); border-color:var(--teal); }
.pais-card__ir:focus-visible, .pais-vacio__ir:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
.pais-vacio__ir { align-self:flex-start; margin-top:4px; }

/* «Todos los países»: una franja, mismo componente. */
.pais-card--todos { flex-direction:row; align-items:center; gap:16px; padding:12px 18px 12px 12px; }
.pais-todos__mini { display:flex; gap:4px; flex:none; }
.pais-mini { display:block; width:56px; height:35px; border-radius:7px; overflow:hidden; background:var(--navy); }
.pais-mini .pais-sil__velo { fill-opacity:.5; }
.pais-todos__tx { display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-width:0; }
.pais-todos__tx .pais-card__nombre { font-size:16px; }
.pais-todos__sub { font-size:12px; color:var(--ink-soft); }
.pais-card--todos .pais-card__accion { margin-top:0; flex:none; }
.pais-card--todos[aria-current="true"] { background:linear-gradient(90deg, #fff 0%, var(--teal-wash) 100%); }

/* ── Movimiento: solo si el JS lo enciende (data-motion="on") ───────────── */
.pais-dialog[data-motion="on"][open] { animation:pais-dlg-in .22s var(--ease) both; }
.pais-dialog[data-motion="on"][open]::backdrop { animation:pais-velo-in .22s ease both; }
.pais-dialog[data-motion="on"] .pais-card { animation:pais-card-in .34s var(--ease) both; animation-delay:calc(var(--i, 0) * 35ms + 40ms); }
.pais-dialog[data-motion="on"].is-closing { animation:pais-dlg-out .17s ease both; }
.pais-dialog[data-motion="on"].is-closing::backdrop { animation:pais-velo-out .17s ease both; }
@keyframes pais-dlg-in { from { opacity:0; transform:translateY(10px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes pais-dlg-out { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(6px) scale(.985); } }
@keyframes pais-velo-in { from { opacity:0; } to { opacity:1; } }
@keyframes pais-velo-out { from { opacity:1; } to { opacity:0; } }
@keyframes pais-card-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  .pais-dialog, .pais-dialog::backdrop, .pais-card { animation:none !important; }
  .pais-card, .pais-card:hover, .pais-card:focus-visible { transition:none !important; transform:none !important; }
  .pais-card__accion svg, .pais-sil__img, .pais-sil__velo { transition:none !important; }
  .pais-card:hover .pais-sil__img, .pais-card:focus-visible .pais-sil__img { transform:none; }
}

/* ── Anchos ─────────────────────────────────────────────────────────────── */
@media (max-width:1080px){ .pais-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:620px){
  .pais-dialog { width:calc(100vw - 16px); max-height:calc(100vh - 16px); max-height:calc(100dvh - 16px); border-radius:18px; }
  .pais-dlg__head { padding:16px 16px 12px; }
  .pais-dlg__head h2 { font-size:19px; }
  .pais-dlg__cuerpo { padding:14px 14px 4px; }
  .pais-dlg__pie { padding:10px 16px 12px; flex-wrap:wrap; row-gap:2px; font-size:11.5px; }
  .pais-dlg__pie > span:not(.pais-dlg__atrib) { flex:1 1 0; min-width:0; }
  .pais-dlg__atrib { flex:1 0 100%; margin-left:0; padding-left:23px; text-align:left; font-size:10.5px; }
  .pais-grid { grid-template-columns:1fr; gap:12px; }
  .pais-card__mapa { aspect-ratio:16/8; }
  .pais-card--todos { flex-wrap:wrap; gap:10px 12px; }
  .pais-todos__mini { order:3; width:100%; }
  .pais-mini { flex:1 1 0; width:auto; }
  .pais-chip { max-width:100%; }
}