/* =========================================================
   oktoberMESS — 3. COMPONENTES COMPARTIDOS
   ---------------------------------------------------------
   Piezas que usan LAS DOS interfaces: la landing del invitado
   (móvil) y el backoffice del staff (tablet/celular). Si algo se
   usa en una sola, NO va aquí: va en cliente.css o staff.css.

   CONVENCIÓN DE NOMBRES  (BEM en español, prefijo ok-)
       .ok-bloque                → el componente
       .ok-bloque__parte         → una parte suya
       .ok-bloque--variante      → una variante
   Ejemplo: .ok-panel / .ok-panel__head / .ok-btn--primario

   MOBILE FIRST
   Todo lo que está fuera de un @media es la versión de CELULAR.
   Las @media son siempre `min-width` y solo AGRANDAN. Regla al
   agregar un componente nuevo: escríbelo primero para 360px de
   ancho; si en tablet necesita más aire, súbelo en la @media.

   TAMAÑO TÁCTIL
   Todo lo que se toca (botones, chips clicables, filas de lista,
   iconos de acción) mide mínimo 44px de alto: es el mínimo que
   recomiendan Apple y Google, y aquí el usuario es un invitado
   con el celular en una mano y una cerveza en la otra.
   ========================================================= */


/* =========================================================
   BOTONES
   ---------------------------------------------------------
   .ok-btn es la base. Siempre se combina con una variante:
       <button class="ok-btn ok-btn--primario">Jugar Ahora</button>
   Por defecto ocupa TODO EL ANCHO (así están en el diseño móvil).
   Para que se ajuste al contenido, usar .ok-btn--auto.
   ========================================================= */

.ok-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);

    width: 100%;
    min-height: 44px;
    padding: var(--sp-3) var(--sp-5);

    border: 1px solid transparent;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--text);

    font-family: var(--font-display);
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    line-height: 1;
    text-align: center;
    text-decoration: none;

    cursor: pointer;
    transition: background-color var(--t-rapida),
                border-color var(--t-rapida),
                color var(--t-rapida),
                box-shadow var(--t-rapida),
                transform var(--t-rapida);
    -webkit-tap-highlight-color: transparent;
}

.ok-btn:active { transform: translateY(1px); }

.ok-btn:disabled,
.ok-btn.is-cargando {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

/* — Primario: la píldora blanca con halo del diseño (GUARDAR Y
     ENVIAR en el staff, la acción principal de cada pantalla).
     Una sola por pantalla. */
.ok-btn--primario {
    background: #fff;
    color: var(--text-invert);
    box-shadow: var(--glow-blanco);
}
.ok-btn--primario:hover { background: var(--blanco-hover); color: var(--text-invert); }

/* — Fantasma: el borde blanco de las tarjetas del móvil
     (Jugar Ahora / Subir Foto / Dejar Comentarios). */
.ok-btn--fantasma {
    border-color: rgba(255, 255, 255, .55);
    color: var(--text);
}
.ok-btn--fantasma:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .08);
    color: var(--text);
}

/* — Acento: cian sólido, para acciones secundarias con peso
     (Escanear, Reintentar). */
.ok-btn--acento {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-invert);
    box-shadow: var(--glow);
}
.ok-btn--acento:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--text-invert); }

/* — Suave: sin peso visual, para "Cancelar" o "Omitir". */
.ok-btn--suave {
    background: var(--card-soft);
    border-color: var(--border);
    color: var(--text-muted);
}
.ok-btn--suave:hover { background: var(--card-hover); color: var(--text); }

/* — Peligro: descartar foto, cancelar registro. */
.ok-btn--peligro {
    background: var(--danger-soft);
    border-color: var(--danger);
    color: var(--danger);
}
.ok-btn--peligro:hover { background: var(--danger); color: #fff; }

/* — Tamaños y ancho */
.ok-btn--sm   { min-height: 36px; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); }
.ok-btn--lg   { min-height: 52px; font-size: var(--fs-md); }
.ok-btn--auto { width: auto; }

/* Botón redondo de solo icono (cerrar, retroceder, cámara) */
.ok-btn-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--card-soft);
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color var(--t-rapida), color var(--t-rapida);
}
.ok-btn-icono:hover { background: var(--card-hover); color: var(--text); }

/* Fila de botones: apilados en celular, lado a lado desde tablet */
.ok-acciones { display: flex; flex-direction: column; gap: var(--sp-3); }
@media (min-width: 576px) {
    .ok-acciones { flex-direction: row; }
    .ok-acciones .ok-btn { width: auto; flex: 1; }
}


/* =========================================================
   PANELES Y TARJETAS
   ---------------------------------------------------------
   .ok-panel  → caja con franja de encabezado (backoffice:
                "DATOS DEL CLIENTE DETECTADO").
   .ok-card   → caja simple sin encabezado (tarjetas del móvil).
   ========================================================= */

.ok-panel {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;          /* recorta la franja al radio */
    margin-bottom: var(--sp-4);
}

.ok-panel__head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: var(--card-soft);
    border-bottom: 1px solid var(--border);

    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--text-muted);
}
.ok-panel__head i { color: var(--accent); }

