/*
 * Tema IO.GT sobre Paymenter.
 *
 * Se escribe a mano, en CSS plano, y no con clases nuevas de Tailwind: el
 * servidor no tiene Node, así que el bundle del tema es el que Paymenter trae
 * compilado y no se puede regenerar. Todo lo que se añada aquí tiene que valerse
 * por sí solo.
 *
 * Los colores salen de las variables que el propio Paymenter publica desde los
 * ajustes del tema (`--color-primary` y compañía), así que cambiar la marca
 * sigue haciéndose desde el panel y no tocando este fichero.
 */

:root {
    --iogt-sombra: 0 1px 2px rgb(16 24 40 / .06), 0 1px 3px rgb(16 24 40 / .1);
    --iogt-sombra-media: 0 4px 12px rgb(16 24 40 / .08);
    --iogt-radio: .5rem;
}

body {
    font-family: "Inter", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
}

/* ------------------------------------------------------------------ acceso */

.iogt-acceso {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
    background: hsl(var(--color-background));
}

@media (min-width: 1024px) {
    .iogt-acceso {
        grid-template-columns: 42% 58%;
    }
}

.iogt-acceso__marca {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    padding: 3.5rem 3rem;
    color: #fff;
    background: linear-gradient(160deg, hsl(var(--color-primary)) 0%, hsl(var(--color-secondary)) 100%);
}

@media (min-width: 1024px) {
    .iogt-acceso__marca {
        display: flex;
    }
}

.iogt-acceso__marca h1 {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 1rem;
}

.iogt-acceso__marca p {
    font-size: 1rem;
    line-height: 1.6;
    opacity: .9;
    margin: 0;
    max-width: 34ch;
}

.iogt-acceso__logo {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.iogt-acceso__pie {
    font-size: .8125rem;
    opacity: .75;
}

.iogt-acceso__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
    background: hsl(var(--color-background-secondary));
}

.iogt-tarjeta-acceso {
    width: 100%;
    max-width: 26rem;
    background: hsl(var(--color-background));
    border: 1px solid hsl(var(--color-neutral));
    border-radius: .75rem;
    box-shadow: var(--iogt-sombra-media);
    padding: 2.25rem 2rem;
}

.iogt-tarjeta-acceso h2 {
    margin: 0 0 1.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    color: hsl(var(--color-base));
}

/* --------------------------------------------------- formularios y botones */

.iogt-campo {
    display: block;
    margin-bottom: 1rem;
}

.iogt-campo > span {
    display: block;
    margin-bottom: .375rem;
    font-size: .875rem;
    font-weight: 500;
    color: hsl(var(--color-base));
}

.iogt-campo input {
    width: 100%;
    min-height: 2.75rem;
    padding: .625rem .875rem;
    border: 1px solid hsl(var(--color-neutral));
    border-radius: var(--iogt-radio);
    background: hsl(var(--color-background));
    color: hsl(var(--color-base));
    font-size: .9375rem;
}

.iogt-campo input:focus {
    outline: none;
    border-color: hsl(var(--color-primary));
    box-shadow: 0 0 0 3px hsl(var(--color-primary) / .15);
}

.iogt-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: 2.75rem;
    padding: .625rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--iogt-radio);
    font-size: .9375rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}

.iogt-boton--primario {
    background: hsl(var(--color-primary));
    color: #fff;
}

.iogt-boton--primario:hover {
    background: hsl(var(--color-primary) / .9);
}

.iogt-boton--claro {
    background: hsl(var(--color-background));
    border-color: hsl(var(--color-neutral));
    color: hsl(var(--color-base));
}

.iogt-boton--claro:hover {
    background: hsl(var(--color-background-secondary));
}

.iogt-separador {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.25rem 0;
    font-size: .8125rem;
    color: hsl(var(--color-muted));
}

.iogt-separador::before,
.iogt-separador::after {
    content: "";
    flex: 1;
    height: 1px;
    background: hsl(var(--color-neutral));
}

.iogt-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    font-size: .875rem;
}

.iogt-fila a {
    color: hsl(var(--color-primary));
    text-decoration: none;
}

.iogt-fila a:hover {
    text-decoration: underline;
}

.iogt-pie-acceso {
    margin-top: 1.5rem;
    text-align: center;
    font-size: .875rem;
    color: hsl(var(--color-muted));
}

.iogt-pie-acceso a {
    color: hsl(var(--color-primary));
    text-decoration: none;
    font-weight: 500;
}

.iogt-error {
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    border-radius: var(--iogt-radio);
    border-left: 3px solid hsl(0, 72%, 51%);
    background: hsl(0, 72%, 51%, .08);
    color: hsl(0, 72%, 41%);
    font-size: .875rem;
    line-height: 1.5;
}

/*
 * En la pantalla de acceso sobran la barra de navegación y el pie: Lagom la
 * presenta a pantalla completa y la sensación de «entrar» se pierde si arriba
 * sigue el menú del sitio. `:has()` permite decirlo sin tocar el layout, que es
 * compartido con todas las demás páginas.
 */
