/* ==========================================================================
   mobile-sitewide.css
   Ajustes de mobile que valen para TODO el sitio. Se enlaza en main_head.php
   sin condicion. Antes se llamaba header-mobile.css, pero fue creciendo mas
   alla del header.

   Contiene:
     1. El header compacto (logo, utilidades, buscador, hamburguesa).
     2. La cabecera de pagina (la foto con el titulo de seccion), que usan
        14 paginas.
     3. El espaciado entre secciones y el tamaño de los titulos, que estaban
        resueltos por duplicado en home-mobile.css y catalogo-mobile.css.
     4. El bloque de texto colapsable "Leer mas", que usan index.php y
        productos.php.

   El header medía 310px en un viewport de 375x850: el 36% de la pantalla antes
   de ver un solo producto. Se iba en cuatro renglones:
       36px  Facebook / Instagram
       76px  utilidades (carrito, nombre, Mis Pedidos, Logout) en DOS filas
      127px  logo (la imagen es 111x127 y se renderizaba a tamaño natural)
       70px  buscador
   Ahora son dos renglones de ~102px en total.

   En desktop (>=768px) no cambia nada: todas las reglas viven dentro de un
   media query, salvo .header-search, que solo reemplaza los estilos que antes
   estaban inline en el markup con los mismos valores.
   ========================================================================== */

/* El buscador tenia estos valores inline en header.php. Se mueven aca para
   poder cambiarlos por breakpoint sin pelear con la especificidad del style. */
.header-search {
    max-width: 340px;
    width: 100%;
    margin: auto;
    padding: 10px;
}

/* Utilidades visibles solo en un breakpoint. Los textos de los items del
   top-menu se esconden en mobile y queda el icono. */
.solo-mobile {
    display: none;
}

/* Bloque de texto colapsable ("Leer más").
   Funciona con un checkbox oculto y un <label>, sin JS y sin librerias: el
   texto completo sigue siempre en el HTML (Google lo indexa igual) y solo se
   recorta visualmente en mobile.
   Fuera de mobile el control no existe: checkbox y label escondidos, texto
   entero, igual que siempre. */
.ver-mas-check,
.ver-mas-label {
    display: none;
}

/* Mis Pedidos y Salir dentro del menu hamburguesa: solo en pantallas chicas.
   En desktop esas dos opciones ya estan en la barra de utilidades de arriba. */
#gfx-collapse .nav-solo-mobile {
    display: none;
}

/* ==========================================================================
   Stepper de cantidad (- / numero / +)
   Lo usan las cards del catalogo, la ficha de producto y el carrito, asi que
   vive aca y no en el css del catalogo. El markup lo genera
   Producto::stepperCantidad() (catalogo) o esta escrito a mano en
   carritoView.php; el JS es cambiarCantidad() en custom_scripts.php.
   ========================================================================== */
.qty-stepper {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: stretch;
    align-items: stretch;
    border: 1px solid #ececec;
    border-radius: 4px;
    overflow: hidden;
    background: #ffffff;
}

.qty-btn {
    border: none;
    background: #f8f8f8;
    color: #339933;
    font-size: 20px;
    line-height: 1;
    width: 36px;
    min-height: 36px;
    padding: 0;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* Evita el zoom/scroll accidental al mantener apretado en touch. */
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -webkit-transition: background 0.15s ease-in-out;
    transition: background 0.15s ease-in-out;
}

.qty-btn:hover,
.qty-btn:focus {
    background: #ececec;
    color: #267326;
    outline: none;
}

.qty-btn:active {
    background: #dedede;
}

.qty-stepper .qty-input {
    width: 44px;
    border: none;
    border-left: 1px solid #ececec;
    border-right: 1px solid #ececec;
    text-align: center;
    font-size: 15px;
    padding: 0 2px;
    -moz-appearance: textfield;
}

/* Las flechitas nativas del input type=number sobran: para eso estan - y +,
   y en un campo de 44px quedan minusculas e imposibles de acertar. */
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Etiquetas que solo tienen sentido cuando una tabla se convierte en tarjetas
   y ya no hay encabezado de columna que explique el dato. */
.etiqueta-mobile {
    display: none;
}

/* Utilidad para esconder de verdad, sin reservar lugar (a diferencia de
   visibility:hidden). */
