/*
 * [T427] La guía de uso dentro del punto de venta.
 *
 * DÓNDE SE COLOCA EL BOTÓN, Y POR QUÉ AHÍ. En estas pantallas las esquinas están tomadas y son
 * terreno peligroso: abajo a la izquierda vive «Abrir caja» (T310), abajo a la derecha estaba el
 * botón flotante que en T283 se tragó los clics del botón Guardar y dejó a un cliente sin poder
 * crear productos, y en comida rápida esa misma esquina tapaba el botón de menú (T320).
 * Por eso esto va en el BORDE IZQUIERDO, a media altura: en las cuatro versiones del punto de
 * venta esa franja está vacía, y no hay ningún control con el que competir.
 *
 * Y por si acaso, el contenedor no intercepta nada: `pointer-events` sólo se enciende sobre la
 * pestaña. Aunque el cálculo de la posición fallara, no puede robar un clic a la caja.
 */
#kedasGuiaWrap {
    position: fixed; left: 0; top: 50%; transform: translateY(-50%);
    z-index: 9030; pointer-events: none;
}

#kedasGuiaBtn {
    pointer-events: auto;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 14px 7px; border: none;
    border-radius: 0 10px 10px 0;
    background: #0e68b1; color: #fff;
    font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: .04em;
    cursor: pointer; box-shadow: 0 3px 14px rgba(14, 104, 177, .32);
    opacity: .82; transition: opacity .15s, padding .15s;
}
#kedasGuiaBtn:hover, #kedasGuiaBtn:focus { opacity: 1; padding-right: 11px; outline: none; }
#kedasGuiaBtn svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 2; }
#kedasGuiaBtn .kedas-guia-rot {
    writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);
}

/* ---------------------------------------------------------------- el panel */

/*
 * [T466] Entra deslizandose desde el borde, como el menu lateral, en vez de aparecer de
 * golpe. `kedas-visible` lo pone en el documento y `kedas-abierto` lo corre: hacen falta
 * las dos porque no se puede animar desde `display:none`.
 */
.kedas-guia-fondo {
    position: fixed; inset: 0; z-index: 9060;
    display: none; background: rgba(16, 32, 45, 0);
    transition: background .22s ease;
}
.kedas-guia-fondo.kedas-visible { display: block; }
.kedas-guia-fondo.kedas-abierto { background: rgba(16, 32, 45, .55); }

.kedas-guia-panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(920px, 100%);
    background: #fff; box-shadow: -8px 0 40px rgba(0, 0, 0, .25);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform .24s cubic-bezier(.22, .61, .36, 1);
}
.kedas-guia-fondo.kedas-abierto .kedas-guia-panel { transform: translateX(0); }

/* Quien haya pedido menos movimiento en su sistema, no lo tiene. */
@media (prefers-reduced-motion: reduce) {
    .kedas-guia-fondo, .kedas-guia-panel { transition: none; }
}

.kedas-guia-cab {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px; background: #0e68b1; color: #fff; flex: 0 0 auto;
}
.kedas-guia-cab h2 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; flex: 1 1 auto; }
.kedas-guia-cerrar {
    flex: 0 0 auto; width: 34px; height: 34px; border: none; border-radius: 6px;
    background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.kedas-guia-cerrar:hover { background: rgba(255, 255, 255, .3); }
.kedas-guia-cerrar svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.2; }

/* ------------------------------------------------------- [T466] indice y buscador */

.kedas-guia-volver {
    flex: 0 0 auto; width: 34px; height: 34px; border: none; border-radius: 6px;
    background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.kedas-guia-volver:hover { background: rgba(255, 255, 255, .3); }
.kedas-guia-volver svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.2; }
.kedas-guia-volver[hidden] { display: none; }

.kedas-guia-indice {
    flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column;
    -webkit-overflow-scrolling: touch;
}
.kedas-guia-indice[hidden] { display: none; }

.kedas-guia-buscador {
    padding: 16px 18px 10px; flex: 0 0 auto; background: #fff;
    position: sticky; top: 0; z-index: 1;
}
.kedas-guia-buscar {
    width: 100%; box-sizing: border-box; height: 46px; padding: 0 16px;
    border: 1px solid #ccd7e2; border-radius: 8px;
    font-family: inherit; font-size: 15px; color: #22323d; background: #f7fafd;
}
.kedas-guia-buscar:focus { outline: none; border-color: #0e68b1; background: #fff; }

.kedas-guia-lista { list-style: none; margin: 0; padding: 0 12px 40px; }
.kedas-guia-lista li { margin: 0 0 8px; }

/* Renglones grandes: esto se toca con el dedo en la pantalla de una caja. */
.kedas-guia-tarea {
    display: block; width: 100%; text-align: left;
    padding: 15px 44px 15px 16px; border: 1px solid #e2eaf2; border-radius: 9px;
    background: #fff; color: #14384f; cursor: pointer;
    font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.4;
    position: relative; transition: border-color .12s, background .12s;
}
.kedas-guia-tarea:after {
    content: ''; position: absolute; right: 18px; top: 50%;
    width: 8px; height: 8px; margin-top: -5px;
    border-right: 2px solid #7d95a8; border-bottom: 2px solid #7d95a8;
    transform: rotate(-45deg);
}
.kedas-guia-tarea:hover, .kedas-guia-tarea:focus {
    border-color: #0e68b1; background: #f2f8fd; outline: none;
}

.kedas-guia-cuerpo[hidden] { display: none; }

.kedas-guia-cuerpo {
    flex: 1 1 auto; overflow-y: auto; padding: 22px 26px 60px;
    font-size: 14px; line-height: 1.6; color: #22323d;
    -webkit-overflow-scrolling: touch;
}
.kedas-guia-cuerpo img,
.kedas-guia-cuerpo svg { max-width: 100%; height: auto; }
.kedas-guia-cuerpo table { width: 100%; }

.kedas-guia-cargando { padding: 40px; text-align: center; color: #6b7785; font-size: 14px; }

/* En una caja pequeña o una tablet en vertical el panel ocupa todo: leer una guía a media
   pantalla en 768 px no se puede. */
@media (max-width: 900px) {
    .kedas-guia-panel { width: 100%; }
    .kedas-guia-cuerpo { padding: 16px 14px 50px; }
    .kedas-guia-buscador { padding: 12px 12px 8px; }
    .kedas-guia-lista { padding: 0 8px 40px; }
}