/* GranjaStock — CSS base, mobile-first, sin frameworks */

:root {
    --color-primario:   #FF6B2B;
    --color-primario-o: #e55a1f;
    --color-texto:      #1a1a1a;
    --color-texto-suave:#666;
    --color-fondo:      #f5f5f5;
    --color-blanco:     #ffffff;
    --color-borde:      #e0e0e0;
    --color-peligro:    #d32f2f;
    --color-exito:      #2e7d32;
    --color-aviso:      #f57f17;
    --radio:            8px;
    --sombra:           0 1px 4px rgba(0,0,0,.10);
    --sombra-media:     0 2px 8px rgba(0,0,0,.14);
    --fuente:           -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --transicion:       .18s ease;
}

/* ---------------------------------------------------------------
   Reset básico
--------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--fuente);
    font-size: 1rem;
    line-height: 1.5;
    background: var(--color-fondo);
    color: var(--color-texto);
    min-height: 100vh;
}

a { color: var(--color-primario); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

/* ---------------------------------------------------------------
   Layout
--------------------------------------------------------------- */
.contenedor {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ---------------------------------------------------------------
   Cabecera
--------------------------------------------------------------- */
.cabecera {
    background: var(--color-primario);
    color: var(--color-blanco);
    padding: .875rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--sombra-media);
}

.cabecera__marca {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-blanco);
    text-decoration: none;
}

.cabecera__info {
    font-size: .8rem;
    opacity: .9;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cabecera__info a { color: var(--color-blanco); opacity: .85; }
.cabecera__info a:hover { opacity: 1; text-decoration: none; }

/* Bloque derecho: agrupa info (granja/salir) + controles (avatar/hamburguesa) */
.cabecera__derecha {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Contenedor de avatar + hamburguesa */
.cabecera__controles {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Círculo de iniciales del usuario — visible siempre, lo inyecta menu.js */
.cabecera__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-blanco);
    color: var(--color-primario);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .01em;
    flex-shrink: 0;
    user-select: none;
}

/* Botón hamburguesa — oculto en escritorio, lo inyecta menu.js */
.cabecera__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radio);
}
.cabecera__toggle span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--color-blanco);
    border-radius: 2px;
    transition: transform .25s ease, opacity .25s ease;
}
/* Animación a "X" cuando el menú está abierto */
.cabecera__toggle.activo span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cabecera__toggle.activo span:nth-child(2) { opacity: 0; }
.cabecera__toggle.activo span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Capa oscura de fondo — solo visible con el panel abierto */
.cabecera__overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 90;
    opacity: 0;
    pointer-events: none;          /* invisible no debe interceptar clics */
    transition: opacity .25s ease;
}
.cabecera__overlay.visible {
    opacity: 1;
    pointer-events: auto;          /* solo captura clics cuando está abierto */
}
body.menu-abierto { overflow: hidden; }

/* Atajos del menú lateral — ocultos por defecto; solo visibles en móvil */
.menu-atajos { display: none; }

/* ---------------------------------------------------------------
   Área principal
--------------------------------------------------------------- */
.principal {
    padding: 1.5rem 1rem;
    max-width: 1024px;
    margin: 0 auto;
}

/* ---------------------------------------------------------------
   Cabecera de sección
--------------------------------------------------------------- */
.seccion-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.seccion-cabecera h2 { font-size: 1.25rem; font-weight: 700; }

/* ---------------------------------------------------------------
   Tarjeta
--------------------------------------------------------------- */
.tarjeta {
    background: var(--color-blanco);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1.25rem;
}

/* ---------------------------------------------------------------
   Tarjeta de acceso rápido del dashboard
--------------------------------------------------------------- */
.dashboard-card {
    display: block;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}

.dashboard-card:hover {
    border-color: var(--color-primario);
    box-shadow: var(--sombra-media);
    transform: translateY(-2px);
    text-decoration: none;
}

.dashboard-card__icono {
    font-size: 1.75rem;
    margin-bottom: .5rem;
}