body:has(.iogt-acceso) nav,
body:has(.iogt-acceso) footer {
    display: none !important;
}

body:has(.iogt-acceso) main {
    margin-top: 0 !important;
}

/* ----------------------------------------------------------------- portada */

.iogt-contenedor {
    width: 100%;
    max-width: 78rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.iogt-portada {
    background: hsl(var(--color-background-secondary));
    border-bottom: 1px solid hsl(var(--color-neutral));
    padding: 3rem 0;
}

.iogt-portada__texto {
    font-size: 1.125rem;
    line-height: 1.6;
    color: hsl(var(--color-base));
    max-width: 46rem;
}

.iogt-portada__texto h1,
.iogt-portada__texto h2 {
    font-size: 1.875rem;
    font-weight: 700;
    margin: 0 0 .5rem;
}

.iogt-seccion {
    padding-top: 2.5rem;
    padding-bottom: 3rem;
}

.iogt-titulo-seccion {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1.25rem;
    color: hsl(var(--color-base));
}

.iogt-rejilla {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
}

/* La tarjeta entera es el enlace: el botón a todo lo ancho dentro de cada una
   era lo que hacía que la rejilla pareciera un formulario y no un catálogo. */
.iogt-categoria {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    padding: 1.25rem;
    border: 1px solid hsl(var(--color-neutral));
    border-radius: .75rem;
    background: hsl(var(--color-background));
    box-shadow: var(--iogt-sombra);
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

.iogt-categoria:hover {
    border-color: hsl(var(--color-primary) / .45);
    box-shadow: var(--iogt-sombra-media);
    transform: translateY(-1px);
}

.iogt-categoria__cabeza {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.iogt-categoria__cabeza h3 {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: hsl(var(--color-base));
}

.iogt-categoria__imagen {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .5rem;
    object-fit: cover;
}

.iogt-categoria__inicial {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .5rem;
    background: hsl(var(--color-primary) / .1);
    color: hsl(var(--color-primary));
    font-size: 1.25rem;
    font-weight: 700;
}

.iogt-categoria__texto {
    font-size: .875rem;
    line-height: 1.5;
    color: hsl(var(--color-muted));
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.iogt-categoria__enlace {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin-top: auto;
    padding-top: .5rem;
    font-size: .875rem;
    font-weight: 600;
    color: hsl(var(--color-primary));
}

.iogt-categoria__enlace svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* ------------------------------------------------------ formularios largos */

.iogt-formulario {
    width: 100%;
    max-width: 44rem;
    margin: 2.5rem auto 4rem;
    padding: 2.25rem 2rem;
    background: hsl(var(--color-background));
    border: 1px solid hsl(var(--color-neutral));
    border-radius: .75rem;
    box-shadow: var(--iogt-sombra-media);
}

.iogt-formulario__titulo {
    margin: 0 0 1.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    color: hsl(var(--color-base));
}

.iogt-formulario__rejilla {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .iogt-formulario__rejilla {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .iogt-formulario__rejilla .col-span-2 {
        grid-column: span 2;
    }
}

.iogt-plegable {
    margin-top: 1.25rem;
    border: 1px solid hsl(var(--color-neutral));
    border-radius: var(--iogt-radio);
    background: hsl(var(--color-background-secondary));
}

.iogt-plegable > summary {
    cursor: pointer;
    padding: .875rem 1rem;
    font-size: .9375rem;
    font-weight: 600;
    color: hsl(var(--color-base));
    list-style: none;
}

.iogt-plegable > summary::-webkit-details-marker {
    display: none;
}

.iogt-plegable > summary::before {
    content: "＋";
    margin-right: .5rem;
    color: hsl(var(--color-primary));
}

.iogt-plegable[open] > summary::before {
    content: "－";
}

.iogt-plegable > summary span {
    font-weight: 400;
    color: hsl(var(--color-muted));
}

.iogt-plegable > .iogt-formulario__rejilla {
    padding: 0 1rem 1.25rem;
}

.iogt-formulario__captcha {
    margin: 1.25rem 0;
}

/* ---------------------------------------------------------------- producto */

.iogt-producto {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 900px) {
    .iogt-producto {
        grid-template-columns: minmax(0, 1fr) 20rem;
    }
}

.iogt-producto__ficha h1 {
    margin: 0 0 .75rem;
    font-size: 1.875rem;
    font-weight: 700;
    color: hsl(var(--color-base));
}

.iogt-producto__imagen {
    width: 100%;
    max-height: 18rem;
    object-fit: contain;
    border-radius: .75rem;
    margin-bottom: 1rem;
}

/*
 * La descripción del producto llega como HTML y el tema no le daba ningún
 * estilo: listas sin viñeta, negritas sin peso y todo pegado. Con esto vuelve a
 * leerse como una ficha de producto y no como un volcado de texto.
 */
.iogt-producto__texto {
    font-size: .9375rem;
    line-height: 1.65;
    color: hsl(var(--color-base));
}

.iogt-producto__texto p {
    margin: 0 0 1rem;
}

.iogt-producto__texto ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: grid;
    gap: .5rem;
}

.iogt-producto__texto li {
    position: relative;
    padding-left: 1.75rem;
    color: hsl(var(--color-base));
}

.iogt-producto__texto li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .3em;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 999px;
    background: hsl(var(--color-primary) / .12);
    box-shadow: inset 0 0 0 1px hsl(var(--color-primary) / .35);
}

.iogt-producto__texto li::after {
    content: "";
    position: absolute;
    left: .34rem;
    top: .62em;
    width: .45rem;
    height: .25rem;
    border-left: 2px solid hsl(var(--color-primary));
    border-bottom: 2px solid hsl(var(--color-primary));
    transform: rotate(-45deg);
}

.iogt-producto__texto strong {
    font-weight: 600;
}

.iogt-producto__compra {
    position: sticky;
    top: 5rem;
    padding: 1.5rem;
    border: 1px solid hsl(var(--color-neutral));
    border-radius: .75rem;
    background: hsl(var(--color-background));
    box-shadow: var(--iogt-sombra-media);
}

.iogt-precio {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin-bottom: 1.25rem;
}

.iogt-precio__cifra {
    font-size: 1.75rem;
    font-weight: 700;
    color: hsl(var(--color-base));
}

.iogt-precio__alta {
    font-size: .8125rem;
    color: hsl(var(--color-muted));
}

.iogt-producto__garantias {
    list-style: none;
    padding: 1.25rem 0 0;
    margin: 1.25rem 0 0;
    border-top: 1px solid hsl(var(--color-neutral));
    display: grid;
    gap: .5rem;
    font-size: .875rem;
    color: hsl(var(--color-muted));
}

.iogt-etiqueta {
    display: inline-block;
    margin-bottom: .75rem;
    padding: .1875rem .625rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
}

.iogt-etiqueta--verde {
    color: hsl(142, 60%, 28%);
    background: hsl(142, 60%, 45%, .14);
}

.iogt-etiqueta--roja {
    color: hsl(0, 65%, 42%);
    background: hsl(0, 72%, 51%, .12);
}

/* ------------------------------------------------------------------ tienda */

.iogt-tienda {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 900px) {
    .iogt-tienda {
        grid-template-columns: 15rem minmax(0, 1fr);
    }
}

.iogt-tienda__lado h1 {
    margin: 0 0 .5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: hsl(var(--color-base));
}

.iogt-tienda__intro {
    font-size: .875rem;
    line-height: 1.5;
    color: hsl(var(--color-muted));
    margin-bottom: 1rem;
}

.iogt-tienda__categorias {
    display: flex;
    flex-direction: column;
    border: 1px solid hsl(var(--color-neutral));
    border-radius: .75rem;
    background: hsl(var(--color-background));
    overflow: hidden;
}

.iogt-tienda__categoria {
    padding: .625rem 1rem;
    font-size: .9375rem;
    color: hsl(var(--color-base));
    text-decoration: none;
    border-left: 3px solid transparent;
}

.iogt-tienda__categoria:hover {
    background: hsl(var(--color-background-secondary));
}

.iogt-tienda__categoria--activa {
    font-weight: 600;
    color: hsl(var(--color-primary));
    border-left-color: hsl(var(--color-primary));
    background: hsl(var(--color-primary) / .06);
}

.iogt-tienda__lista {
    display: grid;
    gap: 1.5rem;
}

/* La tarjeta de plan: nombre, precio grande y qué incluye. Antes eran dos
   botones azules a la misma altura y el precio en letra pequeña, que es lo
   contrario de lo que la gente mira al comparar planes. */
.iogt-plan {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    border: 1px solid hsl(var(--color-neutral));
    border-radius: .75rem;
    background: hsl(var(--color-background));
    box-shadow: var(--iogt-sombra);
}

.iogt-plan__nombre {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: hsl(var(--color-base));
}

.iogt-plan__precio {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    margin: .5rem 0 1rem;
}

.iogt-plan__cifra {
    font-size: 1.625rem;
    font-weight: 700;
    color: hsl(var(--color-base));
}

.iogt-plan__desde {
    font-size: .75rem;
    color: hsl(var(--color-muted));
}

.iogt-plan__texto {
    font-size: .875rem;
    line-height: 1.55;
    color: hsl(var(--color-muted));
}

.iogt-plan__texto ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .375rem;
}

.iogt-plan__texto li {
    position: relative;
    padding-left: 1.25rem;
}

.iogt-plan__texto li::before {
    content: "·";
    position: absolute;
    left: .375rem;
    color: hsl(var(--color-primary));
    font-weight: 700;
}

.iogt-plan__texto p {
    margin: 0 0 .625rem;
}

.iogt-plan__acciones {
    display: flex;
    gap: .5rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid hsl(var(--color-neutral));
}

/* =========================================================================
 * Capa de fondo: afina las pantallas que no se reescriben una a una.
 *
 * El tema trae treinta y nueve vistas y reescribirlas todas sería cambiar de
 * sitio los mismos elementos. Estas reglas se apoyan en las clases que el tema
 * ya usa —las de Tailwind que vienen compiladas— y arreglan de una vez lo que
 * se repite en todas: tarjetas sin relieve, tablas que desbordan en el móvil,
 * campos de distinto alto y botones que no se parecen entre sí.
 * ====================================================================== */

/* El contenedor respiraba poco en pantallas medianas. */
main .container {
    width: 100%;
    max-width: 78rem;
    margin-inline: auto;
    padding-inline: 1rem;
}

@media (min-width: 640px) {
    main .container {
        padding-inline: 1.5rem;
    }
}

/* Tarjetas: el tema las pinta como un rectángulo gris sin relieve. */
main .bg-background-secondary.border.border-neutral,
main .bg-background-secondary.border-neutral.rounded-lg,
main .rounded-lg.border.border-neutral {
    background: hsl(var(--color-background));
    border-color: hsl(var(--color-neutral));
    border-radius: .75rem;
    box-shadow: var(--iogt-sombra);
}

/* Ninguna tabla debe empujar la página a lo ancho en un teléfono: se
   desplaza ella dentro de su caja. */
main table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
}

main table thead th {
    text-align: start;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: hsl(var(--color-muted));
    padding: .75rem 1rem;
    border-bottom: 1px solid hsl(var(--color-neutral));
    white-space: nowrap;
}

main table tbody td {
    padding: .875rem 1rem;
    border-bottom: 1px solid hsl(var(--color-neutral) / .6);
    vertical-align: middle;
}

main table tbody tr:last-child td {
    border-bottom: 0;
}

main table tbody tr:hover {
    background: hsl(var(--color-background-secondary) / .6);
}

@media (max-width: 767px) {
    main table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Campos de formulario, todos del mismo alto y con el mismo foco. */
main input:not([type="checkbox"]):not([type="radio"]),
main select,
main textarea {
    min-height: 2.75rem;
    border-radius: .5rem;
    border: 1px solid hsl(var(--color-neutral));
    background: hsl(var(--color-background));
    color: hsl(var(--color-base));
    padding: .625rem .875rem;
    font-size: .9375rem;
    width: 100%;
}

main textarea {
    min-height: 6rem;
}

main input:focus-visible,
main select:focus-visible,
main textarea:focus-visible {
    outline: none;
    border-color: hsl(var(--color-primary));
    box-shadow: 0 0 0 3px hsl(var(--color-primary) / .15);
}

/* Botones: alto de dedo y esquinas iguales en todo el panel. */
main button:not([class*="iogt-"]),
main a[class*="bg-primary"],
main .bg-primary {
    border-radius: .5rem;
}

main button:not([class*="iogt-"]) {
    min-height: 2.5rem;
}

/* Títulos con jerarquía: el tema los deja todos casi del mismo tamaño. */
main h1 { font-size: 1.75rem; font-weight: 700; }
main h2 { font-size: 1.25rem; font-weight: 600; }
main h3 { font-size: 1.0625rem; font-weight: 600; }

/* La barra lateral y la de arriba, con la misma piel que el resto. */
nav.fixed, aside.fixed {
    border-color: hsl(var(--color-neutral)) !important;
}

/* Nada debe provocar desplazamiento horizontal en el teléfono. */
body {
    overflow-x: hidden;
}

main img {
    max-width: 100%;
    height: auto;
}

/* -------------------------------------------------- listas de cliente */

.iogt-lista {
    display: grid;
    gap: .625rem;
    margin: 1.25rem 0;
}

.iogt-item {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: 1rem 1.125rem;
    border: 1px solid hsl(var(--color-neutral));
    border-radius: .75rem;
    background: hsl(var(--color-background));
    box-shadow: var(--iogt-sombra);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.iogt-item:hover {
    border-color: hsl(var(--color-primary) / .4);
    box-shadow: var(--iogt-sombra-media);
}

.iogt-item__icono {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .5rem;
    background: hsl(var(--color-primary) / .1);
    color: hsl(var(--color-primary));
}

.iogt-item__cuerpo {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    min-width: 0;
    flex: 1;
}

.iogt-item__titulo {
    font-weight: 600;
    color: hsl(var(--color-base));
    overflow-wrap: anywhere;
}

.iogt-item__detalle {
    font-size: .8125rem;
    color: hsl(var(--color-muted));
    overflow-wrap: anywhere;
}

.iogt-item__importe {
    font-weight: 600;
    white-space: nowrap;
    color: hsl(var(--color-base));
}

.iogt-estado {
    flex: none;
    padding: .25rem .625rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.iogt-estado--ok { color: hsl(142, 62%, 26%); background: hsl(142, 62%, 45%, .15); }
.iogt-estado--parado { color: hsl(215, 12%, 40%); background: hsl(215, 12%, 50%, .15); }
.iogt-estado--espera { color: hsl(35, 85%, 32%); background: hsl(35, 92%, 52%, .18); }

.iogt-vacio {
    padding: 2.5rem 1.25rem;
    text-align: center;
    color: hsl(var(--color-muted));
    border: 1px dashed hsl(var(--color-neutral));
    border-radius: .75rem;
}

/* En el teléfono la fila se parte en dos alturas en vez de comprimirse. */
@media (max-width: 599px) {
    .iogt-item {
        flex-wrap: wrap;
    }

    .iogt-item__cuerpo {
        flex-basis: calc(100% - 3.375rem);
    }

    .iogt-item__importe,
    .iogt-estado {
        margin-left: 3.375rem;
    }
}

/* La barra lateral llegaba hasta donde llegaba su contenido y dejaba un corte
   blanco a media página. */
main ~ aside, aside.fixed, [class*="md:ml-64"] ~ aside {
    min-height: 100%;
}

/* El botón «Añadir al carrito» se partía en dos líneas en el teléfono. */
@media (max-width: 599px) {
    .iogt-plan__acciones {
        flex-direction: column;
    }

    .iogt-plan__acciones .iogt-boton {
        width: 100%;
    }
}

/* ================================================================ escritorio
 * La pantalla que el cliente ve al entrar, con la forma a la que está hecho:
 * quién es a la izquierda, las cifras que importan arriba y sus servicios en
 * una tabla con su botón, en vez de tres columnas de listas.
 * ======================================================================== */

.iogt-escritorio {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 1024px) {
    .iogt-escritorio {
        grid-template-columns: 19rem minmax(0, 1fr);
    }
}

.iogt-escritorio__lado {
    display: grid;
    gap: 1rem;
}

.iogt-escritorio__cuerpo {
    display: grid;
    gap: 1.25rem;
}

.iogt-perfil {
    padding: 1.5rem;
    border-radius: .75rem;
    color: #fff;
    background: linear-gradient(155deg, hsl(var(--color-primary)) 0%, hsl(var(--color-secondary)) 100%);
    box-shadow: var(--iogt-sombra-media);
}

.iogt-perfil__avatar {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: .875rem;
    border-radius: 999px;
    background: rgb(255 255 255 / .18);
    font-size: 1.5rem;
    font-weight: 700;
}

.iogt-perfil h2 {
    margin: 0 0 .25rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    overflow-wrap: anywhere;
}

.iogt-perfil__nombre {
    margin: 0 0 .5rem;
    font-size: .875rem;
    opacity: .9;
}

.iogt-perfil__dato {
    margin: 0 0 .25rem;
    font-size: .8125rem;
    opacity: .85;
    overflow-wrap: anywhere;
}

.iogt-perfil__acciones {
    display: flex;
    gap: .5rem;
    margin-top: 1.25rem;
}

.iogt-perfil__acciones .iogt-boton {
    background: rgb(255 255 255 / .15);
    border-color: rgb(255 255 255 / .25);
    color: #fff;
    font-size: .875rem;
    min-height: 2.25rem;
}

.iogt-perfil__acciones .iogt-boton:hover {
    background: rgb(255 255 255 / .25);
}

.iogt-atajos {
    display: grid;
    gap: .125rem;
    padding: 1.25rem;
    border: 1px solid hsl(var(--color-neutral));
    border-radius: .75rem;
    background: hsl(var(--color-background));
    box-shadow: var(--iogt-sombra);
}

.iogt-atajos h3 {
    margin: 0 0 .5rem;
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: hsl(var(--color-muted));
}

.iogt-atajos a {
    padding: .5rem 0;
    font-size: .9375rem;
    color: hsl(var(--color-primary));
    text-decoration: none;
}

.iogt-atajos a:hover {
    text-decoration: underline;
}

/* Las cifras: grandes, porque son lo que se mira de un vistazo. */
.iogt-cifras {
    display: grid;
    gap: .875rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .iogt-cifras {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.iogt-cifra {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 1.25rem;
    border: 1px solid hsl(var(--color-neutral));
    border-radius: .75rem;
    background: hsl(var(--color-background));
    box-shadow: var(--iogt-sombra);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.iogt-cifra:hover {
    border-color: hsl(var(--color-primary) / .4);
    box-shadow: var(--iogt-sombra-media);
}

.iogt-cifra__numero {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: hsl(var(--color-primary));
}

.iogt-cifra__texto {
    font-size: .8125rem;
    color: hsl(var(--color-muted));
}

.iogt-cifra--aviso .iogt-cifra__numero {
    color: hsl(0, 72%, 48%);
}

.iogt-tabla-caja {
    border: 1px solid hsl(var(--color-neutral));
    border-radius: .75rem;
    background: hsl(var(--color-background));
    box-shadow: var(--iogt-sombra);
    overflow: hidden;
}

.iogt-tabla-caja__cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid hsl(var(--color-neutral));
}

.iogt-tabla-caja__cabeza h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.iogt-tabla-caja__cabeza a {
    font-size: .875rem;
    font-weight: 600;
    color: hsl(var(--color-primary));
    text-decoration: none;
}

.iogt-tabla-desliza {
    overflow-x: auto;
}

.iogt-caja-interior {
    padding: 1rem 1.25rem;
}

.iogt-servicio__nombre {
    display: block;
    font-weight: 600;
    color: hsl(var(--color-base));
}

.iogt-servicio__dominio {
    display: block;
    font-size: .8125rem;
    color: hsl(var(--color-muted));
    overflow-wrap: anywhere;
}

.iogt-servicio__renueva {
    font-size: .8125rem;
    color: hsl(var(--color-muted));
    white-space: nowrap;
}

.iogt-servicio__accion {
    text-align: end;
}

.iogt-servicio__accion .iogt-boton {
    width: auto;
    min-height: 2.25rem;
    padding: .375rem .875rem;
    font-size: .875rem;
}

/* En el teléfono sobra la fecha de renovación: la fila ya lleva tres datos. */
@media (max-width: 767px) {
    .iogt-servicio__renueva {
        display: none;
    }
}

/* ------------------------------------------------- ficha de un servicio */

.iogt-aviso {
    margin-bottom: 1.25rem;
    padding: .875rem 1.125rem;
    border-radius: .5rem;
    border-left: 3px solid hsl(35, 92%, 50%);
    background: hsl(35, 92%, 50%, .12);
    color: hsl(35, 85%, 30%);
    font-size: .9375rem;
}

.iogt-aviso a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.iogt-ficha {
    padding: 1.5rem;
    border: 1px solid hsl(var(--color-neutral));
    border-radius: .75rem;
    background: hsl(var(--color-background));
    box-shadow: var(--iogt-sombra);
}

.iogt-ficha__cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid hsl(var(--color-neutral));
}

.iogt-ficha__cabeza h1 {
    margin: 0 0 .25rem;
    font-size: 1.5rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.iogt-ficha__precio {
    margin: 0;
    font-size: .9375rem;
    color: hsl(var(--color-muted));
}

.iogt-hechos {
    display: grid;
    gap: .25rem 1.5rem;
    grid-template-columns: 1fr;
    margin: 1.25rem 0 0;
}

@media (min-width: 640px) {
    .iogt-hechos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.iogt-hechos > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .625rem 0;
    border-bottom: 1px dashed hsl(var(--color-neutral));
}

.iogt-hechos dt {
    color: hsl(var(--color-muted));
    font-size: .875rem;
}

.iogt-hechos dd {
    margin: 0;
    text-align: end;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.iogt-ficha__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid hsl(var(--color-neutral));
}

.iogt-ficha__acciones .iogt-boton {
    width: auto;
    min-width: 8rem;
}

.iogt-boton--peligro {
    background: hsl(0, 72%, 51%);
    color: #fff;
}

.iogt-boton--peligro:hover {
    background: hsl(0, 72%, 45%);
}

.iogt-panel-extension {
    margin-top: 1.25rem;
    border: 1px solid hsl(var(--color-neutral));
    border-radius: .75rem;
    background: hsl(var(--color-background));
    box-shadow: var(--iogt-sombra);
    overflow: hidden;
}

.iogt-pestanas {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid hsl(var(--color-neutral));
    background: hsl(var(--color-background-secondary));
}

.iogt-pestana {
    padding: .875rem 1.25rem;
    border: 0;
    background: transparent;
    font-size: .9375rem;
    font-weight: 500;
    color: hsl(var(--color-muted));
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.iogt-pestana--activa {
    color: hsl(var(--color-primary));
    border-bottom-color: hsl(var(--color-primary));
    background: hsl(var(--color-background));
}

.iogt-panel-extension__cuerpo {
    padding: 1.5rem;
}

@media (max-width: 599px) {
    .iogt-ficha__acciones .iogt-boton {
        width: 100%;
    }
}

.iogt-ficha__nombre {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.iogt-ficha__editar {
    color: hsl(var(--color-muted));
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    min-height: 0 !important;
}

.iogt-ficha__editar:hover {
    color: hsl(var(--color-primary));
}

/* ==================================================================== menú
 * Barra estrecha con el icono grande y la etiqueta debajo, como el tema al que
 * están hechos los clientes, en vez de una lista con iconos pequeños al lado.
 *
 * Se hace desde aquí y no reescribiendo el componente porque ese componente trae
 * los submenús plegables y la versión de teléfono; tocarlo sería rehacer las dos.
 * ==================================================================== */

@media (min-width: 768px) {
    #main-aside {
        width: 7rem;
        background: hsl(var(--color-background));
    }

    /* El contenido llevaba el margen calculado para una barra de 16rem. */
    [class*="md:ml-64"] {
        margin-inline-start: 7rem !important;
    }

    #main-aside > div {
        padding: 1rem .5rem;
        gap: .375rem;
    }

    /* Cada entrada: icono arriba, palabra debajo, todo centrado. */
    #main-aside a,
    #main-aside button {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .375rem;
        width: 100%;
        padding: .75rem .25rem !important;
        border-radius: .625rem;
        font-size: .75rem !important;
        font-weight: 600;
        line-height: 1.2;
        text-align: center;
        color: hsl(var(--color-muted));
    }

    #main-aside a > svg,
    #main-aside button svg:first-child {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }

    #main-aside a:hover,
    #main-aside button:hover {
        background: hsl(var(--color-primary) / .07);
        color: hsl(var(--color-primary));
    }

    /* La entrada activa, marcada de verdad y no con un gris apenas visible. */
    #main-aside .bg-primary\/5 {
        background: hsl(var(--color-primary) / .1) !important;
        border-radius: .625rem;
    }

    #main-aside .bg-primary\/5 a {
        color: hsl(var(--color-primary));
    }

    /* El desplegable de «Cuenta»: la flecha sobra en una barra estrecha y los
       hijos van en letra pequeña, sin sangría, que no cabe. */
    #main-aside button > div {
        flex-direction: column !important;
        gap: .375rem;
    }

    #main-aside button > svg:last-child {
        display: none;
    }

    #main-aside [x-show] .p-4 {
        padding: 0 !important;
    }

    #main-aside [x-show] a {
        padding: .5rem .25rem !important;
        font-size: .6875rem !important;
        font-weight: 500;
    }
}

