/*
    ═══════════════════════════════════════════════════════════════════════════
    AYUDA — el panel de ayuda (ayu-), los primeros pasos del Inicio (ayu-ini-),
    las dificultades (dif-) y la experiencia de uso (exp-)
    ═══════════════════════════════════════════════════════════════════════════
    Encima del formato homologado de pantalla.css. Las variables (--pan-*) salen
    de ahí. El panel es un diálogo lateral en escritorio y una hoja a pantalla
    completa en el teléfono (mismo corte que la hoja de búsqueda: 1024 px).
*/

/* ── El botón «?» de la cabecera del teléfono (en el escritorio va al pie del riel: navegacion.css) ── */
.nav-ayuda {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px;
    background: rgba(255, 255, 255, .10);
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.nav-ayuda .material-symbols-outlined { font-size: 24px; line-height: 1; }
.nav-ayuda:hover, .nav-ayuda:focus-visible { background: rgba(255, 255, 255, .20); outline: none; }
.nav-ayuda:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }

/* ── El panel ── */
.ayu-fondo { position: fixed; inset: 0; z-index: 1055; background: rgba(12, 39, 64, .28); }

.ayu-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 1060;
    width: min(440px, 100vw);
    display: flex;
    flex-direction: column;
    background: var(--pan-fondo, #f6f8fb);
    box-shadow: -8px 0 28px rgba(12, 39, 64, .18);
    font-family: var(--pan-sans, 'IBM Plex Sans', system-ui, sans-serif);
    animation: ayu-entrar .18s ease-out;
    outline: none;
}
@keyframes ayu-entrar { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ayu-panel { animation: none; } }