.dashboard-card__titulo {
    font-weight: 700;
    color: var(--color-texto);
    margin-bottom: .2rem;
}

/* ---------------------------------------------------------------
   Botones
--------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1.1rem;
    border-radius: var(--radio);
    border: none;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transicion), opacity var(--transicion);
    text-decoration: none;
    white-space: nowrap;
}

.btn:hover { text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn--primario { background: var(--color-primario); color: #fff; }
.btn--primario:hover { background: var(--color-primario-o); }

.btn--secundario { background: #fff; color: var(--color-texto); border: 1px solid var(--color-borde); }
.btn--secundario:hover { background: var(--color-fondo); }

.btn--peligro { background: var(--color-peligro); color: #fff; }
.btn--peligro:hover { background: #b71c1c; }

.btn--pequeño { padding: .35rem .75rem; font-size: .8rem; }

/* ---------------------------------------------------------------
   Tabla
--------------------------------------------------------------- */
.tabla-wrap { overflow-x: auto; }

.tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.tabla th {
    text-align: left;
    padding: .65rem .75rem;
    border-bottom: 2px solid var(--color-borde);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-texto-suave);
    white-space: nowrap;
}

.tabla td {
    padding: .75rem;
    border-bottom: 1px solid var(--color-borde);
    vertical-align: middle;
}

