:root {
    --sat-color-marca: #008375;
    --sat-color-texto: #1f2933;
    --sat-color-fondo: #f4f6f5;
    --sat-color-borde: #d8dedc;
    --sat-color-error: #c0392b;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--sat-color-fondo);
    color: var(--sat-color-texto);
}

.sat-cabecera {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    background: var(--sat-color-marca);
    color: #fff;
    padding: 0.75rem 1.5rem;
}

.sat-cabecera nav a {
    color: #fff;
    margin-left: 1rem;
}

.sat-cabecera nav {
    flex-shrink: 0;
}

.sat-marca {
    font-weight: 700;
    font-size: 1.1rem;
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/* Menú "engranaje" -- mismo mecanismo que el de movvel-web
   (public/js/menu-engranaje.js): scroll-snap pestaña a pestaña, bloquea el
   arrastre vertical (touch-action: pan-x), flechas a los lados. Los colores
   son los de sistema-sat en vez del dorado de movvel-web. */
.sat-barra-modulos-envoltorio {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}

.sat-barra-modulos {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.3rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    touch-action: pan-x;
}

.sat-barra-modulos::-webkit-scrollbar {
    display: none;
}

.sat-modulo {
    position: relative;
    top: 2px;
    flex-shrink: 0;
    scroll-snap-align: center;
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    padding: 0.4rem 1.1rem;
    border-radius: 10px 10px 0 0;
    opacity: 0.75;
    transition: background-color 0.15s, opacity 0.15s, transform 0.15s;
}

.sat-modulo:hover {
    opacity: 1;
}

.sat-modulo-activo,
.sat-modulo-centrado {
    top: 0;
    background: rgba(255, 255, 255, 0.22);
    opacity: 1;
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12);
    transform: scale(1.05);
}

.sat-barra-modulos-flecha {
    flex: 0 0 auto;
    width: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    background: transparent;
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    opacity: 0.85;
    transition: opacity 0.15s;
}

.sat-barra-modulos-flecha:hover {
    opacity: 1;
}

.sat-flecha--desactivada {
    opacity: 0.2;
    cursor: default;
}

/* Tarjetas del módulo Panel: cuadradas y más pequeñas que las del resto de
   módulos, para que quepan varias de un vistazo sin desplazarse. El alto lo
   fija aspect-ratio, así que lo que crece (listas de actividad) se desplaza
   dentro de .sat-tarjeta-cuerpo y el botón de abajo nunca se sale.
   Todo va anidado bajo .sat-inicio-tarjetas a propósito: .sat-tarjeta se usa
   en medio sistema (formularios incluidos) y no debe encoger ahí. */
.sat-inicio-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.8rem;
}

.sat-inicio-tarjetas .sat-tarjeta {
    aspect-ratio: 1 / 1;
    /* align-self/min-height: sin esto, un hijo de grid se estira hasta el alto
       de la fila (align-items: stretch por defecto) y una tarjeta con mucha
       lista dentro dejaría de ser cuadrada. */
    align-self: start;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0.85rem 0.9rem;
    margin-bottom: 0;
    overflow: hidden;
    font-size: 0.85rem;
}

.sat-inicio-tarjetas .sat-tarjeta h2 {
    font-size: 0.92rem;
    margin-bottom: 0.4rem;
}

/* min-height: 0 es imprescindible: sin él, un hijo flex no baja de su alto
   de contenido y la tarjeta se estiraría en vez de desplazarse por dentro. */
.sat-inicio-tarjetas .sat-tarjeta-cuerpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.sat-inicio-tarjetas .sat-tarjeta-cuerpo p {
    margin: 0.3rem 0;
}

.sat-inicio-tarjetas .sat-lista-inicio li {
    font-size: 0.8rem;
    padding: 0.3rem 0;
}

/* El enlace del pie de cada tarjeta: fuera del cuerpo desplazable, siempre
   pegado abajo y a la misma altura en todas. */
.sat-inicio-tarjetas .sat-tarjeta > p:last-child {
    margin: 0.6rem 0 0;
}

.sat-inicio-tarjetas .sat-tarjeta > p:last-child .sat-boton {
    font-size: 0.78rem;
    padding: 0.35rem 0.6rem;
}

.sat-lista-inicio {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
}

.sat-lista-inicio li {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--sat-color-borde);
    font-size: 0.9rem;
}

.sat-lista-inicio li:last-child {
    border-bottom: none;
}

.sat-badge-modulo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.3rem;
    margin-left: 0.35rem;
    background: #e03131;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 999px;
}

.sat-panel {
    padding: 2rem;
    background: #fff;
    max-width: 100%;
    overflow-x: auto;
}

/* Contenido ancho (tablas, formularios de varias columnas...) que se
   desborda en pantallas estrechas: que se desplace dentro de sí mismo en
   vez de romper el diseño de toda la página o quedar inaccesible. */
img { max-width: 100%; height: auto; }

@media (max-width: 640px) {
    .sat-panel {
        padding: 1rem;
    }
    .sat-cabecera {
        padding: 0.6rem 0.9rem;
    }
}

.sat-acceso {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sat-tarjeta-acceso {
    background: #fff;
    border: 1px solid var(--sat-color-borde);
    border-radius: 8px;
    padding: 2rem;
    width: 320px;
}

.sat-logo-acceso {
    display: block;
    max-width: 160px;
    margin: 0 auto 1rem auto;
}

.sat-tarjeta-acceso h1 {
    margin-top: 0;
    font-size: 1.25rem;
    color: var(--sat-color-marca);
}

.sat-tarjeta-acceso label {
    display: block;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.sat-tarjeta-acceso input {
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.25rem;
    border: 1px solid var(--sat-color-borde);
    border-radius: 4px;
}

.sat-tarjeta-acceso button {
    margin-top: 1.5rem;
    width: 100%;
    padding: 0.6rem;
    background: var(--sat-color-marca);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
}

.sat-error {
    color: var(--sat-color-error);
    font-size: 0.9rem;
}

.sat-centrado {
    text-align: center;
    padding: 4rem 1rem;
}

.sat-boton-nuevo-parte {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem 0;
    margin-bottom: 1rem;
    color: var(--sat-color-marca);
}

.sat-marco-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 2px solid var(--sat-color-marca);
    border-radius: 8px;
}

.sat-boton-nuevo-parte svg {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.4));
}