.oculto {
    display: none !important;
}

@media (max-width: 767px) {

    /* ----------------------------------------------------------------------
       Logo a todo el alto del header
       El logo sale del flujo y se ancla a .header-wrapper, asi ocupa las dos
       filas en vez de un renglon solo. Para que el contenedor de referencia sea
       el wrapper y no la fila de abajo, .header-main y .main-navigation pasan a
       static: el unico hijo posicionado que tenian era .navbar-toggle, que mas
       abajo tambien se vuelve static. El z-index se conserva moviendolo al
       wrapper. El plugin stickOnScroll marca .header-main con una clase pero no
       llega a fijarlo, asi que sacarle el position:relative no lo afecta.
       ---------------------------------------------------------------------- */
    .header-wrapper {
        position: relative;
        z-index: 1100;
    }

    /* Todos los ancestros posicionados entre el logo y el wrapper tienen que
       pasar a static, si no el logo se ancla al primero que encuentre y queda
       metido dentro de la fila de abajo. Son cuatro:
         .header-main      -> avendor.css:154 y ademas :2005 con !important
         .main-navigation  -> avendor.css:155, position:relative
         .navbar           -> Bootstrap se lo pone relative sin condicion
         .col-md-12        -> Bootstrap se lo pone relative a toda columna .col-*
       El prefijo .header-wrapper es para ganarle en especificidad, y la regla de
       la columna se acota a la del nav para no tocar el resto de las grillas. */
    .header-wrapper .main-navigation,
    .header-wrapper .main-navigation .navbar,
    .header-wrapper .main-navigation .row > .columns {
        position: static;
    }

    /* Este va con !important porque avendor.css:2005 declara, dentro de este
       mismo breakpoint, `.header-main { position: relative !important }`. Contra
       un !important no alcanza con mas especificidad ni con un style inline: la
       unica forma de ganarle es otro !important.

       El transform tambien hay que anularlo, y es la parte menos obvia:
       avendor.css:154 le pone `-webkit-transform: translateZ(0)` (un truco viejo
       para forzar capa de GPU). Cualquier transform distinto de none convierte al
       elemento en contenedor de bloque de sus descendientes absolutos AUNQUE el
       position sea static, asi que el logo se seguia anclando aca aun con el
       position ya corregido. */
    .header-wrapper .header-main {
        position: static !important;
        -webkit-transform: none;
        transform: none;
    }

    /* Mismo caso: avendor.css:2002 tiene `.logo { line-height: 105px !important }`,
       que con el logo ya posicionado en absoluto solo agrega alto de mas. */
    .header-wrapper .main-navigation .logo {
        line-height: normal !important;
    }

    /* max-height es el tope de las dos filas (42 de la barra de utilidades + 60
       de la fila del buscador, menos los 6+6 de aire). Sin el, al desplegar el
       menu hamburguesa el header crece y el logo se estiraba con el, porque
       top+bottom lo atan al alto total del wrapper. */
    .main-navigation .logo {
        position: absolute;
        left: 12px;
        top: 6px;
        bottom: 6px;
        max-height: 90px;
        width: 72px;
        line-height: normal;
        margin: 0;
        /* Tiene que quedar por encima de .header-top, que trae z-index:1150 y
           fondo blanco: si no, la barra de utilidades le tapa la mitad de arriba
           al logo (los dos son hijos del mismo contexto de apilado, el que crea
           .header-wrapper con su z-index). */
        z-index: 1200;
    }

    .main-navigation .logo a {
        display: block;
        height: 100%;
    }

    /* object-fit contain: el logo se adapta al alto que quede libre sin
       deformarse, sea cual sea el alto final del header. */
    .main-navigation .logo img {
        height: 100%;
        width: 100%;
        object-fit: contain;
        display: block;
    }

    /* Las dos filas se corren a la derecha para dejarle lugar al logo:
       12 (izq) + 72 (logo) + 12 (aire) = 96. */
    .header-top > .container,
    .header-main > .container {
        padding-left: 96px;
    }

    /* ----------------------------------------------------------------------
       Fila 1: barra de utilidades
       ---------------------------------------------------------------------- */

    /* Facebook / Instagram: ya estan en el footer y aca costaban 36px. */
    .header-top-social {
        display: none;
    }

    /* Mis Pedidos y Salir se van al menu hamburguesa, donde entran con su
       nombre completo en vez de quedar como dos iconos sueltos sin texto. */
    .header-top .top-menu .tm-pedidos,
    .header-top .top-menu .tm-logout {
        display: none;
    }

    #gfx-collapse .nav-solo-mobile {
        display: block;
    }

    .header-top .top-menu {
        float: none;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: stretch;
        align-items: stretch;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        width: 100%;
    }

    .header-top .header-top-right {
        float: none;
    }

    .header-top .top-menu li {
        display: block;
        border-right: none;
        border-left: 1px solid #ececec;
    }

    .header-top .top-menu li:first-child {
        border-left: none;
    }

    .header-top .top-menu li:last-child {
        border-right: 1px solid #ececec;
    }

    /* Se centra con line-height y no con flex: si el <a> fuera flex, los nodos de
       texto sueltos ("$" y el numero del total) se volverian items anonimos y
       aparecerian espacios raros entre ellos. */
    .header-top .top-menu li a {
        padding: 0 10px;
        line-height: 40px;
        min-height: 40px;
        white-space: nowrap;
    }

    /* El texto largo se va y queda el icono. */
    .header-top .top-menu .solo-desktop {
        display: none;
    }

    .header-top .top-menu .solo-mobile {
        display: inline;
    }

    /* Iconos un poco mas grandes, ya que van solos. */
    .header-top .top-menu .fa {
        margin-right: 6px;
        font-size: 14px;
    }

    .header-top .top-menu .tm-pedidos .fa,
    .header-top .top-menu .tm-logout .fa {
        margin-right: 0;
        font-size: 16px;
    }

    /* El carrito es lo unico que puede crecer; el resto ocupa lo que necesita.
       Asi el nombre no empuja al carrito fuera de la pantalla. */
    .header-top .top-menu .tm-carrito {
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto;
        min-width: 0;
    }

    .header-top .top-menu .tm-cuenta {
        -webkit-flex: 0 1 auto;
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
    }

    .header-top .top-menu .tm-pedidos,
    .header-top .top-menu .tm-logout,
    .header-top .top-menu .tm-revendedor {
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
    }

    /* Nombres largos cortan con puntos suspensivos en vez de empujar el resto. */
    .header-top .top-menu .nombre-usuario {
        display: inline-block;
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
    }

    /* ----------------------------------------------------------------------
       Fila 2: logo + buscador + hamburguesa
       El <nav> pasa a flex y se reordenan sus hijos. El DOM queda igual que en
       desktop: lo unico que se movio en el markup es el toggle, que salio de
       .navbar-header para poder ordenarlo aparte (en desktop esta display:none
       de todas formas).
       ---------------------------------------------------------------------- */
    .main-navigation .navbar {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-align-items: center;
        align-items: center;
        margin-bottom: 0;
        min-height: 0;
    }

    /* avendor.css:217 le pone width:100% a .navbar-header cuando el nav es
       .nav-left, que es nuestro caso. Con eso el logo se comia la fila entera y
       el buscador se iba abajo. Aca vuelve a medir lo que mide el logo. */
    .main-navigation .navbar-header {
        -webkit-order: 1;
        order: 1;
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
    }

    /* .input-group es display:table en Bootstrap, y el ancho minimo intrinseco de
       una tabla incluye el tamaño por defecto del <input> (~20 caracteres). Eso
       daba un minimo de ~237px contra 228px disponibles, y por 9px el buscador se
       iba a una segunda fila. Pasandolo a flex deja de tener ese piso y encoge. */
    /* flex-basis 0 y no auto. El corte de linea de flex-wrap se decide con el
       tamaño hipotetico del item (su flex-basis), ANTES de aplicar el encogido:
       con basis auto el buscador medía su max-content, "no entraba" al lado del
       logo y el toggle, y se iba solo a una segunda fila. Con basis 0 siempre
       entra en la fila y despues crece hasta ocupar lo que sobra. */
    .main-navigation .header-search {
        -webkit-order: 2;
        order: 2;
        -webkit-flex: 1 1 0%;
        flex: 1 1 0%;
        display: -webkit-flex;
        display: flex;
        min-width: 0;
        max-width: none;
        margin: 0 8px;
        padding: 0;
    }

    .main-navigation .header-search .form-control {
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
    }

    .main-navigation .header-search .input-group-btn {
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
    }

    /* avendor.css:234 lo tiene en position:absolute con top:30px, o sea que no
       participaba del flujo: por eso quedaba flotando y, con la fila ya baja a
       64px, se desbordaba por abajo. Static lo vuelve un item flex mas y queda
       alineado al final de la fila, pegado al borde. */
    .main-navigation .navbar-toggle {
        -webkit-order: 3;
        order: 3;
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
        position: static;
        top: auto;
        right: auto;
        left: auto;
        float: none;
        margin: 0;
    }

    /* El menu desplegado ocupa el ancho completo, debajo de la fila. */
    .main-navigation .navbar-collapse {
        -webkit-order: 4;
        order: 4;
        -webkit-flex: 1 0 100%;
        flex: 1 0 100%;
    }

    /* Buscador mas bajo, pero con el minimo tactil de 44px. El 16px de fuente
       evita que iOS haga zoom al enfocar el campo. */
    .main-navigation .header-search .form-control {
        height: 44px;
        font-size: 16px;
    }

    .main-navigation .header-search .btn {
        height: 44px;
        padding-left: 14px;
        padding-right: 14px;
    }

    /* El icono de las rayitas lo dibuja un :after con FontAwesome. Sin
       line-height igual al alto de la caja, el glifo se apoya en la linea base
       por defecto y queda corrido hacia arriba dentro del cuadrado. */
    .main-navigation .navbar-toggle {
        width: 44px;
        height: 44px;
        padding: 0;
        line-height: 44px;
        text-align: center;
    }

    .main-navigation .navbar-toggle:after {
        line-height: 44px;
        vertical-align: middle;
    }

    /* La fila entera con un respiro chico arriba y abajo. */
    .header-main .main-navigation > .row > .columns {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    /* ----------------------------------------------------------------------
       Cabecera de pagina (la foto con el titulo de la seccion)
       .main-wrapper-header trae padding:50px 0 y el h1 en 48px, que ademas
       varias paginas suben a 70px con un style inline. En un celular eso son
       235px antes de ver nada. La usan 14 paginas vivas (listado, productos,
       contacto, instalaciones, carrito, checkout, legales, mis pedidos...),
       asi que la regla va aca, que es sitewide, y no en el css del catalogo.
       El !important es por el font-size y los paddings inline.
       ---------------------------------------------------------------------- */
    .main-wrapper-header {
        padding: 16px 0;
    }

    .main-wrapper-header .page-title h1,
    .main-wrapper-header .page-title h2,
    .main-wrapper-header .page-title h3 {
        font-size: 32px !important;
        line-height: 1.15 !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        margin: 0;
    }

    /* Con la cabecera mas baja, la foto se recorta a una franja del centro que
       puede tocar cualquier zona clara (en Jugos Naturales, por ejemplo, quedan
       las etiquetas blancas de las botellas) y el titulo, que es blanco, deja de
       leerse. El text-shadow inline no alcanza. Un velo oscuro lo resuelve para
       cualquier foto de categoria, sin depender de cual toque.
       .parallax ya viene con position:relative, asi que el :before se ancla
       solo; el .container sube de capa para quedar por encima del velo. */
    .main-wrapper-header.parallax:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.32);
    }

    .main-wrapper-header.parallax > .container {
        position: relative;
        z-index: 1;
    }

    /* ----------------------------------------------------------------------
       Espaciado entre secciones
       El theme define los separadores con PADDING y no con height
       (.white-space.space-big { padding: 50px 0 }), asi que un "space-big" son
       100px de alto. En desktop respiran bien; en un celular son mas de media
       pantalla de nada, y varias paginas encadenan dos o tres seguidos.
       Esto estaba resuelto dos veces por separado -acotado a .main-wrapper en
       home-mobile.css y a .content-with-sidebar en catalogo-mobile.css-, asi
       que se unifica aca: son los mismos valores en toda la web.
       ---------------------------------------------------------------------- */
    .main-wrapper .white-space.space-big {
        padding: 9px 0;
    }

    .main-wrapper .white-space.space-medium {
        padding: 6px 0;
    }

    .main-wrapper .white-space.space-small {
        padding: 4px 0;
    }

    /* Titulos de seccion. El theme los deja en 48px y varias paginas los suben
       a 58 o mas con la fuente script, que en mobile se lleva tres renglones. */
    .main-wrapper .fancy-title.script-font {
        font-size: 32px;
        margin-bottom: 8px;
    }

    .main-wrapper .fancy-title.text-left {
        margin-bottom: 8px;
    }

    /* ----------------------------------------------------------------------
       Texto colapsable: estado abierto/cerrado
       ---------------------------------------------------------------------- */
    .ver-mas-label {
        display: block;
        text-align: center;
        color: #339933;
        font-weight: 600;
        cursor: pointer;
        padding: 10px 0;
        min-height: 44px;
        line-height: 24px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .ver-mas-label:after {
        content: "Leer más ▾";
    }

    /* Tres lineas y corta. El texto completo sigue en el HTML. */
    .texto-colapsable {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-align: left;
    }

    .ver-mas-check:checked ~ .texto-colapsable {
        display: block;
        -webkit-line-clamp: unset;
        overflow: visible;
    }

    .ver-mas-check:checked ~ .ver-mas-label:after {
        content: "Leer menos ▴";
    }

    /* ----------------------------------------------------------------------
       Stepper de cantidad en mobile: area tactil de 44px
       ---------------------------------------------------------------------- */

    /* flex: 0 0 44px y no width: los botones son items flex y con el
       flex-shrink por defecto se encogian a 36px cuando el input pedia lugar. */
    .qty-btn {
        -webkit-flex: 0 0 44px;
        flex: 0 0 44px;
        width: 44px;
        min-height: 44px;
        font-size: 22px;
    }

    /* min-width y no 0: en una tarjeta angosta (el carrusel de Novedades llego a
       mostrar items de 86px) el input se aplastaba a cero y el numero
       desaparecia entre el - y el +. Con 34px de piso siempre se lee. */
    .qty-stepper .qty-input {
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto;
        width: auto;
        min-width: 34px;
        min-height: 44px;
        font-size: 16px; /* 16px o mas evita que iOS haga zoom al enfocar el campo */
    }
}