.tabla tr:last-child td { border-bottom: none; }
.tabla tbody tr:hover { background: #fafafa; }

/* ---------------------------------------------------------------
   Badges de estado de stock
--------------------------------------------------------------- */
.badge {
    display: inline-block;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
}

.badge--ok      { background: #e8f5e9; color: #2e7d32; }
.badge--aviso   { background: #fff8e1; color: #f57f17; }
.badge--peligro { background: #ffebee; color: #c62828; }
/* Sin stock mínimo configurado: no está vigilado, pero tampoco es una alerta.
   Gris para no competir con el ámbar y el rojo de los estados reales. */
.badge--neutro  { background: #eceff1; color: #546e7a; }

/* ---------------------------------------------------------------
   Formularios
--------------------------------------------------------------- */
.formulario { display: flex; flex-direction: column; gap: 1rem; }

.campo { display: flex; flex-direction: column; gap: .35rem; }

.campo label {
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-texto);
}

.campo input,
.campo select,
.campo textarea {
    padding: .65rem .85rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    font-size: 1rem;
    font-family: var(--fuente);
    background: var(--color-blanco);
    color: var(--color-texto);
    width: 100%;
    transition: border-color var(--transicion);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px rgba(255,107,43,.15);
}

.campo textarea { resize: vertical; min-height: 80px; }

.campo--error input,
.campo--error select { border-color: var(--color-peligro); }

.campo__error {
    font-size: .8rem;
    color: var(--color-peligro);
}

.campo__ayuda {
    font-size: .8rem;
    color: var(--color-texto-suave);
}

/* Grid de campos en formulario */
.formulario__fila {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 600px) {
    .formulario__fila--2 { grid-template-columns: 1fr 1fr; }
    .formulario__fila--3 { grid-template-columns: 1fr 1fr 1fr; }
}

.formulario__acciones {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: .5rem;
}

/* ---------------------------------------------------------------
   Alertas / mensajes flash
--------------------------------------------------------------- */
.alerta {
    padding: .85rem 1rem;
    border-radius: var(--radio);
    font-size: .9rem;
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.alerta--exito  { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.alerta--error  { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }
.alerta--aviso  { background: #fff8e1; color: #f57f17; border: 1px solid #ffe082; }
.alerta--info   { background: #e3f2fd; color: #1565c0; border: 1px solid #90caf9; }

/* ---------------------------------------------------------------
   Estado vacío
--------------------------------------------------------------- */
.vacio {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-texto-suave);
}

.vacio p { margin-bottom: 1rem; font-size: .95rem; }

/* ---------------------------------------------------------------
   Pila de acciones en tabla
--------------------------------------------------------------- */
.acciones-tabla {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------
   Texto auxiliar
--------------------------------------------------------------- */
.texto-suave  { color: var(--color-texto-suave); }
.texto-pequeño { font-size: .85rem; }
.negrita { font-weight: 700; }

/* Alias (palabra_clave) bajo el nombre del insumo en el listado */
.insumo-alias {
    font-size: 11px;
    font-style: italic;
    color: var(--color-texto-suave);
}

/* ---------------------------------------------------------------
   Migas de pan
--------------------------------------------------------------- */
.migas {
    font-size: .83rem;
    color: var(--color-texto-suave);
    margin-bottom: 1rem;
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    align-items: center;
}
.migas a { color: var(--color-primario); }
.migas__sep { opacity: .4; }

/* ---------------------------------------------------------------
   Modal de confirmación
--------------------------------------------------------------- */
.modal-fondo {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 200;
    align-items: center;
    justify-content: center;
}

.modal-fondo.activo { display: flex; }

.modal {
    background: var(--color-blanco);
    border-radius: var(--radio);
    padding: 1.75rem;
    max-width: 420px;
    width: calc(100% - 2rem);
    box-shadow: var(--sombra-media);
}

.modal h3 { margin-bottom: .6rem; font-size: 1.1rem; }
.modal p  { font-size: .9rem; color: var(--color-texto-suave); margin-bottom: 1.25rem; }
.modal__acciones { display: flex; gap: .75rem; justify-content: flex-end; flex-wrap: wrap; }

/* ---------------------------------------------------------------
   Alias de campos (usados en formularios nuevos)
--------------------------------------------------------------- */
.campo__etiqueta {
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-texto);
    margin-bottom: .25rem;
    display: block;
}

.campo__control {
    padding: .65rem .85rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    font-size: 1rem;
    font-family: var(--fuente);
    background: var(--color-blanco);
    color: var(--color-texto);
    width: 100%;
    transition: border-color var(--transicion);
}

.campo__control:focus {
    outline: none;
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px rgba(255,107,43,.15);
}

.campo__acciones {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--color-borde);
}

/* ---------------------------------------------------------------
   Radio opciones (tipo de movimiento)
--------------------------------------------------------------- */
.campo__grupo-radio {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

@media (min-width: 600px) {
    .campo__grupo-radio { flex-direction: row; flex-wrap: wrap; gap: .75rem 1.5rem; }
}

.radio-opcion {
    display: flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
    font-size: .9rem;
    padding: .5rem .75rem;
    border-radius: var(--radio);
    border: 1px solid var(--color-borde);
    background: var(--color-blanco);
    transition: border-color var(--transicion), background var(--transicion);
}

.radio-opcion:hover { border-color: var(--color-primario); background: #fff7f4; }
.radio-opcion input[type="radio"] { accent-color: var(--color-primario); }

/* ---------------------------------------------------------------
   Indicador de campo requerido
--------------------------------------------------------------- */
.requerido { color: var(--color-peligro); margin-left: .15em; }

/* ---------------------------------------------------------------
   Alerta peligro (alias de error)
--------------------------------------------------------------- */
.alerta--peligro { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }

/* ---------------------------------------------------------------
   Paginación
--------------------------------------------------------------- */
.paginacion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------
   Responsive ajustes finales
--------------------------------------------------------------- */
@media (max-width: 480px) {
    .seccion-cabecera { flex-direction: column; align-items: stretch; }

    /* Grupos de acciones de la cabecera de sección: apilar a ancho completo
       para que botones como "+ Nuevo insumo" no se desborden ni se corten. */
    .seccion-cabecera > div {
        flex-wrap: wrap;
        width: 100%;
    }
    .seccion-cabecera .btn {
        flex: 1 1 auto;
        justify-content: center;
        white-space: normal;        /* permite partir el texto si hace falta */
    }

    .tabla th, .tabla td { padding: .55rem .5rem; }

    /* Mostrar el grupo avatar+hamburguesa y el overlay */
    .cabecera__controles { display: flex; }
    .cabecera__avatar { display: flex; }
    .cabecera__toggle { display: flex; }
    .cabecera__overlay { display: block; }

    /* La info de cabecera pasa a panel lateral deslizante.
       Se aplica a .cabecera__info directamente para que nazca oculto
       desde el primer render (sin esperar al JS) y evitar el "flash". */
    .cabecera__info {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 78%;
        max-width: 300px;
        background: var(--color-primario);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: .25rem;
        padding: 4.5rem 1.5rem 1.5rem;
        font-size: 1rem;
        box-shadow: var(--sombra-media);
        transform: translateX(100%);
        z-index: 95;
        overflow-y: auto;
    }
    /* La transición solo se activa una vez el JS está listo,
       así no se ve deslizar al cargar la página. */
    .cabecera.js-listo .cabecera__info { transition: transform .28s ease; }
    .cabecera__info.abierto { transform: translateX(0); }

    /* Cada enlace/dato ocupa toda la fila — objetivos táctiles grandes */
    .cabecera__info > * {
        width: 100%;
        padding: .85rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, .18);
    }
    .cabecera__info > *:last-child { border-bottom: none; }
    .cabecera__info a { display: block; opacity: 1; }

    /* El grupo de controles queda por encima del panel para poder cerrarlo */
    .cabecera__controles { position: relative; z-index: 100; }
    .cabecera__toggle { position: relative; z-index: 100; }

    /* Atajos de navegación dentro del panel lateral */
    .menu-atajos {
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .18);
        margin-bottom: .5rem;
        padding-bottom: .5rem;
    }
    .menu-atajos__titulo {
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        opacity: .6;
        padding: .5rem 0 .4rem;
        display: block;
    }
    .menu-atajo {
        display: flex;
        align-items: center;
        gap: .65rem;
        padding: .7rem 0;
        color: var(--color-blanco);
        opacity: .88;
        text-decoration: none;
        border-bottom: 1px solid rgba(255, 255, 255, .10);
        transition: opacity var(--transicion);
    }
    .menu-atajo:last-child { border-bottom: none; }
    .menu-atajo:hover, .menu-atajo:focus { opacity: 1; text-decoration: none; }
    .menu-atajo__icono { font-size: 1.1rem; width: 1.4rem; text-align: center; flex-shrink: 0; }
    .menu-atajo__texto { font-size: .95rem; }
}

/* ---------------------------------------------------------------
   Ayuda WhatsApp — Hero
--------------------------------------------------------------- */
.ayuda-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    border-radius: var(--radio);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.75rem;
    color: #fff;
}

.ayuda-hero__icono {
    font-size: 2.75rem;
    line-height: 1;
    flex-shrink: 0;
}

.ayuda-hero__titulo {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: .3rem;
}

.ayuda-hero__sub {
    font-size: .9rem;
    opacity: .9;
    line-height: 1.5;
}

/* ---------------------------------------------------------------
   Índice
--------------------------------------------------------------- */
.ayuda-indice {
    margin-bottom: 2rem;
}

.ayuda-indice__titulo {
    font-weight: 700;
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-texto-suave);
    margin-bottom: .75rem;
}

.ayuda-indice__lista {
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-size: .9rem;
}

/* ---------------------------------------------------------------
   Bloque de sección
--------------------------------------------------------------- */
.ayuda-bloque {
    margin-bottom: 2.25rem;
    padding-bottom: 2.25rem;
    border-bottom: 1px solid var(--color-borde);
}

.ayuda-bloque:last-of-type { border-bottom: none; }

.ayuda-bloque__cabecera {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.ayuda-bloque__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    background: var(--color-primario);
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    font-size: .9rem;
    margin-top: .1rem;
}

.ayuda-bloque__titulo {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: .3rem;
}

.ayuda-bloque__desc {
    font-size: .875rem;
    color: var(--color-texto-suave);
    line-height: 1.55;
}

.ayuda-bloque__cuerpo {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding-left: 3rem;
}

@media (min-width: 768px) {
    .ayuda-bloque__cuerpo {
        grid-template-columns: 320px 1fr;
        align-items: start;
    }
}

/* ---------------------------------------------------------------
   Simulador de chat WhatsApp
--------------------------------------------------------------- */
.chat {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--sombra-media);
}

.chat__fondo {
    background: #e5ddd5
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Ccircle cx='40' cy='40' r='30' fill='none' stroke='%23c8bdb4' stroke-width='.5'/%3E%3C/svg%3E")
        center / 80px;
    padding: 1rem .875rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.chat__msg {
    max-width: 82%;
    padding: .55rem .85rem .45rem;
    border-radius: 10px;
    font-size: .855rem;
    line-height: 1.5;
    position: relative;
    word-break: break-word;
}

/* Cola de burbuja */
.chat__msg--yo {
    background: #dcf8c6;
    align-self: flex-end;
    border-bottom-right-radius: 2px;
    box-shadow: 0 1px 1px rgba(0,0,0,.13);
}

.chat__msg--yo::after {
    content: '';
    position: absolute;
    right: -7px;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 10px 8px;
    border-color: transparent transparent #dcf8c6 transparent;
}

.chat__msg--bot {
    background: #fff;
    align-self: flex-start;
    border-bottom-left-radius: 2px;
    box-shadow: 0 1px 1px rgba(0,0,0,.13);
}

.chat__msg--bot::after {
    content: '';
    position: absolute;
    left: -7px;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 10px 0;
    border-color: transparent #fff transparent transparent;
}

.chat__detalle {
    margin-top: .5rem;
    padding: .5rem .65rem;
    background: rgba(0,0,0,.04);
    border-radius: 6px;
    font-size: .82rem;
    line-height: 1.6;
}

.chat__tipo {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: 4px;
    font-size: .75rem;
    font-weight: 700;
    margin-bottom: .25rem;
}

.chat__tipo--salida  { background: #ffebee; color: #c62828; }
.chat__tipo--entrada { background: #e8f5e9; color: #2e7d32; }

.chat__stock {
    font-size: .78rem;
    color: var(--color-texto-suave);
}

.chat__botones {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin-top: .6rem;
}

.chat__btn {
    display: inline-block;
    padding: .3rem .7rem;
    border-radius: 6px;
    font-size: .78rem;
    font-weight: 600;
    cursor: default;
    white-space: nowrap;
}

.chat__btn--ok  { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.chat__btn--no  { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }

/* Archivo adjunto */
.chat__archivo {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: rgba(0,0,0,.06);
    border-radius: 8px;
    padding: .5rem .7rem;
}

.chat__archivo-icono { font-size: 1.4rem; }

.chat__archivo-nombre {
    font-size: .8rem;
    color: var(--color-texto);
    font-weight: 500;
}

/* Nota de voz */
.chat__audio {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 160px;
}

.chat__audio-icono { font-size: 1.2rem; }

.chat__audio-onda {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
}

.chat__audio-onda span {
    display: inline-block;
    width: 3px;
    border-radius: 2px;
    background: #128C7E;
    animation: onda 1.2s ease-in-out infinite;
}

.chat__audio-onda span:nth-child(1)  { height: 6px;  animation-delay: 0s; }
.chat__audio-onda span:nth-child(2)  { height: 12px; animation-delay: .1s; }
.chat__audio-onda span:nth-child(3)  { height: 18px; animation-delay: .2s; }
.chat__audio-onda span:nth-child(4)  { height: 10px; animation-delay: .3s; }
.chat__audio-onda span:nth-child(5)  { height: 20px; animation-delay: .4s; }
.chat__audio-onda span:nth-child(6)  { height: 14px; animation-delay: .5s; }
.chat__audio-onda span:nth-child(7)  { height: 8px;  animation-delay: .6s; }
.chat__audio-onda span:nth-child(8)  { height: 16px; animation-delay: .7s; }
.chat__audio-onda span:nth-child(9)  { height: 6px;  animation-delay: .8s; }

@keyframes onda {
    0%, 100% { transform: scaleY(1); opacity: .7; }
    50%       { transform: scaleY(1.6); opacity: 1; }
}

.chat__audio-dur {
    font-size: .78rem;
    color: var(--color-texto-suave);
    white-space: nowrap;
}

/* ---------------------------------------------------------------
   Ejemplos de frases
--------------------------------------------------------------- */
.ayuda-ejemplos {
    padding: 1rem 1.1rem;
    background: var(--color-fondo);
    border-radius: var(--radio);
    border-left: 3px solid var(--color-primario);
    align-self: start;
}

.ayuda-ejemplos__titulo {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-texto-suave);
    margin-bottom: .5rem;
}

.ayuda-ejemplos__lista {
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-size: .855rem;
    color: var(--color-texto);
}

/* ---------------------------------------------------------------
   FAQ
--------------------------------------------------------------- */
.faq { display: flex; flex-direction: column; }

.faq__item {
    padding: .9rem 0;
    border-bottom: 1px solid var(--color-borde);
}

.faq__item:last-child { border-bottom: none; }

.faq__item dt {
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: .3rem;
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

.faq__item dt::before {
    content: 'P';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    min-width: 1.35rem;
    background: var(--color-primario);
    color: #fff;
    border-radius: 50%;
    font-size: .7rem;
    font-weight: 700;
}

.faq__item dd {
    font-size: .875rem;
    color: var(--color-texto-suave);
    margin-left: 1.85rem;
    line-height: 1.55;
}

/* ---------------------------------------------------------------
   Pie de página de ayuda
--------------------------------------------------------------- */
.ayuda-pie {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-borde);
    text-align: center;
}

/* ---------------------------------------------------------------
   Modal de confirmación de cierre de sesión
--------------------------------------------------------------- */
.logout-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.logout-modal.visible { display: flex; }

.logout-modal__caja {
    background: var(--color-blanco);
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra-fuerte, 0 8px 32px rgba(0,0,0,.18));
    padding: 2rem 1.75rem 1.5rem;
    max-width: 360px;
    width: calc(100% - 2rem);
    text-align: center;
}

.logout-modal__titulo {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 .4rem;
    color: var(--color-texto);
}

.logout-modal__sub {
    font-size: .875rem;
    color: var(--color-texto-suave);
    margin: 0 0 1.5rem;
}

.logout-modal__acciones {
    display: flex;
    gap: .75rem;
    justify-content: center;
}

.btn--peligro {
    background: var(--color-peligro);
    color: var(--color-blanco);
    border: none;
    padding: .55rem 1.25rem;
    border-radius: var(--radio-btn, 6px);
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.btn--peligro:hover { opacity: .88; }

/* ── Previsualización de la foto de inventario ───────────────────────── */

/* Oculta de inicio: el JS la muestra al elegir archivo. */
.foto-preview-zona {
    display: none;
    margin-bottom: 1.25rem;
}

.foto-preview__lienzo {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--color-borde, #ddd);
    border-radius: 8px;
    display: block;
}

/* En desktop la foto es solo una comprobación de que se eligió la correcta:
   a ancho completo, una foto vertical de móvil ocupa toda la pantalla. */
@media (min-width: 768px) {
    .foto-preview__lienzo {
        max-width: 30%;
    }
}

/* ── Confirmar inventario: línea detectada que no está en el catálogo ──── */

.linea-nueva {
    margin-top: .4rem;
}

.linea-nueva__aviso {
    display: block;
    font-size: .8rem;
    color: var(--color-aviso);
    margin-bottom: .35rem;
}

.linea-nueva__boton {
    padding: .3rem .6rem;
    font-size: .78rem;
}

/* Línea ya aplicada al stock: se atenúa y sus campos quedan deshabilitados
   desde el JS, para que un reintento no repita el movimiento. */
.fila--aplicada {
    opacity: .55;
}