.sat-boton-nuevo-parte span:last-child {
    font-size: 1rem;
    font-weight: 400;
    color: var(--sat-color-texto);
}

.sat-boton-nuevo-parte:hover span {
    text-decoration: underline;
}

.sat-fila-titulo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.sat-boton {
    display: inline-block;
    background: var(--sat-color-marca);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.6rem 1.2rem;
    text-decoration: none;
    cursor: pointer;
    font-size: 0.95rem;
}

.sat-pestanas {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.3rem;
    background: #dfe4e2;
    padding: 0.6rem 0.6rem 0 0.6rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sat-pestana {
    flex-shrink: 0;
}

.sat-pestana {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #c9d1ce;
    border: none;
    border-radius: 10px 10px 0 0;
    padding: 0.65rem 1.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    position: relative;
    top: 2px;
}

.sat-pestana svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.sat-pestana:hover {
    background: #d8dedb;
}

.sat-pestana-activa {
    background: #fff;
    color: var(--sat-color-marca);
    top: 0;
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.08);
}

.sat-pestana-activa:hover {
    background: #fff;
}

.sat-barra-herramientas {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 1rem;
    background: #f7f9f8;
    border: 1px solid var(--sat-color-borde);
    border-radius: 6px;
}

.sat-boton-icono {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0.5rem 0.8rem;
    cursor: pointer;
    color: var(--sat-color-marca);
    min-width: 80px;
}

.sat-boton-icono svg {
    width: 24px;
    height: 24px;
}

.sat-boton-icono span {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--sat-color-texto);
    text-align: center;
}

.sat-boton-icono:hover {
    background: #fff;
    border-color: var(--sat-color-borde);
}

.sat-fila-botones-fotos {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.sat-galeria-fotos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sat-foto-miniatura {
    position: relative;
    width: 70px;
    height: 70px;
}

.sat-foto-miniatura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--sat-color-borde);
}

.sat-foto-pendiente img {
    opacity: 0.7;
    border-style: dashed;
}

.sat-foto-miniatura button {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #c0392b;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
}

.sat-fila-seleccionada {
    background: #d7ece8 !important;
}

.sat-filtro-listado {
    width: 100%;
    max-width: 420px;
    padding: 0.6rem;
    margin-bottom: 1rem;
    border: 1px solid var(--sat-color-borde);
    border-radius: 4px;
}

.sat-tabla-scroll {
    overflow-x: auto;
}

/*
 * Listado largo dentro de una tarjeta: la tarjeta deja de crecer y el listado
 * se recorre con su propia barra. Sin esto, 500 clientes hacen una página de
 * varios metros y para llegar al buscador hay que subir del todo.
 *
 * Antes se llamaba .sat-tabla-scroll-25 y no la usaba ninguna pantalla. El
 * "25" no significaba nada para quien lo leyera.
 *
 * El alto va en vh y no en píxeles: en el portátil de la tienda y en el
 * monitor grande la tarjeta tiene que ocupar lo mismo en proporción. El tope
 * en píxeles es para que en una pantalla muy alta no acabe siendo la página
 * entera otra vez.
 */
.sat-tabla-scroll-alto {
    max-height: min(60vh, 720px);
    overflow: auto;
    border: 1px solid var(--sat-color-borde);
    border-radius: 6px;
}

/* La cabecera se queda arriba al bajar. Necesita fondo opaco (lo tiene en
   .sat-tabla-listado th) o las filas se leerían por debajo. */
.sat-tabla-scroll-alto thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

#panel_historico_cliente,
#panel_reparaciones_cliente {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--sat-color-borde);
    border-radius: 0 6px 6px 6px;
    margin-bottom: 1.5rem;
    background: #fff;
}

.sat-pestanas-inferiores {
    display: flex;
    gap: 0.3rem;
    margin-top: 1.5rem;
    background: #dfe4e2;
    padding: 0.5rem 0.5rem 0 0.5rem;
    border-radius: 6px 6px 0 0;
}

.sat-subpestana {
    background: #c9d1ce;
    border: none;
    border-radius: 10px 10px 0 0;
    padding: 0.55rem 1.2rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    position: relative;
    top: 2px;
}

.sat-subpestana:hover {
    background: #d8dedb;
}

.sat-subpestana-activa {
    background: #fff;
    color: var(--sat-color-marca);
    top: 0;
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.08);
}

.sat-subpestana-activa:hover {
    background: #fff;
}

.sat-modal-fondo {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.sat-modal-caja {
    background: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
}

/* Variante ancha: popup del parte recién creado (vista previa del PDF) */
.sat-modal-caja-ancha {
    max-width: 700px;
}

.sat-modal-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.sat-modal-cabecera h2 {
    margin: 0;
}

.sat-modal-cerrar {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: #6b7280;
    padding: 0 0.3rem;
}

.sat-modal-caja label {
    display: block;
    margin-top: 0.7rem;
    margin-bottom: 0.2rem;
    font-size: 0.85rem;
}

.sat-modal-caja input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--sat-color-borde);
    border-radius: 4px;
}