/* Empuja lo que le siga hasta la derecha (contadores, acciones) */
.ok-panel__head-fin { margin-left: auto; text-transform: none; letter-spacing: 0; }

.ok-panel__body { padding: var(--sp-4); }
.ok-panel__pie  {
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--border);
    background: var(--card-soft);
}

.ok-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: var(--sp-4);
    box-shadow: var(--shadow-md);
}

/* Tarjeta que es un enlace/botón entero */
.ok-card--clic { cursor: pointer; transition: border-color var(--t-rapida), background-color var(--t-rapida); }
.ok-card--clic:hover { border-color: var(--accent-line); background: var(--card-hover); }


/* =========================================================
   DATO (etiqueta + valor)
   ---------------------------------------------------------
   Las filas "Tipo de Gafete → (Personalizado)" del backoffice.
   En celular la etiqueta va ARRIBA del valor; desde tablet se
   ponen en dos columnas.
   ========================================================= */

.ok-dato { padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-soft); }
.ok-dato:last-child { border-bottom: 0; }

.ok-dato__label {
    display: block;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--text-muted);
    margin-bottom: var(--sp-1);
}

.ok-dato__valor { font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--text); }
.ok-dato__valor--fuerte { font-size: var(--fs-lg); font-weight: var(--fw-bold); }

@media (min-width: 768px) {
    .ok-dato {
        display: grid;
        grid-template-columns: 11rem 1fr;
        align-items: baseline;
        gap: var(--sp-3);
    }
    .ok-dato__label { margin-bottom: 0; }
}


/* =========================================================
   CHIPS / ESTATUS
   ---------------------------------------------------------
   El "[VALIDO - 10:15 AM]" verde del diseño, y los estatus de
   lead, gafete, foto, etc.
   ========================================================= */

.ok-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: .2rem var(--sp-3);
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    background: var(--card-soft);
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    white-space: nowrap;
}

.ok-chip--exito   { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.ok-chip--alerta  { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); }
.ok-chip--peligro { background: var(--danger-soft);  border-color: var(--danger);  color: var(--danger);  }
.ok-chip--info    { background: var(--info-soft);    border-color: var(--info);    color: var(--info);    }
.ok-chip--acento  { background: var(--accent-soft);  border-color: var(--accent);  color: var(--accent);  }

/* Punto de estatus para listas densas (sábana del BI) */
.ok-punto { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--text-suave); }
.ok-punto--exito   { background: var(--success); }
.ok-punto--alerta  { background: var(--warning); }
.ok-punto--peligro { background: var(--danger);  }


/* =========================================================
   FORMULARIOS
   ---------------------------------------------------------
   Un solo juego de campos para las dos interfaces: el buzón de
   feedback del invitado y el levantamiento de leads del staff.
   ========================================================= */

.ok-campo { margin-bottom: var(--sp-4); }

.ok-label {
    display: block;
    margin-bottom: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
}
.ok-label .ok-req { color: var(--danger); margin-left: .15rem; }

.ok-input,
.ok-select,
.ok-textarea {
    display: block;
    width: 100%;
    min-height: 46px;
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--card-soft);
    color: var(--text);
    transition: border-color var(--t-rapida), box-shadow var(--t-rapida), background-color var(--t-rapida);
}

.ok-textarea { min-height: 7rem; resize: vertical; line-height: var(--lh-base); }

.ok-input::placeholder,
.ok-textarea::placeholder { color: var(--text-suave); }

.ok-input:focus,
.ok-select:focus,
.ok-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    background: var(--card-bg);
}

.ok-input:disabled,
.ok-select:disabled,
.ok-textarea:disabled { opacity: .55; cursor: not-allowed; }

/* El select del diseño va CLARO (fondo blanco) para que destaque
   como el control que el operador tiene que tocar sí o sí.
   La flecha es un SVG embebido: sin imagen externa y sin depender
   de la que pinta cada navegador. */
.ok-select--claro {
    background-color: #fff;
    color: var(--text-invert);
    border-color: #fff;

    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    padding-right: var(--sp-6);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23071127'%3E%3Cpath d='M8 11 3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sp-3) center;
    background-size: 14px;
}
.ok-select--claro:focus { background-color: #fff; }

/* Texto de ayuda y de error bajo el campo */
.ok-ayuda { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--text-suave); }
.ok-error { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--danger); }

/* Campo con error: el borde rojo lo pone la clase, no el JS con
   estilos en línea. */
.ok-campo.is-invalido .ok-input,
.ok-campo.is-invalido .ok-select,
.ok-campo.is-invalido .ok-textarea { border-color: var(--danger); }

/* Rejilla de campos: una columna en celular, dos desde tablet */
.ok-form-grid { display: grid; grid-template-columns: 1fr; gap: 0 var(--sp-4); }
@media (min-width: 768px) {
    .ok-form-grid { grid-template-columns: 1fr 1fr; }
    .ok-form-grid .ok-campo--ancho { grid-column: 1 / -1; }
}