/* En el teléfono, la tabla de servicios del escritorio deja de ser tabla: cada
 * fila pasa a ser una tarjeta. Con cuatro columnas no cabía, y el desbordamiento
 * lateral cortaba justo el botón —lo único accionable de la fila—. */
@media (max-width: 767px) {
    .iogt-tabla-caja table,
    .iogt-tabla-caja tbody,
    .iogt-tabla-caja tr,
    .iogt-tabla-caja td {
        display: block;
        width: 100%;
    }

    .iogt-tabla-caja tr {
        padding: .875rem 1.125rem;
        border-bottom: 1px solid hsl(var(--color-neutral));
    }

    .iogt-tabla-caja tr:last-child {
        border-bottom: 0;
    }

    .iogt-tabla-caja td {
        padding: .1875rem 0 !important;
        border: 0 !important;
    }

    .iogt-tabla-caja .iogt-servicio__accion {
        text-align: start;
        margin-top: .625rem;
    }

    .iogt-tabla-caja .iogt-servicio__accion .iogt-boton {
        width: 100%;
    }

    .iogt-tabla-caja tbody tr:hover {
        background: transparent;
    }
}

/* ============================================================ cuenta: pestañas
 * Las secciones de «Cuenta» van como pestañas encima del contenido. En la barra
 * estrecha no cabían: quedaban como una columna de letra diminuta bajo el icono.
 * ============================================================================ */