.sat-tabla-listado {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.sat-tabla-listado th {
    text-align: left;
    padding: 0.6rem;
    background: #f0f4f3;
    border-bottom: 2px solid var(--sat-color-borde);
    white-space: nowrap;
}

.sat-tabla-listado td {
    padding: 0.6rem;
    border-bottom: 1px solid var(--sat-color-borde);
}

.sat-tabla-listado tbody tr {
    cursor: pointer;
}

/*
 * La columna Gtin no puede estirar la tabla. Una ficha fusionada puede llevar
 * varios GTIN guardados y, si alguno se pinta entero, empuja al resto de
 * columnas fuera de la pantalla. El tope va en el <span> de dentro y no en la
 * celda porque max-width sobre un <td> lo ignoran casi todos los navegadores.
 * El listado enseña solo el primero y "(+N)"; los demás salen al pasar el
 * ratón por encima, en el title de la celda.
 */
.sat-tabla-listado .cat-celda-gtin span {
    display: inline-block;
    max-width: 18ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.sat-tabla-listado tbody tr:hover {
    background: #f0f4f3;
}

.sat-boton-secundario {
    background: #6b7280;
}

.sat-boton-peligro {
    background: #c0392b;
}

.sat-boton-peligro:hover {
    background: #922b21;
}

.sat-vista-previa-pdf {
    width: 100%;
    height: 480px;
    border: 1px solid var(--sat-color-borde);
    border-radius: 6px;
}

.sat-caja-historial-completo {
    margin-top: 1.5rem;
    max-height: 420px;
    overflow-y: auto;
}

.sat-caja-historial-completo .sat-historial-item {
    cursor: pointer;
}

.sat-filtros {
    margin-bottom: 1rem;
}

.sat-filtros a {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    margin-right: 0.5rem;
    border-radius: 4px;
    text-decoration: none;
    color: var(--sat-color-texto);
    background: #e6e9e8;
}

.sat-filtros a.activo {
    background: var(--sat-color-marca);
    color: #fff;
}

.sat-tabla {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.sat-tabla th, .sat-tabla td {
    text-align: left;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--sat-color-borde);
}

.sat-fila-clicable {
    cursor: pointer;
}

.sat-fila-clicable:hover {
    background: #f0f4f3;
}

.sat-etiqueta {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 12px;
    font-size: 0.8rem;
    text-transform: capitalize;
}

.sat-etiqueta-abierto {
    background: #fff3cd;
    color: #856404;
}

.sat-etiqueta-cerrado_reparado {
    background: #d4edda;
    color: #155724;
}

.sat-etiqueta-cerrado_sin_solucion {
    background: #f8d7da;
    color: #721c24;
}

.sat-tarjeta {
    background: #fff;
    border: 1px solid var(--sat-color-borde);
    border-radius: 8px;
    padding: 1.2rem;
    margin-bottom: 1rem;
}

.sat-tarjeta label {
    display: block;
    margin-top: 0.6rem;
    margin-bottom: 0.2rem;
    font-size: 0.9rem;
}

.sat-tarjeta input[type="text"],
.sat-tarjeta input[type="email"],
.sat-tarjeta input[type="number"],
.sat-tarjeta select {
    width: 100%;
    max-width: 320px;
    padding: 0.5rem;
    border: 1px solid var(--sat-color-borde);
    border-radius: 4px;
    font-family: inherit;
    display: block;
}

.sat-tarjeta h2 {
    margin-top: 0;
    font-size: 1rem;
    color: var(--sat-color-marca);
}

.sat-formulario fieldset {
    border: 1px solid var(--sat-color-borde);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.sat-formulario label {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.9rem;
}

.sat-formulario input,
.sat-formulario select,
.sat-formulario textarea {
    width: 100%;
    max-width: 480px;
    padding: 0.5rem;
    margin-top: 0.25rem;
    border: 1px solid var(--sat-color-borde);
    border-radius: 4px;
    font-family: inherit;
}

.sat-resultados-busqueda {
    max-width: 480px;
    border: 1px solid var(--sat-color-borde);
    border-radius: 4px;
    margin-top: 0.25rem;
}

.sat-resultado-item {
    padding: 0.5rem;
    cursor: pointer;
}

.sat-resultado-item:hover {
    background: #f0f4f3;
}

.sat-seleccion {
    font-weight: 600;
    color: var(--sat-color-marca);
}

.sat-ayuda {
    font-size: 0.85rem;
    color: #6b7280;
}

.sat-fila-botones {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.sat-grid-cliente {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
        "buscar buscar buscar"
        "nombre apellidos telefono"
        "email nif direccion";
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.sat-celda-buscar    { grid-area: buscar; position: relative; }
.sat-celda-nombre    { grid-area: nombre; }
.sat-celda-apellidos { grid-area: apellidos; }
.sat-celda-telefono  { grid-area: telefono; }
.sat-celda-direccion { grid-area: direccion; }
.sat-celda-nif       { grid-area: nif; }
.sat-celda-email     { grid-area: email; }

.sat-grid-cliente label,
.sat-grid-dispositivo label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.2rem;
    text-align: center;
}

.sat-grid-cliente input,
.sat-grid-dispositivo input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--sat-color-borde);
    border-radius: 4px;
    text-align: center;
}

.sat-grid-cliente .sat-resultados-busqueda,
.sat-grid-dispositivo .sat-resultados-busqueda {
    position: absolute;
    z-index: 5;
    background: #fff;
    width: 100%;
    max-width: none;
    text-align: left;
}

#boton_crear_cliente:disabled,
#boton_crear_dispositivo:disabled {
    background: #9ca3af;
    cursor: default;
}

@media (max-width: 640px) {
    .sat-grid-cliente {
        grid-template-columns: 1fr;
        grid-template-areas:
            "buscar" "nombre" "apellidos" "telefono" "email" "nif" "direccion";
    }
    .sat-grid-dispositivo {
        grid-template-columns: 1fr;
        grid-template-areas:
            "buscar" "tipo" "marca" "modelo" "numeromodelo" "ean" "imei";
    }
}

.sat-grid-dispositivo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
        "buscar buscar buscar"
        "tipo marca modelo"
        "numeromodelo ean imei";
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.sat-celda-buscar-disp    { grid-area: buscar; position: relative; }
.sat-celda-tipo           { grid-area: tipo; }
.sat-celda-marca          { grid-area: marca; }
.sat-celda-modelo         { grid-area: modelo; }
.sat-celda-numero-modelo  { grid-area: numeromodelo; }
.sat-celda-ean            { grid-area: ean; }
.sat-celda-imei           { grid-area: imei; }

/* Campo con botón de lupa al lado (EAN e IMEI del cajetín Dispositivo) */
.sat-campo-con-boton {
    display: flex;
    gap: 0.4rem;
    align-items: stretch;
}
.sat-campo-con-boton input {
    flex: 1;
    min-width: 0;
}
.sat-boton-buscar-campo {
    flex: 0 0 auto;
    width: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sat-color-primario, #00a68c);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}
.sat-boton-buscar-campo svg {
    width: 1.1rem;
    height: 1.1rem;
}
.sat-boton-buscar-campo:hover {
    filter: brightness(1.1);
}

.sat-ficha-dispositivo {
    background: #fff;
    border: 1px solid var(--sat-color-borde);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    margin-top: 0.75rem;
}

.sat-ficha-cabecera {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sat-ficha-cabecera img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
}

.sat-ficha-specs {
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 0.15rem;
}

.sat-centrado-boton {
    text-align: center;
    margin-top: 0.6rem;
}

.sat-fila-dos-cajas {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.sat-caja-cliente {
    flex: 3;
}

.sat-caja-historial {
    flex: 1;
    min-width: 220px;
    max-height: 320px;
    overflow-y: auto;
}

.sat-historial-item {
    border: 1px solid var(--sat-color-borde);
    border-radius: 6px;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
}

.sat-historial-item:hover {
    background: #f0f4f3;
}

.sat-historial-problema {
    color: #6b7280;
    font-size: 0.8rem;
}

@media (max-width: 780px) {
    .sat-fila-dos-cajas {
        flex-direction: column;
    }
}

.sat-etiqueta-precio {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    margin-top: 1rem;
    margin-bottom: 0.3rem;
}

.sat-input-precio {
    width: 100%;
    max-width: 320px;
    padding: 1rem;
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    border: 2px solid var(--sat-color-marca);
    border-radius: 8px;
    color: var(--sat-color-marca);
}

.sat-check-garantia {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.9rem;
    font-weight: 400;
}

.sat-check-garantia input {
    margin-right: 0.4rem;
}

.sat-caja-items {
    margin-top: 1rem;
}

.sat-item-agregado {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--sat-color-borde);
    border-radius: 6px;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
}

.sat-item-agregado span:first-child {
    flex: 1;
}

/* Precio editable por línea (repuesto reutilizado, cortesía comercial...) */
.sat-precio-item {
    flex: 0 0 auto;
    width: 6.5rem;
    text-align: right;
}

.sat-quitar-item {
    background: none;
    border: none;
    color: #c0392b;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 0.3rem;
}

.sat-quitar-item:hover {
    color: #922b21;
}

.sat-fila-reparacion {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.sat-celda-problema {
    flex: 1;
}

.sat-celda-problema textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--sat-color-borde);
    border-radius: 4px;
    font-family: inherit;
}

.sat-celda-tipo-reparacion {
    flex: 1;
    min-width: 220px;
}

.sat-celda-tipo-reparacion select {
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--sat-color-borde);
    border-radius: 4px;
}