/* =========================================================
   OPCIONES SELECCIONABLES (trivia y encuesta)
   ---------------------------------------------------------
   Radio/checkbox reales por debajo (accesibles y con teclado);
   lo que se ve es el <label>. El invitado toca una tarjeta
   completa, no un círculo de 12px.
   ========================================================= */

.ok-opciones { display: flex; flex-direction: column; gap: var(--sp-3); }

.ok-opcion { position: relative; display: block; }

/* El input real se esconde pero SIGUE en el DOM y enfocable */
.ok-opcion input {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
}

.ok-opcion__caja {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 52px;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--card-soft);
    color: var(--text);
    cursor: pointer;
    transition: border-color var(--t-rapida), background-color var(--t-rapida);
}
.ok-opcion__caja:hover { border-color: var(--accent-line); }

/* Letra de la opción (A, B, C…) */
.ok-opcion__letra {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.75rem; height: 1.75rem;
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
    color: var(--text-muted);
}

.ok-opcion input:checked + .ok-opcion__caja {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.ok-opcion input:checked + .ok-opcion__caja .ok-opcion__letra {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--text-invert);
}
/* Foco por teclado: el halo va en la caja, no en el input oculto */
.ok-opcion input:focus-visible + .ok-opcion__caja {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Estados de calificación (se ponen al responder, desde el JS) */
.ok-opcion.es-correcta   .ok-opcion__caja { border-color: var(--success); background: var(--success-soft); }
.ok-opcion.es-incorrecta .ok-opcion__caja { border-color: var(--danger);  background: var(--danger-soft);  }


/* =========================================================
   ALERTAS EN LÍNEA
   ---------------------------------------------------------
   Mensajes dentro de la página (no toasts). Para los toasts se
   usa SweetAlert2/Bootstrap, igual que en el resto de sistemas.
   ========================================================= */

.ok-alerta {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: var(--r-md);
    background: var(--card-soft);
    font-size: var(--fs-sm);
    color: var(--text);
    margin-bottom: var(--sp-4);
}
.ok-alerta i { margin-top: .15rem; }

.ok-alerta--exito   { border-left-color: var(--success); background: var(--success-soft); }
.ok-alerta--exito i { color: var(--success); }
.ok-alerta--alerta  { border-left-color: var(--warning); background: var(--warning-soft); }
.ok-alerta--alerta i{ color: var(--warning); }
.ok-alerta--peligro { border-left-color: var(--danger);  background: var(--danger-soft);  }
.ok-alerta--peligro i{ color: var(--danger); }
.ok-alerta--info    { border-left-color: var(--accent);  background: var(--accent-soft);  }
.ok-alerta--info i  { color: var(--accent); }


/* =========================================================
   CARGA (spinner y esqueletos)
   ---------------------------------------------------------
   El evento corre con el dato del celular: SIEMPRE hay que
   mostrar algo mientras llega la respuesta.
   ========================================================= */

.ok-spinner {
    display: inline-block;
    width: 1.25rem; height: 1.25rem;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: ok-girar .7s linear infinite;
}
.ok-spinner--lg { width: 2.5rem; height: 2.5rem; border-width: 3px; }

@keyframes ok-girar { to { transform: rotate(360deg); } }

/* Bloque de carga centrado, para vaciar un panel mientras carga */
.ok-cargando {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-6) var(--sp-4);
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

/* Esqueleto: se le da alto con style o con una clase propia */
.ok-skeleton {
    border-radius: var(--r-md);
    background: linear-gradient(90deg, var(--card-soft) 25%, var(--card-hover) 50%, var(--card-soft) 75%);
    background-size: 200% 100%;
    animation: ok-brillo 1.2s ease-in-out infinite;
}
@keyframes ok-brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Estado vacío: "aún no hay fotos", "sin leads capturados" */
.ok-vacio {
    padding: var(--sp-6) var(--sp-4);
    text-align: center;
    color: var(--text-muted);
}
.ok-vacio i { font-size: var(--fs-2xl); color: var(--text-suave); margin-bottom: var(--sp-3); display: block; }
.ok-vacio p { font-size: var(--fs-sm); margin: 0; }


/* =========================================================
   AJUSTES A BOOTSTRAP
   ---------------------------------------------------------
   Solo lo que el mapeo de variables de base.css no alcanza a
   resolver. Mantener esta lista CORTA: si crece mucho, es señal
   de que conviene un componente propio.
   ========================================================= */

/* Bootstrap deja el modal pegado a los bordes en celular */
.modal-content {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
}
.modal-header, .modal-footer { border-color: var(--border); }

/* Tabla del backoffice */
.table {
    --bs-table-bg:          transparent;
    --bs-table-color:       var(--text);
    --bs-table-border-color: var(--border);
    --bs-table-striped-bg:  var(--card-soft);
    --bs-table-hover-bg:    var(--card-hover);
}
.table > thead th {
    background: var(--card-soft);
    color: var(--text-muted);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    border-bottom-color: var(--border);
    white-space: nowrap;
}

/* Cualquier tabla ancha se desplaza dentro de su caja; la PÁGINA
   nunca se desplaza en horizontal (regla dura en móvil). */
.ok-tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }