/* Estilos del plugin RACC Energía. Compatibles con Avada — usar variables del theme cuando posible. */

.energia-field-error {
    color: #c0392b;
    font-size: 0.85em;
    margin-top: 4px;
}

.energia-error {
    background: #fdecea;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 1em 1.2em;
    border-radius: 4px;
    margin: 1em 0;
}

.energia-resultado {
    margin: 2em 0;
}

.energia-savings {
    background: #f7fbf8;
    border-left: 4px solid #1ea975;
    padding: 1em 1.4em;
    margin-bottom: 1.5em;
}

.energia-savings--positive { border-left-color: #1ea975; background: #f7fbf8; }
.energia-savings--neutral  { border-left-color: #d4a017; background: #fffbea; }
.energia-savings--processing { border-left-color: #1565c0; background: #f0f7ff; }

.energia-savings h3 {
    margin: 0 0 0.5em;
}

.energia-proposal-pdf iframe {
    border: 1px solid #ddd;
    border-radius: 4px;
}

.energia-cta {
    text-align: center;
    margin: 2em 0;
}

.energia-cta .energia-contratar {
    padding: 0.8em 2em;
    font-size: 1.1em;
}

/* ---------- Popup titular (rediseño 29/05/2026) ----------
   Card compacta tipo modal con icono persona + título + 2 radios horizontales
   + botones Anterior/Continuar abajo. Overlay translúcido detrás.

   IMPORTANTE: el popup está OCULTO por defecto y se muestra añadiendo la clase
   `.is-visible` desde JS. Antes usábamos jQuery .show()/.hide() pero el
   `display: flex !important` del modo visible pisaba el inline style:none que
   pone jQuery — el botón "Anterior" no cerraba visualmente. Con clase explícita
   no hay conflicto. */
.energia-popup {
    display: none;
}
#energia-titular-popup.energia-popup.is-visible,
.energia-popup.is-visible {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    z-index: 100001 !important;     /* por encima de fusion-modal (default 100000) */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1em !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

.energia-popup-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

/* Specs del Figma (node 6554-7155):
   - Background: #faf9f6 (no blanco puro)
   - Padding: 16px
   - Border-radius: 4px
   - Gap entre secciones: 24px
   - Min-width: 776px, max-width: 926px en desktop */
.energia-popup-card {
    position: relative;
    background: #faf9f6;
    border-radius: 4px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    padding: 16px;
    max-width: 926px;
    width: 100%;
    min-width: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
@media (min-width: 820px) {
    .energia-popup-card {
        min-width: 776px;
    }
}

/* Header: icono + (título + subtítulo apilados) con line divisora debajo. */
.energia-popup-header {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding-bottom: 16px;
    margin-bottom: 0;
    border-bottom: 1px solid #e4e7e9;
}

/* Icono "persona verificada" del popup — coincide con el component "icon-socio"
   del Figma: cabeza redonda amarilla con borde negro, hombros amarillos con
   borde negro, y check negro grande a la derecha. SVG inline data-URI. */
.energia-popup-icon {
    display: inline-block;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none'%3E%3Ccircle cx='10' cy='8' r='4.5' fill='%23FFCF00' stroke='%231a1a1a' stroke-width='2'/%3E%3Cpath d='M2 24v-2.2c0-3 3.58-5.3 8-5.3s8 2.3 8 5.3V24H2z' fill='%23FFCF00' stroke='%231a1a1a' stroke-width='2' stroke-linejoin='round'/%3E%3Cpolyline points='17,8.5 20,11.5 26,5.5' stroke='%231a1a1a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

/* Wrapper interno del header (h3 + subtítulo apilados) */
.energia-popup-header-text {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Título "¿Eres el titular de la factura?":
   font-family Zalando Sans SemiExpanded SemiBold, 20px, color #1a1a1a */
.energia-popup-card h3 {
    margin: 0;
    font-family: 'Zalando Sans SemiExpanded', 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    color: #1a1a1a;
}

/* Subtítulo: Inter Regular 18px, color #1a1a1a */
.energia-popup-subtitle {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
    color: #1a1a1a;
}

/* Opciones — 2 columnas en desktop, 1 en mobile. Cada opción es una caja
   clicable con icono (radio) + texto. Specs Figma:
   - Background: white
   - Border: 1px solid #b9c0c7
   - Border-radius: 4px
   - Padding: 12px 16px
   - Min-width: 210px
   - Gap entre cajas: 6px */
.energia-popup-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}
.energia-popup-option {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    border: 1px solid #b9c0c7;
    border-radius: 4px;
    cursor: pointer;
    background: #fff;
    flex: 1 1 0;
    min-width: 210px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.energia-popup-option:hover {
    border-color: #999;
}
.energia-popup-option input[type="radio"] {
    accent-color: #ffcf00; /* amarillo RACC oficial */
    margin: 0;
    flex-shrink: 0;
}
.energia-popup-option:has(input:checked) {
    border-color: #ffcf00;
    background: #fff5ca;
}
.energia-popup-option span {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
    color: #464a4e;
    flex: 1 1 0;
}

.energia-popup-options--error .energia-popup-option {
    border-color: #c0392b;
}

/* Nota (29/05/2026): los campos extra del popup ("Indica datos del titular real")
   se eliminaron del flujo. Si el cliente NO es el titular, se le deriva
   directamente a /out/?reason=not_titular (negocio prefiere atención telefónica).
   CSS de `.energia-popup-extra*` ya no es necesario. */

/* Botones según Figma:
   - Gap: 24px
   - Anterior: background #e7e1d5 (beige secundario), 104px ancho, Inter SemiBold 18px
   - Continuar: background #ffcf00 (amarillo RACC), 119px ancho, Inter SemiBold 18px
   - Ambos: padding 12px 16px, border-radius 4px, color texto #1a1a1a */
.energia-popup-actions {
    display: flex;
    gap: 24px;
    justify-content: center;
    margin: 0;
}
.energia-popup-actions .button,
.energia-popup-actions .button:hover,
.energia-popup-actions .button:focus,
.energia-popup-actions .button:active {
    padding: 12px 16px !important;
    border-radius: 4px !important;
    border: 0 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    text-decoration: none !important;
    cursor: pointer;
    text-align: center;
}
/* Anterior: secundario beige */
.energia-popup-actions .button:not(.button-primary),
.energia-popup-actions .button:not(.button-primary):hover,
.energia-popup-actions .button:not(.button-primary):focus,
.energia-popup-actions .button:not(.button-primary):active {
    background-color: #e7e1d5 !important;
    color: #1a1a1a !important;
    min-width: 104px;
}
/* Continuar: primario amarillo RACC */
.energia-popup-actions .button.button-primary,
.energia-popup-actions .button.button-primary:hover,
.energia-popup-actions .button.button-primary:focus,
.energia-popup-actions .button.button-primary:active {
    background-color: #ffcf00 !important;
    color: #1a1a1a !important;
    min-width: 119px;
}
.energia-popup-actions .button:not(.button-primary):hover {
    background-color: #dad3c4 !important;
}
.energia-popup-actions .button.button-primary:hover {
    background-color: #f0c000 !important;
}

#energia-titular-otro label {
    display: block;
    margin-bottom: 0.5em;
}

#energia-titular-otro input[type="text"] {
    width: 100%;
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.energia-resumen {
    background: #fafafa;
    border: 1px solid #e0e0e0;
    padding: 1.2em 1.5em;
    border-radius: 4px;
    margin: 1.5em 0;
}

.energia-resumen ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.energia-resumen li {
    padding: 0.4em 0;
    border-bottom: 1px dashed #e0e0e0;
}

.energia-resumen li:last-child {
    border-bottom: none;
}

.energia-confirmacion {
    text-align: center;
    padding: 3em 1em;
}

.energia-out {
    text-align: center;
    padding: 2em 1em;
    background: #fffbea;
    border-radius: 8px;
}

.energia-out .button {
    margin: 0 0.5em;
}

/* Overlay full-screen del polling de /presupuesto/?pending=1 (mientras Aura+Vico
   procesan, ~30-60s). El JS `pendingPollingInit` (energia.js) inyecta
   #energia-pending-overlay.energia-overlay con spinner + título + subtítulo, y lo
   reutiliza para mostrar errores/timeout. FALTABA la regla del CONTENEDOR → el
   contenido se renderizaba suelto al final del body, invisible → parecía que "no
   había overlay" al calcular el precio (bug detectado 2026-06-04). */
.energia-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.96);
    padding: 1.5em;
}
.energia-overlay-content {
    text-align: center;
    max-width: 480px;
}
.energia-overlay-title {
    margin: 0 0 0.4em;
    font-size: 1.4em;
    font-weight: 700;
    color: #1d1d1b;
    line-height: 1.25;
}
.energia-overlay-subtitle {
    margin: 0;
    color: #555;
    font-size: 1em;
    line-height: 1.45;
}

/* Spinner amarillo RACC (usado dentro del overlay de arriba y en el box de pending). */
.energia-overlay-spinner {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5em;
    border: 5px solid #fff4cc;
    border-top-color: #ffcd00;
    border-radius: 50%;
    animation: energiaSpin 0.9s linear infinite;
}

@keyframes energiaSpin {
    to { transform: rotate(360deg); }
}

/* ---------- Resumen sidebar (usado en /formulario-contratacion/) ---------- */

.energia-resumen-sidebar {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 1.2em 1.4em;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    font-size: 0.95em;
}

/* En mobile el sidebar debe ir DEBAJO del bloque de text/datos del titular, no
   encima como sale per defecte amb Fusion Builder. Solución CSS-only via flex
   order: si la fila pare és flex (Avada 7+), funciona. Si no, cal canviar
   l'ordre de columnes al Fusion Builder. */
@media (max-width: 800px) {
    .fusion-builder-row:has(.energia-resumen-sidebar),
    .fusion-row:has(.energia-resumen-sidebar) {
        display: flex;
        flex-direction: column;
    }
    .fusion-builder-column:has(.energia-resumen-sidebar) {
        order: 99;       /* sempre al final del flex container */
        margin-top: 1.5em;
    }
}

.energia-resumen-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.8em;
    padding-bottom: 0.8em;
    border-bottom: 1px solid #f0f0f0;
}

.energia-resumen-sidebar__title {
    margin: 0;
    font-size: 1.05em;
    font-weight: 600;
}

.energia-resumen-sidebar__toggle {
    background: transparent;
    border: 0;
    padding: 0.2em 0.4em;
    cursor: pointer;
    color: #555;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.energia-resumen-sidebar__chevron {
    transition: transform 0.2s ease;
    display: block;
}

.energia-resumen-sidebar__list {
    list-style: none;
    padding: 0;
    margin: 0 0 1em;
}

.energia-resumen-sidebar__list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.45em 0;
    gap: 1em;
}

.energia-resumen-sidebar__key {
    color: #555;
}

.energia-resumen-sidebar__val {
    font-weight: 600;
    text-align: right;
}

/* Wrapper del link de descarga. Mantiene separador visual respecto al resto.
   El estilado del link viene de las clases globals `.download-link.buttoned`
   del theme — no hace falta sobrescribir res aquí. */
.energia-resumen-sidebar__pdf {
    margin: 0.8em 0;
    padding: 0.8em 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    list-style: none;
    padding-left: 0;
}
.energia-resumen-sidebar__pdf ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.energia-resumen-sidebar__price {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 0.6em;
    font-size: 1em;
}

/* Collapsable */
.energia-resumen-sidebar.is-collapsed .energia-resumen-sidebar__body { display: none; }
.energia-resumen-sidebar.is-collapsed .energia-resumen-sidebar__chevron { transform: rotate(180deg); }

/* Campos no editables del form de contratación (nombre, DNI, dirección suministro).
   El plugin añade `.energia-readonly` al li del field; el JS aplica readonly al
   input SOLO si tiene valor. Aquí el styling visual SOLO se aplica al input que
   realmente tiene atributo `readonly` — los vacíos (que el cliente debe rellenar)
   se ven como inputs normales y editables. */
.gform_wrapper .energia-readonly input[readonly],
.gform_wrapper .energia-readonly textarea[readonly] {
    background-color: #f4f4f4 !important;
    color: #555 !important;
    cursor: not-allowed;
}
.gform_wrapper .energia-readonly input[readonly]:focus,
.gform_wrapper .energia-readonly textarea[readonly]:focus {
    outline: none;
    border-color: #d0d0d0;
}

/* Campos ocultos para socios (fecha nacimiento, dirección habitual). El RACC ya
   los tiene en su BD, no se piden al socio. Para no-socios siguen visibles. */
.gform_wrapper .energia-hidden-for-socio {
    display: none !important;
}

/* Resumen de ahorro oculto en el paso de FIRMA (P6) del form de contratación.
   El JS (toggleResumenSidebarOnContrat en energia.js) añade esta clase cuando el
   form está en el paso 2 (firma) y la quita en el paso 1 (datos). */
.energia-resumen-sidebar.energia-hide-on-firma {
    display: none !important;
}

/* En el paso de firma, además de ocultar el resumen ocultamos su COLUMNA Fusion y
   centramos la fila — si no, queda el hueco de la columna a la derecha y el formulario
   descentrado (feedback 2026-06-05). El JS añade estas clases solo en el paso 2. */
.fusion-builder-column.energia-col-hidden-on-firma,
.fusion-layout-column.energia-col-hidden-on-firma {
    display: none !important;
}
.fusion-builder-row.energia-row-centered-on-firma,
.fusion-row.energia-row-centered-on-firma {
    justify-content: center !important;
}

/* /confirmacion/ ("Todo listo"): la fila tiene la columna izquierda "Todo listo" + las
   cards (Datos del ahorro/personales/dirección) como columnas planas con relleno vacío.
   Como la izquierda es más alta, las cards saltaban de línea dejando un hueco grande.
   energia.js marca la fila con .energia-confirm-grid y aquí la pasamos a CSS Grid: la
   izquierda ocupa toda la altura y las cards se apilan juntas en la columna derecha.
   Solo desktop (en mobile las columnas se apilan full-width de forma natural). */
@media (min-width: 800px) {
    .energia-confirm-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        align-items: start;
        column-gap: 32px;
    }
    .energia-confirm-grid > * {
        width: auto !important;
        margin: 0 0 16px 0 !important;
    }
    /* Clases asignadas por energia.js según el CONTENIDO de cada columna (no por posición:
       el patrón card/relleno no es alterno). Columna izquierda "Todo listo" ocupa toda la
       altura; las cards se apilan en la columna derecha; las columnas vacías de relleno fuera. */
    .energia-confirm-grid > .energia-grid-left {
        grid-column: 1;
        grid-row: 1 / 99;
    }
    .energia-confirm-grid > .energia-grid-card {
        grid-column: 2;
    }
    .energia-confirm-grid > .energia-grid-hide {
        display: none !important;
    }
}

/* Botón "Editar datos" inyectado al inicio del paso 2 de TARIF_ENERGIA.
   Mismo patrón visual que el form contratación auto: link con icono lápiz,
   alineado a la derecha. */
.gform_wrapper .energia-edit-datos-field {
    margin-bottom: 0.6em;
}
.energia-edit-datos-wrap {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5em;
}
.energia-edit-datos-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.45em 0.9em;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    background: #fff;
    color: #1d1d1b;
    font-size: 0.92em;
    text-decoration: none !important;
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.energia-edit-datos-btn:hover {
    border-color: #999;
}
.energia-edit-datos-btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Aviso suave al inicio del paso 2 cuando Aura no ha conseguido extraer datos
   clave de la factura. Color amber/warning para indicar que requiere atención
   sin asustar (no es un error rojo). */
.energia-step2-warning {
    background: #fff8e1;          /* amber 50 — fondo suave */
    border-left: 4px solid #f59e0b; /* amber 500 — barra lateral */
    color: #78350f;                /* amber 900 — texto oscuro accesible */
    padding: 0.9em 1.2em;
    border-radius: 4px;
    margin: 0 0 1.4em;
    font-size: 0.95em;
    line-height: 1.45;
}
.energia-step2-warning strong {
    display: block;
    margin-bottom: 0.25em;
    font-size: 1.02em;
}
.energia-step2-warning p {
    margin: 0;
}

/* Oculta el peso del archivo en el listado del fileupload (form de tarificación y contratación).
   Negocio no quiere mostrar "369 kb" debajo del nombre del PDF subido. Scope a
   `[data-energia-form]` para no afectar otros forms del site (el atributo lo añade
   gravity_forms/initialdata.php via filter gform_form_tag). Cubre las dos variantes
   de markup que usa Gravity Forms: plupload multi-archivo y preview single-file. */
[data-energia-form] .plupload_file_size,
[data-energia-form] .gfield_fileupload_filesize,
[data-energia-form] .ginput_preview .gform_fileupload_size {
    display: none !important;
}

/* =====================================================================
   Pantalla 2 — "Validación de datos" (TARIF_ENERGIA paso 2)
   Diseño Figma 04/06/2026: título + subtítulo arriba, botón "Editar datos"
   a la derecha, y los campos en modo LECTURA como par etiqueta+valor en
   texto plano (no dropdowns con borde). Al pulsar "Editar datos" el theme
   quita `.gf-fields-locked` y los campos vuelven a ser editables.
   Todo scopeado a `[data-energia-form="tarif"]` para NO afectar al flujo
   auto ni otros forms que compartan `.formedit_firstpage`.
   ===================================================================== */

/* Cabecera: título + subtítulo (izq) y botón Editar datos (dcha) en una fila. */
[data-energia-form="tarif"] .energia-step2-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1em;
    flex-wrap: wrap;
    margin-bottom: 1.2em;
}
[data-energia-form="tarif"] .energia-step2-head__text {
    flex: 1 1 auto;
    min-width: 0;
}
[data-energia-form="tarif"] .energia-step2-title {
    margin: 0 0 0.2em;
    font-size: 1.5em;
    font-weight: 700;
    color: #1d1d1b;
    line-height: 1.2;
}
[data-energia-form="tarif"] .energia-step2-subtitle {
    margin: 0;
    color: #6b7280;
    font-size: 1em;
    line-height: 1.4;
}
[data-energia-form="tarif"] .energia-step2-head .energia-edit-datos-wrap {
    margin: 0;
    flex-shrink: 0;
}

