:root{
  --azul:#3882dc; --verde:#2dc86e; --agua:#0e8b7a; --navy:#0d1b2f; --navy2:#132840;
  --tinta:#1a2433; --gris:#5b6b82; --linea:#e2e8f2; --fondo:#eef2f8;
  /* degradado compartido de los botones GRANDES. Misma filosofía que los pequeños
     (azul que funde en verde), pero al ser grandes aparece un azul OSCURO (cabecera)
     al principio que se degrada al azul normal y termina en verde. Reparto del espacio:
     ~25% azul oscuro · ~37,5% azul · ~37,5% verde. Tonos = los mismos que el resto (nada llamativo). */
  --grad-tri:linear-gradient(90deg, var(--navy) 0%, var(--azul) 25%, var(--azul) 50%, var(--verde) 88%, var(--verde) 100%);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--fondo); color:var(--tinta); line-height:1.5;
}
.wrap{max-width:920px; margin:0 auto; position:relative}

/* fondo animado decorativo (red/constelación que fluye por detrás del marco
   central). Va pegado al fondo, detrás de todo, y no captura clics. El marco
   central (tarjetas blancas) lo tapa; se ve sobre todo por los laterales. */
#fondoRed{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:-1; pointer-events:none; display:block;
}
/* en móvil el marco ocupa casi toda la pantalla: no merece la pena gastar
   batería. Y si el usuario pidió "menos animación", se respeta. */
@media (max-width:760px){ #fondoRed{ display:none } }
@media (prefers-reduced-motion:reduce){ #fondoRed{ display:none } }

/* ---------- CABECERA ---------- */
header{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 55%,#124a53 100%);
  color:#fff; padding:30px 20px 26px;
}
header .grid{
  position:absolute; inset:0; opacity:.16; pointer-events:none;
  background-image:radial-gradient(circle,#7fd0ff 1px,transparent 1.4px);
  background-size:24px 24px;
}
header .glow{
  position:absolute; right:-120px; top:-120px; width:360px; height:360px; pointer-events:none;
  background:radial-gradient(circle,rgba(45,200,110,.45),transparent 65%); filter:blur(10px);
}
/* canvas de la onda de luz: encima de los puntos estáticos, debajo del contenido */
#cabeceraLuz{ position:absolute; inset:0; z-index:1; pointer-events:none }
.topbar{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap;
  position:relative; z-index:2}
.brand{display:flex; align-items:center; gap:14px}
.logo{
  width:52px; height:52px; border-radius:14px; flex:none;
  background:linear-gradient(140deg,var(--azul),var(--verde));
  display:flex; align-items:center; justify-content:center;
  font-size:30px; font-weight:800; color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.35);
}
/* logo (BTC + ETH) SIN caja de fondo: solo el símbolo, transparente, con una
   sombra suave para que despegue del cabecero. */
.logo-img{
  height:70px; width:auto; flex:none; display:block;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.45));
  position:relative; z-index:1;
}
/* destello/backlight detrás de la moneda: barre desde la derecha-atrás cada ~10 s */
.logo-wrap{position:relative; display:inline-flex; flex:none; align-items:center}
.logo-destello{
  position:absolute; top:50%; left:50%; width:170%; height:170%;
  border-radius:50%; pointer-events:none; z-index:0; opacity:0;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,216,132,.60) 0%, rgba(255,192,84,.28) 38%, rgba(255,192,84,0) 70%);
  filter:blur(7px);
}
/* el destello lo dispara el JS (clase .flash) cuando un pulso pasa por la moneda;
   barre de IZQUIERDA a DERECHA imitando el paso del pulso. */
