/* ═══════════════════════════════════════════════════════════════════════════
   MI JORNADA (octubre de 2026)
   La agenda de la persona vista desde el teléfono: tres listas (Mi acción,
   Esperando, Resuelto) con la tarjeta de la agenda (css/inicio.css, .ini-*) y
   una fila por tarea. Una sola columna de lectura desde 320 px; en escritorio
   las tarjetas se reparten en dos columnas y nada más cambia.
   ═══════════════════════════════════════════════════════════════════════════ */

.jor-pantalla { display: flex; flex-direction: column; gap: 14px; }

.jor-consultado { white-space: nowrap; }

/* ── Saltos a cada sección (y resumen) ── */
.jor-saltos {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
.jor-salto {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 56px; padding: 8px 6px; border-radius: 12px;
    background: var(--pan-papel); border: 1px solid var(--pan-linea); box-shadow: var(--pan-sombra-tarjeta);
    text-decoration: none; color: var(--pan-tinta); text-align: center;
}
.jor-salto:hover { border-color: rgba(24, 95, 165, .35); text-decoration: none; }
.jor-salto:focus-visible { outline: 2px solid var(--pan-azul); outline-offset: 2px; }
.jor-salto .material-symbols-outlined { font-size: 20px; color: var(--pan-apagado); }
.jor-salto-accion .material-symbols-outlined { color: var(--pan-azul); }
.jor-salto-esperando .material-symbols-outlined { color: var(--pan-ambar); }
.jor-salto-resuelto .material-symbols-outlined { color: var(--pan-verde); }
.jor-salto-texto { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pan-apagado); }
.jor-salto-cuenta { font-family: var(--pan-mono); font-size: 18px; font-weight: 700; line-height: 1; }

/* ── La explicación de la primera vez ── */
.jor-intro {
    display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
    padding: 10px 12px; border-radius: 12px;
    background: #f1f6fb; border: 1px solid rgba(24, 95, 165, .18);
}
.jor-intro .rzi, .jor-intro .rz-icon { color: var(--pan-azul); font-size: 22px; flex: none; }
.jor-intro-texto { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; line-height: 1.4; color: var(--pan-tinta); }
.jor-intro-acciones { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }

/* ── Envíos locales: la fila de este teléfono, aparte ── */
.jor-envios {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 9px 12px; border-radius: 12px;
    border: 1px solid rgba(24, 95, 165, .22); background: #f1f6fb; color: var(--pan-tinta);
}
.jor-envios > .material-symbols-outlined { flex: none; font-size: 22px; color: var(--pan-azul); }
.jor-envios-decidir { border-color: rgba(184, 84, 27, .30); background: #fff9f2; }
.jor-envios-decidir > .material-symbols-outlined { color: var(--pan-ambar); }
.jor-envios-texto { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; line-height: 1.35; }
.jor-envios-texto b { font-size: 13px; }
.jor-envios-texto span { color: var(--pan-apagado); font-size: 11.5px; }
.jor-envios .pen-franja-boton { min-height: 40px; }

/* ── Secciones ── */
.jor-seccion { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 12px; }
.jor-seccion:focus-visible { outline: 2px solid var(--pan-azul); outline-offset: 4px; border-radius: 8px; }
.jor-seccion-cab { display: flex; flex-direction: column; gap: 2px; }
.jor-seccion-titulo {
    display: flex; align-items: center; gap: 8px; margin: 0;
    font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pan-tinta);
}
.jor-seccion-titulo .material-symbols-outlined { font-size: 20px; color: var(--pan-apagado); }
.jor-seccion-accion .jor-seccion-titulo .material-symbols-outlined { color: var(--pan-azul); }
.jor-seccion-esperando .jor-seccion-titulo .material-symbols-outlined { color: var(--pan-ambar); }
.jor-seccion-resuelto .jor-seccion-titulo .material-symbols-outlined { color: var(--pan-verde); }
.jor-cuenta {
    display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px;
    border-radius: 999px; background: var(--pan-fondo); border: 1px solid var(--pan-linea);
    font-family: var(--pan-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0; color: var(--pan-apagado);
}
.jor-explica { margin: 0; font-size: 12px; color: var(--pan-apagado); }

/* La lista: una fila por tarea, sin viñetas. En escritorio, dos columnas. */
.jor-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.jor-item { min-width: 0; }
@media (min-width: 900px) { .jor-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* La tarjeta: la de la agenda con la fila «Siguiente acción» y el acceso de 44 px
   (objetivo táctil del formato homologado). */
.jor-tarjeta .ini-datos { gap: 6px 16px; }
.jor-dato-siguiente { flex: 1 1 100%; }
.jor-dato-siguiente dd { font-weight: 600; }
.jor-tarjeta .ini-accion { min-height: 44px; padding: 10px 14px 10px 16px; font-size: 11px; }
.jor-tarjeta .ini-items a { min-height: 32px; display: inline-flex; align-items: center; }

/* Con el dedo, VER LA GUÍA / ENTENDIDO (botón extrachico de Radzen, 20 px) y los
   enlaces de cada ítem miden 40 px, como REINTENTAR en pantalla.css. */
@media (pointer: coarse) {
    .jor-intro .rz-button { min-height: 40px; padding-inline: 12px; }
    .jor-tarjeta .ini-items a { min-height: 40px; }
}

/* Lo que se ve es de antes (la sesión venció, o una actualización falló): se
   atenúa, pero se sigue leyendo; el banner dice de cuándo es. */
.jor-de-antes .ini-tarjeta { opacity: .78; }

/* El vacío útil: enlaces a donde ir desde aquí. */
.jor-vacio-enlace {
    display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 8px 12px; margin: 2px 4px 0;
    border-radius: 999px; border: 1px solid var(--pan-linea); background: var(--pan-fondo);
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pan-azul); text-decoration: none;
}
.jor-vacio-enlace:hover { border-color: rgba(24, 95, 165, .35); text-decoration: none; }
.jor-vacio-enlace:focus-visible { outline: 2px solid var(--pan-azul); outline-offset: 2px; }
.jor-vacio-enlace .material-symbols-outlined { font-size: 16px; }

.jor-historico {
    display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 8px 12px;
    border-radius: 10px; background: var(--pan-fondo); border: 1px solid var(--pan-linea);
    font-size: 12px; line-height: 1.4; color: var(--pan-apagado);
}
.jor-historico .material-symbols-outlined { font-size: 18px; flex: none; }

.jor-pie { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--pan-tenue); }