/* ==========================================================================
   Avisos y confirmaciones
   --------------------------------------------------------------------------
   Reemplazan a alert() y confirm(), que no tienen formato y ademas bloquean:
   el alert nativo congela la pagina y en mobile el browser lo dibuja con su
   propio chrome, tapando todo.

   Va aca y no en carrito-mobile.css porque el componente es sitewide, y sin
   media query porque tiene que verse igual en desktop.

   El markup lo arma el JS y lo cuelga de <body>. Por eso este archivo no sabe
   nada del carrito: dos motivos para no meterlo en el HTML. Uno, #carrito-contenido
   se reemplaza entero en cada +/- y cualquier nodo de adentro moriria en el
   primer swap de htmx. Dos, colgando de body se esquiva el z-index roto de
   css/login-modal.css (el caracter invisible pegado al } de .modal-backdrop, que
   deja los modales de Bootstrap abajo del fondo gris) sin tocar ese archivo ni
   cambiar el apilado del resto del sitio.

   Los z-index arrancan en 10060 para quedar arriba de ese backdrop de 10000:
   el aviso de "no hay stock" tiene que leerse aunque haya un modal abierto.
   ========================================================================== */

/* --- Avisos (ex alert) ---------------------------------------------------- */

#g-avisos {
    position: fixed;
    top: 12px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 10070;
    width: 92%;
    max-width: 460px;
    /* El contenedor ocupa todo el ancho aunque no haya avisos: sin esto se
       queda tapando los clicks de la parte de arriba de la pagina. */
    pointer-events: none;
}