.iogt-cuenta-pestanas {
    display: flex;
    gap: .25rem;
    margin: 0 0 1.5rem;
    padding: .25rem;
    border: 1px solid hsl(var(--color-neutral));
    border-radius: .75rem;
    background: hsl(var(--color-background-secondary));
    overflow-x: auto;
    scrollbar-width: none;
}

.iogt-cuenta-pestanas::-webkit-scrollbar {
    display: none;
}

.iogt-cuenta-pestana {
    flex: none;
    padding: .5rem .875rem;
    border-radius: .5rem;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    color: hsl(var(--color-muted));
    text-decoration: none;
    transition: background .15s, color .15s;
}

.iogt-cuenta-pestana:hover {
    color: hsl(var(--color-base));
    background: hsl(var(--color-background));
}

.iogt-cuenta-pestana--activa,
.iogt-cuenta-pestana--activa:hover {
    color: hsl(var(--color-primary));
    background: hsl(var(--color-background));
    box-shadow: var(--iogt-sombra);
}

/* En la barra estrecha, «Cuenta» es un enlace más y sus hijos viven en las
   pestañas de arriba. */
@media (min-width: 768px) {
    #main-aside .iogt-rail-plegable {
        display: none;
    }
}

/* ============================================================== menú superior
 * Enlaces en píldora, desplegable de la tienda como tarjeta y un camino de
 * vuelta al sitio principal.
 * ============================================================================ */

