/* ═══════════════════════════════════════════════════════════════════════════
   Permiso de trabajo en el teléfono (/permiso-movil) · octubre de 2026
   Sobre el formato homologado (pantalla.css): cabecera, sello, barra de
   documento, pan-estado, pan-borrador. Lo propio lleva el prefijo pmo-.
   Pensada para el teléfono (320 a 430 px) con el dedo: todo control mide
   40 px o más; en escritorio se ensancha sin cambiar de forma.
   ═══════════════════════════════════════════════════════════════════════════ */

.pmo-pantalla { display: flex; flex-direction: column; gap: 14px; }
.pmo-sub-correlativo { font-family: var(--pan-mono); font-weight: 600; color: var(--pan-tinta); }
.pmo-estado {
    display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    background: var(--pan-fondo); border: 1px solid var(--pan-linea); color: var(--pan-apagado);
}
.pmo-estado-autorizado { color: var(--pan-verde); border-color: rgba(28, 138, 90, .4); background: #f0f7f3; }
.pmo-estado-abierto { color: var(--pan-ambar); border-color: rgba(184, 84, 27, .3); background: #fff9f2; }
.pmo-vigencia-vigente { color: var(--pan-verde); }
.pmo-vigencia-por-iniciar { color: var(--pan-azul); }
.pmo-vigencia-vencida, .pmo-vigencia-invalida { color: #d32f14; border-color: rgba(211, 47, 20, .35); background: #fff4f1; }

/* ── Las etapas (la tira de arriba) ── */
.pmo-etapas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pmo-etapa {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 60px; padding: 6px 2px; border-radius: 12px; cursor: pointer;
    background: var(--pan-papel); border: 1px solid var(--pan-linea); box-shadow: var(--pan-sombra-tarjeta);
    color: var(--pan-tinta); text-align: center; transition: border-color .15s; font: inherit;
}
.pmo-etapa:hover { border-color: rgba(24, 95, 165, .35); }
.pmo-etapa:focus-visible { outline: 2px solid var(--pan-azul); outline-offset: 2px; }
.pmo-etapa-actual { border-color: var(--pan-azul); box-shadow: 0 0 0 2px rgba(24, 95, 165, .18); }
.pmo-etapa .material-symbols-outlined { font-size: 20px; color: var(--pan-apagado); }
.pmo-etapa-numero { font-family: var(--pan-mono); font-size: 12px; font-weight: 700; line-height: 1; color: var(--pan-apagado); }
.pmo-etapa-texto { font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--pan-apagado); line-height: 1.2; }
.pmo-etapa-listo .material-symbols-outlined, .pmo-etapa-listo .pmo-etapa-numero { color: var(--pan-verde); }
.pmo-etapa-en-curso .material-symbols-outlined, .pmo-etapa-en-curso .pmo-etapa-numero { color: var(--pan-azul); }
.pmo-etapa-bloqueado .material-symbols-outlined, .pmo-etapa-bloqueado .pmo-etapa-numero { color: var(--pan-ambar); }
.pmo-etapa-sin-guardar .material-symbols-outlined, .pmo-etapa-sin-guardar .pmo-etapa-numero { color: #b8541b; }
.pmo-etapa-sin-guardar { border-style: dashed; }

/* ── Franjas: sólo lectura, sin señal, versión vieja ── */
.pmo-franja, .pmo-bloqueo, .pmo-autorizado {
    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);
}
.pmo-franja > .material-symbols-outlined, .pmo-bloqueo > .material-symbols-outlined, .pmo-autorizado > .material-symbols-outlined { flex: none; font-size: 22px; color: var(--pan-azul); }
.pmo-franja-decidir { border-color: rgba(184, 84, 27, .30); background: #fff9f2; }
.pmo-franja-decidir > .material-symbols-outlined { color: var(--pan-ambar); }
.pmo-franja-sinred { border-color: rgba(74, 106, 138, .3); background: #f3f5f8; }
.pmo-franja-sinred > .material-symbols-outlined { color: #4a6a8a; }
.pmo-franja-lectura { border-color: var(--pan-linea); background: var(--pan-fondo); }
.pmo-franja-lectura > .material-symbols-outlined { color: var(--pan-apagado); }
.pmo-bloqueo { border-color: rgba(184, 84, 27, .30); background: #fff9f2; }
.pmo-bloqueo > .material-symbols-outlined { color: var(--pan-ambar); }
.pmo-autorizado { border-color: rgba(28, 138, 90, .4); background: #f0f7f3; }
.pmo-autorizado > .material-symbols-outlined { color: var(--pan-verde); }
.pmo-franja-texto, .pmo-bloqueo-texto, .pmo-firma-texto { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; line-height: 1.35; }
.pmo-franja-texto b, .pmo-bloqueo-texto b, .pmo-firma-texto b { font-size: 13px; }
.pmo-franja-texto span, .pmo-bloqueo-texto span, .pmo-firma-texto span { color: var(--pan-apagado); font-size: 11.5px; }
.pmo-franja-acciones { display: flex; gap: 6px; flex-wrap: wrap; }
.pmo-franja-acciones .rz-button { min-height: 40px; }

/* ── La sección de la etapa ── */
.pmo-seccion { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 12px; }
.pmo-seccion:focus-visible { outline: 2px solid var(--pan-azul); outline-offset: 4px; border-radius: 8px; }
.pmo-seccion-cab { display: flex; flex-direction: column; gap: 2px; }
.pmo-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);
}
.pmo-numero {
    display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
    background: var(--pan-tinta); color: #fff; font-family: var(--pan-mono); font-size: 12px; font-weight: 700; letter-spacing: 0;
}
.pmo-explica { margin: 0; font-size: 12px; color: var(--pan-apagado); }
.pmo-campos { display: flex; flex-direction: column; gap: 12px; }
.pmo-grupo { display: flex; flex-direction: column; gap: 8px; }
.pmo-origen { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--pan-azul); }
.pmo-origen .material-symbols-outlined { font-size: 18px; }

/* ── Campos: nativos, grandes, con rótulo arriba ── */
.pmo-campo { display: flex; flex-direction: column; gap: 4px; }
.pmo-rotulo { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pan-apagado); }
.pmo-req::after { content: " *"; color: #d32f14; }
.pmo-campo input, .pmo-campo select, .pmo-campo textarea, .pmo-agregar input, .pmo-agregar select {
    width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--pan-linea);
    background: var(--pan-papel); color: var(--pan-tinta); font: inherit; font-size: 15px;
}
.pmo-campo textarea { min-height: 84px; resize: vertical; }
.pmo-campo input:focus-visible, .pmo-campo select:focus-visible, .pmo-campo textarea:focus-visible,
.pmo-agregar input:focus-visible, .pmo-agregar select:focus-visible { outline: 2px solid var(--pan-azul); outline-offset: 1px; }
.pmo-campo input:disabled, .pmo-campo select:disabled, .pmo-campo textarea:disabled { background: var(--pan-fondo); color: var(--pan-apagado); }
.pmo-vigencia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* ── Chips (tipos, prioridad, cuadrilla) ── */
.pmo-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pmo-chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border-radius: 999px;
    border: 1px solid var(--pan-linea); background: var(--pan-papel); color: var(--pan-tinta);
    font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s;
}
.pmo-chip:hover { border-color: rgba(24, 95, 165, .45); }
.pmo-chip:focus-visible { outline: 2px solid var(--pan-azul); outline-offset: 2px; }
.pmo-chip:disabled { opacity: .6; cursor: default; }
.pmo-chip-activo { background: var(--pan-tinta); color: #fff; border-color: var(--pan-tinta); }
.pmo-chip .material-symbols-outlined { font-size: 18px; }
.pmo-chip-color { display: inline-block; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }

/* ── Actos y renglones SÍ / NO / N/A ── */
.pmo-acto { border: 1px solid var(--pan-linea); border-radius: 12px; background: var(--pan-papel); overflow: hidden; box-shadow: var(--pan-sombra-tarjeta); }
.pmo-acto-cab { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--pan-fondo); border-bottom: 1px solid var(--pan-linea); }
.pmo-acto-nombre { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.pmo-cuenta {
    display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px;
    border-radius: 999px; background: var(--pan-papel); border: 1px solid var(--pan-linea);
    font-family: var(--pan-mono); font-size: 11.5px; font-weight: 600; color: var(--pan-apagado);
}
.pmo-fila { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-bottom: 1px dashed #eef1f5; min-height: 52px; }
.pmo-fila:last-child { border-bottom: 0; }
.pmo-fila-texto { flex: 1; min-width: 0; font-size: 13px; line-height: 1.3; }
.pmo-fila-sin { background: #fffdf8; box-shadow: inset 3px 0 0 -1px #e8a33d; }
.pmo-terna { display: inline-flex; gap: 4px; flex: none; }
.pmo-opcion {
    min-width: 44px; min-height: 40px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--pan-linea);
    background: var(--pan-papel); color: var(--pan-apagado); font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; cursor: pointer;
}
.pmo-opcion:focus-visible { outline: 2px solid var(--pan-azul); outline-offset: 1px; }
.pmo-opcion:disabled { opacity: .6; cursor: default; }
.pmo-opcion-activa.pmo-opcion-1 { background: var(--pan-verde); border-color: var(--pan-verde); color: #fff; }
.pmo-opcion-activa.pmo-opcion-2 { background: #d32f14; border-color: #d32f14; color: #fff; }
.pmo-opcion-activa.pmo-opcion-3 { background: var(--pan-tinta); border-color: var(--pan-tinta); color: #fff; }

/* ── Botones pequeños (agregar, quitar, firmar, no aplica) ── */
.pmo-mini {
    display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 6px 12px; border-radius: 10px;
    border: 1px solid rgba(24, 95, 165, .45); background: var(--pan-papel); color: var(--pan-azul);
    font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; cursor: pointer; white-space: nowrap;
}
.pmo-mini:hover { background: #eef5fb; }
.pmo-mini:focus-visible { outline: 2px solid var(--pan-azul); outline-offset: 2px; }
.pmo-mini:disabled { opacity: .5; cursor: default; }
.pmo-mini[aria-pressed="true"] { background: var(--pan-tinta); border-color: var(--pan-tinta); color: #fff; }
.pmo-mini-quitar { border-color: rgba(211, 47, 20, .4); color: #d32f14; }
.pmo-mini-quitar:hover { background: #fff4f1; }
.pmo-mini-firmar { background: var(--pan-azul); color: #fff; border-color: var(--pan-azul); }
.pmo-mini-firmar:hover { background: #164f8c; }

/* ── Listas (precauciones, personas) ── */
.pmo-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pmo-lista > li { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 10px; background: var(--pan-papel); border: 1px solid var(--pan-linea); }
.pmo-lista > li > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.pmo-lista > li.pmo-renglon { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.pmo-lista > li.pmo-renglon > span { flex: 1 1 180px; }
.pmo-lista small { color: var(--pan-apagado); }
.pmo-agregar { display: flex; gap: 6px; align-items: stretch; }
.pmo-agregar > input, .pmo-agregar > select { flex: 1 1 120px; min-width: 0; }
.pmo-persona { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 40px; }
.pmo-persona-nombre { flex: 1 1 140px; min-width: 0; font-size: 13.5px; font-weight: 600; }
.pmo-persona-nota { font-size: 11px; color: var(--pan-apagado); }
.pmo-papel { display: flex; flex-direction: column; gap: 6px; }
.pmo-cuadrilla { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ── La firma de alguien ── */
.pmo-firma { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--pan-linea); background: var(--pan-fondo); }
.pmo-firma > .material-symbols-outlined { flex: none; font-size: 22px; color: var(--pan-apagado); }
.pmo-firma-vigente { border-color: rgba(28, 138, 90, .4); background: #f0f7f3; }
.pmo-firma-vigente > .material-symbols-outlined { color: var(--pan-verde); }
.pmo-firma-desactualizada { border-color: rgba(184, 84, 27, .35); background: #fff9f2; }
.pmo-firma-desactualizada > .material-symbols-outlined { color: var(--pan-ambar); }
.pmo-firma-imagen { padding: 0; border: 1px solid var(--pan-linea); border-radius: 6px; background: #fff; cursor: zoom-in; min-height: 40px; min-width: 40px; display: inline-flex; align-items: center; }
.pmo-firma-imagen img { max-height: 40px; max-width: 110px; display: block; }

/* ── Resumen (revisión final) ── */
.pmo-resumen { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--pan-papel); border: 1px solid var(--pan-linea); box-shadow: var(--pan-sombra-tarjeta); }
.pmo-resumen > div { display: grid; grid-template-columns: minmax(96px, 34%) 1fr; gap: 8px; min-width: 0; }
.pmo-resumen dt { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pan-apagado); padding-top: 2px; }
.pmo-resumen dd { margin: 0; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.pmo-dd-largo { white-space: pre-wrap; }

/* ── Pistas y acciones ── */
.pmo-pista { margin: 0; font-size: 12px; color: var(--pan-apagado); display: flex; align-items: flex-start; gap: 4px; }
.pmo-pista .material-symbols-outlined { font-size: 16px; flex: none; }
.pmo-pista-lista { color: var(--pan-verde); }
.pmo-pista-falta { color: var(--pan-ambar); }
.pmo-pista a { color: var(--pan-azul); font-weight: 600; }
.pmo-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.pmo-accion {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1 1 140px;
    min-height: 48px; padding: 10px 18px; border-radius: 12px; border: 1px solid transparent;
    font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
    text-decoration: none; transition: filter .15s, transform .1s;
}
.pmo-accion:hover { filter: brightness(1.06); text-decoration: none; }
.pmo-accion:active { transform: scale(.985); }
.pmo-accion:disabled { opacity: .55; cursor: default; }
.pmo-accion:focus-visible { outline: 2px solid var(--pan-azul); outline-offset: 2px; }
.pmo-accion .material-symbols-outlined { font-size: 20px; }
.pmo-accion-guardar, .pmo-accion-seguir { background: var(--pan-azul); color: #fff; }
.pmo-accion-autorizar { background: var(--pan-verde); color: #fff; }
.pmo-accion-atras { background: var(--pan-papel); color: var(--pan-tinta); border-color: var(--pan-linea); flex: 0 1 auto; }

@media (max-width: 430px) {
    .pmo-fila { flex-wrap: wrap; }
    .pmo-terna { width: 100%; }
    .pmo-opcion { flex: 1 1 0; }
    .pmo-resumen > div { grid-template-columns: 1fr; gap: 2px; }
    .pmo-vigencia { grid-template-columns: 1fr; }
}

@media (pointer: coarse) {
    .pmo-mini, .pmo-chip, .pmo-opcion, .pmo-etapa { min-height: 44px; }
}

@media print {
    .pmo-etapas, .pmo-acciones, .pmo-franja, .pmo-mini, .pmo-agregar { display: none !important; }
}