.sat-celda-tipo-reparacion-ancha {
    margin-top: 1rem;
}

.sat-celda-tipo-reparacion-ancha select {
    width: 100%;
    max-width: 480px;
    padding: 0.5rem;
    border: 1px solid var(--sat-color-borde);
    border-radius: 4px;
}

@media (max-width: 780px) {
    .sat-fila-reparacion {
        flex-direction: column;
    }
}

.sat-grupo-specs {
    margin-top: 0.6rem;
    font-size: 0.85rem;
}

.sat-grupo-specs ul {
    margin: 0.25rem 0 0 0;
    padding-left: 1.1rem;
}

.sat-grupo-specs li {
    margin-bottom: 0.15rem;
    color: #374151;
}

/* Botón que se ve como un enlace (Quitar imagen, Borrar, Guardar... en el
   módulo Web/Blog). El selector se había perdido en algún momento y el
   bloque quedaba huérfano justo detrás de .sat-grupo-specs li: el navegador
   descartaba estas propiedades y los botones salían con el aspecto gris por
   defecto en vez de como enlaces. */
.sat-enlace-boton {
    background: none;
    border: none;
    color: var(--sat-color-marca);
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
    padding: 0;
}

.sat-subpanel {
    background: #f9fafb;
    border: 1px dashed var(--sat-color-borde);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 0.75rem;
}

/* Distribución por horas (Estadísticas de Web): 24 barras a ancho igual,
   con sus 24 horas debajo alineadas una a una -- sin esto (no tenían CSS
   propio) las horas se amontonaban al principio en vez de quedar cada una
   bajo su barra. */
.sat-barras-hora {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 140px;
    border-bottom: 1px solid var(--sat-color-borde);
}
.sat-barras-hora .barra {
    flex: 1 1 0;
    min-width: 0;
    background: var(--sat-color-marca);
    border-radius: 3px 3px 0 0;
    position: relative;
}
.sat-barras-hora .barra span {
    position: absolute;
    top: -1.2rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: #6b7280;
    white-space: nowrap;
}
.etiquetas-hora {
    display: flex;
    gap: 2px;
    margin-top: 0.3rem;
}
.etiquetas-hora span {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    font-size: 0.7rem;
    color: #6b7280;
}

/* Módulo Recompra (2026-08-04): campos sueltos + rejilla de 2 columnas para
   el formulario de cliente/dispositivo, dropdown de sugerencias (mismo
   aspecto que .sat-resultados-busqueda) y botones de grado tipo "chip". */
