/* Apartado PENAS (modulos/penas): disposición flexible, se adapta al ancho y al zoom */
.pen-fila-cab { gap: 8px 16px; }
.pen-fila-cab .pen-cbo-parte { min-width: 12em; flex: 1 1 14em; max-width: 26em; }
.pen-zona { display: flex; flex-direction: column; gap: 10px; }
.pen-selector { margin: 2px 0 0 2px; }

/* Recuadro de datos del delito */
.pen-delito { margin-bottom: 8px; }
.pen-datos { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: flex-end; }
.pen-celda { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 0 1 auto; }
.pen-celda > .etq { text-align: center; }
.pen-celda.ancha { flex: 3 1 16em; }
.pen-celda.ancha .campo { width: 100%; }
.pen-celda.estrecha { flex: 0 0 auto; }
.pen-botones { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 8px; }
.pen-grupo-pron { display: inline-flex; align-items: center; gap: 6px; }
.pen-mas-menos { min-width: 2.4em; padding: 4px 8px; }
.pen-copiar { min-width: 8em; text-align: left; }

/* Pronunciamientos «colgando» del delito (la línea guía del escritorio) */
.pen-pronunciamientos { border-left: 2px solid var(--borde-campo); margin-left: 10px; padding-left: 14px; }
.pen-pronunciamientos > fieldset.panel { margin-bottom: 8px; position: relative; }
.pen-pronunciamientos > fieldset.panel::before { content: ""; position: absolute; left: -16px; top: 50%; width: 14px; border-top: 2px solid var(--borde-campo); }
.pen-fila-tipo { gap: 6px 14px; }
.pen-par { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0; }
.pen-campos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; }
.pen-num { text-align: center; min-width: 3.2em; }
.pen-sep { align-self: stretch; border-left: 1px solid var(--borde); min-height: 22px; }
.pen-nota { font-size: 12px; color: var(--texto-suave); }
.pen-sust-lugar { flex: 1 1 100%; }
.pen-sust-lugar:empty { display: none; }
.pen-sust { margin: 4px 0 0; }
.pen-sust-sel { display: inline-flex; gap: 6px; align-items: center; }
fieldset.panel.pen-cond { margin: 8px 0 0 18px; padding: 6px 12px 8px; }
.pen-chk-tbc { margin: 2px 0 0 4px; }
.pen-chk-tbc[hidden] { display: none; }
.pen-menu-lv .menu-item { white-space: normal; }

/* Sugerencias del campo «Delito» (utilidades/autocompletar.py) */
.pen-sugerencias { position: fixed; z-index: 70; background: var(--superficie); border: 1px solid var(--borde); border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18); overflow: hidden; max-width: calc(100vw - 8px); }
.pen-sug { display: flex; gap: 12px; justify-content: space-between; padding: 5px 10px; cursor: default; }
.pen-sug.sel { background: var(--acento); color: var(--sobre-acento); }
.pen-sug-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pen-sug-art { flex: 0 0 auto; color: inherit; opacity: .8; white-space: nowrap; }
.pen-sug-ayuda { background: var(--fondo); color: var(--texto-suave); font-size: 11.5px; padding: 3px 8px; }

@media (max-width: 640px) {
  .pen-pronunciamientos { margin-left: 2px; padding-left: 8px; }
  .pen-pronunciamientos > fieldset.panel::before { left: -10px; width: 8px; }
  .pen-celda { flex: 1 1 8em; }
  .pen-celda .campo { width: 100%; }
}