.iogt-menu > a,
.iogt-menu > div > div > button {
    padding: .5rem .75rem !important;
    border-radius: .5rem;
    font-size: .875rem !important;
    font-weight: 600;
    color: hsl(var(--color-base) / .8);
    transition: background .15s, color .15s;
}

.iogt-menu > div > div > button > div > span {
    padding: 0 !important;
    font-size: .875rem;
    color: inherit;
}

.iogt-menu > div > div > button > svg {
    margin-inline-start: .25rem;
    color: inherit;
}

.iogt-menu > a:hover,
.iogt-menu > div > div > button:hover {
    background: hsl(var(--color-primary) / .07);
    color: hsl(var(--color-primary));
}

.iogt-menu > a.text-primary {
    color: hsl(var(--color-primary));
    background: hsl(var(--color-primary) / .1);
}

.iogt-menu [x-ref="dropdown"] {
    min-width: 15rem;
    margin-top: .625rem;
    padding: .5rem;
    border-radius: .75rem;
    background: hsl(var(--color-background));
    box-shadow: var(--iogt-sombra-media);
}

.iogt-menu__titulo {
    display: block;
    padding: .375rem .75rem .5rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: hsl(var(--color-muted));
}

.iogt-menu [x-ref="dropdown"] a {
    padding: .5rem .75rem !important;
    border-radius: .5rem;
    font-size: .875rem !important;
    font-weight: 500;
    color: hsl(var(--color-base));
    transition: background .15s, color .15s;
}