/* Modo lectura — etiqueta pequeña gris encima del valor. */
[data-energia-form="tarif"] .formedit_firstpage.gf-fields-locked .gfield_label {
    color: #6b7280;
    font-weight: 400;
    font-size: 0.88em;
    margin-bottom: 0.15em;
}

/* Modo lectura — selects nativos como texto plano (sin borde, sin flecha, sin fondo). */
[data-energia-form="tarif"] .formedit_firstpage.gf-fields-locked select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    opacity: 1 !important;
    color: #1d1d1b !important;
    font-weight: 600;
    cursor: default;
}

/* Modo lectura — TomSelect (si el theme realza los selects) como texto plano. */
[data-energia-form="tarif"] .formedit_firstpage.gf-fields-locked .ts-wrapper .ts-control {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    opacity: 1 !important;
}
[data-energia-form="tarif"] .formedit_firstpage.gf-fields-locked .ts-wrapper .ts-control,
[data-energia-form="tarif"] .formedit_firstpage.gf-fields-locked .ts-wrapper .ts-control > .item {
    color: #1d1d1b !important;
    font-weight: 600;
}
[data-energia-form="tarif"] .formedit_firstpage.gf-fields-locked .ts-wrapper.single .ts-control::after {
    display: none !important;
}

/* Modo lectura — inputs de texto como texto plano. */
[data-energia-form="tarif"] .formedit_firstpage.gf-fields-locked input[readonly] {
    border: none !important;
    background: transparent !important;
    padding-left: 0 !important;
    color: #1d1d1b !important;
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Firma embebida (/firma/) — PROTOTIPO (gated por embedded_signature).
   Estilo mínimo; afinar con el diseño NEO cuando se valide el flujo con Vico.
--------------------------------------------------------------------------- */
.energia-firma { max-width: 560px; margin: 40px auto; padding: 0 16px; }
.energia-firma__title { margin: 0 0 12px; }
.energia-firma__label { display: block; margin: 16px 0 8px; font-weight: 600; }
.energia-firma__input {
    display: block; width: 100%; max-width: 220px; margin-top: 6px;
    padding: 10px 12px; font-size: 20px; letter-spacing: 4px; text-align: center;
}
.energia-firma__btn {
    display: inline-block; margin-top: 16px; padding: 12px 22px;
    background: #FFCF00; color: #1A1A1A; border: 0; border-radius: 6px;
    font-weight: 700; cursor: pointer;
}
.energia-firma__btn[disabled] { opacity: .6; cursor: default; }
.energia-firma__link {
    display: inline-block; margin: 12px 0 0 12px; background: none; border: 0;
    color: #1A1A1A; text-decoration: underline; cursor: pointer; font-size: 14px;
}
.energia-firma__err { color: #c0392b; margin-top: 10px; }
.energia-firma__iframe { width: 100%; height: 80vh; border: 0; }