/* ============================================================
   style.css — reglas compartidas por TODAS las páginas del portal
   de cliente (echameunamano.legal/portal/...).

   Solo debe llevar aquí lo que es exactamente igual en todas las
   páginas: variables de color/tipografía, reset básico, y los
   componentes de interfaz más comunes (botones, icono del carrito,
   etiquetas de campo). Lo que sea propio de una sola página (sus
   tarjetas, sus modales concretos, su barra superior si difiere en
   algún detalle) se queda en el <style> de esa página.

   Cada página debe enlazarlo en el <head>, ANTES de su propio
   <style>, así:
     <link rel="stylesheet" href="/style.css?v=1">

   Cuando cambies este archivo, sube la versión del "?v=1" a "?v=2",
   etc. en todas las páginas que lo enlazan — si no, los navegadores
   pueden seguir usando la copia vieja que tengan en caché.
   ============================================================ */

:root{
  --color-bg:#f4f3ef; --color-surface:#eae8e1; --color-text:#16202b;
  --color-accent:#e8871e; --color-accent-100:#fdf1e2; --color-accent-300:#f6c288;
  --color-accent-700:#99530c; --color-accent-800:#6d3a08;
  --n100:#f7f6f3; --n200:#e9e7e1; --n300:#d3d0c8; --n500:#8d8880; --n600:#6d6862; --n700:#4f4b47;
  --radius-sm:2px; --radius-md:3px; --radius-lg:4px;
  --rojo:#a8321f; --verde:#1f7a45;
  --font-heading:"Figtree",system-ui,sans-serif;
  --font-body:"Figtree",system-ui,sans-serif;
  --edge:clamp(18px,5vw,60px);
  --shadow-sm:0 1px 2px color-mix(in srgb,#16202b 10%,transparent);
  --shadow-md:0 3px 10px color-mix(in srgb,#16202b 12%,transparent);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
h1,h2,h3{font-family:var(--font-heading);font-weight:700;margin:0;line-height:1.15}
.oculto{display:none !important}

/* Icono global del carrito, compartido en las páginas del cliente */
.logo{flex:none;width:34px;height:34px;border-radius:50%;display:block}
.icono-carrito{position:relative;flex:none;width:38px;height:38px;border-radius:var(--radius-md);
  background:var(--color-accent);display:flex;align-items:center;justify-content:center;
  text-decoration:none}
.icono-carrito:hover{filter:brightness(.95)}
.icono-carrito svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.badge-carrito{position:absolute;top:-7px;right:-7px;background:var(--color-text);color:#fff;
  font-size:12px;font-weight:700;border-radius:999px;min-width:17px;height:17px;
  border:2px solid var(--color-bg);
  display:flex;align-items:center;justify-content:center;padding:0 3px;font-family:var(--font-body)}

/* Tira flotante "X trámites en el carrito" — se muestra en cualquier
   página del portal de cliente salvo en el propio carrito y en la
   pasarela de pago (ahí ya se está viendo el carrito). */
.barra-carrito{position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--color-text);color:#fff;text-decoration:none;display:block;
  box-shadow:0 -4px 18px rgba(0,0,0,.18)}
.barra-carrito-in{max-width:900px;margin:0 auto;padding:14px var(--edge);
  display:flex;align-items:center;justify-content:space-between;gap:14px}
.barra-carrito-txt{font-size:17px;color:#fff}
.barra-carrito-txt b{font-family:var(--font-body);font-weight:700;font-size:17px;display:block;color:var(--color-accent);letter-spacing:.01em}
.barra-carrito-flecha{flex:none;font-size:17px;font-weight:600;color:#fff;
  display:flex;align-items:center;gap:6px}

/* Botones */
.btn-primary{background:var(--color-accent);color:#fff}
.btn-ghost{background:transparent;color:var(--color-text);border-color:var(--n300)}

.field label{display:block;font-size:17px;margin-bottom:6px;color:var(--n700);font-weight:700}

@keyframes btn-spinner-girar{to{transform:rotate(360deg)}}