.sat-campo { margin-top: 0.75rem; }
.sat-campo label { display: block; font-size: 0.85rem; margin-bottom: 0.2rem; }
.sat-campo input, .sat-campo select {
    width: 100%; max-width: 480px; padding: 0.5rem; border: 1px solid var(--sat-color-borde);
    border-radius: 4px; font-family: inherit;
}
.sat-rejilla-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1.5rem; max-width: 700px; }
.sat-sugerencias {
    list-style: none; margin: 0.25rem 0 0; padding: 0; max-width: 480px;
    border: 1px solid var(--sat-color-borde); border-radius: 4px; background: #fff;
}
.sat-sugerencias li { padding: 0.5rem; cursor: pointer; }
.sat-sugerencias li:hover { background: #f0f4f3; }
.sat-grados { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 1rem; }
.sat-boton-elegido { background: var(--sat-color-marca); color: #fff; }

/* ---------------------------------------------------------------------
   Recompra: fichas con el nombre incrustado en el marco (<fieldset> +
   <legend>, igual que el módulo SAT) y rejilla de campos que se adapta
   sola al ancho de la ventana.

   El fallo que había: las fichas eran .sat-tarjeta, donde el input está
   limitado a 320px mientras la etiqueta se centra sobre TODA la celda de
   la rejilla. Al ensanchar la ventana la celda crecía, el cajetín no, y
   las etiquetas se veían descolocadas hacia la derecha. Aquí el cajetín
   ocupa siempre el 100% de su celda, así etiqueta y campo van juntos a
   cualquier ancho.
   --------------------------------------------------------------------- */
.sat-caja-recompra {
    border: 1px solid var(--sat-color-borde);
    border-radius: 8px;
    padding: 0.6rem 0.9rem 0.9rem;
    margin-bottom: 0.9rem;
}

.sat-caja-recompra > legend {
    font-weight: 600;
    color: var(--sat-color-marca);
    padding: 0 0.4rem;
}

/* 3 columnas fijas, como .sat-grid-cliente del módulo SAT (José: "que sean
   como las del módulo SAT"). Antes era repeat(auto-fit, minmax(165px, 1fr)):
   en un monitor ancho salían 6 o 7 columnas y los campos marcados como
   "anchos" (buscador de cliente, dirección) se estiraban de lado a lado de
   la tarjeta, desproporcionados respecto al resto. */
.sat-rejilla-campos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem 0.7rem;
    margin-top: 0.3rem;
}

/* Campo más ancho que los demás, pero NO de borde a borde: dos columnas de
   tres y con tope propio, para que no crezca sin control en pantallas grandes. */
.sat-rejilla-campos .sat-celda-ancha {
    grid-column: span 2;
    max-width: 28rem;
}
.sat-rejilla-campos .sat-celda-relativa { position: relative; }

.sat-rejilla-campos label {
    display: block;
    font-size: 0.8rem;
    margin: 0 0 0.15rem;
    text-align: center;
}

.sat-rejilla-campos input,
.sat-rejilla-campos select {
    /* Sin font-size propio a propósito: hereda 1rem (16px). Por debajo de
       16px el navegador móvil hace zoom automático al enfocar el campo. */
    width: 100%;
    max-width: none;
    padding: 0.4rem;
    margin: 0;
    border: 1px solid var(--sat-color-borde);
    border-radius: 4px;
    font-family: inherit;
    text-align: center;
    box-sizing: border-box;
}

.sat-rejilla-campos .sat-sugerencias {
    position: absolute;
    /* 50, no 5. El desplegable de Recompra salía por debajo de la sección
       siguiente. Con 5 basta contra el contenido normal, pero no contra
       cabeceras de tabla pegajosas ni contra cualquier cosa posicionada que
       venga después; 50 lo deja por encima de todo el contenido y por
       debajo de las barras fijas (100 y 400), que sí deben tapar. */
    z-index: 50;
    width: 100%;
    max-width: none;
    text-align: left;
    /* Opaco y con sombra: un desplegable que flota sobre el formulario tiene
       que leerse como tal. Sin fondo propio, cualquier texto de debajo se
       transparenta y parece que está "por debajo" aunque esté encima. */
    background: #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    max-height: 320px;
    overflow-y: auto;
}

/* En móvil, una sola columna -- mismo corte que usan .sat-grid-cliente y
   .sat-grid-dispositivo. Con 3 columnas fijas los campos quedarían
   ilegibles, y ahí sí interesa que el buscador y la dirección ocupen todo
   el ancho disponible (que es poco). */
@media (max-width: 700px) {
    .sat-rejilla-campos { grid-template-columns: 1fr; }
    .sat-rejilla-campos .sat-celda-ancha {
        grid-column: 1 / -1;
        max-width: none;
    }
}

/* Fila de acciones de la ficha (PDF, reenviar, enlace de firma...). */
.sat-fila-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.6rem;
}