/* ── La demostración ── */
.jor-demo {
    display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px;
    border: 1px dashed var(--pan-ambar); background: #fff9f2; font-size: 12px; color: var(--pan-tinta);
}
.jor-demo > b { font-size: 11px; letter-spacing: .12em; color: var(--pan-ambar); }
.jor-demo-controles { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; }
.jor-demo-rotulo { display: flex; flex-direction: column; gap: 2px; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pan-apagado); }
.jor-demo-rotulo select { min-height: 40px; font-size: 13px; }
.jor-demo-escenas { display: flex; flex-wrap: wrap; gap: 6px; }
.jor-demo-escena {
    display: inline-flex; align-items: center; min-height: 40px; padding: 6px 12px; border-radius: 999px;
    border: 1px solid var(--pan-linea); background: var(--pan-papel); font-size: 11px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--pan-tinta); text-decoration: none;
}
.jor-demo-escena:hover { border-color: rgba(24, 95, 165, .35); text-decoration: none; }
.jor-demo-escena:focus-visible { outline: 2px solid var(--pan-azul); outline-offset: 2px; }
.jor-demo-activa { background: var(--pan-tinta); color: #fff; border-color: var(--pan-tinta); }

/* ── Teléfono (320 a 430 px) ── */
@media (max-width: 480px) {
    .jor-pantalla { gap: 12px; }
    .jor-saltos { gap: 6px; }
    .jor-salto { min-height: 52px; padding: 6px 4px; border-radius: 10px; }
    .jor-salto-texto { font-size: 9px; letter-spacing: .06em; }
    .jor-salto-cuenta { font-size: 16px; }
    .jor-tarjeta .ini-datos { padding-left: 0; }
    .jor-tarjeta .ini-detalle, .jor-tarjeta .ini-items { padding-left: 0; }
    .jor-tarjeta .ini-accion { align-self: stretch; justify-content: center; }
    .jor-intro-acciones { margin-left: 0; width: 100%; }
    .jor-envios .pen-franja-boton { width: 100%; justify-content: center; }
}

@media (max-width: 360px) {
    .jor-salto-texto { font-size: 8.5px; letter-spacing: .04em; }
    .jor-seccion-titulo { font-size: 12px; letter-spacing: .08em; }
}

@media (prefers-reduced-motion: reduce) {
    .jor-salto, .jor-vacio-enlace, .jor-demo-escena { transition: none; }
}

@media print {
    .jor-saltos, .jor-intro, .jor-envios, .jor-demo { display: none; }
}