.logo-destello.flash{ animation:logoFlash 1s ease-out }
@keyframes logoFlash{
  0%   { opacity:0;   transform:translate(-72%,-50%) scale(.7) }
  45%  { opacity:.62; transform:translate(-50%,-50%) scale(1.18) }
  100% { opacity:0;   transform:translate(-30%,-50%) scale(.9) }
}
@media (prefers-reduced-motion: reduce){ .logo-destello{ animation:none!important; opacity:0 } }
.brand h1{margin:0; font-size:25px; letter-spacing:.3px}
.brand p{margin:2px 0 0; color:#a9c2e6; font-size:14px}
.badge{
  display:inline-block; margin-top:14px; font-size:12.5px; color:#bfe9cf;
  background:rgba(45,200,110,.14); border:1px solid rgba(45,200,110,.35);
  padding:5px 11px; border-radius:999px;
}
.lang{display:flex; align-items:center; gap:8px}
.lang label{font-size:12.5px; color:#a9c2e6}
.lang select{
  background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.25);
  border-radius:9px; padding:7px 10px; font-size:13px; cursor:pointer;
}
.lang select option{color:#111}

/* ---------- PESTAÑAS ---------- */
/* barra SIN fondo ni línea: los botones parecen flotar sobre el fondo.
   NO es fija: se desplaza con la página (sin sticky). Centrada. */
.tabs{background:transparent; border-bottom:0}
.tabs .wrap{display:flex; gap:8px; padding:12px 0; flex-wrap:wrap; justify-content:center}
/* pestañas con aspecto de BOTON FLOTANTE en gris verdoso (a tono con el teal/verde
   de la interfaz). La activa resalta rellena de teal->verde. */
.tab{
  border:1px solid #cdded6; background:#e6efeb; padding:10px 18px;
  font-size:14.5px; font-weight:600; color:#3b524a; cursor:pointer;
  border-radius:999px; transition:.15s; box-shadow:0 2px 7px rgba(13,27,47,.10);
}
.tab:hover{background:#d6e7df; color:var(--agua); border-color:#b6d2c8;
  box-shadow:0 4px 11px rgba(13,27,47,.14); transform:translateY(-1px)}
.tab.active{
  background:linear-gradient(135deg,var(--agua),var(--verde));
  color:#fff; border-color:transparent; box-shadow:0 4px 12px rgba(14,139,122,.34);
}

/* ---------- CONTENIDO ---------- */
main{max-width:920px; margin:26px auto 60px; padding:0 20px}
.panel{display:none}
.panel.active{display:block; animation:fade .2s}
@keyframes fade{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}
.card{
  background:#fff; border:1px solid var(--linea); border-radius:16px;
  box-shadow:0 8px 30px rgba(20,40,80,.06); padding:24px; margin-bottom:22px;
}
.card h2{margin:0 0 4px; font-size:18px}
.card .sub{color:var(--gris); font-size:14px; margin:0 0 18px}

/* zona de subida */
.drop{
  border:2px dashed #c4d2e6; border-radius:14px; padding:24px 18px; text-align:center;
  background:#f7faff; transition:.15s; cursor:pointer; display:block;
}
.drop:hover{border-color:var(--azul); background:#f0f6ff}
.drop.hasfile{border-color:var(--verde); background:#f0fbf4}
.drop .ic{font-size:32px}
.drop .t{font-weight:600; margin-top:6px}
.drop .s{color:var(--gris); font-size:13px; margin-top:2px}
input[type=file]{display:none}

.row{display:flex; gap:14px; flex-wrap:wrap; margin-top:18px}
.field{flex:1; min-width:180px}
.field label{display:block; font-size:12.5px; color:var(--gris); margin-bottom:5px; font-weight:600}
select.big{
  width:100%; padding:10px 12px; border:1px solid var(--linea); border-radius:10px;
  font-size:14px; background:#fff; color:var(--tinta); cursor:pointer;
}
/* Desplegables de AÑO y MÉTODO (pestañas Unificar y Calcular): rellenos de color y con
   borde marcado para que se vean bien (en blanco se perdían sobre el fondo claro). No
   afecta a los del conversor, que van en .conv-par. */
.row .field label{color:var(--tinta); font-weight:800; font-size:13px}
.row .field select.big{
  background:linear-gradient(135deg,#e8f0fd,#e9f9f0);
  border:2px solid var(--azul); color:var(--tinta); font-weight:700;
}
.row .field select.big:focus{outline:none; border-color:var(--verde);
  box-shadow:0 0 0 3px rgba(45,200,110,.16)}
.actions{display:flex; gap:12px; align-items:center; margin-top:20px; flex-wrap:wrap}
.btn{
  border:0; border-radius:11px; padding:13px 26px; font-size:15px; font-weight:700;
  cursor:pointer; color:#fff; background:linear-gradient(135deg,var(--azul),var(--verde));
  box-shadow:0 6px 16px rgba(56,130,220,.28); transition:.15s;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 9px 20px rgba(56,130,220,.34)}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none; box-shadow:none}
.btn.ghost{background:none; color:var(--azul); box-shadow:none; border:1px solid #cfe0f5}
.btn.ghost:hover{background:#f0f6ff}

.status{display:flex; align-items:center; gap:10px; color:var(--gris); font-size:14px}
.spin{width:16px; height:16px; border:2.5px solid #cfe0f5; border-top-color:var(--azul);
      border-radius:50%; animation:sp 1s linear infinite; flex:none}
@keyframes sp{to{transform:rotate(360deg)}}

.result{
  display:none; background:#0d1b2f; color:#dbe7f5; border-radius:14px; padding:20px;
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  font-size:13px; white-space:pre; overflow-x:auto; line-height:1.55; border:1px solid #1e3350;
}

/* guia / informacion */
.guia p{margin:0 0 12px}
.guia .paso{display:flex; gap:12px; margin-bottom:10px; align-items:flex-start}
.guia .num{background:linear-gradient(135deg,var(--azul),var(--verde)); color:#fff;
  width:26px; height:26px; border-radius:50%; flex:none; display:flex; align-items:center;
  justify-content:center; font-weight:700; font-size:13px}
.nota{background:#f7faff; border-left:3px solid var(--azul); padding:12px 14px; border-radius:8px;
  font-size:13.5px; color:var(--gris); margin-top:14px}

footer{max-width:920px; margin:0 auto 40px; padding:0 20px; color:var(--gris); font-size:13px; text-align:center}
footer b{color:var(--tinta)}
.lock{color:var(--verde)}
.foot-enlaces{display:flex; gap:8px; justify-content:center; align-items:center; margin-bottom:8px}
.foot-enlaces a{color:var(--azul); text-decoration:none; font-weight:600}
.foot-enlaces a:hover{text-decoration:underline}
.foot-enlaces span{color:#b8c4d6}
.foot-linea{margin-bottom:8px}
.foot-descargo{max-width:640px; margin:0 auto; font-size:12px; color:#7a8798; line-height:1.5}
.foot-descargo a{color:var(--azul); text-decoration:none} .foot-descargo a:hover{text-decoration:underline}
/* tarjeta de precio "profesional" (ventana de reserva) */
.precio-card{background:linear-gradient(135deg,#eaf1fd,#e6f9ef); border:2px solid var(--verde);
  border-radius:16px; padding:20px 20px 18px; margin-bottom:18px;
  box-shadow:0 8px 22px rgba(45,200,110,.14)}
.precio-tit{font-size:12.5px; font-weight:800; color:var(--agua); text-transform:uppercase; letter-spacing:.7px}
.precio-num{font-weight:800; color:var(--agua); line-height:1; margin:6px 0 4px}
.precio-num b{font-size:46px}
.precio-tacha{font-size:24px; color:var(--gris); text-decoration:line-through; font-weight:600; margin-right:8px; vertical-align:middle}
.precio-mini{font-size:12px; color:var(--gris); font-weight:600}
.precio-anio{font-size:17px; color:var(--gris); font-weight:700}
.precio-sub{font-size:13.5px; color:#40506a; line-height:1.55; margin-bottom:14px}
.precio-lista{list-style:none; padding:0; margin:0 0 14px; display:flex; flex-direction:column; gap:8px}
.precio-lista li{font-size:14px; color:var(--tinta)}
.precio-nota{font-size:13px; color:#186a3b; background:#eafaf0; border:1px solid #bfe8cf;
  border-radius:10px; padding:11px 13px; font-weight:600}
/* correo de soporte en el pie */
.foot-soporte{max-width:640px; margin:10px auto 0; font-size:12.5px; color:#7a8798; line-height:1.5}
.foot-soporte a{color:var(--azul); text-decoration:none; font-weight:600}
.foot-soporte a:hover{text-decoration:underline}
/* barra de reserva -30% (bajo la cabecera) */
.promo-bar{max-width:920px; margin:14px auto 0; padding:10px 18px; display:flex; align-items:center;
  justify-content:center; gap:14px; flex-wrap:wrap;
  background:linear-gradient(135deg,#eef4ff,#e9f9f0); border:1px solid #cfe0f5; border-radius:12px}
.promo-txt{font-size:13.5px; color:var(--tinta)}
.promo-btn{background:linear-gradient(135deg,var(--azul),var(--verde)); color:#fff; border:0;
  border-radius:9px; padding:8px 16px; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap}
.promo-btn:hover{filter:brightness(1.05)}
/* nota-guía en la tarjeta de Analizar (dirige a Unificar) */
.ana-nota-guia{background:linear-gradient(135deg,#eef8f1,#eaf3fd); border-left:4px solid var(--verde);
  border-radius:10px; padding:12px 14px; margin-top:12px; font-size:14px; line-height:1.55;
  color:#264a36; font-weight:600}
.ana-nota-guia b{color:var(--agua)}

/* botón "Valorar N monedas…" de Unificar: degradado navy → azul → verde (como la cabecera) */
.btn.c0-valorar-cta{background:var(--grad-tri);
  box-shadow:0 10px 24px rgba(56,130,220,.34); font-weight:800; padding:15px 26px; font-size:15.5px}
.btn.c0-valorar-cta:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(45,200,110,.4)}

/* botón "🔮 Valorar automáticamente" dentro de la ventana + su ayuda */
.c0-auto-cta{display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin:8px 0 14px}
.btn.c0-auto-btn{background:linear-gradient(135deg,var(--azul),var(--verde)); color:#fff;
  font-weight:800; font-size:15px; padding:13px 24px; border:0;
  box-shadow:0 8px 20px rgba(45,200,110,.32)}
.btn.c0-auto-btn:hover{transform:translateY(-2px); box-shadow:0 12px 26px rgba(45,200,110,.4)}
.c0-auto-hint{font-size:12.5px; color:#5b6b82; line-height:1.5}

/* botón "Conectar con tu exchange (API)" — arriba a la derecha del recuadro principal.
   Píldora alargada (más larga que alta) con negro fundido en azul (tono cabecera). */
.api-fila{display:flex; justify-content:flex-end; margin:0 0 6px}
.api-col{display:flex; flex-direction:column; align-items:flex-end; gap:5px}
.btn-api-img{border:0; background:none; padding:0; cursor:pointer; line-height:0; transition:.15s;
  filter:drop-shadow(0 5px 14px rgba(0,0,0,.28))}
.btn-api-img:hover{transform:translateY(-2px); filter:drop-shadow(0 9px 20px rgba(214,170,60,.4))}
.btn-api-img img{display:block; width:230px; max-width:62vw; height:auto}
.api-estado{font-size:12px; font-weight:800; color:#c98a1a; letter-spacing:.2px}
/* ventana de resumen del import (texto seleccionable/copiable) */
.api-resumen{background:#f6f9ff; border:1px solid #dfe8f5; border-radius:10px; padding:12px 14px; margin:0 0 12px; user-select:text}
.res-total{font-weight:800; font-size:15px; color:var(--tinta); margin-bottom:6px}
.res-desglose{font-size:13px; color:#40506a; line-height:1.6}
.res-fallos{font-size:12.5px; color:#c0392b; margin-top:8px}
/* banner "en construcción" arriba de la ventana de la API */
/* cartel "en construcción" GRANDE y llamativo, con cono de obras */
.api-mant{display:flex; align-items:center; gap:14px; text-align:left;
  color:#7a5a12; background:#fff6df; border:2px solid #ecc85f; border-left:7px solid #e8a020;
  border-radius:12px; padding:14px 16px; margin:0 0 14px}
.api-mant-ic{font-size:42px; line-height:1; flex:none}
.api-mant-tit{font-weight:900; font-size:20px; letter-spacing:.2px; color:#7a5313; line-height:1.15}
.api-mant-sub{font-size:13.5px; font-weight:600; margin-top:3px; line-height:1.45}
.api-mant-sub b{color:#7a5313}
@media (max-width:560px){ .api-mant-ic{font-size:34px} .api-mant-tit{font-size:18px} }
.btn-api{cursor:pointer; font-weight:800; font-size:13.5px;
  letter-spacing:.3px; padding:8px 22px; border-radius:999px; white-space:nowrap;
  background:linear-gradient(120deg, #0a0c12 0%, #141822 55%, #1c2130 100%);
  color:#e7c15b; border:1px solid rgba(216,179,72,.55);
  text-shadow:0 1px 1px rgba(0,0,0,.4); box-shadow:0 6px 16px rgba(0,0,0,.34); transition:.15s}
.btn-api:hover{transform:translateY(-1px); box-shadow:0 9px 20px rgba(0,0,0,.42); border-color:rgba(216,179,72,.85)}
.api-ayuda{background:#fff8e6; border-left:4px solid #e7c15b; border-radius:9px;
  padding:11px 13px; margin:6px 0 14px; font-size:12.8px; color:#6b5720; line-height:1.55}
.api-csv-aviso{background:#fff8e6; border-left:4px solid #e7c15b; border-radius:9px;
  padding:10px 12px; margin:10px 0 0; font-size:12.6px; color:#6b5720; line-height:1.55}
.api-csv-aviso b{color:#8a6d16}
.api-diag{white-space:pre-wrap; font-size:12.5px; color:#2a3a52; background:#f6f9ff;
  border:1px solid #dfe8f5; border-radius:9px; padding:10px 12px; margin:10px 0 0; min-height:0}
.api-diag:empty{display:none}
/* ventana de añadir pares a mano */
#apiPairsOverlay .legal-head{background:linear-gradient(135deg,#eaf1fd,#e6f9ef); border-bottom:1px solid #d7e6f2}
#apiPairsOverlay .legal-head h3{color:var(--agua)}
.pair-add{display:flex; gap:10px; align-items:center; margin-top:5px}
.pair-add .beta-in{margin-top:0; flex:1; border:2px solid var(--azul); background:#fff; font-weight:600}
.pair-add .beta-in:focus{outline:none; border-color:var(--verde); box-shadow:0 0 0 3px rgba(45,200,110,.16)}
.pair-plus{flex:none; width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  background:linear-gradient(135deg,var(--azul),var(--verde)); color:#fff; font-size:26px; font-weight:800;
  line-height:1; box-shadow:0 6px 16px rgba(45,200,110,.34); transition:.15s}
.pair-plus:hover{transform:translateY(-2px); box-shadow:0 9px 20px rgba(45,200,110,.42)}
.pair-list{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 4px}
.pair-chip{background:#eef4ff; border:1px solid #cfe0f5; color:var(--tinta); border-radius:999px;
  padding:6px 12px; font-size:13px; font-weight:700}
.pair-chip small{font-weight:500; color:#5b6b82}
.pair-ej{display:block; font-size:12.5px; color:#5b6b82; margin-top:4px}
.pair-found{margin:10px 0 4px}
.pair-found-lbl{display:block; font-size:12.8px; font-weight:700; color:#264a36; margin-bottom:6px}
.pair-found-list{display:flex; flex-wrap:wrap; gap:6px; max-height:120px; overflow-y:auto;
  background:#f6fbf7; border:1px solid #d9ecdf; border-radius:9px; padding:9px}
.pair-chip.found{background:#eaf6ee; border-color:#cde8d5; color:#2a4d38; font-weight:600; padding:4px 10px; font-size:12px}
.pair-chip.found b{color:var(--agua); margin-right:2px}

/* botón + ventana "comparte tu CSV (beta)" */
/* botón "instalar app" (PWA): solo aparece cuando el navegador permite instalar.
   Tono navy de la cabecera con letras doradas, para que se distinga del resto. */
.foot-instalar{margin:0 0 16px}
.foot-instalar-btn{display:inline-flex; align-items:center; gap:8px; margin:0 auto;
  background:linear-gradient(135deg,var(--navy),var(--navy2)); border:1px solid #2a4a6b; color:#ffd77a;
  border-radius:12px; padding:13px 26px; font-size:15px; font-weight:800; cursor:pointer;
  box-shadow:0 8px 20px rgba(13,27,47,.3); transition:.15s; letter-spacing:.2px}
.foot-instalar-btn:hover{transform:translateY(-2px); box-shadow:0 12px 26px rgba(13,27,47,.4)}
.foot-instalar-ios{max-width:520px; margin:0 auto; font-size:13.5px; line-height:1.5; color:#33455c;
  background:#f0f6ff; border:1px solid #d3e4fa; border-radius:12px; padding:12px 16px}
/* aviso "✓ Copiado" bajo el resumen del import por API */
.api-copiado{margin-top:8px; font-size:13px; font-weight:700; color:var(--verde); text-align:center}
.foot-beta{margin:0 0 16px}
/* botón "Comparte tu CSV" hecho NATIVO (CSS+SVG, no una imagen): pill oscuro + red dorada
   con estrellas que titilan + texto en oro. Fino de alto y del ancho que gustaba. */
.foot-beta-btn{position:relative; overflow:hidden; display:flex; align-items:center;
  justify-content:center; gap:11px; width:100%; max-width:700px; margin:0 auto; cursor:pointer;
  border:1.5px solid #b28f34; border-radius:12px; padding:8px 28px;
  /* mezcla: azul de la cabecera a un lado -> oscuro-dorado al otro (degradado diagonal) */
  background:linear-gradient(120deg,#123a52 0%,#14110a 62%,#1b150b 100%);
  box-shadow:0 8px 22px rgba(90,120,150,.24), inset 0 0 20px rgba(120,90,10,.26); transition:.15s}
.foot-beta-btn:hover{transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(210,160,35,.42), inset 0 0 24px rgba(150,110,15,.42)}
.fb-net{position:absolute; inset:0; width:100%; height:100%; z-index:1}
.fb-net .fb-lines line{stroke:#d9b24e; stroke-width:.7; opacity:.32}
.fb-net .fb-nodes circle{fill:#ffd977; animation:fbPulse 3s ease-in-out infinite}
.fb-net .fb-stars circle{fill:#ffe6ad; animation:fbStar 2.2s ease-in-out infinite}
.fb-net .fb-stars circle:nth-child(2n){animation-delay:.5s}
.fb-net .fb-stars circle:nth-child(3n){animation-delay:1s}
.fb-net .fb-stars circle:nth-child(4n){animation-delay:1.5s}
.fb-net .fb-stars circle:nth-child(5n){animation-delay:.8s}
@keyframes fbPulse{0%,100%{opacity:.5} 50%{opacity:1}}
@keyframes fbStar{0%,100%{opacity:.15} 50%{opacity:1}}
@media (prefers-reduced-motion:reduce){ .fb-net circle{animation:none} }
.fb-ico{position:relative; z-index:2; font-size:19px; line-height:1;
  filter:drop-shadow(0 0 4px rgba(255,200,60,.45))}
.fb-tx{position:relative; z-index:2; font-weight:800; font-size:15px; letter-spacing:.2px; line-height:1.25;
  background:linear-gradient(180deg,#fff1c2 0%,#e8ba3e 55%,#ffd964 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 1px 3px rgba(120,90,12,.55))}
.beta-body{padding:16px 18px 18px; text-align:left}
.beta-intro{font-size:13.5px; color:#40506a; line-height:1.6; margin:0 0 14px}
.beta-lbl{display:block; font-size:13px; font-weight:600; color:var(--tinta); margin-bottom:12px}
.beta-in{display:block; width:100%; margin-top:5px; padding:9px 11px; border:1px solid var(--linea);
  border-radius:8px; font-size:14px; background:#fff; box-sizing:border-box}
.beta-check{display:flex; gap:8px; align-items:flex-start; font-size:13px; color:var(--tinta);
  line-height:1.5; margin:6px 0 16px; cursor:pointer}
.beta-actions{display:flex; align-items:center; gap:12px}
.beta-msg{font-size:13px; color:var(--verde); font-weight:600}
/* textarea del formulario de soporte */
.beta-area{resize:vertical; min-height:88px; font-family:inherit; line-height:1.5}
/* botón de adjuntar archivo: se ve CLARAMENTE que es un botón (relleno de color) */
.beta-file{padding:8px 10px; cursor:pointer}
.beta-file::file-selector-button{margin-right:12px; padding:9px 16px; border:0; border-radius:8px;
  background:linear-gradient(135deg,var(--azul),var(--verde)); color:#fff; font-weight:700;
  font-size:13.5px; cursor:pointer; box-shadow:0 4px 12px rgba(45,200,110,.28)}
.beta-file::file-selector-button:hover{filter:brightness(1.06)}
/* adjuntar CSV: CAJA-BOTÓN clara (se ve que es clicable, no un texto plano). El input
   nativo se oculta y toda la caja abre el selector; muestra el nombre del archivo. */
.csv-upload{display:flex; align-items:center; gap:12px; flex-wrap:wrap; width:100%; margin:5px 0 4px;
  border:2px dashed var(--azul); background:#f3f8ff; border-radius:12px; padding:12px 14px;
  cursor:pointer; transition:.15s; box-sizing:border-box}
.csv-upload:hover{background:#eaf3ff; border-color:var(--verde); box-shadow:0 4px 14px rgba(56,130,220,.16)}
.csv-upload input[type=file]{display:none}
.csv-upload-btn{display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  background:linear-gradient(135deg,var(--azul),var(--verde)); color:#fff; font-weight:700;
  font-size:13.5px; padding:10px 18px; border-radius:9px; box-shadow:0 4px 12px rgba(45,200,110,.28)}
.csv-upload-name{font-size:13px; color:#5b6b82}
.csv-upload.has-file{border-style:solid; border-color:var(--verde); background:#f0fbf4}
.csv-upload.has-file .csv-upload-name{color:var(--tinta); font-weight:700}
/* aviso visual si intentan enviar sin elegir archivo (compartir CSV) */
.csv-upload.csv-falta{border-color:#e0533f; background:#fdf0ee; animation:csvFalta .4s}
@keyframes csvFalta{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
/* un toque de vida a la ventana de soporte: barra de color arriba + intro en recuadro */
#soporteOverlay .modal{border-top:4px solid var(--azul);
  border-image:linear-gradient(90deg,var(--azul),var(--verde)) 1}
#soporteOverlay .beta-intro{background:linear-gradient(135deg,#eaf1fd,#e6f9ef);
  border:1px solid #cfe6d8; border-radius:12px; padding:13px 15px}
#soporteOverlay .beta-in:focus{outline:none; border-color:var(--verde);
  box-shadow:0 0 0 3px rgba(45,200,110,.15)}
/* lista de puntos amigables (ventana compartir CSV): viñetas "gordas" con emoji */
.beta-puntos{list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:9px}
.beta-puntos li{display:flex; align-items:flex-start; gap:11px; font-size:13.5px; color:#334; line-height:1.5;
  background:#f6faff; border:1px solid #e0ecf9; border-left:4px solid var(--azul);
  border-radius:10px; padding:10px 13px}
.beta-puntos li:nth-child(2){border-left-color:var(--agua); background:#f2fbf6; border-color:#d3ecdd}
.beta-puntos li:nth-child(3){border-left-color:var(--verde); background:#f1fbf4; border-color:#cfeeda}
.beta-puntos .bp-dot{font-size:18px; line-height:1.3; flex:none}
.beta-puntos b{color:var(--tinta)}
/* tarjetas dentro del aviso genérico (mostrarAviso): un recuadro por punto, con color */
.aviso-item{font-size:13.5px; color:#334; line-height:1.5; background:#f6faff;
  border:1px solid #e0ecf9; border-left:4px solid var(--azul); border-radius:10px; padding:10px 13px; margin:0 0 9px}
.aviso-item:last-child{margin-bottom:0}
.aviso-item .aviso-ic{font-weight:800}
.aviso-item.ok{border-left-color:var(--verde); background:#f1fbf4; border-color:#cfeeda}
.aviso-item.warn{border-left-color:#e0a020; background:#fff8ec; border-color:#f0d9a8; color:#7a5a1e}
.aviso-item.next{border-left-color:var(--agua); background:#eefaf8; border-color:#c9ece6}
/* botón coste 0 — RESUELTO: ámbar SUAVE (todo decidido; se ve distinto pero sin chillar) */
.btn.c0-resuelto{background:#fbf1de; border:1px solid #e7cf9e; color:#7a5a1e; font-weight:700}
.btn.c0-resuelto:hover{background:#f7e9cd; border-color:#d9ba7e}
/* enlace "ver aviso legal" en la ventana previa a calcular */
.disc-verlegal{display:inline-block; margin-top:10px; font-size:12.5px; color:var(--azul); text-decoration:none}
.disc-verlegal:hover{text-decoration:underline}
/* tarjetas informativas de texto CORRIDO (emoji dentro del texto, sin columnas) */
.info-card{font-size:13.5px; color:#334; line-height:1.55; background:#f6faff;
  border:1px solid #e0ecf9; border-left:4px solid var(--azul); border-radius:12px;
  padding:12px 15px; margin:0 0 12px}
.info-card:last-of-type{margin-bottom:16px}
.info-card b{color:var(--tinta)}
.info-card.uso{border-left-color:var(--verde); background:#f1fbf4; border-color:#cfeeda}
/* cabecera con gancho de marketing dentro de la ventana de compartir CSV */
.beta-hero{background:linear-gradient(135deg,#eaf1fd,#e6f9ef); border:1px solid #cfe6d8;
  border-radius:14px; padding:16px 18px; margin:0 0 14px; text-align:center}
.beta-hero-badge{display:inline-block; background:linear-gradient(135deg,var(--azul),var(--verde));
  color:#fff; font-weight:800; font-size:12px; letter-spacing:.4px; padding:5px 12px;
  border-radius:999px; margin-bottom:8px}
.beta-hero-tit{margin:4px 0 4px; font-size:18px; color:var(--tinta); line-height:1.3}
.beta-hero-tit b{color:var(--agua)}
.beta-hero-sub{margin:0; font-size:13.5px; color:#4a5b74} .beta-hero-sub b{color:var(--agua)}
/* enlace-botón de soporte en el pie */
/* botón "Escríbenos" = azul oscuro (como la cabecera) con una red neuronal blanca viva */
.foot-soporte-btn{position:relative; overflow:hidden; border:0; color:#fff;
  font-weight:700; font-size:13.5px; padding:9px 16px; border-radius:9px; cursor:pointer;
  transition:.15s; margin-left:4px; background:linear-gradient(135deg,#0d2137,#123a52);
  box-shadow:0 5px 14px rgba(13,33,55,.38)}
.foot-soporte-btn span{position:relative; z-index:2}
.foot-soporte-btn .fs-net{position:absolute; inset:0; width:100%; height:100%; z-index:1; opacity:.55}
.foot-soporte-btn .fs-net line{stroke:#bcdcff; stroke-width:.8; opacity:.45}
.foot-soporte-btn .fs-net circle{fill:#eaf4ff; animation:fsPulse 2.6s ease-in-out infinite}
.foot-soporte-btn .fs-net circle:nth-child(8){animation-delay:.5s}
.foot-soporte-btn .fs-net circle:nth-child(9){animation-delay:1s}
.foot-soporte-btn .fs-net circle:nth-child(10){animation-delay:.3s}
.foot-soporte-btn .fs-net circle:nth-child(11){animation-delay:1.4s}
.foot-soporte-btn .fs-net circle:nth-child(12){animation-delay:.8s}
.foot-soporte-btn .fs-net circle:nth-child(13){animation-delay:1.7s}
.foot-soporte-btn:hover{transform:translateY(-1px); box-shadow:0 8px 18px rgba(13,33,55,.5)}
@keyframes fsPulse{0%,100%{opacity:.35} 50%{opacity:1}}
@media (prefers-reduced-motion:reduce){ .foot-soporte-btn .fs-net circle{animation:none} }
/* ventana de avisos legales */
.legal-modal{max-width:760px; display:flex; flex-direction:column; padding:0}
.legal-head{display:flex; justify-content:space-between; align-items:center;
  padding:20px 24px 14px; border-bottom:1px solid var(--linea)}
.legal-head h3{margin:0}
.legal-close{border:0; background:#f0f3f8; color:var(--gris); width:32px; height:32px;
  border-radius:9px; font-size:15px; cursor:pointer} .legal-close:hover{background:#e5e9f0}
.legal-body{overflow-y:auto; padding:8px 24px 24px}
.legal-sec{padding:16px 0; border-bottom:1px solid #eef2f8; scroll-margin-top:8px}
.legal-sec:last-child{border-bottom:0}
.legal-sec h4{margin:0 0 8px; font-size:15px; color:var(--tinta)}
.legal-sec p{margin:0 0 9px; font-size:13.5px; line-height:1.65; color:#40506a}
.legal-sec p:last-child{margin-bottom:0}
.legal-sec b{color:var(--tinta)}
.legal-fecha{color:var(--gris)}

/* ventana de mapeo (modal) */
.overlay{
  position:fixed; inset:0; background:rgba(13,27,47,.55); z-index:60;
  display:none; align-items:center; justify-content:center; padding:18px;
}
.overlay.show{display:flex; animation:fade .18s}
.modal{
  background:#fff; border-radius:16px; padding:24px; max-width:640px; width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.3); max-height:90vh; overflow-y:auto;
}
/* el mapeador se abre GRANDE: la tabla del CSV necesita sitio para verse bien y no
   obligar a deslizar tanto. Casi toda la pantalla en escritorio. */
.map-modal{max-width:min(1240px, 97vw); max-height:95vh}
/* aviso "mostrando N filas de M" en la pestaña Columnas del CSV */
.ver-aviso{background:#fff8ec; border:1px solid #f0d9a8; color:#7a5a1e; border-radius:9px;
  padding:9px 12px; font-size:12.5px; margin-bottom:10px}
/* capa "cargando" a pantalla completa (archivos grandes: leer / analizar) */
.cargando-overlay{position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center; background:rgba(13,27,47,.42)}
.cargando-overlay.show{display:flex}
.cargando-caja{background:#fff; border-radius:16px; padding:26px 34px; text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.32); display:flex; flex-direction:column;
  align-items:center; gap:15px}
.cargando-rueda{width:46px; height:46px; border:4px solid #e2e8f2;
  border-top-color:var(--azul); border-radius:50%; animation:girar .8s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.cargando-txt{font-size:14px; font-weight:600; color:var(--tinta)}
/* lista de pasos del import (✓ verde al completar) */
.carga-pasos{margin-top:14px; text-align:left; display:inline-block}
.carga-pasos:empty{display:none}
.cpaso{font-size:13px; color:#9aa7b8; padding:2px 0; font-weight:600}
.cpaso .cp-ic{display:inline-block; width:20px; text-align:center}
.cpaso.curr{color:var(--azul)}
.cpaso.done{color:var(--verde)}
/* aviso "puede tardar" durante el import por API (negrita, destacado) */
.carga-aviso{margin-top:14px; max-width:300px; font-size:13px; font-weight:800; line-height:1.5;
  color:#7a5a1e; background:#fff8ec; border:1px solid #f0d9a8; border-radius:10px; padding:10px 12px}
.modal h3{margin:0 0 6px; font-size:18px}
.modal-sub{color:var(--gris); font-size:13.5px; margin:0 0 14px}
.map-guia{
  background:#f0f6ff; border:1px solid #d3e4fa; border-radius:11px;
  padding:13px 15px; font-size:13px; color:#33455c; line-height:1.55; margin-bottom:16px;
}
.map-guia b{color:var(--tinta)}
.map-guia u{text-decoration:none; color:var(--azul); font-weight:600}
.map-row{display:flex; align-items:center; gap:12px; justify-content:space-between;
  padding:8px 12px; border:1px solid var(--linea); border-radius:10px; background:#fafcff}
.map-row .col-info{flex:1; min-width:0}
/* pestaña Columnas como tabla tipo hoja de cálculo: cabecera = nombre + desplegable,
   filas de debajo = ejemplos reales del propio archivo. Con scroll horizontal propio
   para no ensanchar el resto de pestañas cuando hay muchas columnas. */
.map-table-wrap{overflow:auto; max-height:58vh; margin-top:2px; border:1px solid var(--linea); border-radius:10px}
.map-table{border-collapse:collapse; width:100%; font-size:12.5px}
.map-table th{background:#f6f8fb; border-bottom:2px solid var(--linea); border-right:1px solid var(--linea);
  padding:10px 9px; text-align:left; vertical-align:top; min-width:138px}
.map-table th:last-child{border-right:none}
.map-table td{border-bottom:1px solid var(--linea); border-right:1px solid var(--linea); padding:6px 9px;
  color:var(--gris); font-family:"SFMono-Regular",Consolas,monospace; font-size:12px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:200px;
  height:30px; box-sizing:border-box}   /* altura fija: la virtualización cuenta con ella */
.map-table td:last-child{border-right:none}
.map-table tbody tr:last-child td{border-bottom:none}
.map-table tbody tr:nth-child(even){background:#fbfcfe}
.map-table .mt-nm{font-weight:700; font-size:12.5px; color:var(--tinta); margin-bottom:7px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:158px}
.map-table th select{width:100%; padding:7px 8px; border:1px solid var(--linea); border-radius:7px;
  font-size:12px; background:#fff}
.map-table th .col-visto{position:absolute; margin-left:4px; transform:translateY(1px)}
/* cabecera pegajosa: se queda arriba al desplazar todas las filas del CSV */
.map-table th{position:sticky; top:0; z-index:2; padding-right:26px}
/* columna resaltada según el papel elegido */
.map-table th.rol{background:#e7f0fd}
.map-table th.rol-op{background:#e7f7ee}
/* columna de número de fila (1..N): gris, alineada a la derecha, fija a la izquierda */
.map-table th.mt-num, .map-table td.mt-num{background:#eef2f8; color:#8a97a8; text-align:right;
  font-variant-numeric:tabular-nums; min-width:46px; max-width:64px; position:sticky; left:0; z-index:1}
.map-table th.mt-num{z-index:3; font-weight:700}
/* ventana de valorar: bloque separado de los traslados propios */
.c0-sep{margin:14px 0 8px; padding:10px 12px; border-top:2px solid var(--linea);
  background:#fbfdff; border-radius:0 0 8px 8px}
.c0-sep-t{font-weight:800; font-size:12px; letter-spacing:.5px; text-transform:uppercase;
  color:var(--agua); margin-bottom:4px}
.c0-sep-p{font-size:12.5px; color:var(--gris); line-height:1.45}
.c0-mio{display:flex; align-items:center}
.c0-mio label{display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600;
  color:var(--tinta); cursor:pointer; white-space:nowrap}
.c0-motivo{font-size:12px; color:var(--gris); padding:0 0 8px 8px; margin-top:-4px}
.c0-motivo.alerta{color:#b45309; font-weight:600}
.c0-val-tras{width:100%; margin-top:4px}
/* de que archivo es este mapeador */
.map-file{background:var(--fondo); border:1px solid var(--linea); border-radius:8px;
  padding:9px 12px; margin-bottom:12px}
.map-file .mf-et{display:block; font-size:11px; font-weight:800; letter-spacing:.5px;
  text-transform:uppercase; color:var(--gris); margin-bottom:2px}
.map-file .mf-nm{display:block; font-weight:700; color:var(--tinta); font-size:14px;
  word-break:break-all}
.map-file .mf-nm::before{content:"\1F4C4  "}
/* cabecera del mapeador: un titulo centrado ENCIMA de cada columna, separados */
.map-cab{display:flex; align-items:flex-end; gap:12px; justify-content:space-between;
  padding:0 12px 6px; margin:4px 0 8px; border-bottom:2px solid var(--azul)}
.map-cab > span{font-weight:800; font-size:11px; letter-spacing:.4px;
  color:var(--agua); text-transform:uppercase; text-align:center; line-height:1.3}
.map-cab > span:first-child{flex:1; min-width:0}      /* encima de la columna izquierda */
.map-cab .cab-der{width:170px; flex:none}             /* encima del desplegable/recuadro */
/* pestañas del mapeador: ovaladas rellenas, estilo botón */
.map-tabs{display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; align-items:center}
/* cada pestaña YA viene rellena de su color; la activa se AGRANDA para saber dónde estás */
.map-tab{border:0; border-radius:999px; padding:8px 18px; font-size:13px; font-weight:700;
  cursor:pointer; color:#fff; transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  transform:scale(.9); filter:saturate(.75) brightness(1.04); box-shadow:0 2px 6px rgba(13,27,47,.12)}
.map-tab:hover{filter:saturate(.95)}
.map-tab.activa{transform:scale(1.08); filter:none; box-shadow:0 6px 16px rgba(56,130,220,.32); cursor:default}
/* colores fijos de cada pestaña */
.map-tab#tabColumnas{background:linear-gradient(135deg,var(--azul),var(--verde))}
.map-tab.tab-operaciones{background:linear-gradient(135deg,#d97a2b,var(--azul))}
.map-tab.tab-operaciones::before{content:"\1F3F7  "}
.map-tab#c0TabCoste{background:linear-gradient(135deg,var(--azul),var(--verde))}
.map-tab.tab-comis{background:linear-gradient(135deg,#c0578a,var(--azul))}
.map-tab.tab-comis::before{content:"\1F4B8  "}
.map-tab.tab-tras{background:linear-gradient(135deg,#6d43b8,var(--azul))}
.map-tab.tab-monedas{background:linear-gradient(135deg,var(--agua),var(--verde))}
.map-tab.tab-monedas::before{content:"\1FA99  "}
.map-tab.tab-guia{background:linear-gradient(135deg,#7a5cc0,var(--azul))}
.map-tab.tab-guia::before{content:"\1F4D6  "}
.map-tab.tab-incidencias{background:linear-gradient(135deg,#d9822b,#c0392b)}
/* ===== PESTAÑA INCIDENCIAS (resumen con tarjetas) ===== */
.inc-tit{font-size:22px; margin:2px 0 4px}
.inc-card{display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:14px;
  padding:15px 18px; border-radius:14px; margin-bottom:12px; border:1px solid transparent;
  border-left:6px solid #ccc}
/* cada tipo de incidencia con su color de relleno propio */
.inc-card.inc-col{background:#e7f0fd; border-color:#c5dbf7; border-left-color:#1d5fbf}
.inc-card.inc-op{background:#fdeae8; border-color:#f4c9c3; border-left-color:#c0392b}
.inc-card.inc-mon{background:#fff3df; border-color:#f4dcae; border-left-color:#d9822b}
.inc-card.inc-col .inc-card-tit{color:#164a97}
.inc-card.inc-op .inc-card-tit{color:#9e2318}
.inc-card.inc-mon .inc-card-tit{color:#95560c}
.inc-ico{font-size:30px; text-align:center}
.inc-card-tit{font-weight:800; font-size:15.5px}
.inc-card-tx{font-size:13px; color:#4a5a70; margin-top:3px; line-height:1.45}
.inc-btn{border:0; border-radius:10px; padding:10px 16px; font-weight:700; font-size:13.5px;
  color:#fff; cursor:pointer; white-space:nowrap; background:linear-gradient(135deg,var(--azul),var(--verde))}
.inc-btn:hover{filter:brightness(1.05)}
.inc-ok{display:flex; align-items:center; gap:10px; padding:16px 18px; border-radius:14px;
  background:#eafaf0; border:1px solid #bde9cd; color:#0c6b3f; font-size:15px; font-weight:600}
.inc-ok-ic{width:26px; height:26px; border-radius:50%; background:#1f9d55; color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; flex:0 0 auto}
@media (max-width:560px){
  .inc-card{grid-template-columns:36px 1fr; row-gap:8px}
  .inc-card .inc-btn{grid-column:1 / -1}
}
/* contenido de la pestaña guía */
.guia{display:flex; flex-direction:column; gap:2px}
.guia-bloque{padding:13px 0; border-top:1px solid var(--linea)}
.guia-bloque:first-child{border-top:none; padding-top:4px}
.guia-t{font-weight:800; font-size:13px; color:var(--azul); text-transform:uppercase;
  letter-spacing:.4px; margin-bottom:6px}
.guia p{font-size:13.5px; color:#33455c; line-height:1.55; margin:0 0 6px}
.guia p:last-child{margin-bottom:0}
.guia-lista{margin:6px 0; padding-left:0; list-style:none}
.guia-lista li{font-size:13.5px; color:#33455c; line-height:1.5; padding:4px 0 4px 18px; position:relative}
.guia-lista li::before{content:"•"; color:var(--agua); font-weight:800; position:absolute; left:4px}
.guia-nota{background:#fff7ed; border:1px solid #fed7aa; border-radius:9px; padding:9px 12px;
  font-size:12.5px !important; color:#9a3412 !important}
.guia code, .modal code{background:#eef4fb; border:1px solid #d6e3f2; border-radius:4px;
  padding:1px 6px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; color:#0e5aa7}
.map-row .col-nm{font-weight:600; font-size:13.5px; color:var(--tinta); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.map-row .col-ej{font-size:12px; color:var(--gris); font-family:"SFMono-Regular",Consolas,monospace; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.map-row select{width:170px; flex:none; padding:9px 11px; border:1px solid var(--linea);
  border-radius:9px; font-size:13.5px; background:#fff; cursor:pointer}
.modal-actions{display:flex; gap:12px; margin-top:22px}

/* ventana de valorar coste 0 */
.modal-wide{max-width:860px; width:100%; max-height:92vh}
/* recuadro "¿alguna es dinero (estable)?": monedas sin valor con una casilla cada una */
.c0-estables{background:#f0f9f4; border:1px solid #b7e0c9; border-radius:12px;
  padding:13px 15px; margin:10px 0 14px}
.c0-est-t{font-weight:800; font-size:14px; color:#1c6b45; margin-bottom:3px}
.c0-est-sub{font-size:12.5px; color:#3a7a5b; line-height:1.5; margin-bottom:10px}
.c0-est-grid{display:flex; flex-wrap:wrap; gap:8px}
.c0-est-item{display:flex; align-items:center; gap:7px; background:#fff; border:1px solid #cde9d9;
  border-radius:9px; padding:7px 11px; cursor:pointer; user-select:none; transition:.12s}
.c0-est-item:hover{border-color:#12a150}
.c0-est-item.on{background:#e5f7ec; border-color:#12a150}
.c0-est-item input{position:absolute; opacity:0; width:0; height:0}
.c0-est-box{width:18px; height:18px; border:2px solid #b7c9bd; border-radius:5px; flex:none;
  display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; font-weight:900}
.c0-est-item.on .c0-est-box{background:#12a150; border-color:#12a150}
.c0-est-tk{font-weight:700; color:var(--tinta); font-size:13.5px}
.c0-bar{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.c0-bar input{flex:1; padding:9px 12px; border:1px solid var(--linea); border-radius:9px; font-size:14px}
.c0-count{color:var(--gris); font-size:12.5px; white-space:nowrap}
.c0-head{display:grid; grid-template-columns:1.5fr 0.9fr 1fr 1.1fr; gap:8px; font-size:11.5px;
  font-weight:700; color:var(--gris); padding:0 4px 6px; border-bottom:1px solid var(--linea)}
.c0-list{max-height:46vh; overflow-y:auto; margin-top:4px}
.c0-row{display:grid; grid-template-columns:1.5fr 0.9fr 1fr 1.1fr; gap:8px; align-items:center;
  padding:5px 4px; border-bottom:1px solid #f0f4fa}
.c0-row .fecha{color:var(--gris); font-family:monospace; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.c0-row .moneda{font-weight:600; font-size:13px}
.c0-row .cant{color:var(--tinta); font-family:monospace; font-size:11px; overflow:hidden; text-overflow:ellipsis}
.c0-row input{width:100%; padding:6px 8px; border:1px solid var(--linea); border-radius:7px; font-size:12.5px}
/* recuadro multicolor: qué es cada moneda sin valor (dinero/regalo/coste/traspaso) */
.c0-cats{border:1px solid #e3e9f2; border-top:3px solid transparent; border-radius:12px;
  padding:12px 14px; margin-bottom:12px; background:#fbfcfe;
  border-image:linear-gradient(90deg,#1f9d55,#b45309,#1d5fbf,#6d3bd1) 1;
  border-image-slice:1; border-width:1px 1px 1px 1px; border-top-width:3px}
.c0-cat-tabla{display:flex; flex-direction:column; gap:5px; margin-top:10px;
  max-height:280px; overflow-y:auto}
.c0-cat-row{display:grid; grid-template-columns:70px 1fr; gap:8px; align-items:center}
.c0-cat-mon{font-weight:700; font-size:12.5px; color:var(--tinta); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.c0-cat-org{font-weight:600; font-size:10.5px; color:#8493a8}   /* origen (airdrop/depósito…) */
.c0-cat-segs{display:grid; grid-template-columns:repeat(3,1fr); gap:5px}
.c0-seg{padding:5px 4px; border:1px solid var(--linea); border-radius:7px; cursor:pointer;
  font-size:10.5px; font-weight:600; background:#fff; color:#5b6b82; transition:all .12s;
  line-height:1.2; text-align:center; min-height:38px; display:flex; align-items:center;
  justify-content:center}
.c0-seg:hover{border-color:#b9c6db}
.c0-seg.on{color:#fff; border-color:transparent}
.c0-seg-estable.on{background:#1f9d55}
.c0-seg-regalo.on{background:#d68a1a}
.c0-seg-coste.on{background:#1d5fbf}
.c0-seg-traspaso.on{background:#6d3bd1}
.c0-cat-cong{margin-top:10px; padding:8px 10px; border-radius:8px; font-size:12px;
  background:#f2ecfd; color:#5a2fb0; border:1px solid #ddccf7; line-height:1.4}
@media (max-width:560px){
  .c0-cat-segs{grid-template-columns:repeat(3,1fr)}
}
/* casilla 🔁 traspaso por fila (dentro de la celda de valor) */
.c0-wrap-tras{display:flex; align-items:center; gap:6px}
.c0-tras-ck{display:inline-flex; align-items:center; gap:2px; cursor:pointer; flex:0 0 auto;
  padding:3px 5px; border:1px solid var(--linea); border-radius:7px; background:#f7f4fd}
.c0-tras-ck:hover{border-color:#c7b6ec}
.c0-tras-ico{font-size:13px; line-height:1}
.c0-wrap-tras input[type=text]{flex:1 1 auto; min-width:0}
/* nota explicativa del traspaso (arriba de la lista) */
.c0-tras-guia{background:#f5f1fd; border:1px solid #ddccf7; border-radius:10px;
  padding:10px 12px; margin:6px 0 12px; font-size:12.5px; line-height:1.45; color:#4a3a6b}
.c0-tras-guia b{color:#3a2b57}
/* ===== PESTAÑA TRASPASOS ===== */
.tras-hero{display:flex; align-items:center; gap:14px; padding:14px 16px; margin-bottom:14px;
  border-radius:14px; color:#eef2ff; line-height:1.5; font-size:13px;
  background:linear-gradient(120deg,#101a33,#1d2c52 55%,#123f52)}
.tras-hero-tx b{color:#fff}
.tras-net{flex:0 0 auto; width:96px; height:40px; overflow:visible}
.tras-net line{stroke:#6ea8ff; stroke-width:1.4; opacity:.55}
.tras-net circle{fill:#7fd0ff; stroke:#bfe6ff; stroke-width:1.2;
  animation:trasPulse 2.4s ease-in-out infinite}
.tras-net circle:nth-child(7){animation-delay:.3s} .tras-net circle:nth-child(8){animation-delay:.6s}
.tras-net circle:nth-child(9){animation-delay:.9s}
@keyframes trasPulse{0%,100%{opacity:.6} 50%{opacity:1; r:5}}
@media (prefers-reduced-motion:reduce){ .tras-net circle{animation:none} }
.tras-subt{font-weight:700; font-size:13px; color:var(--tinta); margin:14px 2px 8px}
.tras-subt.suelta{color:#9a5b00}
.tras-card{display:grid; grid-template-columns:26px 1fr auto 1fr auto; align-items:center; gap:10px;
  padding:10px 12px; border:1px solid #e3e9f2; border-radius:12px; margin-bottom:8px; background:#fbfcfe}
.tras-num{width:24px; height:24px; border-radius:50%; background:#6d43b8; color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px}
.tras-lado{text-align:center}
.tras-tag{font-size:10.5px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; opacity:.7}
.tras-lado.salida .tras-tag{color:#c0392b} .tras-lado.entrada .tras-tag{color:#1f9d55}
.tras-cant{font-weight:700; font-size:14px; color:var(--tinta)}
.tras-fecha{font-size:11px; color:var(--gris); font-family:monospace}
.tras-flecha{font-size:18px}
.tras-ctrl{display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  color:#5a2fb0; cursor:pointer; white-space:nowrap}
.tras-card.nocuadra{border-color:#f0d488; background:#fffdf6}
.tras-dif{grid-column:1 / -1; background:#fff7e6; border:1px solid #f5d78a; border-radius:8px;
  padding:6px 10px; font-size:11.5px; color:#8a5a00; margin-top:2px}
.tras-vacio{background:#f7f9fc; border:1px dashed #cdd9e6; border-radius:10px; padding:16px;
  text-align:center; color:#5b6b82; font-size:13px}
.tras-suelta{padding:8px 12px; border-left:3px solid #e6b800; background:#fffdf5;
  border-radius:6px; margin-bottom:6px; font-size:12.5px; color:#5b4a1a; line-height:1.4}
@media (max-width:560px){
  .tras-card{grid-template-columns:22px 1fr auto; row-gap:8px}
  .tras-card .tras-ctrl{grid-column:1 / -1; justify-content:center}
}
.c0-motivo.tras{color:#5a2fb0; background:#f5f1fd; border-radius:7px; padding:4px 8px;
  font-size:11.5px; margin:2px 0 6px}
.c0-actions{align-items:center; flex-wrap:wrap; gap:8px}
.c0-actions .btn{padding:10px 16px; font-size:13.5px}
.c0-sep{flex:1}

/* paso siguiente (botón Continuar) */
.siguiente{display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:space-between;
  background:#fff; border:1px solid var(--linea); border-radius:16px; padding:18px 22px; margin-top:22px;
  box-shadow:0 8px 30px rgba(20,40,80,.06)}
.siguiente .sig-txt{color:var(--gris); font-size:14px; flex:1; min-width:200px}
.siguiente .sig-txt b{color:var(--tinta)}

/* aviso (para el impaciente en Calcular) */
.aviso{background:#fff7ed; border:1px solid #fde4c4; border-radius:11px; padding:12px 15px;
  font-size:13.5px; color:#5b4a2f; margin-bottom:18px; line-height:1.55}
.aviso b{color:#9a5b00}
.aviso a{color:var(--azul); font-weight:600; text-decoration:none}
.aviso a:hover{text-decoration:underline}

/* resumen corto de incidencias en Unificar */
.resumen{background:#fff7ed; border:1px solid #fde4c4; border-radius:11px; padding:13px 16px; margin-bottom:18px}
.resumen h4{margin:0 0 8px; font-size:13px; color:#9a5b00; letter-spacing:.4px; font-weight:800}
.resumen ul{margin:0; padding:0; list-style:none; columns:2; column-gap:22px}
.resumen li{font-size:13px; color:#5b4a2f; padding:3px 0 3px 16px; position:relative; break-inside:avoid}
.resumen li::before{content:"•"; position:absolute; left:2px; color:#e08e2b; font-weight:700}
.resumen.ok{background:#f0fbf4; border-color:#cdefd9}
.resumen.ok h4{color:#1f8a4c}
@media (max-width:560px){ .resumen ul{columns:1} }

/* pestaña Unificar */
.minilbl{display:block; font-weight:600; font-size:13px; color:var(--gris); margin-bottom:6px}
.drop.small{padding:16px; }
.drop.small .t{margin-top:0; color:var(--azul)}
#listaExtra{margin-top:10px; display:flex; flex-direction:column; gap:7px}
.extra-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:#f0fbf4; border:1px solid #cdefd9; border-radius:9px; padding:8px 12px; font-size:13.5px;
}
.extra-item .nm{color:var(--tinta); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.extra-item .rm{border:0; background:none; color:#c0392b; cursor:pointer; font-size:16px; font-weight:700; line-height:1; flex:none}
.extra-item .rm:hover{color:#e74c3c}

/* barra de carga global */
#booting{
  position:fixed; inset:0; background:rgba(238,242,248,.94); z-index:50;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:16px;
}
#booting .big{width:44px; height:44px; border:4px solid #cfe0f5; border-top-color:var(--azul);
  border-radius:50%; animation:sp 1s linear infinite}
#booting .t{color:var(--tinta); font-weight:600}
#booting .s{color:var(--gris); font-size:13px}

/* ---- Intro de entrada (destello + moneda de oro, tipo "película") ----
   Va por ENCIMA de todo (z 70, sobre la pantalla de carga z 50). Fondo navy
   igual que la splash nativa de Android → la transición es continua.
   Toda la animación es CSS: la moneda emerge girando de un destello dorado
   con rayos que barren por detrás; luego el conjunto se funde y desaparece.
   Duración total ~1,9 s. Se salta tocando (clase .intro-salta). */
#intro{
  position:fixed; inset:0; z-index:70; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  background:radial-gradient(circle at 50% 44%, #163650 0%, #0d1b2f 55%, #070f1c 100%);
  animation:introOut .5s ease 1.45s forwards;
}
#intro.intro-salta{ animation:introOut .32s ease forwards }

/* destello redondo que crece de detrás de la moneda */
.intro-burst{
  position:absolute; top:44%; left:50%; width:70px; height:70px; margin:-35px 0 0 -35px;
  border-radius:50%; filter:blur(3px);
  background:radial-gradient(circle, rgba(255,224,150,.98) 0%, rgba(255,196,90,.55) 32%, rgba(255,196,90,0) 70%);
  animation:introBurst 1.15s cubic-bezier(.2,.7,.3,1) forwards;
}
/* rayos que giran y barren por detrás (efecto "estreno de película") */
.intro-rays{
  position:absolute; top:44%; left:50%; width:1000px; height:1000px; margin:-500px 0 0 -500px;
  opacity:0; pointer-events:none;
  background:conic-gradient(from 0deg,
     rgba(255,207,120,0) 0deg, rgba(255,207,120,.16) 5deg, rgba(255,207,120,0) 11deg,
     rgba(255,207,120,0) 30deg, rgba(255,207,120,.12) 35deg, rgba(255,207,120,0) 41deg,
     rgba(255,207,120,0) 60deg, rgba(255,207,120,.16) 65deg, rgba(255,207,120,0) 71deg,
     rgba(255,207,120,0) 90deg, rgba(255,207,120,.12) 95deg, rgba(255,207,120,0) 101deg,
     rgba(255,207,120,0) 120deg, rgba(255,207,120,.16) 125deg, rgba(255,207,120,0) 131deg,
     rgba(255,207,120,0) 150deg, rgba(255,207,120,.12) 155deg, rgba(255,207,120,0) 161deg,
     rgba(255,207,120,0) 180deg, rgba(255,207,120,.16) 185deg, rgba(255,207,120,0) 191deg,
     rgba(255,207,120,0) 210deg, rgba(255,207,120,.12) 215deg, rgba(255,207,120,0) 221deg,
     rgba(255,207,120,0) 240deg, rgba(255,207,120,.16) 245deg, rgba(255,207,120,0) 251deg,
     rgba(255,207,120,0) 270deg, rgba(255,207,120,.12) 275deg, rgba(255,207,120,0) 281deg,
     rgba(255,207,120,0) 300deg, rgba(255,207,120,.16) 305deg, rgba(255,207,120,0) 311deg,
     rgba(255,207,120,0) 330deg, rgba(255,207,120,.12) 335deg, rgba(255,207,120,0) 341deg);
  animation:introRays 1.5s ease-out forwards;
}
.intro-coin{
  position:relative; z-index:2; width:150px; height:150px;
  animation:introCoin 1.15s cubic-bezier(.2,.8,.25,1) forwards;
}
.intro-coin img{ width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 0 24px rgba(255,196,90,.6)); }
/* brillo que cruza la moneda una vez ya asentada */
.intro-shine{
  position:absolute; inset:0; border-radius:50%; overflow:hidden; pointer-events:none;
  -webkit-mask:radial-gradient(circle at 50% 50%, #000 62%, transparent 64%);
          mask:radial-gradient(circle at 50% 50%, #000 62%, transparent 64%);
}
.intro-shine::before{
  content:""; position:absolute; top:-40%; left:-60%; width:55%; height:180%;
  transform:rotate(20deg);
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 100%);
  animation:introShine .8s ease-in .75s forwards; opacity:0;
}
.intro-name{
  position:relative; z-index:2; color:#f3d38a; font-weight:800; letter-spacing:.6px;
  font-size:27px; opacity:0; text-shadow:0 0 20px rgba(255,196,90,.45);
  animation:introName .7s ease .55s forwards;
}
@keyframes introBurst{
  0%{ transform:scale(.2); opacity:0 }
  30%{ opacity:1 }
  100%{ transform:scale(10); opacity:0 }
}
@keyframes introRays{
  0%{ opacity:0; transform:rotate(-22deg) scale(.6) }
  28%{ opacity:.85 }
  100%{ opacity:0; transform:rotate(14deg) scale(1.2) }
}
@keyframes introCoin{
  0%{ transform:scale(.25) rotateY(90deg); opacity:0 }
  45%{ opacity:1 }
  62%{ transform:scale(1.14) rotateY(0deg) }
  100%{ transform:scale(1) rotateY(0deg); opacity:1 }
}
@keyframes introShine{
  from{ left:-60%; opacity:.9 }
  to{ left:130%; opacity:0 }
}
@keyframes introName{
  from{ opacity:0; transform:translateY(9px) }
  to{ opacity:1; transform:translateY(0) }
}
@keyframes introOut{ to{ opacity:0; visibility:hidden } }
/* respeto a quien pide menos movimiento: intro cortísima */
@media (prefers-reduced-motion:reduce){
  #intro{ animation:introOut .3s ease .4s forwards }
  .intro-burst,.intro-rays,.intro-coin,.intro-shine::before,.intro-name{ animation-duration:.35s; animation-delay:0s }
}
@media (max-width:600px){
  .intro-coin{ width:120px; height:120px }
  .intro-name{ font-size:23px }
}

/* movil */
@media (max-width:600px){
  .brand h1{font-size:22px}
  .tab{padding:13px 13px; font-size:13.5px}
  .card{padding:18px}
}

/* ---------- MÓVIL / APP: ajustes para pantalla estrecha ----------
   La web es la MISMA que la app del móvil (PWA), así que todo esto también
   mejora la app. No cambia nada en escritorio (solo aplica por debajo de 560px). */
@media (max-width:560px){
  main{padding:0 12px; margin-top:16px}
  .card{padding:15px; border-radius:13px}
  .card h2{font-size:17px}
  /* las PESTAÑAS no caben en una fila estrecha: se deslizan de lado en vez de
     apretarse o desbordar la pantalla */
  .tabs .wrap{overflow-x:auto; flex-wrap:nowrap; justify-content:flex-start;
    -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .tabs .wrap::-webkit-scrollbar{display:none}
  .tab{flex:0 0 auto; padding:12px 14px; font-size:13.5px; white-space:nowrap}
  /* modales casi a pantalla completa, con menos relleno */
  .modal{padding:18px; border-radius:14px}
  .modal-actions{flex-direction:column}
  .modal-actions .btn{width:100%}
  /* dos columnas de comisiones → una sola en móvil */
  .comis-slot{grid-template-columns:1fr}
  /* botón de API: que no se pegue al borde ni se agrande de más */
  .btn-api-img{max-width:100%}
  /* la cabecera anima poco en móvil: ya se apaga el fondo; el destello se queda */
  .topbar{gap:10px}
}

/* mini-mapeador de monedas: pie de guia y codigo inline */
.map-guia-pie{margin-top:14px}
.map-guia code, .modal code{background:#eef4fb; border:1px solid #d6e3f2; border-radius:4px;
  padding:1px 6px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; color:#0e5aa7}

/* input del mini-mapeador de monedas: se ve CLARAMENTE que es editable (borde
   marcado azul, fondo crema, icono de lápiz) para que el usuario no dude de que
   ahí puede escribir el guion. */
#monRows{display:flex; flex-direction:column; gap:10px}
.mon-input{width:190px; flex:none; padding:10px 12px 10px 32px; border:2px solid var(--azul);
  border-radius:8px; font-size:14.5px; font-weight:700; color:var(--tinta); letter-spacing:.5px;
  font-family:"SFMono-Regular",Consolas,monospace; text-align:center; background:#fffdf3;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233882dc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/></svg>");
  background-repeat:no-repeat; background-position:9px center;
  box-shadow:0 1px 3px rgba(56,130,220,.15)}
.mon-input:hover{border-color:#2b6fc0; background-color:#fffbe8}
.mon-input:focus{outline:none; border-color:var(--agua); background-color:#fff;
  box-shadow:0 0 0 3px rgba(14,139,122,.18)}
/* punto naranja: la moneda la ha separado el usuario (decisión suya) */
.mon-punto{flex:none; width:13px; height:13px; border-radius:50%; display:inline-block; background:#e8830c}

/* pestaña monedas cuando no hay nada que corregir */
.mon-vacio{background:#f0f9f4; border:1px dashed #a7d9bf; border-radius:10px;
  padding:14px 16px; font-size:13px; color:#2a6b4f; text-align:center}
/* nota de "todas las filas son X" (auxiliar sin columna de operación) */
.op-fija-nota{background:#fff8ec; border:1px solid #f0d9a8; border-radius:10px;
  padding:12px 14px; font-size:13px; color:#7a5a1e; margin:0 0 14px; line-height:1.5}

/* columna de botones "cómo se lee cada archivo" (uno por csv) */
.map-botones-t{font-size:12.5px; font-weight:700; color:var(--gris); margin-bottom:8px}
.map-botones{display:flex; flex-direction:column; gap:6px}
.map-boton-fila{display:flex; align-items:center; gap:10px}
/* botones de "revisar cómo se lee cada archivo": rellenos azul→verde como el resto
   (para no romper el aspecto del conjunto). El icono (🔍 / ⚠️) y la etiqueta lateral
   distinguen "se lee bien" de "necesita repaso". */
.btn.mapbtn{margin:0; padding:8px 14px; font-size:13px; text-align:left; max-width:340px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:#fff; border:0; box-shadow:0 2px 8px rgba(13,27,47,.16);
  background:linear-gradient(135deg,var(--azul),var(--verde))}
.btn.mapbtn:hover{background:linear-gradient(135deg,var(--azul),var(--verde)); filter:brightness(1.05)}
/* botón ÚNICO "Revisar N traslado detectado…": azul → verde → NARANJA (3 paradas),
   para que resalte como algo especial que el programa ha detectado y quieres mirar. */
.btn.c0-traslado{color:#fff; border:0; box-shadow:0 2px 8px rgba(13,27,47,.16);
  background:linear-gradient(120deg,var(--azul) 0%,var(--verde) 52%,#ef9a3b 100%)}
.btn.c0-traslado:hover{filter:brightness(1.05)}
.mapbtn-et{font-size:12px; color:var(--gris)}

/* línea azul que separa historiales generales de los auxiliares */
.sep-zona{display:flex; align-items:center; gap:12px; margin:22px 0 14px; color:var(--azul)}
.sep-zona::before, .sep-zona::after{content:""; flex:1; height:2px;
  background:linear-gradient(90deg, transparent, var(--azul), transparent)}
.sep-zona span{font-size:12px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; white-space:nowrap}
/* historial general adicional (autoclonado) */
.gen-extra{margin-top:12px}
.gen-extra .drop{margin:0}

/* visto de color junto a cada columna del mapeador */
.col-visto{flex:none; width:22px; text-align:center; font-weight:800; font-size:15px}
.col-visto.ok{color:#12a150}
.col-visto.no{color:#e5484d}
.col-visto.duda{color:#f0a020}
/* punto de estado en las pestañas (verde/ámbar/rojo) */
.map-tab .tab-dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-left:7px; vertical-align:middle}
.tab-dot.ok{background:#4ade80}
.tab-dot.duda{background:#fbbf24}
.tab-dot.no{background:#f87171}

/* barra de plantilla en el panel de comisiones */
.comis-plantilla{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.comis-plantilla .btn{padding:9px 15px; font-size:13px}
/* panel de comisiones (dentro de la ventana de coste 0) */
.c0-actions-bot{margin-top:18px}
.comis-nota{background:#fdf2f8; border:1px solid #f3cfe0; border-radius:10px; padding:12px 14px;
  font-size:13.5px; color:#7a2a54; line-height:1.55; margin-bottom:14px}
.comis-vacio{background:#f6f8fb; border:1px solid var(--linea); border-radius:10px; padding:16px;
  font-size:14px; color:var(--gris); line-height:1.6}
.comis-vacio b{color:var(--tinta)}
.comis-mon{border:1px solid var(--linea); border-radius:11px; padding:13px 15px; margin-bottom:14px; background:#fafcff}
.comis-mon-cab{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:10px}
.comis-mon-nm{font-weight:800; font-size:16px; color:var(--tinta)}
.comis-mon-info{font-size:12.5px; color:var(--gris)}
.comis-gran{display:flex; align-items:center; gap:9px; margin-bottom:12px; flex-wrap:wrap}
.comis-gran label{font-size:13px; color:var(--tinta); font-weight:600}
.comis-gran select{padding:7px 10px; border:1px solid var(--linea); border-radius:8px; font-size:13px}
.comis-slots{display:flex; flex-direction:column; gap:7px}
.comis-slot{display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:center}
.comis-slot .fecha{font-size:13px; color:var(--tinta)}
.comis-slot input{padding:8px 10px; border:1px solid var(--linea); border-radius:8px; font-size:14px; width:100%}
.comis-slot input:focus{outline:none; border-color:#c0578a; box-shadow:0 0 0 3px rgba(192,87,138,.12)}

/* conversor de moneda (bloque colapsable en Unificar) */
.conv-box{margin-top:0; border:0; border-radius:12px; background:transparent; overflow:visible}
/* botón OPCIONAL relleno como los demás, pero con un degradado DISTINTO: azul oscuro (el
   de la cabecera) fundiéndose con un azul claro, para señalar de un vistazo que es opcional
   y no imprescindible (los obligatorios van en azul→verde). */
.conv-sum{cursor:pointer; display:inline-block; padding:13px 24px; font-weight:700; font-size:15px;
  color:#fff; list-style:none; user-select:none; border-radius:11px; transition:.15s;
  background:var(--grad-tri); box-shadow:0 6px 16px rgba(19,40,64,.26)}
.conv-sum:hover{transform:translateY(-1px); box-shadow:0 9px 20px rgba(19,40,64,.32)}
/* botón "rellenar automáticamente" del conversor */
.conv-auto{display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin:12px 0 6px}
.conv-auto-btn{border:0; background:linear-gradient(135deg,var(--azul),var(--verde)); color:#fff;
  font-weight:700; font-size:14px; padding:11px 20px; border-radius:9px; cursor:pointer;
  box-shadow:0 6px 16px rgba(45,200,110,.28); transition:.15s}
.conv-auto-btn:hover{transform:translateY(-1px); box-shadow:0 9px 20px rgba(45,200,110,.36)}
.conv-auto-btn:disabled{opacity:.6; cursor:default; transform:none}
.conv-auto-hint{font-size:12.5px; color:#5b6b82; flex:1 1 180px}
.conv-auto-msg{font-size:13px; color:var(--verde); font-weight:600; flex-basis:100%}
.comis-auto{display:flex; gap:10px 12px; align-items:center; flex-wrap:wrap; margin:2px 0 14px}
.conv-sum::-webkit-details-marker{display:none}
.conv-sum::before{content:"▸ "; color:#cfe0f5; font-weight:800}
details[open] .conv-sum::before{content:"▾ "}
details[open] .conv-sum{border-bottom-left-radius:0; border-bottom-right-radius:0}
.conv-cuerpo{padding:14px 15px 16px; border:1px solid var(--linea); border-top:0;
  border-radius:0 12px 12px 12px; background:#fafcff}
/* barra que separa los apartados de Unificar (mapeador | valorar | tipo de cambio) */
.uni-sep{border:0; border-top:1px solid var(--linea); margin:18px 0}
.conv-nota{font-size:13px; color:#33455c; line-height:1.55; background:#f0f6ff;
  border:1px solid #d3e4fa; border-radius:9px; padding:11px 13px; margin:0 0 14px}
.conv-par{display:flex; align-items:flex-end; gap:10px; margin-bottom:14px}
.conv-par .field{flex:1; min-width:0}
.conv-eq{font-weight:800; color:var(--gris); padding-bottom:11px; white-space:nowrap}
.conv-uno{font-size:19px; font-weight:800; color:var(--tinta); padding-bottom:9px}
.conv-head{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; padding:0 2px 6px;
  font-size:11px; font-weight:800; letter-spacing:.3px; text-transform:uppercase; color:var(--agua)}
.conv-fila{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:8px; align-items:center}
.conv-et{font-weight:700; font-size:13.5px; color:var(--tinta)}
.conv-fecha-fija{color:var(--gris); font-size:13.5px}   /* fecha fija (no editable) */
/* recuadro EDITABLE del tipo de cambio: fondo crema + borde azul marcado para que se
   vea a simple vista que ahí hay que escribir un valor (la fecha de al lado es fija). */
.conv-rate{padding:9px 12px; border:2px solid var(--azul); border-radius:8px; font-size:15px;
  width:100%; background:#fffbea; font-weight:700; color:var(--tinta); text-align:right}
.conv-rate::placeholder{color:#b3bfd0; font-weight:400}
.conv-rate:focus{outline:none; border-color:var(--verde); box-shadow:0 0 0 3px rgba(45,200,110,.18)}
.conv-rate{font-weight:700}
.conv-media{font-size:13px; color:var(--tinta); font-weight:600; margin:6px 2px 12px; min-height:18px}
.conv-media b{color:var(--azul)}
.conv-check{display:block; font-size:13.5px; color:var(--tinta); line-height:1.5; cursor:pointer;
  background:#fff; border:1px solid var(--linea); border-radius:9px; padding:11px 13px}
.conv-check input{margin-right:7px; vertical-align:middle}
.conv-check-nota{display:block; font-size:12px; color:var(--gris); margin-top:3px; margin-left:24px}

/* ventana "Resumen de la unificación" */
.resumen-tit{font-size:19px; font-weight:800; color:var(--tinta); margin:0 0 8px}
.resumen-linea{border:0; border-top:2px solid var(--azul); margin:0 0 14px}
#resumenCuerpo{display:flex; flex-direction:column; gap:14px}
.resumen-bloque-t{font-size:13px; font-weight:800; letter-spacing:.3px; text-transform:uppercase;
  color:var(--agua); margin-bottom:6px}
.resumen-lista{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:5px}
.resumen-lista li{font-size:14px; color:var(--tinta); line-height:1.45; padding-left:20px; position:relative}
.resumen-lista li::before{content:"•"; position:absolute; left:5px; color:var(--gris); font-weight:800}
.resumen-ok{background:#e8f8ef; border:1px solid #b6e6c8; border-radius:10px; padding:12px 14px;
  font-size:14.5px; color:#12683a; font-weight:600; display:flex; align-items:center; gap:9px}
.resumen-ok .ic{font-size:18px}
.resumen-aviso{background:#fff7ed; border:1px solid #fed7aa; border-radius:10px; padding:12px 14px}
.resumen-aviso .resumen-bloque-t{color:#b45309}
.resumen-aviso .resumen-lista li{color:#7a4a12}
.resumen-aviso .resumen-lista li::before{color:#d97a2b}

/* aviso cuando el mapeador aterriza directo en Monedas (saltó solo por esto) */
.mon-aviso-salto{background:#fff7ed; border:1px solid #fed7aa; border-radius:9px;
  padding:10px 13px; font-size:13px; color:#7a4a12; line-height:1.5; margin-bottom:12px}

/* punto de estado junto a cada operación (pestaña Operaciones): verde/ámbar/rojo */
.op-punto{flex:none; width:13px; height:13px; border-radius:50%; display:inline-block}
.op-punto.ok{background:#12a150}
.op-punto.duda{background:#f0a020}
.op-punto.no{background:#e5484d}

/* ===== RESULTADO VISUAL (tarjetas en vez de texto plano) ===== */
.res-wrap{display:flex; flex-direction:column; gap:9px; margin-top:6px}
/* aviso de incidencia (naranja) */
.res-aviso{display:flex; gap:12px; align-items:flex-start; background:#fff7ed;
  border:1px solid #fdba74; border-left:4px solid #f97316; border-radius:12px; padding:14px 16px}
.res-aviso .ic{font-size:22px; line-height:1; flex:none}
.res-aviso .cuerpo{flex:1; min-width:0}
.res-aviso .tit{font-weight:800; color:#9a3412; font-size:14px; margin-bottom:4px}
.res-aviso .txt{color:#7c2d12; font-size:13px; line-height:1.5}
.res-aviso .txt b{color:#9a3412}
/* aviso de éxito (verde) cuando no hay incidencias */
.res-ok{display:flex; gap:12px; align-items:center; background:#f0fdf4;
  border:1px solid #86efac; border-left:4px solid #22c55e; border-radius:12px; padding:12px 16px;
  color:#166534; font-size:13.5px; font-weight:600}
.res-ok .ic{font-size:20px}
/* tarjetas del ANÁLISIS (qué he leído / incidencias) */
.ana-card{background:#fff; border:1px solid var(--linea); border-radius:11px; padding:13px 16px;
  box-shadow:0 1px 2px rgba(13,27,47,.04)}
.ana-card.inc{border:1px solid #f6c99a; border-left:5px solid #f97316; background:#fffdfa;
  box-shadow:0 2px 8px rgba(249,115,22,.12)}
.ana-t{font-weight:800; font-size:14.5px; color:var(--tinta); margin-bottom:7px}
.ana-txt{font-size:13.5px; color:#33455c; line-height:1.55}
.ana-txt b{color:var(--tinta)}
/* botones de la tarjeta de coste 0: rellenar automáticamente / manual */
.ana-btns{display:flex; gap:10px; flex-wrap:wrap; margin-top:13px}
.ana-btn{border:0; border-radius:10px; padding:11px 18px; font-size:14px; font-weight:800; cursor:pointer; transition:.15s}
.ana-btn-auto{color:#fff; background:linear-gradient(135deg,var(--azul),var(--verde)); box-shadow:0 6px 16px rgba(45,200,110,.30)}
.ana-btn-manual{color:var(--azul); background:#fff; border:1px solid #cfe0f5}
.ana-btn:hover{transform:translateY(-1px)}
.ana-btn-manual:hover{background:#f0f6ff}
.ana-auto-prog{display:inline-block; margin-top:13px; font-size:13.5px; color:var(--azul); font-weight:700}
.ana-auto-ok{margin-top:13px; font-size:13.5px; color:#186a3b; font-weight:700}
.ana-auto-warn{margin-top:8px; font-size:13px; color:#9a5b00}
/* tarjeta de incidencia que se puede DESPLEGAR (botón): recuadro más marcado, se
   agranda un poco al pasar el ratón para que se entienda que es pulsable. */
.ana-card.expandible{cursor:pointer; transition:transform .12s ease, box-shadow .12s ease}
.ana-card.expandible:hover{transform:scale(1.015); box-shadow:0 8px 22px rgba(249,115,22,.20)}
.inc-chevron{float:right; color:var(--gris); transition:transform .18s; font-size:13px}
.ana-card.abierta .inc-chevron{transform:rotate(180deg)}
.inc-lineas{display:none; margin-top:11px; padding-top:10px; border-top:1px dashed #e7d4bf}
.ana-card.abierta .inc-lineas{display:block}
.inc-lineas-t{font-size:12px; font-weight:700; color:#8a5a1e; margin-bottom:7px}
.inc-lin-fila{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; padding:4px 0;
  border-bottom:1px solid #f3ece1}
.inc-lin-fila:last-child{border-bottom:0}
.inc-lin-k{font-weight:800; color:var(--tinta); min-width:56px}
/* año(s) de la incidencia: pastilla pequeña para ubicar la fecha de un vistazo */
.inc-lin-y{font-size:11px; font-weight:700; color:#8a5a1e; background:#fbefda;
  border-radius:6px; padding:1px 7px; white-space:nowrap}
.inc-lin-n{font-size:11px; color:var(--gris); white-space:nowrap}
.inc-lin-r{font-family:ui-monospace,Menlo,Consolas,monospace; color:#1f4e8c; font-size:12.5px;
  word-break:break-word; flex:1; min-width:120px}
/* campos de tipo de cambio en la tarjeta de "mezcla de divisas" */
.mezcla-cambios{display:flex; flex-wrap:wrap; gap:10px; margin-top:11px}
.mezcla-cambio{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--tinta);
  background:#fff; border:1px solid #d3e4fa; border-radius:9px; padding:6px 10px}
.mezcla-cambio input{width:74px; padding:4px 7px; border:2px solid var(--azul); border-radius:6px;
  font-size:13px; text-align:right; background:#fffbea; font-weight:700}
.mezcla-cambio input::placeholder{font-weight:400; color:#b3bfd0}
/* un recuadro por BLOQUE de fechas cercanas (mezcla de divisas por fecha) */
.mezcla-grupos{display:flex; flex-direction:column; gap:10px; margin-top:11px}
.mezcla-grupo{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:8px 12px; background:#fff; border:1px solid #d3e4fa; border-radius:10px; padding:9px 12px}
.mg-fecha{font-size:13.5px; color:var(--tinta)}
.mg-n{color:var(--gris); font-size:12.5px; font-weight:400}
.ana-lista{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:5px}
.ana-lista li{font-size:13.5px; color:#33455c; line-height:1.5}
.ana-lista li b{color:var(--tinta)}
.ana-lista li.ana-warn{color:#9a3412; font-weight:600}
/* cuando se analizan VARIOS historiales, cada uno lleva su nombre por título */
.ana-archivo{margin-bottom:20px}
.ana-archivo-tit{display:flex; align-items:center; gap:9px; font-size:15px; color:var(--tinta);
  margin:4px 0 12px; padding-bottom:9px; border-bottom:2px solid var(--linea)}
.ana-archivo-tit b{font-weight:800}
.ana-archivo-tit .ana-doc{font-size:17px}
/* tarjeta de una moneda */
.res-card{background:#fff; border:1px solid var(--linea); border-radius:10px; padding:10px 14px;
  box-shadow:0 1px 2px rgba(13,27,47,.04)}
.res-card-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:7px}
.res-moneda{font-weight:800; font-size:16px; color:var(--tinta); display:flex; align-items:center; gap:8px}
.res-badge{font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px}
.res-badge.gan{background:#dcfce7; color:#15803d}
.res-badge.per{background:#fee2e2; color:#b91c1c}
.res-badge.c0{background:#fef3c7; color:#a16207}
.res-nums{display:flex; gap:14px; flex-wrap:wrap}
.res-num{flex:1; min-width:90px}
.res-num .et{font-size:11px; color:var(--gris); text-transform:uppercase; letter-spacing:.3px; margin-bottom:2px}
.res-num .val{font-size:14px; font-weight:700; color:var(--tinta); font-variant-numeric:tabular-nums}
.res-num .val.gan{color:#15803d}
.res-num .val.per{color:#b91c1c}
/* total destacado */
.res-total{background:linear-gradient(135deg,#0d2137,#123a52); color:#fff; border-radius:14px;
  padding:18px 20px; display:flex; justify-content:space-between; align-items:center}
.res-total.nofiable{background:linear-gradient(135deg,#7c2d12,#9a3412)}
.res-total .et{font-size:12px; opacity:.85; text-transform:uppercase; letter-spacing:.5px}
.res-total .cifra{font-size:26px; font-weight:800; font-variant-numeric:tabular-nums; margin-top:2px}
.res-total .lado{text-align:right; font-size:12px; opacity:.9}
.res-total .lado b{font-size:15px; display:block}
/* --- pestañas Spot / Futuros: cada una con el color de SU tarjeta de resultado --- */
.res-tabs{display:flex; gap:6px; margin:2px 0 12px}
.res-tab{flex:0 0 auto; padding:9px 20px; border:none; border-radius:12px 12px 0 0; cursor:pointer;
  font-weight:700; font-size:14px; transition:filter .15s, background .15s}
/* Spot = azul marino (tinte claro cuando inactiva, sólido cuando activa) */
.res-tab[data-pane="spot"]{background:#cdd9e6; color:#123a52}
.res-tab[data-pane="spot"].activa{background:linear-gradient(135deg,#0d2137,#123a52); color:#fff}
/* Futuros = violeta (igual que su tarjeta de resultado) */
.res-tab[data-pane="fut"]{background:#ded3f0; color:#4c2f7a}
.res-tab[data-pane="fut"].activa{background:linear-gradient(135deg,#6d43b8,#4c2f7a); color:#fff}
/* Airdrops/Regalos = ámbar (igual que su tarjeta) */
.res-tab[data-pane="recep"]{background:#f5e4bf; color:#7c5310}
.res-tab[data-pane="recep"].activa{background:linear-gradient(135deg,#c08a1e,#8a6212); color:#fff}
/* Earn = verde */
.res-tab[data-pane="earn"]{background:#c9e8dd; color:#0e5f52}
.res-tab[data-pane="earn"].activa{background:linear-gradient(135deg,#0e5f52,#0f3d3a); color:#fff}
.res-tab:hover{filter:brightness(.96)}
.res-card{border-left:4px solid #2f6f9f}          /* spot = borde azul */
.res-card.fut{border-left-color:#6d43b8}          /* futuros = borde violeta */
.res-card.recep{border-left-color:#c08a1e}        /* recibido (airdrop/minería) = borde ámbar */
.res-card.earn{border-left-color:#0e5f52}         /* earn/staking = borde verde */
.res-badge.recep{background:#fdecc8; color:#7c5310}
.res-badge.earn{background:#cdeee2; color:#0c4a40}
@media (prefers-color-scheme: dark){ .res-badge.recep{background:#4a3a12; color:#fde8b0} .res-badge.earn{background:#123c34; color:#bfeadd} }
.res-num-uno{grid-column:1 / -1}   /* earn: una sola cifra a lo ancho */
.res-card .res-fut-desg{font-size:12px; opacity:.72; margin-top:8px; border-top:1px solid #eef2f7; padding-top:6px}
.res-card .res-fut-desg.inv{opacity:.9; color:#6d43b8; font-weight:600}   /* inverso: cobro en cripto */
.res-inv-tag{font-size:11px; font-weight:700; color:#6d43b8}              /* etiqueta "· inverso" */
.res-num .val .sindatos{opacity:.55; font-style:italic; font-weight:500; font-size:12px}
.res-fut-aviso{background:#fff7e6; border:1px solid #f5d78a; border-radius:12px; padding:14px 16px;
  color:#7c5310; font-size:13px; margin-bottom:8px}
.res-fut-nota{background:#eef4ff; border-radius:10px; padding:9px 13px; font-size:12.5px;
  color:#33475b; margin-bottom:8px}
.res-fut-nota.inv{background:#fff3d6; color:#7c5310}
/* mini guía amigable (spot vs futuros), aparece con un suave fundido */
.res-guia-fut{display:flex; gap:8px; align-items:center; margin-top:10px; padding:10px 14px;
  background:linear-gradient(90deg,#eef4ff,#f3eefb); border-radius:10px; font-size:13px; color:#3a4a5e;
  animation:guiaFut .5s ease both}
.res-guia-fut .ic{font-size:16px; animation:guiaPulso 2.4s ease-in-out infinite}
@keyframes guiaFut{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@keyframes guiaPulso{0%,100%{transform:scale(1)} 50%{transform:scale(1.18)}}
@media (prefers-reduced-motion: reduce){ .res-guia-fut,.res-guia-fut .ic{animation:none} }
@media (prefers-color-scheme: dark){
  .res-tab[data-pane="spot"]{background:#22303f; color:#cdd8e4}
  .res-tab[data-pane="fut"]{background:#332a4a; color:#d8ccf0}
  .res-card .res-fut-desg{border-top-color:#2a3a4a}
  .res-fut-aviso{background:#3a2f10; border-color:#7c5310; color:#fde8b0}
  .res-guia-fut{background:linear-gradient(90deg,#1a2740,#241a38); color:#c9d4e2}
}
/* --- TRES tarjetas de resultado separadas (spot / earn / futuros) --- */
.res-totales{display:flex; flex-direction:column; gap:10px; margin-bottom:6px}
.res-bloque{border-radius:14px; padding:14px 16px; color:#fff}
.res-bloque .rb-et{font-size:12px; opacity:.9; text-transform:uppercase; letter-spacing:.5px}
.res-bloque .rb-cifra{font-size:26px; font-weight:800; font-variant-numeric:tabular-nums; margin-top:2px}
.res-bloque .rb-cifra-txt{font-size:17px; font-weight:700; margin-top:2px}
.res-bloque .rb-sub{font-size:12px; opacity:.82; margin-top:4px; font-weight:400}
/* (a) spot = azul marino (el principal) */
.res-bloque.spot{background:linear-gradient(135deg,#0d2137,#123a52)}
.res-bloque.spot.nofiable{background:linear-gradient(135deg,#7c2d12,#9a3412)}
/* (b) earn = verde azulado */
.res-bloque.earn{background:linear-gradient(135deg,#0f3d3a,#0e5f52)}
/* airdrop/minería recibidos = ámbar/oro (patrimonial, se suma al spot) */
.res-bloque.recep{background:linear-gradient(135deg,#7a5a12,#9c7415)}
/* (c) futuros = violeta; en ámbar si no se pudo calcular */
.res-bloque.fut{background:linear-gradient(135deg,#3b2a63,#4c2f7a)}
.res-bloque.fut.nofiable{background:linear-gradient(135deg,#7c5310,#a06a12)}
/* nota final */
.res-nota{font-size:12px; color:var(--gris); line-height:1.5; padding:2px 4px}
.res-earn{background:#eff6ff; border:1px solid #bfdbfe; border-radius:10px; padding:10px 14px;
  font-size:13px; color:#1e40af; display:flex; justify-content:space-between}
.res-earn b{font-variant-numeric:tabular-nums}

/* nota que aclara que una X (No usar) puede estar bien */
.nota-x{margin-top:12px; background:#f6f8fb; border:1px solid var(--linea); border-radius:9px;
  padding:10px 13px; font-size:12.5px; color:#4b5b70; line-height:1.5}
.nota-x b{color:var(--tinta)}

/* ===================== GUÍA GENERAL (manual) ===================== */
.gg{max-width:730px; margin:0 auto}
/* cabecera del manual, con una red de fondo (coherente con el fondo animado) */
.gg-hero{position:relative; overflow:hidden; border-radius:18px; padding:34px 28px 30px;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 55%,#124a53 100%);
  color:#fff; margin-bottom:22px; box-shadow:0 10px 30px rgba(13,27,47,.25)}
.gg-hero .gg-red{position:absolute; inset:0; opacity:.5}
.gg-hero h2{margin:0 0 6px; font-size:26px; position:relative}
.gg-hero p{margin:0; color:#bcd3f0; font-size:15px; position:relative; max-width:560px}
/* índice */
.gg-indice{background:#fff; border:1px solid var(--linea); border-radius:14px;
  padding:18px 20px; margin-bottom:26px; scroll-margin-top:70px}
.gg-indice h3{margin:0 0 12px; font-size:14px; text-transform:uppercase; letter-spacing:.5px; color:var(--gris)}
.gg-indice ol{margin:0; padding:0; list-style:none; counter-reset:gi;
  display:grid; grid-template-columns:1fr 1fr; gap:8px 22px}
.gg-indice li{counter-increment:gi}
.gg-indice a{display:flex; gap:9px; align-items:baseline; text-decoration:none;
  color:var(--tinta); font-size:14px; padding:5px 6px; border-radius:8px; transition:.12s}
.gg-indice a:hover{background:#f0f6ff; color:var(--azul)}
.gg-indice a::before{content:counter(gi); flex:none; width:22px; height:22px; border-radius:7px;
  background:linear-gradient(135deg,var(--azul),var(--verde)); color:#fff; font-size:12px;
  font-weight:700; display:flex; align-items:center; justify-content:center}
@media (max-width:620px){ .gg-indice ol{grid-template-columns:1fr} }
/* secciones */
.gg-sec{background:#fff; border:1px solid var(--linea); border-radius:14px;
  padding:22px 24px; margin-bottom:18px; scroll-margin-top:70px}
.gg-sec h3{display:flex; align-items:center; gap:11px; margin:0 0 14px; font-size:19px; color:var(--tinta)}
.gg-sec h3 .n{flex:none; width:30px; height:30px; border-radius:9px; font-size:15px; font-weight:800;
  background:linear-gradient(135deg,var(--azul),var(--verde)); color:#fff;
  display:flex; align-items:center; justify-content:center}
.gg-sec h4{margin:18px 0 7px; font-size:15px; color:var(--tinta)}
.gg-sec p{margin:0 0 11px; font-size:14.5px; line-height:1.65; color:#33455c}
.gg-sec p:last-child{margin-bottom:0}
.gg-sec b{color:var(--tinta)}
.gg-sec code{background:#eef3fb; color:#1f4e8c; padding:1px 6px; border-radius:5px;
  font-size:13px; font-family:ui-monospace,Menlo,Consolas,monospace}
.gg-lista{margin:0 0 11px; padding-left:20px; display:flex; flex-direction:column; gap:7px}
.gg-lista li{font-size:14.5px; line-height:1.6; color:#33455c}
/* recuadros de aviso/consejo/regla */
.gg-callout{border-radius:11px; padding:13px 15px; font-size:13.5px; line-height:1.6;
  margin:14px 0; display:flex; gap:11px}
.gg-callout .ic{flex:none; font-size:18px; line-height:1.3}
.gg-callout.nota{background:#f0f6ff; border:1px solid #d3e4fa; color:#274b78}
.gg-callout.clave{background:#f0fbf4; border:1px solid #b7e6cd; color:#1c6b45}
.gg-callout.warn{background:#fff8ec; border:1px solid #f0d9a8; color:#7a5a1e}
.gg-callout b{color:inherit}
/* pastillas de color (verde/ámbar/rojo) para explicar los vistos */
.gg-pill{display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px;
  font-weight:700; color:#fff}
.gg-pill.v{background:#12a150} .gg-pill.a{background:#f0a020} .gg-pill.r{background:#e5484d}
/* croquis (dibujos SVG) */
.gg-croquis{margin:16px 0; padding:16px; background:#f7faff; border:1px solid #e6eef8;
  border-radius:12px; text-align:center}
.gg-croquis svg{max-width:100%; height:auto}
.gg-croquis .pie{margin:9px 0 0; font-size:12.5px; color:var(--gris)}
/* botón volver arriba al final de cada sección */
.gg-top{display:inline-block; margin-top:4px; font-size:12.5px; color:var(--azul);
  text-decoration:none} .gg-top:hover{text-decoration:underline}