.ayu-cab {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 8px 16px;
    background: rgba(255, 255, 255, .92);
    border-bottom: 1px solid var(--pan-linea, #e6ecf2);
}
.ayu-titulo { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--pan-tinta, #0C2740); }
.ayu-titulo .rzi { font-size: 20px !important; color: var(--pan-azul, #185FA5); }
.ayu-cerrar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: 0; border-radius: 12px; background: none;
    color: var(--pan-apagado, #5b7186); cursor: pointer;
}
.ayu-cerrar:hover { background: rgba(12, 39, 64, .06); }
.ayu-cerrar:focus-visible { outline: 2px solid var(--pan-azul, #185FA5); outline-offset: 1px; }

.ayu-pestanas { flex: 0 0 auto; display: flex; gap: 4px; padding: 8px 12px 0; border-bottom: 1px solid var(--pan-linea); background: var(--pan-papel, #fff); }
.ayu-pestana {
    flex: 1 1 auto; min-height: 40px; padding: 6px 8px;
    border: 0; border-bottom: 2px solid transparent; background: none;
    font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--pan-apagado);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.ayu-pestana.ayu-activa { color: var(--pan-azul); border-bottom-color: var(--pan-azul); }
.ayu-pestana:focus-visible { outline: 2px solid var(--pan-azul); outline-offset: -2px; }
.ayu-cuenta { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: var(--pan-fondo); color: var(--pan-apagado); }

.ayu-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
.ayu-seccion { display: flex; flex-direction: column; gap: 10px; }
.ayu-h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--pan-tinta); }
.ayu-h4 { margin: 6px 0 0; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pan-tenue); }
.ayu-que { margin: 0; font-size: 13px; line-height: 1.5; color: var(--pan-apagado); }
.ayu-lista { margin: 0; padding-left: 20px; font-size: 12.5px; line-height: 1.55; color: var(--pan-tinta); display: grid; gap: 4px; }
.ayu-pistas { color: var(--pan-apagado); }
.ayu-enlaces { display: flex; flex-wrap: wrap; gap: 8px; }
.ayu-enlace { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px 10px; border-radius: 8px; background: var(--pan-papel); border: 1px solid var(--pan-linea); color: var(--pan-azul); font-size: 12px; font-weight: 600; text-decoration: none; }
.ayu-enlace .rzi { font-size: 16px !important; }
.ayu-enlace:hover { border-color: var(--pan-azul); }
.ayu-pie { margin: 8px 0 0; }
.ayu-boton-texto { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 10px; border: 1px dashed var(--pan-linea); border-radius: 8px; background: none; color: var(--pan-azul); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ayu-boton-texto .rzi { font-size: 18px !important; }
.ayu-nota { margin: 0; font-size: 12px; color: var(--pan-tenue); }

/* Primeros pasos (en el panel y en el Inicio) */
.ayu-pasos { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: paso; }
.ayu-paso { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--pan-papel); border: 1px solid var(--pan-linea); }
.ayu-paso-hecho { opacity: .72; }
.ayu-paso-hecho .ayu-paso-texto b { text-decoration: line-through; text-decoration-color: var(--pan-tenue); }
.ayu-paso-marca { display: flex; align-items: flex-start; justify-content: center; padding-top: 2px; }
.ayu-paso-marca input { width: 18px; height: 18px; accent-color: var(--pan-verde, #1c8a5a); }
.ayu-paso-texto { display: grid; gap: 2px; min-width: 0; }
.ayu-paso-texto b { font-size: 13px; color: var(--pan-tinta); display: flex; align-items: center; gap: 6px; }
.ayu-paso-texto small { font-size: 11.5px; color: var(--pan-apagado); line-height: 1.45; }
.ayu-paso-icono { font-size: 18px; color: var(--pan-azul); }
.ayu-paso-cuando { color: var(--pan-verde, #1c8a5a) !important; }
.ayu-paso .ayu-enlace { justify-self: start; margin-top: 4px; }

/* Reportar una dificultad */
.ayu-tipos { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ayu-tipos legend { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pan-tenue); margin-bottom: 6px; }
.ayu-tipo { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--pan-linea); background: var(--pan-papel); font-size: 12px; cursor: pointer; }
.ayu-tipo-activo { border-color: var(--pan-azul); box-shadow: inset 0 0 0 1px var(--pan-azul); }
.ayu-tipo input { margin: 0; }
.ayu-campo { display: grid; gap: 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--pan-tenue); }
.ayu-campo .pan-input { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 14px; }
.ayu-campo textarea { resize: vertical; }
.ayu-diag { font-size: 12px; color: var(--pan-apagado); border: 1px solid var(--pan-linea); border-radius: 8px; padding: 8px 10px; background: var(--pan-papel); }
.ayu-diag summary { cursor: pointer; font-weight: 600; color: var(--pan-tinta); min-height: 24px; }
.ayu-diag-lista { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 10px; margin: 8px 0 0; }
.ayu-diag-lista dt { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pan-tenue); padding-top: 2px; }
.ayu-diag-lista dd { margin: 0; overflow-wrap: anywhere; }
.ayu-problema { margin: 0; font-size: 12.5px; color: var(--pan-rojo, #b3261e); }
.ayu-acciones { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ayu-enviada { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 10px; background: rgba(28, 138, 90, .08); border: 1px solid rgba(28, 138, 90, .3); font-size: 13px; color: var(--pan-tinta); }
.ayu-enviada .rzi { font-size: 22px !important; color: var(--pan-verde, #1c8a5a); flex: 0 0 auto; }
.ayu-enviada > div { display: grid; gap: 4px; }
.ayu-enviada span { color: var(--pan-apagado); font-size: 12.5px; }

@media (max-width: 1023.98px) {
    .ayu-panel { width: 100vw; box-shadow: none; }
    .ayu-fondo { display: none; }
    .ayu-tipos { grid-template-columns: 1fr; }
    .ayu-campo .pan-input { font-size: 16px; min-height: 44px; }   /* 16px: iOS no hace zoom al enfocar */
    .ayu-acciones .rz-button, .ayu-seccion .rz-button { min-height: 44px; }
    .ayu-diag-lista { grid-template-columns: 1fr; }
    /* Táctil: todo lo que se pulsa mide 40 px o más (enlaces, el plegable del diagnóstico). */
    .ayu-enlace { min-height: 40px; padding: 6px 12px; }
    .ayu-diag summary { min-height: 40px; display: flex; align-items: center; }
}

/* ── Primeros pasos en el Inicio ── */
.ayu-ini { margin: 0 0 12px; padding: 12px 16px 14px; border-radius: var(--pan-radio, 12px); background: var(--pan-papel); border: 1px solid var(--pan-linea); box-shadow: var(--pan-sombra-tarjeta); }
.ayu-ini-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ayu-ini-titulo { margin: 0; font-size: 14px; font-weight: 700; color: var(--pan-tinta); display: flex; align-items: center; gap: 8px; }
.ayu-ini-titulo .rzi { font-size: 20px !important; color: var(--pan-azul); }
.ayu-ini-avance { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--pan-apagado); }
.ayu-ini-barra { width: 120px; height: 6px; border-radius: 999px; background: var(--pan-fondo); overflow: hidden; }
.ayu-ini-barra > div { height: 100%; background: var(--pan-verde, #1c8a5a); }
.ayu-ini-acciones { display: flex; gap: 6px; }
.ayu-ini .ayu-pasos { margin-top: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
@media (max-width: 1023.98px) {
    .ayu-ini-acciones .rz-button { min-height: 40px; }
    .ayu-ini .ayu-paso-marca input { width: 22px; height: 22px; }
}
@media (max-width: 760px) {
    .ayu-ini .ayu-pasos { grid-template-columns: 1fr; }
    /* En el teléfono el avance va en su renglón y los botones en el suyo: no se aprietan contra la barra. */
    .ayu-ini-cab { flex-direction: column; align-items: stretch; gap: 8px; }
    .ayu-ini-avance { flex-wrap: wrap; row-gap: 8px; }
    .ayu-ini-barra { flex: 1 1 120px; }
    .ayu-ini-acciones { flex: 1 1 100%; justify-content: flex-end; }
}

/* ── Dificultades (/dificultades) ── */
.dif-lista { display: grid; gap: 10px; }
.dif-fila { padding: 12px 14px; border-radius: 10px; background: var(--pan-papel); border: 1px solid var(--pan-linea); border-left: 3px solid var(--pan-tenue); display: grid; gap: 6px; }
.dif-fila[data-dif-estado="nueva"] { border-left-color: var(--pan-ambar, #b8541b); }
.dif-fila[data-dif-estado="en-revision"] { border-left-color: var(--pan-azul); }
.dif-fila[data-dif-estado="respondida"] { border-left-color: var(--pan-verde, #1c8a5a); }
.dif-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dif-ref { font-family: var(--pan-mono); font-size: 12px; font-weight: 600; color: var(--pan-azul); }
.dif-titulo { margin: 0; font-size: 13.5px; font-weight: 700; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.dif-estado { font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--pan-fondo); color: var(--pan-apagado); }
.dif-meta { font-size: 11.5px; color: var(--pan-tenue); }
.dif-texto { margin: 0; font-size: 12.5px; color: var(--pan-tinta); white-space: pre-wrap; overflow-wrap: anywhere; }
.dif-diag { font-size: 11.5px; color: var(--pan-apagado); }
.dif-diag summary { cursor: pointer; min-height: 24px; }
.dif-respuesta { margin: 4px 0 0; padding: 10px 12px; border-radius: 8px; background: rgba(28, 138, 90, .07); border: 1px solid rgba(28, 138, 90, .25); font-size: 12.5px; display: grid; gap: 4px; }
.dif-respuesta small { color: var(--pan-tenue); }
.dif-responder { display: grid; gap: 6px; margin-top: 4px; }
.dif-responder textarea { resize: vertical; font-size: 13px; }
.dif-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
@media (max-width: 1023.98px) {
    .dif-acciones .rz-button { min-height: 40px; }
    .dif-responder textarea { font-size: 16px; }
    .dif-diag summary { min-height: 40px; display: flex; align-items: center; }
    /* Las barras de estado, período y aparato (cuatro opciones) ocupan el renglón entero y
       sus botones bajan de línea en vez de ensanchar la página (lo mismo que en /revision). */
    .dif-filtros > .pan-filtro, .exp-filtros > .pan-filtro { grid-column: 1 / -1; }
    .dif-filtros > .pan-filtro-estado .rz-selectbutton, .exp-filtros > .pan-filtro-estado .rz-selectbutton { display: flex; flex-wrap: wrap; width: 100%; }
    .dif-filtros > .pan-filtro-estado .rz-selectbutton .rz-button, .exp-filtros > .pan-filtro-estado .rz-selectbutton .rz-button { flex: 1 1 auto; min-width: 0; min-height: 40px; justify-content: center; padding-inline: 8px; }
    .dif-filtros .pan-input, .exp-filtros .pan-input { min-height: 40px; height: 40px; font-size: 16px; }
}

/* ── Experiencia de uso (/experiencia) ── */
.exp-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.exp-tabla th { text-align: left; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pan-tenue); padding: 8px 10px; border-bottom: 1px solid var(--pan-linea); white-space: nowrap; }
.exp-tabla td { padding: 8px 10px; border-bottom: 1px solid var(--pan-linea); vertical-align: top; }
.exp-tabla .exp-num { text-align: right; font-family: var(--pan-mono); white-space: nowrap; }
.exp-tabla .exp-tarea b { display: block; font-size: 13px; }
.exp-tabla .exp-tarea small { color: var(--pan-tenue); }
.exp-barra { display: inline-block; width: 60px; height: 6px; border-radius: 999px; background: var(--pan-fondo); vertical-align: middle; margin-right: 6px; overflow: hidden; }
.exp-barra > span { display: block; height: 100%; background: var(--pan-azul); }
.exp-mal > span { background: var(--pan-rojo, #b3261e); }
.exp-bien > span { background: var(--pan-verde, #1c8a5a); }
.exp-reparto { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; font-size: 11.5px; color: var(--pan-apagado); }
.exp-reparto span { padding: 3px 8px; border-radius: 999px; background: var(--pan-papel); border: 1px solid var(--pan-linea); }
.exp-fichas { display: none; }
/* Hasta la tableta la tabla de nueve columnas no cabe: van fichas (dos por fila en la tableta, una en el teléfono). */
@media (max-width: 1023.98px) {
    .exp-tabla { display: none; }
    .exp-fichas { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
    .exp-ficha { padding: 10px 12px; border-radius: 10px; background: var(--pan-papel); border: 1px solid var(--pan-linea); display: grid; gap: 4px; font-size: 12px; }
    .exp-ficha b { font-size: 13px; }
    .exp-ficha-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; color: var(--pan-apagado); }
    .exp-ficha-datos i { font-style: normal; font-family: var(--pan-mono); color: var(--pan-tinta); }
}