.iogt-menu [x-ref="dropdown"] a::before {
    content: "";
    flex: none;
    width: .375rem;
    height: .375rem;
    border-radius: 999px;
    background: hsl(var(--color-primary) / .35);
    transition: background .15s;
}

.iogt-menu [x-ref="dropdown"] a:hover {
    background: hsl(var(--color-primary) / .07);
    color: hsl(var(--color-primary));
}

.iogt-menu [x-ref="dropdown"] a:hover::before,
.iogt-menu [x-ref="dropdown"] a.text-primary::before {
    background: hsl(var(--color-primary));
}

.iogt-menu__sep {
    width: 1px;
    height: 1.25rem;
    margin: 0 .375rem;
    background: hsl(var(--color-neutral));
}

.iogt-menu__volver {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .5rem .75rem;
    border-radius: .5rem;
    font-size: .875rem;
    font-weight: 500;
    color: hsl(var(--color-muted));
    text-decoration: none;
    transition: background .15s, color .15s;
}

.iogt-menu__volver:hover {
    background: hsl(var(--color-primary) / .07);
    color: hsl(var(--color-primary));
}

.iogt-menu__volver--movil {
    display: flex;
    margin: .5rem 0 0;
    padding: .75rem;
    font-weight: 600;
    color: hsl(var(--color-base));
}

