/* ***********************************************************************
   Base tipográfica del sitio.

   index.html cargaba el CSS entero de Bootstrap 5 desde el CDN (233 KB) además
   del Bootstrap 4 local. El JS del sitio es BS4 (no hay un solo data-bs-*), así
   que lo único que aportaba el 5 era su "reboot": la fuente y el peso del body y
   de los títulos, y algún color de botón. De paso pisaba cosas del 4 y rompía
   layouts (las tarjetas de destacados quedaban como tiras por su .col-md-3).

   Acá está SÓLO ese reboot, para que el sitio se siga viendo igual sin bajar la
   librería completa. Se carga en el mismo lugar donde estaba el link del CDN,
   así el orden de la cascada no cambia.
   *********************************************************************** */

/* ***********************************************************************
   Iconos SVG inline.

   index.html cargaba Font Awesome 6 entero desde el CDN (84 KB de CSS + la
   webfont, ~150 KB más) para dibujar QUINCE iconos. Ahora cada uno es un
   <svg> de trazo embebido, igual que los del menú (ver el array ENLACES de
   js/sidebar.js): sin librería, sin pedido cross-origin y sin fuente de
   iconos que descargar.

   Se dimensionan en `em` para que sigan al texto del elemento que los
   contiene, que es lo que hacía el <i> de Font Awesome, y toman el color con
   `currentColor`, así siguen andando las reglas de color que ya existían.
   *********************************************************************** */

.unet-svg {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* Los iconos de marca (WhatsApp) son de relleno, no de trazo. */
.unet-svg-solido {
    fill: currentColor;
    stroke: none;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
}

h1 { font-size: calc(1.375rem + 1.5vw); }
h2 { font-size: calc(1.325rem + 0.9vw); }
h3 { font-size: calc(1.3rem + 0.6vw); }
h4 { font-size: calc(1.275rem + 0.3vw); }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

@media (min-width: 1200px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.75rem; }
    h4 { font-size: 1.5rem; }
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

/* El verde de Bootstrap 5 para el botón "Exportar a Excel" (el 4 usa #28a745) */
.btn-success {
    background-color: #198754;
    border-color: #198754;
}

.btn-success:hover,
.btn-success:focus {
    background-color: #157347;
    border-color: #146c43;
}

/* Utilidad de gutters de Bootstrap 5 que usa la card del carrito */
.row.g-0 {
    margin-right: 0;
    margin-left: 0;
}

.row.g-0 > * {
    padding-right: 0;
    padding-left: 0;
}

/* ***********************************************************************
   Botón de Logout (navbar).

   El botón vive en el shell (index.html), o sea que se ve en TODAS las
   secciones, pero su color rojo salía de una regla `button { ... }` global de
   css/menu.css — y menu.css sólo se carga en el Inicio. En el resto de las
   secciones quedaba el `.btn-danger` de paper-dashboard, que es un coral
   suave (#ef8157): el mismo botón se veía de dos colores distintos según
   dónde estuvieras parado.

   Por eso el estilo va acá, en el CSS que index.html carga siempre. Se apunta
   por id (especificidad 100) para ganarle a `.btn-danger`; en el hover hace
   falta el !important porque paper-dashboard también lo usa.

   Sep-2026: dejó de ser un bloque rojo lleno con el texto en MAYÚSCULA — que
   pesaba más que cualquier otra cosa de la barra siendo la acción menos
   frecuente — y pasó a ser una pastilla de contorno con el icono de salida.
   El rojo de la marca queda para el hover, que es cuando importa.
   *********************************************************************** */

#logout-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 20px;
    padding: 8px 16px;
    border: 1px solid #e2dcdc;
    border-radius: 999px;
    background-color: #fff;
    color: #6b6b6b;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    font-weight: 500;
    /* paper-dashboard pone todos los .btn en MAYÚSCULA */
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.2;
    box-shadow: none;
    transition: background-color .18s ease-in-out, color .18s ease-in-out, border-color .18s ease-in-out;
}

#logout-button .unet-svg {
    width: 17px;
    height: 17px;
    vertical-align: 0;
}

#logout-button:hover,
#logout-button:focus,
#logout-button:active {
    border-color: rgba(187, 30, 30, .35) !important;
    background-color: #fdf6f6 !important;
    color: #bb1e1e !important;
    box-shadow: none !important;
    /* paper-dashboard le mete un translateY en :active */
    transform: none !important;
}

#logout-button:focus {
    outline: none;
}

#logout-button:focus-visible {
    outline: 2px solid #bb1e1e;
    outline-offset: 2px;
}

/* En pantalla chica el texto sobra: queda el icono solo, redondo. El title y
   el aria del botón siguen diciendo qué hace. */
@media (max-width: 480px) {
    #logout-button {
        gap: 0;
        padding: 9px;
        margin-right: 10px;
    }

    #logout-button span {
        display: none;
    }
}
/* ***********************************************************************
   Botón flotante "Cotizar service" (el markup está en html/index.html, en
   el shell).

   Va en base.css y no en el CSS de una sección porque el router borra y
   vuelve a inyectar esas hojas en cada navegación: acá queda siempre.

   Es una píldora con texto y no el globito redondo de siempre: el cliente
   pidió que se lea qué hace. Por eso el texto se mantiene también en el
   celular, donde la tentación es dejar sólo el icono.
   *********************************************************************** */

.unet-wsp {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1040; /* por encima del contenido, por debajo de los modales de Swal */

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 12px 20px;
    border-radius: 999px;

    background-color: #25d366;
    color: #fff;

    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* El atributo hidden lo pisa el display:flex de arriba, así que hay que
   decirlo explícitamente o el botón se ve igual en el login. */
.unet-wsp[hidden] {
    display: none;
}

.unet-wsp .unet-svg {
    width: 22px;
    height: 22px;
    vertical-align: 0;
}

/* El <a> del sitio viene subrayado (regla global de links): en la píldora queda mal,
   asi que se saca en los dos estados. */
.unet-wsp:hover,
.unet-wsp:focus {
    color: #fff;
    text-decoration: none;
    transform: scale(1.04);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.34);
}

.unet-wsp:focus-visible {
    outline: 2px solid #128c7e;
    outline-offset: 3px;
}

/* En el celular se achica y se corre, para no taparle al usuario la última
   fila de la lista de services. El texto NO se saca: es lo que hace que el
   botón se entienda. */
@media (max-width: 480px) {
    .unet-wsp {
        right: 14px;
        bottom: 14px;
        gap: 7px;
        padding: 10px 16px;
        font-size: 14px;
    }

    .unet-wsp .unet-svg {
        width: 20px;
        height: 20px;
    }
}