/* =====================================================================
   FixinLink · sistema de diseño
   La paleta sale del logo, muestreada pixel a pixel: el ángulo rojo
   (#E62B0D), la sonrisa que va de ámbar (#FFC005) a naranja (#FC8200)
   y el negro cálido del nombre (#1C1C1A). Los neutros son cálidos para
   acompañar, no grises azulados.

   REGLA DE CONTRASTE, no romperla:
     · rojo  -> siempre con texto BLANCO  (--marca-fuerte con blanco = 5.0:1)
     · ámbar y naranja -> siempre con texto TINTA (6.9:1 y 10.6:1)
     · el rojo como TEXTO sobre blanco va en --marca-2 (5.9:1)
   El rojo de la marca y el rojo de alerta son distintos a propósito:
   la marca es vivo (#E62B0D) y la alerta es profundo (#B3261E).
   Móvil primero; escritorio amplía.
   ===================================================================== */
:root {
  /* --- marca, del logo --- */
  --marca: #E62B0D;       --marca-2: #C41F06;     --marca-3: #9C1604;
  --marca-fuerte: #D9240B;                        --marca-suave: #FFEDE8;
  --naranja: #FC8200;     --naranja-2: #E06E00;   --naranja-suave: #FFF1DF;
  --ambar: #FFC005;       --ambar-2: #E0A600;     --ambar-suave: #FFF6DC;
  --tinta: #1C1C1A;       --tinta-2: #343431;
  /* --- estados, separados de la marca --- */
  --amarillo: #FFC005;    --amarillo-suave: #FFF6DC;
  --rojo: #B3261E;        --rojo-suave: #FBEAE9;
  --verde: #0E9F6E;       --verde-2: #0A7E57;     --verde-suave: #E3F7EF;
  --azul: #2E6FA7;        --azul-suave: #E8F1F8;
  /* --- neutros cálidos --- */
  --fondo: #FAF8F6;       --superficie: #FFFFFF;  --superficie-2: #FDFAF7;
  --texto: #1C1C1A;       --texto-2: #6B625B;     --texto-3: #988D85;
  --linea: #EDE7E1;       --linea-2: #DBD2CA;
  --sombra: 0 6px 24px rgba(74, 30, 12, .10);
  --sombra-2: 0 14px 40px rgba(74, 30, 12, .16);
  --radio: 18px;          --radio-s: 12px;        --radio-xs: 8px;
  /* La rampa del logo: ámbar -> naranja -> rojo */
  --grad: linear-gradient(135deg, var(--ambar) 0%, var(--naranja) 48%, var(--marca) 100%);
  /* Para botones y fondos que llevan texto blanco: arranca más oscuro */
  /* Verificado: el punto mas claro (#E02A0C) con texto blanco da 4,66:1 */
  --grad-cta: linear-gradient(135deg, #E02A0C 0%, #C41F06 52%, #A81605 100%);
  --grad-tinta: linear-gradient(160deg, #1C1C1A 0%, #3A2118 55%, #C41F06 135%);
  --fuente: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --nav-alto: 64px;       --bottom-alto: 66px;
  --bs-body-font-family: var(--fuente);
  --bs-body-color: var(--texto);
  --bs-body-bg: var(--fondo);
  --bs-primary: var(--marca);
  --bs-primary-rgb: 230, 43, 13;
  --bs-link-color: var(--marca-2);
  --bs-link-color-rgb: 196, 31, 6;
  --bs-link-hover-color-rgb: 156, 22, 4;
  --bs-link-hover-color: var(--marca-3);
  --bs-border-color: var(--linea);
  --bs-border-radius: var(--radio-s);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #17120F; --superficie: #211A16; --superficie-2: #2A211C;
    --texto: #F7F1EC; --texto-2: #C2B5AC; --texto-3: #998D85;
    --linea: #362C26; --linea-2: #483B33;
    /* En oscuro el rojo puro vibra sobre el fondo: se aclara un punto */
    --marca: #FF5A36; --marca-2: #FF7A5C; --marca-fuerte: #E6350F;
    --marca-suave: #3A1B13; --naranja-suave: #3A2810; --ambar-suave: #3A3010;
    --rojo: #E8574E; --rojo-suave: #3B1A18; --verde-suave: #10352A; --azul-suave: #152836;
    --sombra: 0 6px 24px rgba(0,0,0,.45); --sombra-2: 0 14px 40px rgba(0,0,0,.6);
    --grad-tinta: linear-gradient(160deg, #211A16 0%, #46241A 55%, #E6350F 140%);
    --bs-body-bg: var(--fondo); --bs-body-color: var(--texto); --bs-border-color: var(--linea);
    --bs-link-color: var(--marca-2);
    --bs-link-color-rgb: 255, 122, 92;
    --bs-link-hover-color-rgb: 255, 90, 54; --bs-link-hover-color: var(--marca);
    color-scheme: dark;
  }
}

* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { font-family: var(--fuente); background: var(--fondo); color: var(--texto); min-height: 100dvh; -webkit-font-smoothing: antialiased; }
body.app { padding-bottom: calc(var(--bottom-alto) + env(safe-area-inset-bottom)); }
@media (min-width: 992px) { body.app { padding-bottom: 0; padding-left: 250px; } }
h1, h2, h3, h4, h5, h6 { font-weight: 800; letter-spacing: -.01em; color: var(--texto); }
a { text-decoration: none; }
small, .small { color: var(--texto-2); }
.material-symbols-rounded { font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; vertical-align: middle; line-height: 1; }
.material-symbols-rounded.fill { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.ms-sm { font-size: 18px; } .ms-lg { font-size: 32px; } .ms-xl { font-size: 44px; }
.texto-2 { color: var(--texto-2) !important; } .texto-3 { color: var(--texto-3) !important; }
.texto-marca { color: var(--marca) !important; } .texto-ambar { color: var(--ambar) !important; } .texto-verde { color: var(--verde-2) !important; } .texto-rojo { color: var(--rojo) !important; } .texto-naranja { color: var(--naranja) !important; } .texto-tinta { color: var(--tinta) !important; }
.fw-7 { font-weight: 700; } .fw-8 { font-weight: 800; }
.grad-texto { background: linear-gradient(135deg, var(--naranja-2) 0%, var(--marca) 55%, var(--marca-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- botones ---------- */
.btn { border-radius: 999px; font-weight: 700; padding: .62rem 1.25rem; transition: transform .15s, box-shadow .15s, background .15s; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--grad-cta); border: 0; color: #fff; box-shadow: 0 8px 20px rgba(230,43,13,.30); }
.btn-primary:hover, .btn-primary:focus { background: var(--grad-cta); color: #fff; box-shadow: 0 10px 26px rgba(196,31,6,.38); transform: translateY(-1px); }
.btn-tinta { background: var(--tinta); color: #fff; border: 0; } .btn-tinta:hover { background: var(--tinta-2); color: #fff; }
.btn-marca { background: var(--marca-fuerte); color: #fff; border: 0; } .btn-marca:hover { background: var(--marca-2); color: #fff; }
.btn-ambar { background: var(--ambar); color: var(--tinta); border: 0; } .btn-ambar:hover { background: var(--ambar-2); color: var(--tinta); }
.btn-verde { background: var(--verde); color: #063B2D; border: 0; } .btn-verde:hover { background: var(--verde-2); color: #fff; }
.btn-naranja { background: var(--naranja); color: #fff; border: 0; } .btn-naranja:hover { background: #E8551F; color: #fff; }
.btn-rojo { background: var(--rojo); color: #fff; border: 0; } .btn-rojo:hover { background: #B51F1F; color: #fff; }
.btn-suave { background: var(--marca-suave); color: var(--marca-2); border: 0; } .btn-suave:hover { background: #FFDED3; color: var(--tinta); }
.btn-outline-primary { border: 2px solid var(--marca); color: var(--marca-2); background: transparent; } .btn-outline-primary:hover { background: var(--marca); color: #fff; border-color: var(--marca); }
.btn-outline-secondary { border: 1.5px solid var(--linea-2); color: var(--texto-2); background: var(--superficie); } .btn-outline-secondary:hover { background: var(--superficie-2); color: var(--texto); border-color: var(--texto-3); }
.btn-light { background: var(--superficie); color: var(--texto); border: 1px solid var(--linea); }
.btn-sm { padding: .4rem .9rem; font-size: .85rem; } .btn-lg { padding: .85rem 1.6rem; font-size: 1.05rem; }
.btn-icono { width: 42px; height: 42px; padding: 0; border-radius: 50%; }
.btn .material-symbols-rounded { font-size: 20px; }
.btn-whatsapp { background: #25D366; color: #fff; border: 0; } .btn-whatsapp:hover { background: #1DB954; color: #fff; }
.btn-block { width: 100%; }

/* ---------- tarjetas ---------- */
.tarjeta { background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.1rem 1.15rem; border: 1px solid transparent; }
.tarjeta-borde { background: var(--superficie); border-radius: var(--radio); border: 1px solid var(--linea); padding: 1.1rem 1.15rem; }
.tarjeta-suave { background: var(--superficie-2); border-radius: var(--radio); padding: 1rem; border: 1px dashed var(--linea-2); }
.tarjeta-grad { background: var(--grad-tinta); color: #fff; border-radius: var(--radio); padding: 1.25rem; position: relative; overflow: hidden; }
.tarjeta-grad::after { content: ''; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.08); }
.tarjeta-grad h1, .tarjeta-grad h2, .tarjeta-grad h3, .tarjeta-grad h4, .tarjeta-grad h5 { color: #fff; }
.tarjeta-click { cursor: pointer; transition: transform .15s, box-shadow .15s; } .tarjeta-click:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.card { border: 0; border-radius: var(--radio); box-shadow: var(--sombra); background: var(--superficie); }

/* ---------- pastillas / badges ---------- */
.badge { font-weight: 700; border-radius: 999px; padding: .38em .75em; font-size: .74rem; letter-spacing: .01em; }
.badge-info { background: var(--marca-suave); color: var(--marca-2); }
.badge-warning { background: var(--amarillo-suave); color: #8A6100; }
.badge-naranja { background: var(--naranja-suave); color: #C24A1A; }
.badge-success { background: var(--verde-suave); color: #047A5B; }
.badge-danger { background: var(--rojo-suave); color: var(--rojo); }
.badge-secondary { background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--linea); }
.badge-ambar { background: var(--ambar-suave); color: var(--ambar-2); }
.badge-tinta { background: var(--tinta); color: #fff; }
.punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); margin-right: 4px; }
.punto.off { background: var(--texto-3); }

/* ---------- formularios ---------- */
.form-label { font-weight: 700; font-size: .86rem; color: var(--texto-2); margin-bottom: .35rem; }
.form-control, .form-select { border-radius: var(--radio-s); border: 1.5px solid var(--linea); padding: .72rem .95rem; font-size: 1rem; background: var(--superficie); color: var(--texto); min-height: 48px; }
.form-control:focus, .form-select:focus { border-color: var(--marca); box-shadow: 0 0 0 4px rgba(230,43,13,.16); background: var(--superficie); color: var(--texto); }
.form-control::placeholder { color: var(--texto-3); }
.form-control.is-invalid { border-color: var(--rojo); }
.input-group .form-control { min-height: 48px; }
.input-group-text { border-radius: var(--radio-s); border: 1.5px solid var(--linea); background: var(--superficie-2); color: var(--texto-2); font-weight: 600; }
.form-text { color: var(--texto-3); }
.form-check-input { width: 1.25em; height: 1.25em; border: 1.5px solid var(--linea-2); }
.form-check-input:checked { background-color: var(--marca); border-color: var(--marca); }
.form-switch .form-check-input { width: 2.6em; height: 1.45em; }
.pin-input { letter-spacing: .5em; font-size: 1.5rem; text-align: center; font-weight: 800; max-width: 220px; }
.campo-ojo { position: relative; } .campo-ojo .ojo { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--texto-3); cursor: pointer; }
textarea.form-control { min-height: 100px; }
.form-control-sm { min-height: 38px; padding: .4rem .7rem; }

/* ---------- navegación pública ---------- */
.nav-publica { background: rgba(255,255,255,.86); backdrop-filter: saturate(180%) blur(14px); position: sticky; top: 0; z-index: 1020; border-bottom: 1px solid rgba(227,232,242,.6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav-publica { background: rgba(23,18,15,.88); } }
.nav-publica .container { height: var(--nav-alto); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.logo-marca { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; color: var(--tinta); font-size: 1.15rem; }
.logo-marca img { height: 40px; width: auto; }

/* ---------- portada ---------- */
.hero { background: var(--grad-tinta); color: #fff; padding: 56px 0 72px; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; width: 520px; height: 520px; right: -200px; top: -220px; border-radius: 50%; background: radial-gradient(circle, rgba(255,192,5,.48), transparent 65%); }
.hero::after { content: ''; position: absolute; width: 420px; height: 420px; left: -180px; bottom: -220px; border-radius: 50%; background: radial-gradient(circle, rgba(230,43,13,.42), transparent 65%); }
.hero .container { position: relative; z-index: 1; }
.hero h1 { color: #fff; font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.08; letter-spacing: -.02em; }
.hero p.lead { color: rgba(255,255,255,.82); font-size: clamp(1rem, 2.2vw, 1.25rem); }
.hero .logo-hero { height: 92px; width: auto; filter: drop-shadow(0 12px 28px rgba(0,0,0,.45)); }
/* OJO: el hero pinta todo de blanco, y una tarjeta adentro queda blanca sobre
   blanca: el texto desaparece. Pasó en /para-ferreterias/ y /para-profesionales/.
   La segunda línea es para los títulos con clase .h1..h6 de Bootstrap, que
   heredan el color en vez de tomarlo de la regla de los encabezados. */
.hero .tarjeta { color: var(--texto); --bs-heading-color: var(--texto); }
.hero .tarjeta .texto-2, .hero .tarjeta .texto-3 { color: var(--texto-2); }
.hero-cta .btn { padding: .95rem 1.7rem; font-size: 1.05rem; }
.hero-cta .btn-light { background: #fff; color: var(--tinta); border: 0; }
.hero-chip { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: .35rem .85rem; font-size: .82rem; font-weight: 700; }
.seccion { padding: 56px 0; }
.seccion-titulo { font-size: clamp(1.5rem, 3.6vw, 2.2rem); margin-bottom: .35rem; }
.seccion-sub { color: var(--texto-2); font-size: 1.05rem; max-width: 640px; }
.paso { text-align: center; padding: 1.4rem 1rem; }
.paso .num { width: 52px; height: 52px; border-radius: 16px; background: var(--grad-cta); color: #fff; font-weight: 800; font-size: 1.25rem; display: inline-flex; align-items: center; justify-content: center; margin-bottom: .9rem; box-shadow: 0 8px 20px rgba(230,43,13,.32); }
.grilla-rubros { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.rubro-chip { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem .75rem; text-align: center; color: var(--texto); transition: all .15s; display: block; }
.rubro-chip:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: transparent; color: var(--texto); }
.rubro-chip .ic { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: .55rem; }
.rubro-chip .ic .material-symbols-rounded { font-size: 26px; }
.rubro-chip .nom { font-weight: 700; font-size: .86rem; line-height: 1.2; display: block; }
.testimonio { background: var(--superficie); border-radius: var(--radio); padding: 1.3rem; box-shadow: var(--sombra); height: 100%; }
.pie { background: var(--tinta); color: rgba(255,255,255,.8); padding: 40px 0 28px; }
.pie a { color: rgba(255,255,255,.85); } .pie a:hover { color: #fff; }
.pie .logo-marca { color: #fff; } .pie .logo-marca img { height: 36px; }
.cta-banda { background: var(--grad-cta); color: #fff; border-radius: var(--radio); padding: 1.8rem; }

/* ---------- app: barra superior, lateral, inferior ---------- */
.app-top { position: sticky; top: 0; z-index: 1020; height: var(--nav-alto); background: var(--superficie); border-bottom: 1px solid var(--linea); display: flex; align-items: center; padding: 0 1rem; gap: .75rem; }
@media (min-width: 992px) { .app-top { left: 250px; } }
.app-top .titulo { font-weight: 800; font-size: 1.1rem; flex: 1; min-width: 60px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .app-top { gap: .35rem; padding: 0 .6rem; } .app-top .titulo { font-size: .95rem; } .app-top .btn-icono { width: 36px; height: 36px; } .app-top .dropdown .btn { padding: .3rem .6rem; } }
.app-top .btn-icono { background: transparent; color: var(--texto-2); position: relative; }
.app-top .btn-icono:hover { background: var(--superficie-2); color: var(--texto); }
.contador { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--rojo); color: #fff; font-size: .68rem; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 5px; border: 2px solid var(--superficie); }
.contador:empty, .contador[data-n="0"] { display: none; }
.app-lateral { display: none; }
@media (min-width: 992px) {
  .app-lateral { display: flex; flex-direction: column; position: fixed; left: 0; top: 0; bottom: 0; width: 250px; background: var(--superficie); border-right: 1px solid var(--linea); padding: 1.1rem .85rem; z-index: 1030; overflow-y: auto; }
}
.app-lateral .logo-marca { padding: .25rem .5rem 1.1rem; }
.app-lateral .item { display: flex; align-items: center; gap: .7rem; padding: .7rem .85rem; border-radius: var(--radio-s); color: var(--texto-2); font-weight: 600; margin-bottom: .15rem; position: relative; }
.app-lateral .item:hover { background: var(--superficie-2); color: var(--texto); }
.app-lateral .item.activo { background: var(--marca-suave); color: var(--marca-2); }
.app-lateral .item .n { margin-left: auto; background: var(--rojo); color: #fff; font-size: .7rem; border-radius: 999px; padding: .15rem .5rem; font-weight: 800; }
.app-lateral .separador { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); padding: .9rem .85rem .3rem; font-weight: 700; }
.app-lateral .usuario { margin-top: auto; padding: .75rem .5rem 0; border-top: 1px solid var(--linea); display: flex; align-items: center; gap: .6rem; }
.app-inferior { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--bottom-alto) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--superficie); border-top: 1px solid var(--linea); display: flex; justify-content: space-around; z-index: 1030; box-shadow: 0 -6px 20px rgba(74,30,12,.08); }
@media (min-width: 992px) { .app-inferior { display: none; } }
.app-inferior a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--texto-3); font-size: .68rem; font-weight: 700; position: relative; padding-top: 6px; }
.app-inferior a .material-symbols-rounded { font-size: 26px; transition: transform .15s; }
.app-inferior a.activo { color: var(--marca); } .app-inferior a.activo .material-symbols-rounded { font-variation-settings: 'FILL' 1, 'wght' 500; transform: translateY(-2px); }
.app-inferior a .contador { top: 2px; right: calc(50% - 22px); }
.app-inferior .central { margin-top: -26px; }
.app-inferior .central span.btn-mas { width: 56px; height: 56px; border-radius: 50%; background: var(--grad-cta); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(230,43,13,.40); border: 4px solid var(--superficie); }
.app-inferior .central span.btn-mas .material-symbols-rounded { font-size: 30px; }
.app-contenido { padding: 1rem; max-width: 1180px; margin: 0 auto; }
@media (min-width: 768px) { .app-contenido { padding: 1.5rem 2rem; } }
.fab { position: fixed; right: 18px; bottom: calc(var(--bottom-alto) + 18px + env(safe-area-inset-bottom)); width: 58px; height: 58px; border-radius: 50%; background: var(--grad-cta); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 28px rgba(230,43,13,.40); z-index: 1025; }
@media (min-width: 992px) { .fab { bottom: 28px; right: 28px; } }
.fab .material-symbols-rounded { font-size: 30px; }
.fab-ayuda { right: 18px; bottom: calc(var(--bottom-alto) + 86px + env(safe-area-inset-bottom)); width: 48px; height: 48px; background: var(--tinta); box-shadow: 0 10px 24px rgba(74,30,12,.38); }
@media (min-width: 992px) { .fab-ayuda { bottom: 100px; right: 32px; } }
body.sin-fab .fab-ayuda { bottom: calc(var(--bottom-alto) + 18px + env(safe-area-inset-bottom)); }
@media (min-width: 992px) { body.sin-fab .fab-ayuda { bottom: 28px; } }

/* ---------- componentes de listas ---------- */
.lista-item { display: flex; gap: .85rem; padding: .95rem 0; border-bottom: 1px solid var(--linea); align-items: flex-start; }
.lista-item:last-child { border-bottom: 0; }
.avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; }
.avatar-ini { background: var(--grad-cta); color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; }
.avatar-lg { width: 72px; height: 72px; font-size: 1.5rem; } .avatar-sm { width: 30px; height: 30px; font-size: .75rem; }
.kpi { background: var(--superficie); border-radius: var(--radio); padding: 1rem 1.1rem; box-shadow: var(--sombra); position: relative; overflow: hidden; }
.kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--marca); }
.kpi.ambar::before { background: var(--ambar); } .kpi.verde::before { background: var(--verde); } .kpi.naranja::before { background: var(--naranja); } .kpi.amarillo::before { background: var(--amarillo); } .kpi.rojo::before { background: var(--rojo); }
.kpi .valor { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.kpi .etiqueta { color: var(--texto-2); font-size: .82rem; font-weight: 600; }
.kpi .material-symbols-rounded { position: absolute; right: 12px; top: 12px; color: var(--linea-2); font-size: 34px; }
.tabs-pill { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; }
.tabs-pill::-webkit-scrollbar { display: none; }
.tabs-pill a, .tabs-pill button { white-space: nowrap; border-radius: 999px; padding: .45rem .95rem; font-weight: 700; font-size: .86rem; color: var(--texto-2); background: var(--superficie); border: 1px solid var(--linea); }
.tabs-pill a.activo, .tabs-pill button.activo { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.vacio { text-align: center; padding: 2.5rem 1rem; color: var(--texto-2); }
.vacio .material-symbols-rounded { font-size: 56px; color: var(--linea-2); display: block; margin-bottom: .6rem; }
.estrellas .estrella { color: var(--linea-2); font-size: 18px; } .estrellas .estrella.llena { color: #F5B301; font-variation-settings: 'FILL' 1; }
.estrellas-input { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.estrellas-input input { display: none; }
.estrellas-input label { cursor: pointer; font-size: 36px; color: var(--linea-2); }
.estrellas-input input:checked ~ label, .estrellas-input label:hover, .estrellas-input label:hover ~ label { color: #F5B301; font-variation-settings: 'FILL' 1; }
.linea-tiempo { position: relative; padding-left: 1.6rem; }
.linea-tiempo::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--linea); }
.linea-tiempo .evento { position: relative; padding-bottom: .9rem; }
.linea-tiempo .evento::before { content: ''; position: absolute; left: -1.6rem; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--superficie); border: 3px solid var(--marca); }
.linea-tiempo .evento.ok::before { border-color: var(--verde); background: var(--verde); }
.contador-tiempo { font-variant-numeric: tabular-nums; font-weight: 800; }
.miniaturas { display: flex; gap: .5rem; flex-wrap: wrap; }
.miniaturas .mini { width: 84px; height: 84px; border-radius: var(--radio-s); overflow: hidden; background: var(--superficie-2); position: relative; border: 1px solid var(--linea); }
.miniaturas .mini img, .miniaturas .mini video { width: 100%; height: 100%; object-fit: cover; }
.miniaturas .mini .quitar { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; border: 0; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.miniaturas .mini .progreso { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.4); }
.miniaturas .mini .progreso i { display: block; height: 100%; background: var(--verde); width: 0; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }
.galeria a, .galeria .item { aspect-ratio: 1; border-radius: var(--radio-s); overflow: hidden; background: var(--superficie-2); display: block; }
.galeria img, .galeria video { width: 100%; height: 100%; object-fit: cover; }
.chip { display: inline-flex; align-items: center; gap: .3rem; background: var(--superficie-2); border: 1px solid var(--linea); border-radius: 999px; padding: .3rem .7rem; font-size: .8rem; font-weight: 600; color: var(--texto-2); }
.chip .material-symbols-rounded { font-size: 16px; }
.chip-sel { cursor: pointer; user-select: none; }
.chip-sel.activo, .chip input:checked + span { background: var(--marca-suave); color: var(--marca-2); border-color: var(--marca); }
.precio { font-weight: 800; font-size: 1.25rem; letter-spacing: -.01em; }
.comision { color: var(--verde-2); font-weight: 800; }
.tabla { width: 100%; font-size: .92rem; }
.tabla th { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); font-weight: 700; padding: .55rem .6rem; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabla td { padding: .7rem .6rem; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.stock-ok { color: var(--verde-2); font-weight: 700; } .stock-bajo { color: var(--naranja); font-weight: 700; } .stock-cero { color: var(--rojo); font-weight: 700; }

/* ---------- mapa ---------- */
.fx-mapa { width: 100%; height: 300px; border-radius: var(--radio); background: var(--superficie-2); overflow: hidden; border: 1px solid var(--linea); }
.fx-mapa.alto { height: 420px; } .fx-mapa.bajo { height: 200px; }
@media (min-width: 768px) { .fx-mapa { height: 380px; } .fx-mapa.alto { height: 520px; } }
.mapa-herramientas { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.gm-style .gm-style-iw-c { border-radius: 14px; padding: 12px 14px; font-family: var(--fuente); }
.gm-style .gm-style-iw-d { overflow: hidden !important; }
.info-mapa { min-width: 180px; font-size: .9rem; } .info-mapa b { display: block; margin-bottom: 2px; }

/* ---------- chat ---------- */
.chat { display: flex; flex-direction: column; height: calc(100dvh - var(--nav-alto) - var(--bottom-alto) - 2rem); min-height: 420px; background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
@media (min-width: 992px) { .chat { height: calc(100dvh - var(--nav-alto) - 3rem); } }
.chat-cab { padding: .8rem 1rem; border-bottom: 1px solid var(--linea); display: flex; align-items: center; gap: .7rem; }
.chat-cuerpo { flex: 1; overflow-y: auto; padding: 1rem; background: var(--fondo); display: flex; flex-direction: column; gap: .5rem; }
.burbuja { max-width: 82%; padding: .6rem .85rem; border-radius: 16px; font-size: .95rem; line-height: 1.4; position: relative; word-wrap: break-word; }
.burbuja.mia { align-self: flex-end; background: var(--marca); color: #fff; border-bottom-right-radius: 4px; }
.burbuja.otro { align-self: flex-start; background: var(--superficie); border-bottom-left-radius: 4px; box-shadow: 0 2px 6px rgba(74,30,12,.08); }
.burbuja.sistema { align-self: center; background: var(--amarillo-suave); color: #6A4A00; font-size: .82rem; border-radius: 999px; padding: .35rem .9rem; text-align: center; max-width: 95%; }
.burbuja.ia { align-self: flex-start; background: var(--ambar-suave); border-bottom-left-radius: 4px; }
.burbuja .meta { display: block; font-size: .7rem; opacity: .7; margin-top: 3px; text-align: right; }
.burbuja .meta .wa-tic { margin-left: 4px; } .wa-tic .material-symbols-rounded { font-size: 16px; } .wa-tic-leido { color: #34B7F1; } .wa-tic-mal { color: var(--rojo); } .wa-tic-espera { opacity: .6; }
.burbuja img { max-width: 100%; border-radius: 10px; display: block; }
.chat-pie { padding: .6rem .8rem; border-top: 1px solid var(--linea); display: flex; gap: .5rem; align-items: flex-end; background: var(--superficie); }
.chat-pie textarea { flex: 1; resize: none; min-height: 46px; max-height: 120px; border-radius: 22px; padding: .7rem 1rem; }
.chat-pie .btn-icono { flex: none; }
.chat-widget { position: fixed; right: 14px; bottom: calc(var(--bottom-alto) + 14px + env(safe-area-inset-bottom)); width: min(400px, calc(100vw - 28px)); height: min(560px, calc(100dvh - var(--nav-alto) - var(--bottom-alto) - 40px)); z-index: 1040; display: none; }
@media (min-width: 992px) { .chat-widget { bottom: 24px; right: 24px; } }
.chat-widget.abierto { display: block; }
.chat-widget .chat { height: 100%; min-height: 0; box-shadow: var(--sombra-2); }

/* ---------- modales, toasts, hoja inferior ---------- */
.modal-content { border: 0; border-radius: var(--radio); box-shadow: var(--sombra-2); background: var(--superficie); color: var(--texto); }
.modal-header { border-bottom: 1px solid var(--linea); padding: 1rem 1.25rem; }
.modal-header .modal-title { font-weight: 800; }
.modal-body { padding: 1.25rem; }
.modal-footer { border-top: 1px solid var(--linea); }
@media (max-width: 575.98px) {
  .modal-dialog { margin: 0; position: fixed; bottom: 0; left: 0; right: 0; max-width: 100%; }
  .modal.fade .modal-dialog { transform: translateY(40px); } .modal.show .modal-dialog { transform: none; }
  .modal-content { border-radius: 22px 22px 0 0; max-height: 92dvh; overflow-y: auto; }
  .modal-content::before { content: ''; display: block; width: 40px; height: 4px; background: var(--linea-2); border-radius: 2px; margin: 10px auto -6px; }
}
.modal-backdrop { background: rgba(40,20,10,.55); backdrop-filter: blur(2px); }
.toasts { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 2000; display: flex; flex-direction: column; gap: .5rem; width: min(440px, calc(100vw - 24px)); pointer-events: none; }
.toast-fx { pointer-events: auto; background: var(--tinta); color: #fff; border-radius: 14px; padding: .8rem 1rem; display: flex; align-items: center; gap: .6rem; box-shadow: var(--sombra-2); animation: toast-in .25s ease; font-weight: 600; font-size: .92rem; }
.toast-fx.exito { background: #0B6E55; } .toast-fx.error { background: var(--rojo); } .toast-fx.aviso { background: #9A6B00; }
.toast-fx .material-symbols-rounded { font-size: 22px; flex: none; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.cargando { position: relative; pointer-events: none; opacity: .65; }
.cargando::after { content: ''; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; border: 3px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: girar .7s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.esqueleto { background: linear-gradient(90deg, var(--superficie-2) 25%, var(--linea) 50%, var(--superficie-2) 75%); background-size: 200% 100%; animation: brillo 1.3s infinite; border-radius: var(--radio-s); min-height: 1em; }
@keyframes brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.pwa-banner { position: fixed; left: 12px; right: 12px; bottom: calc(var(--bottom-alto) + 12px + env(safe-area-inset-bottom)); z-index: 1035; background: var(--tinta); color: #fff; border-radius: var(--radio); padding: .9rem 1rem; display: none; gap: .8rem; align-items: center; box-shadow: var(--sombra-2); }
.pwa-banner.ver { display: flex; }
.pwa-banner img { width: 44px; height: 44px; border-radius: 12px; background: #fff; }
.pwa-banner .cerrar { background: transparent; border: 0; color: rgba(255,255,255,.7); }
@media (min-width: 992px) { .pwa-banner { left: auto; right: 24px; bottom: 24px; width: 380px; } }
.alerta { border-radius: var(--radio-s); padding: .85rem 1rem; display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; }
.alerta .material-symbols-rounded { flex: none; font-size: 22px; }
.alerta-info { background: var(--azul-suave); color: #1D4F78; } .alerta-ok { background: var(--verde-suave); color: #06513D; } .alerta-aviso { background: var(--amarillo-suave); color: #6A4A00; } .alerta-error { background: var(--rojo-suave); color: #8C1A1A; } .alerta-ambar { background: var(--ambar-suave); color: #6A4A00; }
.banner-beneficio { background: linear-gradient(135deg, var(--ambar), var(--naranja)); color: var(--tinta); border-radius: var(--radio); padding: 1rem 1.1rem; display: flex; gap: .8rem; align-items: center; }
.banner-beneficio .material-symbols-rounded { font-size: 36px; }
.progreso-paso { display: flex; gap: .4rem; margin-bottom: 1rem; }
.progreso-paso i { flex: 1; height: 5px; border-radius: 3px; background: var(--linea); } .progreso-paso i.ok { background: var(--grad); }
.acceso-caja { max-width: 440px; margin: 0 auto; }
.rol-tarjeta { border: 2px solid var(--linea); border-radius: var(--radio); padding: 1rem; display: flex; gap: .8rem; align-items: center; cursor: pointer; background: var(--superficie); transition: all .15s; }
.rol-tarjeta:hover { border-color: var(--marca); } .rol-tarjeta.activo { border-color: var(--marca); background: var(--marca-suave); }
.rol-tarjeta .ic { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.separador-o { display: flex; align-items: center; gap: .8rem; color: var(--texto-3); font-size: .85rem; margin: 1rem 0; } .separador-o::before, .separador-o::after { content: ''; flex: 1; height: 1px; background: var(--linea); }
.imprimir-solo { display: none; }
@media print {
  body { background: #fff; padding: 0 !important; } .app-top, .app-lateral, .app-inferior, .fab, .fab-ayuda, .no-imprimir, .pwa-banner, .toasts { display: none !important; }
  .imprimir-solo { display: block; } .tarjeta { box-shadow: none; border: 1px solid #ddd; }
}
::selection { background: rgba(255,192,5,.35); }

/* ---------- páginas públicas de contenido (SEO) ---------- */
.saltar { position: absolute; left: -9999px; top: 0; background: var(--tinta); color: #fff; padding: .7rem 1.2rem; border-radius: 0 0 12px 0; z-index: 2000; font-weight: 700; }
.saltar:focus { left: 0; color: #fff; }
.menu-publico { gap: 1.1rem; align-items: center; }
.menu-publico a { color: var(--texto-2); font-weight: 600; font-size: .94rem; position: relative; padding: .3rem 0; }
.menu-publico a:hover { color: var(--marca-2); }
.menu-publico a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--grad); border-radius: 2px; transition: right .2s; }
.menu-publico a:hover::after { right: 0; }
.migas { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .84rem; color: var(--texto-3); padding: .9rem 0 0; }
.migas a { color: var(--texto-2); }
.migas a:hover { color: var(--marca-2); }
.migas .sep { color: var(--linea-2); }
.migas [aria-current] { color: var(--texto); font-weight: 600; }
.acordeon-faq { display: grid; gap: .6rem; }
.faq-item { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.faq-item summary { list-style: none; cursor: pointer; padding: 1rem 1.15rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { font-size: 1.02rem; margin: 0; font-weight: 700; }
.faq-item summary .flecha { color: var(--texto-3); transition: transform .2s; flex: none; }
.faq-item[open] summary .flecha { transform: rotate(180deg); }
.faq-item[open] summary { border-bottom: 1px solid var(--linea); }
.faq-cuerpo { padding: 1rem 1.15rem; color: var(--texto-2); }
.faq-cuerpo p { margin: 0; line-height: 1.6; }
a.chip { color: var(--texto-2); transition: all .15s; }
a.chip:hover { background: var(--marca-suave); border-color: var(--marca); color: var(--marca-2); }
.seccion h2.seccion-titulo { scroll-margin-top: 80px; }

/* ---------- logo según el tema ----------
   El nombre del logo es negro: sobre fondo oscuro hay que servir la versión
   blanca. Las dos van en el HTML y acá se elige. */
.fx-logo { display: inline-flex; align-items: center; line-height: 0; }
.fx-logo img { width: auto; }
.fx-logo-oscuro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fx-logo-claro  { display: none; }
  :root:not([data-theme="light"]) .fx-logo-oscuro { display: inline-block; }
}
:root[data-theme="dark"] .fx-logo-claro  { display: none; }
:root[data-theme="dark"] .fx-logo-oscuro { display: inline-block; }

/* ---------- comercios en el mapa ---------- */
.info-comercio { min-width: 208px; max-width: 262px; font-size: .86rem; }
.info-comercio .cab { display: flex; gap: .55rem; align-items: center; margin-bottom: .5rem; }
.info-comercio .cab .ic { width: 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.info-comercio .cab b { display: block; line-height: 1.2; color: var(--texto); }
.info-comercio .cab small { color: var(--texto-2); font-size: .76rem; }
.info-comercio .dato { display: flex; gap: .35rem; align-items: flex-start; color: var(--texto-2); margin-bottom: .22rem; line-height: 1.35; }
.info-comercio .dato a { color: var(--marca-2); font-weight: 600; }
.info-comercio .acciones { display: flex; gap: .4rem; margin: .6rem 0 .45rem; flex-wrap: wrap; }
.info-comercio .acciones .btn { padding: .34rem .7rem; font-size: .78rem; }
.info-comercio .pie-info { border-top: 1px solid var(--linea); padding-top: .45rem; font-size: .72rem; color: var(--texto-3); line-height: 1.35; }
.info-comercio .pie-info a { color: var(--marca-2); font-weight: 700; }
.info-comercio .pie-info .fuente { display: block; margin-top: .25rem; font-size: .66rem; color: var(--texto-3); }

/* chips para filtrar el mapa por rubro */
.filtro-rubros { display: flex; gap: .4rem; overflow-x: auto; padding: .1rem .1rem .45rem; scrollbar-width: thin; }
.filtro-rubros::-webkit-scrollbar { height: 4px; }
.filtro-rubros::-webkit-scrollbar-thumb { background: var(--linea-2); border-radius: 4px; }
.chip-rubro { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; flex: none;
  background: var(--superficie); border: 1px solid var(--linea); color: var(--texto-2);
  border-radius: 999px; padding: .28rem .65rem; font-size: .76rem; font-weight: 600; transition: all .14s; }
.chip-rubro .material-symbols-rounded { font-size: 17px; color: var(--c); }
.chip-rubro b { color: var(--texto-3); font-weight: 700; }
.chip-rubro:hover { border-color: var(--c); color: var(--texto); }
.chip-rubro.activo { background: var(--c); border-color: var(--c); color: #fff; }
.chip-rubro.activo .material-symbols-rounded, .chip-rubro.activo b { color: #fff; }
.atribucion-mapa { font-size: .68rem; color: var(--texto-3); }
.info-comercio.es-google .pie-info .fuente { color: var(--texto-3); font-style: italic; }

/* ---------- globo de la PORTADA: invita a registrarse ----------
   Jerarquía a propósito: banda oscura con el logo arriba, la ficha en claro
   en el medio y UN solo botón rojo abajo. El rojo aparece una sola vez en
   toda la tarjeta, así el ojo va directo a "Ver los datos".

   Esta ficha va a sangre, sin el relleno del globo de Google. Si el navegador
   no entiende :has(), la banda queda adentro con sus esquinas redondeadas y
   se ve igual de bien: solo pierde el sangrado. */
.gm-style .gm-style-iw-c:has(.info-invita) { padding: 0; }
.gm-style .gm-style-iw-c:has(.info-invita) button.gm-ui-hover-effect > span { background-color: #fff !important; }
.gm-style .gm-style-iw-c:has(.info-invita) button.gm-ui-hover-effect > img { filter: brightness(0) invert(1) !important; }

.info-invita { width: 262px; max-width: 76vw; font-size: .86rem; border-radius: 13px; overflow: hidden; }
/* El logo va acostado al lado del lema: parado se achica tanto que no se lee.
   El lema deja libre la derecha, que es donde Google pone la cruz de cerrar. */
.info-invita .marca-info { position: relative; display: flex; align-items: center; gap: .55rem;
  background: var(--grad-tinta); padding: .5rem .8rem .55rem; }
.info-invita .marca-info::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--grad); }
.info-invita .marca-info img { display: block; height: 34px; width: auto; flex: none; }
.info-invita .marca-info span { font-size: .66rem; font-weight: 600; line-height: 1.25; padding-right: 22px; color: rgba(255, 255, 255, .78); }

.info-invita .cuerpo-info { padding: .62rem .8rem .68rem; background: var(--superficie); }
.info-invita .cab { display: flex; gap: .55rem; align-items: center; margin-bottom: .4rem; }
.info-invita .cab .ic { width: 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.info-invita .cab b { display: block; line-height: 1.2; color: var(--texto); }
.info-invita .cab small { color: var(--texto-2); font-size: .76rem; }
.info-invita .dato { display: flex; gap: .35rem; align-items: flex-start; color: var(--texto-2); margin-bottom: .22rem; line-height: 1.35; font-size: .8rem; }

/* Lo que falta, a la vista pero tapado: el teléfono se muestra empezado. */
.info-invita .cerrado { margin: .5rem 0; padding: .45rem .6rem .5rem; border-radius: 11px;
  background: var(--marca-suave); border: 1px solid color-mix(in srgb, var(--marca) 22%, transparent); }
.info-invita .cerrado .tit { display: flex; align-items: center; gap: .25rem; margin-bottom: .35rem;
  font-size: .67rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--marca-2); }
.info-invita .cerrado .tit .material-symbols-rounded { font-size: 15px; }
.info-invita .cerrado ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .22rem; }
.info-invita .cerrado li { display: flex; align-items: center; gap: .4rem; font-size: .79rem; line-height: 1.25; color: var(--texto); }
.info-invita .cerrado li .material-symbols-rounded { color: var(--marca); flex: none; }
.info-invita .cerrado li b { font-weight: 800; letter-spacing: .055em; }

.info-invita .cta-info { display: flex; align-items: center; gap: .5rem; padding: .52rem .7rem; border-radius: 12px;
  background: var(--grad-cta); color: #fff; text-decoration: none; box-shadow: 0 6px 16px rgba(196, 31, 6, .28);
  transition: transform .14s ease, box-shadow .14s ease; }
.info-invita .cta-info .txt { flex: 1; min-width: 0; }
.info-invita .cta-info .t { display: block; font-weight: 800; font-size: .9rem; line-height: 1.15; }
.info-invita .cta-info .s { display: block; font-size: .69rem; line-height: 1.25; color: rgba(255, 255, 255, .85); }
.info-invita .cta-info .flecha { font-size: 20px; flex: none; transition: transform .14s ease; }
.info-invita .cta-info:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 9px 22px rgba(196, 31, 6, .34); }
.info-invita .cta-info:hover .flecha { transform: translateX(3px); }
.info-invita .ya-info { margin-top: .4rem; text-align: center; font-size: .74rem; color: var(--texto-2); }
.info-invita .ya-info a { color: var(--marca-2); font-weight: 700; }
.info-invita .pie-info { padding: .4rem .8rem .5rem; background: var(--superficie-2); border-top: 1px solid var(--linea);
  font-size: .7rem; color: var(--texto-3); line-height: 1.35; }
.info-invita .pie-info a { color: var(--texto-2); font-weight: 700; }
.info-invita .pie-info .fuente { display: block; margin-top: .2rem; font-size: .64rem; }
@media (prefers-reduced-motion: reduce) {
  .info-invita .cta-info, .info-invita .cta-info .flecha { transition: none; }
  .info-invita .cta-info:hover { transform: none; }
  .info-invita .cta-info:hover .flecha { transform: none; }
}

/* El globo de Google es blanco fijo: en modo oscuro hay que pintarlo, o el
   texto de la ficha (que sí sigue al tema) queda claro sobre blanco. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gm-style .gm-style-iw-c,
  :root:not([data-theme="light"]) .gm-style .gm-style-iw-d { background: var(--superficie); }
  :root:not([data-theme="light"]) .gm-style .gm-style-iw-t::after { background: linear-gradient(45deg, var(--superficie) 50%, rgba(0, 0, 0, 0) 51%); }
  :root:not([data-theme="light"]) .gm-style .gm-style-iw-c button.gm-ui-hover-effect > span { background-color: var(--texto-2); }
}
:root[data-theme="dark"] .gm-style .gm-style-iw-c,
:root[data-theme="dark"] .gm-style .gm-style-iw-d { background: var(--superficie); }
:root[data-theme="dark"] .gm-style .gm-style-iw-t::after { background: linear-gradient(45deg, var(--superficie) 50%, rgba(0, 0, 0, 0) 51%); }
:root[data-theme="dark"] .gm-style .gm-style-iw-c button.gm-ui-hover-effect > span { background-color: var(--texto-2); }

/* ---------- eliminar la cuenta ----------
   Discreta hasta que se abre: no es algo que uno quiera tocar sin querer.
   El rojo de alerta, no el de la marca: acá no es «acción principal». */
.zona-baja { border: 1px solid var(--rojo-suave); background: transparent; }
.zona-baja > .btn { color: var(--rojo); }
.zona-baja > .btn:hover { background: var(--rojo-suave); color: var(--rojo); }
.btn-peligro { background: var(--rojo); color: #fff; border: 0; font-weight: 700; }
.btn-peligro:hover { background: #8C1A1A; color: #fff; }

/* ---------- aviso de perfil a medias ----------
   Ámbar con texto tinta, igual que la barra de «Entrar como»: es un estado
   que hay que resolver, no un error. El rojo queda para el botón, que es
   lo único que hay para tocar. */
.perfil-pendiente { display: flex; align-items: center; gap: .7rem; margin: 0 0 1rem;
  padding: .7rem .9rem; border-radius: var(--radio-s); background: var(--ambar);
  color: var(--tinta); box-shadow: 0 4px 14px rgba(74, 30, 12, .18); }
.perfil-pendiente > .material-symbols-rounded { flex: none; font-size: 28px; }
.perfil-pendiente .txt { flex: 1; min-width: 0; line-height: 1.25; }
.perfil-pendiente .txt b { display: block; font-size: .92rem; }
.perfil-pendiente .txt small { display: block; font-size: .76rem; opacity: .8; margin-top: .1rem; }
.perfil-pendiente .btn-terminar { flex: none; display: inline-flex; align-items: center; gap: .2rem;
  background: var(--grad-cta); color: #fff; border: 0; border-radius: 999px;
  padding: .45rem .9rem; font-size: .82rem; font-weight: 800; }
.perfil-pendiente .btn-terminar:hover { color: #fff; filter: brightness(1.08); }
@media (max-width: 575px) {
  .perfil-pendiente { flex-wrap: wrap; }
  .perfil-pendiente .btn-terminar { width: 100%; justify-content: center; }
}

/* ---------- cómo elige el profesional su zona ---------- */
.opciones-cobertura { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .5rem; }
.opcion-cob { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .5rem;
  align-items: center; padding: .6rem .7rem; border: 1px solid var(--linea); border-radius: var(--radio-s);
  background: var(--superficie); cursor: pointer; transition: border-color .14s, background .14s; }
.opcion-cob .material-symbols-rounded { grid-row: 1 / 3; font-size: 26px; color: var(--texto-3); }
.opcion-cob b { font-size: .86rem; line-height: 1.2; }
.opcion-cob small { font-size: .72rem; color: var(--texto-2); line-height: 1.25; }
.opcion-cob:hover { border-color: var(--marca); }
.opcion-cob.activo { border-color: var(--marca); background: var(--marca-suave); box-shadow: inset 0 0 0 1px var(--marca); }
.opcion-cob.activo .material-symbols-rounded { color: var(--marca); }

/* elegir un ícono para un oficio, en el panel */
.grilla-iconos { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: .25rem; max-height: 148px; overflow-y: auto; padding: .25rem; border: 1px solid var(--linea); border-radius: var(--radio-xs); }
.btn-icono-elegir { border: 1px solid transparent; background: transparent; border-radius: var(--radio-xs); padding: .25rem; color: var(--texto-2); line-height: 0; }
.btn-icono-elegir:hover { border-color: var(--marca); background: var(--marca-suave); color: var(--marca-2); }

/* el recuadro de «¿no está tu profesión?» */
.otra-profesion { border: 1px dashed color-mix(in srgb, var(--marca) 35%, transparent); border-radius: var(--radio-s);
  padding: .65rem .75rem; background: var(--superficie-2); }

/* ---------- barra de «Entrar como» ----------
   Ámbar con texto tinta, que es la combinación de aviso de la marca (6,9:1).
   A propósito NO usa el rojo: el rojo acá significa "acción principal" y
   esto es un estado, no algo para tocar. Va centrada abajo para no chocar
   con los botones flotantes, que viven en la esquina derecha. */
.barra-suplantacion {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 1085;
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: .6rem; max-width: calc(100vw - 24px);
  padding: .5rem .6rem .5rem .8rem; border-radius: 999px;
  background: var(--ambar); color: var(--tinta);
  box-shadow: 0 10px 30px rgba(74, 30, 12, .35); font-size: .84rem;
}
body.app .barra-suplantacion { bottom: calc(var(--bottom-alto) + 12px + env(safe-area-inset-bottom)); }
@media (min-width: 992px) { body.app .barra-suplantacion { bottom: calc(14px + env(safe-area-inset-bottom)); } }
.barra-suplantacion > .material-symbols-rounded { flex: none; font-size: 22px; }
.barra-suplantacion .txt { line-height: 1.15; min-width: 0; }
.barra-suplantacion .txt b { font-weight: 800; }
.barra-suplantacion .txt small { display: block; font-size: .68rem; opacity: .72; }
.barra-suplantacion .volver {
  flex: none; background: var(--tinta); color: #fff; border: 0; border-radius: 999px;
  padding: .38rem .8rem; font-size: .78rem; font-weight: 700; display: inline-flex; align-items: center; gap: .25rem;
}
.barra-suplantacion .volver:hover { background: var(--tinta-2); color: #fff; }
@media (max-width: 420px) {
  .barra-suplantacion { font-size: .78rem; padding-left: .65rem; gap: .45rem; }
  .barra-suplantacion .txt small { display: none; }
}

/* ---------- galería de imágenes del panel ---------- */
.ranura-img { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radio-s); overflow: hidden; background: var(--superficie-2); border: 1px solid var(--linea); }
.ranura-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ranura-img .vacia { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; color: var(--texto-3); font-size: .85rem; }
.grilla-img { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: .7rem; }
.img-card { margin: 0; border: 1px solid var(--linea); border-radius: var(--radio-s); overflow: hidden; background: var(--superficie); display: flex; flex-direction: column; }
.img-card.usada { border-color: var(--verde); box-shadow: 0 0 0 2px var(--verde-suave); }
.img-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--superficie-2); }
.img-card figcaption { padding: .45rem .55rem .55rem; display: grid; gap: .18rem; font-size: .76rem; }
.img-card figcaption b { font-weight: 700; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.img-card figcaption small { color: var(--texto-3); font-size: .7rem; }
.img-card .acciones { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .2rem; }
.img-card .acciones .btn { padding: .2rem .45rem; font-size: .7rem; }
.img-card .origen { font-size: .66rem; color: var(--texto-3); text-decoration: underline; }
.img-card.elegible { cursor: pointer; transition: border-color .14s, transform .14s; }
.img-card.elegible:hover { border-color: var(--marca); transform: translateY(-2px); }

/* ---------- foto arriba de la tarjeta del hero ---------- */
.tarjeta-foto { padding: 0; overflow: hidden; }
.tarjeta-foto > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.tarjeta-foto > .cuerpo { padding: 1.1rem 1.15rem; }

.btn.cargando { opacity: .6; pointer-events: none; }