/* ================================================================ mega menú
 * «Tienda» abre un panel ancho con una tarjeta por categoría. El botón se pinta
 * del color primario mientras está abierto y el panel lleva una pestaña del
 * mismo color apuntándole: se ve de un vistazo quién es el padre de qué.
 * ============================================================================ */

.iogt-mega {
    position: relative;
}

.iogt-mega__disparador {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .5rem .75rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    color: hsl(var(--color-base) / .8);
    cursor: pointer;
    transition: background .15s, color .15s;
}

.iogt-mega__disparador:hover {
    background: hsl(var(--color-primary) / .07);
    color: hsl(var(--color-primary));
}

.iogt-mega__disparador--abierto,
.iogt-mega__disparador--abierto:hover {
    background: hsl(var(--color-primary));
    color: #fff;
}

.iogt-mega__flecha {
    transition: transform .2s;
}

.iogt-mega__disparador--abierto .iogt-mega__flecha {
    transform: rotate(180deg);
}

.iogt-mega__panel {
    position: absolute;
    top: calc(100% + .75rem);
    left: 0;
    z-index: 30;
    width: 42rem;
    max-width: calc(100vw - 2rem);
    padding: 1rem;
    border: 1px solid hsl(var(--color-neutral));
    border-top: 3px solid hsl(var(--color-primary));
    border-radius: .75rem;
    background: hsl(var(--color-background));
    box-shadow: var(--iogt-sombra-media);
}