.g-aviso {
    pointer-events: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
    padding: 13px 14px;
    border-radius: 6px;
    border-left: 4px solid transparent;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
    color: #333;
    font-size: 15px;
    line-height: 1.35;
    text-align: left;
    -webkit-animation: gAvisoEntra .22s ease-out;
    animation: gAvisoEntra .22s ease-out;
}

@-webkit-keyframes gAvisoEntra {
    from { opacity: 0; -webkit-transform: translateY(-14px); }
    to   { opacity: 1; -webkit-transform: translateY(0); }
}

@keyframes gAvisoEntra {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Salida: la clase la pone el JS y espera el transitionend para sacar el nodo. */
.g-aviso.saliendo {
    opacity: 0;
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
    -webkit-transition: opacity .18s ease-in, -webkit-transform .18s ease-in;
    transition: opacity .18s ease-in, transform .18s ease-in;
}

.g-aviso .g-aviso-icono {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1.2;
}

.g-aviso .g-aviso-texto {
    /* minmax en flex: sin min-width 0 el texto largo desborda la tarjeta en vez
       de cortar en varios renglones. */
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
}

/* display:block y no inline: el link va en su propio renglon debajo del texto,
   asi el area tactil no se mezcla con el mensaje. */
.g-aviso .g-aviso-accion {
    display: block;
    margin-top: 3px;
    /* El padding es para el dedo, no para separar: sin el, el link queda en un
       area tactil de 26px. No llega a los 44px de un boton, pero es un link
       secundario adentro de un cartel que se va solo. */
    padding: 8px 0 4px;
    font-weight: 600;
    text-decoration: underline;
    color: #00944f;
}

.g-aviso-error .g-aviso-accion { color: #d01b29; }

.g-aviso .g-aviso-cerrar {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin: -4px -4px 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: #999;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.g-aviso .g-aviso-cerrar:hover { color: #333; }

.g-aviso-aviso { border-left-color: #e6a117; }
.g-aviso-aviso .g-aviso-icono { color: #e6a117; }
.g-aviso-error { border-left-color: #d01b29; }
.g-aviso-error .g-aviso-icono { color: #d01b29; }
.g-aviso-ok    { border-left-color: #00944f; }
.g-aviso-ok .g-aviso-icono { color: #00944f; }

/* --- Confirmacion (ex confirm) -------------------------------------------- */

.g-dialogo-fondo {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10060;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, .55);
    -webkit-animation: gFondoEntra .18s ease-out;
    animation: gFondoEntra .18s ease-out;
}

@-webkit-keyframes gFondoEntra { from { opacity: 0; } to { opacity: 1; } }
@keyframes gFondoEntra { from { opacity: 0; } to { opacity: 1; } }

.g-dialogo {
    width: 100%;
    max-width: 400px;
    padding: 22px 20px 18px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
    text-align: center;
    -webkit-animation: gDialogoEntra .2s ease-out;
    animation: gDialogoEntra .2s ease-out;
}

@-webkit-keyframes gDialogoEntra {
    from { opacity: 0; -webkit-transform: translateY(10px) scale(.97); }
    to   { opacity: 1; -webkit-transform: translateY(0) scale(1); }
}

@keyframes gDialogoEntra {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.g-dialogo .g-dialogo-icono {
    margin-bottom: 10px;
    font-size: 34px;
    line-height: 1;
    color: #e6a117;
}

.g-dialogo.g-dialogo-destructivo .g-dialogo-icono { color: #d01b29; }

.g-dialogo .g-dialogo-titulo {
    margin: 0 0 6px;
    font-size: 19px;
    font-weight: 600;
    color: #222;
}

.g-dialogo .g-dialogo-texto {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.4;
    color: #555;
}

.g-dialogo .g-dialogo-botones {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    gap: 10px;
}

.g-dialogo .g-dialogo-botones button {
    /* minmax(0,1fr) del mundo flex: con textos largos los dos botones tienen que
       repartirse el ancho en partes iguales y poder achicarse. */
    -webkit-flex: 1 1 0;
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px; /* area tactil */
    padding: 10px 12px;
    border: 0;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.g-dialogo .g-btn-cancelar {
    background: #ececec;
    color: #444;
}

.g-dialogo .g-btn-cancelar:hover { background: #dedede; }

.g-dialogo .g-btn-ok {
    background: #00944f;
    color: #fff;
}

.g-dialogo .g-btn-ok:hover { background: #046136; }

.g-dialogo.g-dialogo-destructivo .g-btn-ok { background: #d01b29; }
.g-dialogo.g-dialogo-destructivo .g-btn-ok:hover { background: #a3141f; }

/* Mientras hay un dialogo abierto el fondo no scrollea: en mobile, si no, el
   dedo mueve la pagina de atras en vez del dialogo. */
body.g-dialogo-abierto {
    overflow: hidden;
}