.oggi-hdr-m__wpp {
--wppsuc-disco: #1A9E4B;
--wppsuc-anillo: #25D366;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-left: -2px;
padding: 0;
border-radius: 50%;
color: #fff;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
isolation: isolate;
}
.oggi-hdr-m__wpp:focus { outline: none; }
.oggi-hdr-m__wpp:focus-visible {
outline: 3px solid var(--oggi-navy, #1b3a77);
outline-offset: 1px;
}
.oggi-hdr-m__wpp-disco {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--wppsuc-disco);
color: #fff;
box-shadow: 0 2px 8px rgba(26, 158, 75, .35);
animation: oggi-wppsuc-latido 2.2s ease-in-out infinite;
will-change: transform;
}
.oggi-hdr-m__wpp-disco .oggi-icon {
font-size: 22px;
width: 22px;
height: 22px;
}
.oggi-hdr-m__wpp::before,
.oggi-hdr-m__wpp::after {
content: "";
position: absolute;
inset: 2px;
border-radius: 50%;
background: var(--wppsuc-anillo);
opacity: 0;
z-index: -1;
pointer-events: none;
animation: oggi-wppsuc-onda 2.2s cubic-bezier(.2, .6, .35, 1) infinite;
}
.oggi-hdr-m__wpp::after { animation-delay: .5s; }
@keyframes oggi-wppsuc-latido {
0%, 40%, 100% { transform: scale(1); }
8% { transform: scale(1.09); }
16% { transform: scale(.97); }
24% { transform: scale(1.05); }
}
@keyframes oggi-wppsuc-onda {
0% { transform: scale(1); opacity: .6; }
70% { transform: scale(1.7); opacity: 0; }
100% { transform: scale(1.7); opacity: 0; }
}
.oggi-hdr-m__wpp.is-abierto .oggi-hdr-m__wpp-disco,
.oggi-hdr-m__wpp.is-abierto::before,
.oggi-hdr-m__wpp.is-abierto::after {
animation: none;
}
@media (prefers-reduced-motion: reduce) {
.oggi-hdr-m__wpp-disco,
.oggi-hdr-m__wpp::before,
.oggi-hdr-m__wpp::after {
animation: none;
}
.oggi-hdr-m__wpp::before {
opacity: .3;
transform: scale(1.12);
}
}
html.oggi-wppsuc-abierto,
html.oggi-wppsuc-abierto body {
overflow: hidden;
}
.oggi-wppsuc.oggi-wppsuc {
--w-navy: #1b3a77;
--w-navy-50: #E6EDF7;
--w-ink: #0F172A;
--w-sec: #475569;
--w-muted: #5B6472;
--w-line: #E5E7EB;
--w-bg: #F7F9FB;
--w-ok: #166534;
--w-ok-punto: #16A34A;
--w-no: #B42318;
--w-wa: #0B7A3E;
--w-wa-hover: #096633;
position: fixed;
inset: auto 0 0 0;
margin: 0;
padding: 0;
width: 100%;
max-width: none;
max-height: 88vh;
max-height: 88dvh;
border: 0;
border-radius: 20px 20px 0 0;
background: #fff;
color: var(--w-ink);
box-shadow: 0 -10px 40px rgba(15, 23, 42, .25);
overflow: hidden;
font-family: var(--oggi-font-display, "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
font-size: 15px;
line-height: 1.45;
text-align: left;
}
.oggi-wppsuc.oggi-wppsuc[open] {
display: flex;
flex-direction: column;
animation: oggi-wppsuc-sube .3s cubic-bezier(.2, .8, .2, 1);
}
.oggi-wppsuc::backdrop {
background: rgba(15, 23, 42, .55);
}
.oggi-wppsuc[open]::backdrop {
animation: oggi-wppsuc-velo .3s ease;
}
@keyframes oggi-wppsuc-sube {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
@keyframes oggi-wppsuc-velo {
from { opacity: 0; }
to { opacity: 1; }
}
.oggi-wppsuc .oggi-wppsuc__hoja {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding: 22px 18px calc(20px + env(safe-area-inset-bottom, 0px));
}
.oggi-wppsuc .oggi-wppsuc__hoja::before {
content: "";
display: block;
width: 40px;
height: 4px;
margin: -12px auto 14px;
border-radius: 2px;
background: #D6DDE6;
}
.oggi-wppsuc .oggi-wppsuc__cerrar {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
display: grid;
place-items: center;
width: 44px;
height: 44px;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--w-bg);
color: var(--w-ink);
box-shadow: 0 0 0 4px #fff;
font-size: 22px;
line-height: 1;
}
.oggi-wppsuc .oggi-wppsuc__cerrar:hover,
.oggi-wppsuc .oggi-wppsuc__cerrar:active {
background: var(--w-navy-50);
color: var(--w-navy);
}
.oggi-wppsuc .oggi-wppsuc__cerrar .oggi-icon {
width: 22px;
height: 22px;
stroke-width: 2.2;
}
.oggi-wppsuc :is(button, a):focus { outline: none; }
.oggi-wppsuc :is(button, a):focus-visible {
outline: 3px solid var(--w-navy);
outline-offset: 2px;
}
.oggi-wppsuc .oggi-wppsuc__titulo:focus { outline: none; }
.oggi-wppsuc .oggi-wppsuc__titulo {
margin: 0 44px 6px 0;
padding: 0;
color: var(--w-navy);
font-size: 20px;
font-weight: 700;
line-height: 1.25;
letter-spacing: -.01em;
}
.oggi-wppsuc .oggi-wppsuc__bajada {
margin: 0 0 16px;
color: var(--w-sec);
font-size: 14px;
}
.oggi-wppsuc .oggi-wppsuc__paso[hidden] { display: none; }
.oggi-wppsuc .oggi-wppsuc__opciones {
display: grid;
gap: 10px;
}
.oggi-wppsuc .oggi-wppsuc__opcion {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: 72px;
margin: 0;
padding: 14px 14px;
border: 1.5px solid var(--w-line);
border-radius: 14px;
background: #fff;
color: var(--w-ink);
box-shadow: none;
font: inherit;
text-align: left;
text-decoration: none;
text-transform: none;
}
.oggi-wppsuc .oggi-wppsuc__opcion:hover,
.oggi-wppsuc .oggi-wppsuc__opcion:active {
border-color: var(--w-navy);
background: var(--w-bg);
color: var(--w-ink);
}
.oggi-wppsuc .oggi-wppsuc__opcion-emoji { font-size: 26px; line-height: 1; }
.oggi-wppsuc .oggi-wppsuc__opcion-txt { flex: 1 1 auto; display: grid; gap: 2px; }
.oggi-wppsuc .oggi-wppsuc__opcion-txt strong {
color: var(--w-navy);
font-size: 16px;
font-weight: 700;
}
.oggi-wppsuc .oggi-wppsuc__opcion-txt span {
color: var(--w-muted);
font-size: 13px;
font-weight: 500;
}
.oggi-wppsuc .oggi-wppsuc__opcion-flecha {
color: var(--w-navy);
font-size: 26px;
line-height: 1;
}
.oggi-wppsuc .oggi-wppsuc__volver {
display: inline-flex;
align-items: center;
gap: 4px;
min-height: 44px;
margin: -6px 0 4px -8px;
padding: 0 10px;
border: 0;
border-radius: 10px;
background: transparent;
color: var(--w-navy);
box-shadow: none;
font-size: 14px;
font-weight: 600;
}
.oggi-wppsuc .oggi-wppsuc__volver:hover,
.oggi-wppsuc .oggi-wppsuc__volver:active {
background: var(--w-navy-50);
color: var(--w-navy);
}
.oggi-wppsuc .oggi-wppsuc__volver span { font-size: 20px; line-height: 1; }
.oggi-wppsuc .oggi-wppsuc__chips {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin: 6px 0 14px;
}
.oggi-wppsuc .oggi-wppsuc__chip {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 1px;
min-height: 52px;
margin: 0;
padding: 8px 12px;
border: 1.5px solid var(--w-line);
border-radius: 12px;
background: #fff;
color: var(--w-ink);
box-shadow: none;
font: inherit;
text-align: left;
text-transform: none;
}
.oggi-wppsuc .oggi-wppsuc__chip:hover {
border-color: var(--w-navy);
background: #fff;
color: var(--w-ink);
}
.oggi-wppsuc .oggi-wppsuc__chip-rot {
color: var(--w-navy);
font-size: 15px;
font-weight: 700;
line-height: 1.2;
}
.oggi-wppsuc .oggi-wppsuc__chip-sub {
color: var(--w-muted);
font-size: 12.5px;
font-weight: 500;
line-height: 1.25;
}
.oggi-wppsuc .oggi-wppsuc__chip[aria-pressed="true"] {
border-color: var(--w-navy);
background: var(--w-navy);
}
.oggi-wppsuc .oggi-wppsuc__chip[aria-pressed="true"] .oggi-wppsuc__chip-rot,
.oggi-wppsuc .oggi-wppsuc__chip[aria-pressed="true"] .oggi-wppsuc__chip-sub {
color: #fff;
}
.oggi-wppsuc .oggi-wppsuc__chip--todas {
border-style: dashed;
}
.oggi-wppsuc .oggi-wppsuc__chip--todas:nth-child(odd) {
grid-column: 1 / -1;
}
.oggi-wppsuc .oggi-wppsuc__resultados { margin: 0 0 6px; }
.oggi-wppsuc .oggi-wppsuc__resultados:not(:has(.oggi-wppsuc__card:not([hidden]))) { display: none; }
.oggi-wppsuc .oggi-wppsuc__res-titulo {
scroll-margin-top: 60px;
margin: 4px 0 8px;
color: var(--w-sec);
font-size: 13px;
font-weight: 600;
}
.oggi-wppsuc .oggi-wppsuc__res-titulo:empty { display: none; }
.oggi-wppsuc .oggi-wppsuc__lista {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.oggi-wppsuc .oggi-wppsuc__card {
margin: 0;
padding: 14px;
border: 1px solid var(--w-line);
border-radius: 14px;
background: #fff;
box-shadow: 0 1px 2px rgba(15, 40, 71, .06);
}
.oggi-wppsuc .oggi-wppsuc__card[hidden] { display: none; }
.oggi-wppsuc .oggi-wppsuc__card-cab {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.oggi-wppsuc .oggi-wppsuc__nombre {
margin: 0;
padding: 0;
color: var(--w-navy);
font-size: 16px;
font-weight: 700;
line-height: 1.25;
}
.oggi-wppsuc .oggi-wppsuc__dir {
margin: 3px 0 0;
color: var(--w-sec);
font-size: 13.5px;
}
.oggi-wppsuc .oggi-wppsuc__estado {
display: flex;
align-items: center;
gap: 6px;
margin: 4px 0 0;
font-size: 13px;
font-weight: 600;
}
.oggi-wppsuc .oggi-wppsuc__estado::before {
content: "";
flex: 0 0 auto;
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
}
.oggi-wppsuc .oggi-wppsuc__estado.is-abierta { color: var(--w-ok); }
.oggi-wppsuc .oggi-wppsuc__estado.is-abierta::before { background: var(--w-ok-punto); }
.oggi-wppsuc .oggi-wppsuc__estado.is-cerrada { color: var(--w-no); }
.oggi-wppsuc .oggi-wppsuc__wa {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
min-height: 48px;
margin: 12px 0 0;
padding: 0 16px;
border-radius: 12px;
background: var(--w-wa);
color: #fff;
font-size: 15.5px;
font-weight: 700;
text-decoration: none;
}
.oggi-wppsuc .oggi-wppsuc__wa:hover,
.oggi-wppsuc .oggi-wppsuc__wa:active {
background: var(--w-wa-hover);
color: #fff;
}
.oggi-wppsuc .oggi-wppsuc__wa .oggi-icon {
width: 20px;
height: 20px;
font-size: 20px;
}
.oggi-wppsuc .oggi-wppsuc__sin-wa {
display: inline-flex;
align-items: center;
min-height: 44px;
margin-top: 6px;
color: var(--w-navy);
font-size: 14px;
font-weight: 600;
text-decoration: underline;
}
.oggi-wppsuc .oggi-wppsuc__pie {
margin: 16px 0 0;
padding: 14px 0 0;
border-top: 1px solid var(--w-line);
}
.oggi-wppsuc .oggi-wppsuc__pie p {
margin: 0 0 2px;
color: var(--w-sec);
font-size: 13.5px;
}
.oggi-wppsuc .oggi-wppsuc__pie a {
display: inline-flex;
align-items: center;
gap: 4px;
min-height: 44px;
color: var(--w-navy);
font-size: 14.5px;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
}
@media (min-width: 769px) {
.oggi-wppsuc.oggi-wppsuc {
inset: 0;
margin: auto;
width: min(440px, calc(100% - 32px));
max-height: min(88vh, 760px);
height: fit-content;
border-radius: 20px;
box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
}
.oggi-wppsuc.oggi-wppsuc[open] {
animation: oggi-wppsuc-aparece .22s ease-out;
}
.oggi-wppsuc .oggi-wppsuc__hoja { padding-top: 24px; }
.oggi-wppsuc .oggi-wppsuc__hoja::before { display: none; }
}
@keyframes oggi-wppsuc-aparece {
from { opacity: 0; transform: translateY(12px) scale(.98); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.oggi-wppsuc.oggi-wppsuc[open],
.oggi-wppsuc[open]::backdrop {
animation: none;
}
}