.iogt-mega__panel::before {
    content: "";
    position: absolute;
    top: -.75rem;
    left: 1.75rem;
    border: .375rem solid transparent;
    border-top: 0;
    border-bottom-color: hsl(var(--color-primary));
}

.iogt-mega__cabeza {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 .25rem .75rem;
}

.iogt-mega__titulo {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: hsl(var(--color-muted));
}

.iogt-mega__cabeza a {
    font-size: .8125rem;
    font-weight: 600;
    color: hsl(var(--color-primary));
    text-decoration: none;
    white-space: nowrap;
}

.iogt-mega__cabeza a:hover {
    text-decoration: underline;
}

.iogt-mega__rejilla {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .25rem;
}

.iogt-mega__tarjeta {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .625rem .75rem;
    border-radius: .625rem;
    color: hsl(var(--color-base));
    text-decoration: none;
    transition: background .15s;
}

.iogt-mega__tarjeta:hover,
.iogt-mega__tarjeta--activa {
    background: hsl(var(--color-primary) / .07);
}

.iogt-mega__icono {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .5rem;
    overflow: hidden;
    background: hsl(var(--color-primary) / .1);
    color: hsl(var(--color-primary));
    transition: background .15s, color .15s;
}

.iogt-mega__icono img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.iogt-mega__tarjeta:hover .iogt-mega__icono,
.iogt-mega__tarjeta--activa .iogt-mega__icono {
    background: hsl(var(--color-primary));
    color: #fff;
}

.iogt-mega__texto {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    min-width: 0;
}

.iogt-mega__nombre {
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.3;
}

.iogt-mega__tarjeta--activa .iogt-mega__nombre {
    color: hsl(var(--color-primary));
}

.iogt-mega__detalle {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .75rem;
    line-height: 1.35;
    color: hsl(var(--color-muted));
}

@media (max-width: 900px) {
    .iogt-mega__panel {
        width: 22rem;
    }

    .iogt-mega__rejilla {
        grid-template-columns: 1fr;
    }
}