/* Historial de contratos: la fila entera se puede pinchar para editarla. */
.sat-fila-contrato { cursor: pointer; }
.sat-fila-contrato:hover { background: #f0f4f3; }
.sat-fila-contrato.sat-fila-elegida { background: #e2f1ee; }

/* Avisito tipo app de móvil sobre un botón: el círculo rojo con el número.
   Lo usa Recompra para señalar que el cliente ya firmó desde su enlace y el
   contrato está esperando a que alguien lo cierre desde el panel. */
.sat-boton-con-aviso { position: relative; overflow: visible; }
.sat-aviso-numero {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: #c0392b;
    color: #fff;
    font-size: 0.72rem;
    font-weight: bold;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

/* Fila del historial de contratos cuyo cliente ya firmó y sigue esperando a
   que alguien la cierre desde el panel. */
.sat-fila-firma-pendiente { background: #fff6da; }
.sat-fila-firma-pendiente td:first-child::before { content: "● "; color: #c0392b; }

/* ---------------------------------------------------------------------
   Barra fija inferior (app/vistas/plantillas/barra_inferior.php)
   Misma idea que la .mv-pie-inferior de movvel.com: los enlaces de utilidad
   viven abajo y siempre visibles. Sustituye a la antigua barra superior de
   sonidos / Escritorio / Salir, que se eliminó.
   --------------------------------------------------------------------- */
:root {
    --sat-alto-barra-inferior: 44px;
}

/* Hueco en el flujo normal, del alto de la barra: sin él, la barra fija
   taparía el final del contenido de la página. */
.sat-barra-inferior-hueco {
    height: var(--sat-alto-barra-inferior);
}

.sat-barra-inferior {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 400;
    min-height: var(--sat-alto-barra-inferior);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.3rem 1rem;
    background: var(--sat-color-marca);
    color: #fff;
    font-size: 0.82rem;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.18);
}

.sat-barra-inferior-acciones {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex-wrap: wrap;
}

/* El botón de sonidos es un <button> y los demás son <a>: se igualan aquí
   para que todos se vean como la misma píldora. */
.sat-barra-inferior-boton {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font: inherit;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.sat-barra-inferior-boton:hover {
    background: rgba(255, 255, 255, 0.24);
}

.sat-barra-inferior-version {
    flex-shrink: 0;
    margin-left: auto;
    text-align: right;
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}

@media (max-width: 640px) {
    :root {
        --sat-alto-barra-inferior: 40px;
    }
    .sat-barra-inferior {
        padding: 0.25rem 0.6rem;
        font-size: 0.76rem;
    }
}

/* =====================================================================
   Formulario de credenciales (Ajustes -> Credenciales)
   Antes eran cuatro <label> sueltos en línea y sin estilo: al ser
   elementos en línea se colocaban uno al lado de otro según cupieran, y
   las etiquetas acababan despegadas de la casilla a la que se referían.
   No había forma de saber qué iba en cada campo. Ahora cada campo es un
   bloque: etiqueta arriba, casilla debajo, explicación al pie.
   ===================================================================== */
.sat-form-credencial {
    max-width: 560px;
}

.sat-campo {
    margin-bottom: 1.1rem;
}

.sat-campo > label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.sat-campo input[type="text"],
.sat-campo input[type="password"],
.sat-campo select {
    width: 100%;
    padding: 0.55rem;
    border: 1px solid var(--sat-color-borde);
    border-radius: 4px;
    /* 16px reales: por debajo, el navegador del móvil hace zoom solo al
       enfocar el campo y descoloca la página. */
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
}

.sat-campo .sat-ayuda {
    margin: 0.3rem 0 0;
}

/* El valor y su botón de ver/ocultar, en la misma línea. */
.sat-campo-secreto {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.sat-campo-secreto input {
    flex: 1 1 auto;
    min-width: 0;
}

.sat-campo-secreto .sat-boton {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Ficha de cada servicio en Ajustes -> Credenciales. */
.sat-ficha-servicio h4 {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    color: var(--sat-color-marca);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sat-ficha-estado {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: #fff3cd;
    color: #7a5b00;
}

.sat-ficha-estado--ok { background: #e6f4ea; color: #1e7a34; }
.sat-ficha-estado--vacio { background: #f1f3f4; color: #5f6368; }

/* La nota va debajo de su casilla y más discreta: es opcional. */
.sat-campo-nota {
    margin-top: 0.4rem;
    font-size: 0.85rem !important;
}

/* =====================================================================
   Calculadora de presupuestos (Presupuestos -> Calculadora)
   Se lee con el cliente al teléfono: el PVP tiene que verse de un
   vistazo y el coste quedar claramente en segundo plano.
   ===================================================================== */
.calc-opcion {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem;
    border: 1px solid var(--sat-color-borde);
    border-radius: 8px;
    margin-bottom: 0.6rem;
    background: #fff;
}

.calc-opcion-foto {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 6px;
    background: #f4f6f5;
}

/* El proveedor no da fotos de producto: cuando no hay foto del modelo se
   pone un icono, que es mejor que un hueco gris. */
.calc-opcion-foto--vacia {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

.calc-opcion-datos {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.calc-opcion-titulo {
    font-weight: 700;
    font-size: 0.9rem;
}

.calc-opcion-origen {
    font-size: 0.78rem;
    color: #5f6368;
}

.calc-opcion-precios {
    flex: 0 0 auto;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Grande y en color de marca: es el número que se dice en voz alta. */
.calc-pvp {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sat-color-marca);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* Pequeño y apagado: es interno, nunca se le dice al cliente. */
.calc-coste {
    font-size: 0.75rem;
    color: #8a8f94;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
    .calc-opcion { flex-wrap: wrap; }
    .calc-opcion-precios { width: 100%; flex-direction: row; justify-content: space-between; align-items: baseline; }
}

/* Barra de borrado en lote del listado de artículos. Separada y en un tono
   de aviso: es la única acción de esa pantalla que no se puede deshacer. */
.sat-borrado-lote {
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid #f0d3a8;
    border-left: 4px solid #d98b26;
    border-radius: 6px;
    background: #fffaf2;
}

.sat-borrado-lote > summary {
    cursor: pointer;
    font-weight: 700;
    color: #8a5410;
}

.sat-borrado-lote[open] > summary {
    margin-bottom: 0.7rem;
}

.sat-borrado-lote label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.sat-borrado-lote .sat-ayuda {
    margin: 0.3rem 0 0.7rem;
}

/* La casilla de borrado forzado, marcada en rojo: es la única que puede
   tocar líneas de partes de reparación. */
.sat-borrado-forzar {
    color: var(--sat-color-error);
    margin-bottom: 0.7rem;
}

/* El buscador de "Añadir producto" se estiraba a todo el ancho de la tarjeta
   mientras que el desplegable de al lado estaba topado en 480px: quedaban
   descuadrados y el campo era desproporcionado para lo que se escribe en él
   (un código de barras o dos palabras). Se iguala al del desplegable. */
.sat-celda-tipo-reparacion-ancha .sat-campo-con-boton {
    max-width: 480px;
}

/* Ficha de características del modelo en la Calculadora. */
.calc-ficha {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-top: 0.75rem;
    padding: 0.9rem;
    border: 1px solid var(--sat-color-borde);
    border-radius: 8px;
    background: #fff;
}

.calc-ficha-foto {
    flex: 0 0 auto;
    width: 90px;
    height: 90px;
    object-fit: contain;
    border-radius: 6px;
    background: #f4f6f5;
}

.calc-ficha-datos { flex: 1 1 auto; min-width: 0; }

/* Dos columnas: etiqueta a la izquierda y valor a la derecha, que se lee
   mucho más rápido que una lista corrida cuando estás al teléfono. */
.calc-ficha dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.75rem;
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
}

.calc-ficha dt { font-weight: 700; color: #5f6368; }
.calc-ficha dd { margin: 0; }

/* Celda de acciones del listado de modelos: un enlace y un formulario en la
   misma fila. Sin esto, el formulario hace salto de línea y descoloca la
   fila entera -- que es justo lo que se veía al quitar "Completar ficha". */
.cat-acciones {
    white-space: nowrap;
}

.cat-acciones form {
    display: inline;
}

.cat-acciones > * {
    vertical-align: middle;
}

/* Buscador del catálogo. El ancho ya estaba bien; el alto lo daba el
   navegador por defecto y era tan bajo que costaba acertar con el ratón. */
.cat-buscador {
    width: 350px;
    max-width: 100%;
    /* 16px o más: por debajo, el móvil hace zoom solo al enfocar. */
    font-size: 1rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--sat-color-borde);
    border-radius: 6px;
    vertical-align: middle;
}

.cat-buscador:focus {
    outline: none;
    border-color: var(--sat-color-marca);
}

/* Tarjeta desplegable. Estaba solo dentro de conectores.php; se sube aquí
   para que la pueda usar cualquier pantalla (la ficha del catálogo, por
   ejemplo) sin duplicar el estilo. */
.sat-conector-detalle { border: 1px solid #ddd; border-radius: 6px; margin-bottom: 0.6rem; background: #fff; }
.sat-conector-detalle summary { cursor: pointer; padding: 0.75rem 1rem; font-weight: bold; list-style: none; display: flex; align-items: center; gap: 0.6rem; }
.sat-conector-detalle summary::-webkit-details-marker { display: none; }
.sat-conector-detalle summary::before { content: '▸'; transition: transform 0.15s; }
.sat-conector-detalle[open] summary::before { transform: rotate(90deg); }
.sat-conector-detalle .sat-conector-cuerpo { padding: 0 1rem 1rem 1rem; }

/* Campos con altura de botón. Los de serie eran tan bajos que costaba
   acertarles con el ratón; ahora tienen la misma caja que un .sat-boton, que
   es la referencia visual que ya hay en la pantalla. */
.sat-conector-cuerpo input[type="text"],
.sat-conector-cuerpo input[type="number"],
.sat-conector-cuerpo input[type="time"],
.sat-conector-cuerpo input[type="password"],
.sat-conector-cuerpo select {
    min-height: 40px;
    padding: 0.5rem 0.7rem;
    font-size: 0.95rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
}
.sat-conector-cuerpo input:focus,
.sat-conector-cuerpo select:focus { outline: 2px solid var(--sat-color-marca); outline-offset: 1px; }

/* El bloque de instrucciones, plegado: es un texto largo que se toca de vez en
   cuando y desplegado empujaba el resto de la configuración fuera de pantalla. */
.sat-instrucciones summary { list-style: none; }
.sat-instrucciones summary::-webkit-details-marker { display: none; }
.sat-instrucciones summary::before { content: '▸ '; }
.sat-instrucciones[open] summary::before { content: '▾ '; }

/* --- Barra de búsqueda del catálogo, con el botón de fusionar al lado --- */
.cat-barra-busqueda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.cat-barra-busqueda form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.cat-por-pagina {
    font-size: 0.85rem;
    color: #666;
    white-space: nowrap;
}

.cat-por-pagina select {
    font-size: 1rem;
    padding: 0.5rem 0.4rem;
    border: 1px solid var(--sat-color-borde);
    border-radius: 6px;
}

/* --- Paginación con flechas --- */
.cat-paginacion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
}

.cat-paginacion a,
.cat-paginacion span {
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--sat-color-borde);
    border-radius: 4px;
    text-decoration: none;
    color: var(--sat-color-texto);
    font-size: 0.9rem;
}

.cat-paginacion a:hover {
    border-color: var(--sat-color-marca);
}

.cat-pag-actual {
    background: var(--sat-color-marca);
    color: #fff !important;
    border-color: var(--sat-color-marca) !important;
    font-weight: bold;
}

.cat-pag-apagado {
    opacity: 0.35;
    border-color: transparent !important;
}

/* El "Página X de Y" no es un botón: sin recuadro. */
.cat-pag-info {
    border: none !important;
    margin-left: auto;
    color: #666;
}

/* Conector apagado: se ve de un vistazo que no se está consultando. */
.sat-conector-apagado { opacity: 0.65; border-style: dashed; }

/* Aviso dentro del desplegable del buscador (ej. "ese código es de una
   batidora"): no es una opción elegible, así que ni se resalta al pasar por
   encima ni parece que se pueda pulsar. */
.sat-sugerencias .rc-sugerencia-aviso {
    cursor: default;
    color: var(--sat-color-texto-suave, #6b6b6b);
    font-style: italic;
}
.sat-sugerencias .rc-sugerencia-aviso:hover { background: transparent; }

/* Número del parte en curso, AL LADO del icono "Crear Parte" -- no debajo.
   El botón es display:flex (de bloque), así que el número suelto detrás se
   iba a la línea siguiente: por eso los dos van dentro de esta fila.

   Solo la cifra, sin "Parte" ni almohadilla (José, 09-08-2026), y en el
   dorado de movvel.com (--mv-dorado, #C9971F) en vez del verde: es el dato
   que se apunta en la bolsa o se le dice al cliente por teléfono, y con el
   dorado destaca sobre el verde de marca que usa todo lo demás. */
.sat-fila-crear-parte {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.sat-numero-parte {
    /* margin-bottom compensa el del botón, para que la cifra quede alineada
       con el icono y no con el hueco de debajo. */
    margin-bottom: 1rem;
    font-size: 1.9rem;
    line-height: 1;
    color: #C9971F;
    letter-spacing: 0.02em;
}

/* Ficha de artículo desplegada dentro del listado (Almacén → Artículos).
   La fila del artículo se queda arriba, resaltada, y la ficha ocupa una fila
   propia a todo el ancho justo debajo. */
.sat-tabla-listado tr.alm-fila-editando > td {
    background: #eef6f3;
    font-weight: 600;
    border-bottom: none;
}

.sat-tabla-listado tr.alm-fila-ficha > td {
    padding: 0 0 1rem;
    background: #eef6f3;
    cursor: default;
}

.sat-tabla-listado tr.alm-fila-ficha h2 {
    margin-top: 0;
}


/* Campos de identificación de la ficha de artículo (Almacén → Artículos).
   Rejilla de cuatro columnas iguales: las dos filas quedan alineadas entre sí y
   con la misma separación, que es lo que no consigue una fila flexible con
   anchos distintos. Hace falta la rejilla porque `.sat-tarjeta label` es
   display:block y cada campo se comería un renglón entero. */
.alm-rejilla-campos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.9rem 1.2rem;
    margin: 0.8rem 0 1rem;
}

.sat-tarjeta .alm-rejilla-campos > label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
}

.sat-tarjeta .alm-rejilla-campos input[type="text"],
.sat-tarjeta .alm-rejilla-campos input[type="number"],
.sat-tarjeta .alm-rejilla-campos select {
    width: 100%;
}

/* En pantalla estrecha, de cuatro en fila a dos y luego a una: apretarlos
   más dejaría los desplegables ilegibles. */
@media (max-width: 1100px) {
    .alm-rejilla-campos { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .alm-rejilla-campos { grid-template-columns: 1fr; }
}

/* Franja de precios de la ficha de artículo: precio de venta, sin IVA, canon
   LPI, coste y margen. Ocupa el ancho entero de la rejilla y reparte sus cinco
   campos con anchos distintos — el canon necesita sitio para la etiqueta y el
   margen apenas necesita tres dígitos — sin descuadrar las cuatro columnas de
   los campos de arriba. */
.sat-tarjeta .alm-rejilla-campos > .alm-bloque-precios {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr 1.6fr 0.8fr 0.7fr;
    gap: 0.9rem 1.2rem;
    align-items: start;
    margin: 0;
}

.sat-tarjeta .alm-bloque-precios > label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
}

.sat-tarjeta .alm-bloque-precios input[type="text"],
.sat-tarjeta .alm-bloque-precios select {
    width: 100%;
}

@media (max-width: 1100px) {
    .sat-tarjeta .alm-rejilla-campos > .alm-bloque-precios {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .sat-tarjeta .alm-rejilla-campos > .alm-bloque-precios {
        grid-template-columns: 1fr;
    }
}

/* Botones de la ficha de artículo, al final del todo: guardar y eliminar con
   aire entre ellos, para que borrar no caiga a un pelo de guardar. */
.alm-botones-ficha {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    margin: 1.5rem 0 0.5rem;
}

/* Galería de fotos de la ficha del catálogo (migración 104). Miniaturas en
   rejilla que se adapta: un dispositivo puede tener tres fotos o quince. */
.cat-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.8rem;
    margin: 0.8rem 0 1rem;
}

.cat-galeria-foto {
    margin: 0;
    padding: 0.4rem;
    border: 1px solid var(--sat-color-borde);
    border-radius: 6px;
    background: #fff;
    text-align: center;
}

/* La principal se distingue de un vistazo: es la que se ve en la tienda. */
.cat-galeria-foto.es-principal {
    border-color: #0a7d55;
    box-shadow: inset 0 0 0 1px #0a7d55;
}

.cat-galeria-foto img {
    width: 100%;
    height: 110px;
    object-fit: contain;
    display: block;
}

.cat-galeria-foto figcaption {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
    font-size: 0.8rem;
}

.cat-galeria-foto button {
    border: 1px solid var(--sat-color-borde);
    border-radius: 4px;
    background: #f7f9fc;
    cursor: pointer;
    font-size: 0.78rem;
    padding: 0.15rem 0.4rem;
}

.cat-galeria-foto .cat-galeria-borrar {
    color: var(--sat-color-error);
}

/* Visor de fotos a tamaño real (Catálogo y Almacén). Las miniaturas miden
   110px: una foto pixelada parece perfecta ahí y se descubre ya publicada. */
.visor-imagen {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(15, 20, 25, 0.92);
    flex-direction: column;
}

.visor-imagen.abierto {
    display: flex;
}

body.visor-imagen-abierto {
    overflow: hidden;
}

.visor-imagen-barra {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
}

.visor-imagen-datos {
    margin-right: auto;
    font-size: 0.85rem;
    opacity: 0.85;
}

.visor-imagen-boton {
    min-width: 2.4rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 4px;
    background: transparent;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
}

.visor-imagen-boton:hover {
    background: rgba(255, 255, 255, 0.15);
}

.visor-imagen-marco {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    padding: 1rem;
}

/* Sin max-height: con zoom la foto tiene que poder desbordar y que el marco
   la deje recorrer con la barra de desplazamiento. */
.visor-imagen-marco img {
    max-width: 100%;
    transform-origin: center center;
    transition: transform 0.12s ease-out;
    cursor: zoom-in;
}

/* La foto de la galería avisa de que se puede abrir. */
.cat-galeria-foto img {
    cursor: zoom-in;
}

/* Ficha técnica del artículo: mismas columnas que la del catálogo. */
.alm-rejilla-ficha {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.5rem 1.4rem;
    margin: 0.6rem 0 1rem;
}

.sat-tarjeta .alm-rejilla-ficha > label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0;
}

.sat-tarjeta .alm-rejilla-ficha input[type="text"],
.sat-tarjeta .alm-rejilla-ficha select {
    width: 100%;
}

/* Editor visual de textos con formato. Estaba solo en el blog, con el CSS
   metido en su vista; al usarlo también en las fichas de producto se sube
   aquí, que es donde tiene que estar. */
.mv-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.4rem;
}

.mv-editor-toolbar button,
.mv-editor-toolbar select {
    padding: 0.25rem 0.55rem;
    border: 1px solid #ccc;
    background: #f6f6f6;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}

.mv-editor-toolbar button:hover {
    background: #ececec;
}

/* Color de texto y de fondo: del tamaño de un botón, sin etiqueta. Iban dentro
   de una etiqueta con texto y se comían media barra para decir lo que el propio
   color ya dice. */
.mv-editor-color {
    width: 2.2rem;
    height: 1.9rem;
    padding: 0.1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f6f6f6;
    cursor: pointer;
    vertical-align: middle;
}

.mv-editor-area {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    min-height: 8rem;
    background: #fff;
    overflow: auto;
}

.mv-editor-area:focus {
    outline: 2px solid #008375;
}

/* Los textos de la tienda ocupan el ancho de la tarjeta: se escriben párrafos,
   no dos palabras, y en 620px no se ve lo que se está montando. */
.alm-campo-ancho-total,
.alm-campo-ancho-total label,
.alm-campo-ancho-total textarea,
.alm-campo-ancho-total .mv-editor-area {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Los dos textos de la tienda: una barra arriba y cada descripción en su
   tarjeta. Dos barras iguales seguidas ocupaban media pantalla y no dejaban
   claro cuál mandaba en cuál. */
.alm-editores {
    margin: 1rem 0;
}

.alm-editores-barra {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 0.4rem 0;
    background: #fff;
}

.alm-editor-tarjeta {
    padding: 0.9rem 1rem 1rem;
    margin-bottom: 0.9rem;
    border: 1px solid var(--sat-color-borde);
    border-radius: 8px;
    background: #fdfdfd;
}

.sat-tarjeta .alm-editor-tarjeta > label {
    display: block;
    margin: 0 0 0.4rem;
    font-weight: 600;
}

.alm-editor-tarjeta .mv-editor-area {
    margin-top: 0.4rem;
    min-height: 6rem;
}

/* La larga necesita más sitio: es la ficha entera del producto. */
.alm-editor-tarjeta:last-child .mv-editor-area {
    min-height: 14rem;
}

/* Las descripciones, replegadas de entrada. Con la tarjeta cerrada el resto de
   la ficha cabe en pantalla; se abre cuando toca escribir. */
.sat-tarjeta details.alm-editores {
    padding: 0.9rem 1rem;
    border: 1px solid var(--sat-color-borde);
    border-radius: 8px;
    background: #fdfdfd;
}

.sat-tarjeta details.alm-editores > summary {
    cursor: pointer;
    font-weight: 700;
}

.sat-tarjeta details.alm-editores[open] > summary {
    margin-bottom: 0.7rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--sat-color-borde);
}

/* Dentro de la tarjeta replegable, las dos cajas no necesitan borde propio:
   serían tres marcos uno dentro de otro. */
.alm-editores .alm-editor-tarjeta {
    padding: 0;
    border: none;
    background: none;
}

/* La barra pegada arriba, pero por debajo del título de la tarjeta. */
.alm-editores-barra {
    background: #fdfdfd;
}