@font-face { font-family: "Nouvel R"; src: url("../fonts/NouvelR-Regular.otf"); font-weight: 400; }
@font-face { font-family: "Nouvel R"; src: url("../fonts/NouvelR-Semibold.ttf"); font-weight: 600; }

/* Base de rem. H2 la bajó a 90 %; la ronda 6 la baja otro 10 % (81 %, unos 13 px). Los controles de 44 px y las
   compensaciones de la ronda 4c van en px y no cambian. */
html { font-size: 81%; }
:root {
  --naranja: #F84300;
  --negro: #141414;
  --fondo: #F3F4F6;
  --blanco: #FFFFFF;
  --gris-texto: #4B5563;
  --morado: #5B2C83;
}
body { margin: 0; font-size: 1rem; background: var(--fondo); color: var(--negro); font-family: "Nouvel R", Inter, system-ui, sans-serif; }
.contenedor { max-width: 720px; margin: 48px auto; padding: 0 16px; }
h1 { margin: 0 0 4px; font-weight: 600; }
.sub { margin: 0 0 24px; color: var(--gris-texto); }
.banner { padding: 10px 16px; text-align: center; font-weight: 600; }
.banner-pruebas { background: #FEF0B8; color: #6B4A00; }
.banner-error { background: #B42300; color: var(--blanco); }

/* Pantallas de acceso */
:root { --gris-borde: #D1D5DB; --error: #B42300; --error-fondo: #FDE8E2; --info-fondo: #DBEAFE; --info-texto: #1E3A8A; }
.marca { margin: 0 0 8px; color: var(--naranja); font-weight: 600; letter-spacing: .02em; }
.formulario label { display: block; margin: 16px 0 6px; font-weight: 600; color: #1F2937; }
.formulario input[type=email], .formulario input[type=password] { width: 100%; box-sizing: border-box; height: 44px; padding: 0 12px; border: 1px solid var(--gris-borde); border-radius: 8px; font: inherit; }
.formulario input:focus-visible, .boton:focus-visible, a:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }
.boton { display: block; width: 100%; height: 44px; margin-top: 24px; border: 0; border-radius: 8px; background: var(--naranja); color: var(--negro); font: inherit; font-weight: 600; cursor: pointer; }
.boton-secundario { width: auto; padding: 0 20px; background: var(--negro); color: var(--blanco); }
.mensaje { padding: 10px 12px; border-radius: 8px; margin: 0 0 8px; }
.mensaje ul { margin: 0; padding-left: 18px; }
.mensaje-error { background: var(--error-fondo); color: var(--error); }
.mensaje-info { background: var(--info-fondo); color: var(--info-texto); }
.enlace-aparte { margin: 20px 0 0; text-align: center; }
.enlace-aparte a { color: var(--gris-texto); }

/* Administración y pantallas con sesión (estilo de las maquetas: barra lateral oscura, tarjetas de radio 12, controles de 44 px) */
:root { --lateral: #141414; --lateral-2: #262626; --gris-fila: #F9FAFB; --ok-fondo: #DCFCE7; --ok-texto: #14532D; --ancho-lateral: 248px; }

/* Estructura: la barra lateral ocupa la altura de la ventana y solo la zona de contenido se desplaza */
/* Ronda H5.3b (A2): el documento no debe poder desplazarse. `overflow: hidden` en el body no basta: sigue siendo un contenedor
   desplazable por programa, y al entrar con un ancla (#t-docs) Brave lo movió: menú cortado arriba y franja vacía abajo. Con
   `height: 100%` encadenado desde html (el alto real de la ventana, sin vh) y `overflow: clip` (no es contenedor de
   desplazamiento, ni siquiera por programa), el único que se desplaza es .principal. Los respaldos hidden van antes. */
html.html-lateral { height: 100%; overflow: hidden; overflow: clip; }
body.con-lateral { display: flex; flex-direction: column; height: 100vh; height: 100dvh; height: 100%; overflow: hidden; overflow: clip; }
/* Ronda H5.3c: en pantalla ancha el body queda fijo a la ventana (el banner de entorno y .app van dentro), de modo que el
   documento no tiene nada que desplazar aunque el navegador intente llevar la ventana a un ancla. Solo .principal se desplaza. */
@media (min-width: 900px) { body.con-lateral { position: fixed; inset: 0; } }
.app { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: var(--ancho-lateral) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); overflow: hidden; overflow: clip; }
.lateral { background: var(--lateral); color: #E5E7EB; padding: 20px 12px 12px; display: flex; flex-direction: column; gap: 4px; min-height: 0; height: 100%; box-sizing: border-box; }
.lateral-marca { flex: none; display: flex; gap: 12px; align-items: center; padding: 0 8px 16px; }
.lateral-marca small { display: block; color: #9CA3AF; }
.logo-img { display: block; width: 40px; height: 40px; border-radius: 8px; object-fit: contain; background: #000; }
/* Ronda 0.6.18 (M-b): overflow-y en auto fuerza el eje horizontal a auto; se oculta porque el texto ya se ve completo.
   El margen negativo y el relleno iguales (5 px = contorno de 3 px + separación de 2 px) dejan sitio al contorno de foco
   de los enlaces sin cambiar el ancho ni la posición del menú. */
.lateral-nav { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; margin: 0 -5px; padding: 0 5px; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; scrollbar-color: #404040 transparent; }
.lateral-nav a { display: block; padding: 10px 12px; border-radius: 8px; color: #E5E7EB; text-decoration: none; min-height: 20px; }
.lateral-nav a:hover { background: var(--lateral-2); }
.lateral-nav a.activo { background: var(--lateral-2); box-shadow: inset 0 0 0 1px var(--naranja); color: var(--blanco); }
.lateral a:focus-visible, .lateral button:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }

/* Grupos abatibles (animación corta; sin JavaScript todo queda abierto) */
.grupo-titulo { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 40px; margin-top: 8px; padding: 0 12px; background: none; border: 0; border-radius: 8px; color: #9CA3AF; font: inherit; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; text-align: left; }
.grupo-titulo-fijo { cursor: default; }
.grupo-titulo:hover { color: #E5E7EB; background: var(--lateral-2); }
.grupo-titulo-fijo:hover { color: #9CA3AF; background: none; }
.chevron { width: .5em; height: .5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; margin-right: 2px; }
.grupo-menu.abierto .chevron { transform: rotate(-135deg); }
.grupo-cuerpo { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .2s ease, visibility 0s; }
.grupo-interior { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 2px; }
.js .grupo-menu:not(.abierto) .grupo-cuerpo { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .2s ease, visibility 0s .2s; }
.sin-animacion .grupo-cuerpo, .sin-animacion .chevron { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .grupo-cuerpo, .chevron { transition: none !important; } }

/* Bloque de usuario anclado abajo */
.lateral-usuario { flex: none; display: flex; gap: .75em; align-items: center; border-top: 1px solid var(--lateral-2); padding: 12px 8px 0; margin-top: 4px; }
.usuario-datos { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.usuario-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--blanco); }
.usuario-datos a { color: #D1D5DB; }
.enlace-boton { background: none; border: 0; padding: 0; font: inherit; color: var(--naranja); cursor: pointer; text-align: left; text-decoration: underline; }
.usuario-datos .enlace-boton { color: #D1D5DB; }
.avatar { flex: none; display: inline-grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; font-weight: 600; font-size: 1em; letter-spacing: .02em; user-select: none; }
.av-0 { background: #F84300; color: #141414; } .av-1 { background: #7C3AED; color: #fff; } .av-2 { background: #2563EB; color: #fff; }
.av-3 { background: #FACC15; color: #141414; } .av-4 { background: #16A34A; color: #fff; } .av-5 { background: #0891B2; color: #fff; }
.av-6 { background: #DB2777; color: #fff; } .av-7 { background: #D1D5DB; color: #141414; }

.principal { padding: 32px 40px; min-width: 0; min-height: 0; overflow-y: auto; }
.principal-lista { display: flex; flex-direction: column; }
.principal-lista > * { flex: none; }
.principal-lista > .tabla-zona { flex: 0 1 auto; min-height: 0; }
.encabezado { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.boton-inline { display: inline-flex; align-items: center; justify-content: center; width: auto; margin-top: 0; padding: 0 20px; text-decoration: none; }
.boton-peligro { background: var(--error); color: var(--blanco); }
.grupo { margin: 28px 0 12px; font-size: 1.25rem; }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.tarjeta { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: var(--blanco); border: 1px solid #E5E7EB; border-radius: 12px; color: var(--negro); text-decoration: none; }
.tarjeta span { color: var(--gris-texto); }
.tarjeta:hover { border-color: var(--naranja); }
.barra-filtro { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 16px; }
.barra-filtro select, .campo select, .campo textarea, .campo input[type=text], .campo input[type=date], .barra-filtro input[type=text], .barra-filtro input[type=date] { height: 44px; padding: 0 12px; border: 1px solid var(--gris-borde); border-radius: 8px; font: inherit; background: var(--blanco); }

/* Tabla con altura acotada: encabezado fijo, desplazamiento interno y paginación siempre visible */
.tabla-zona { display: flex; flex-direction: column; min-height: 0; }
.tabla-caja { flex: 0 1 auto; min-height: 9rem; background: var(--blanco); border: 1px solid #E5E7EB; border-radius: 12px 12px 0 0; overflow: auto; }
.tabla { width: 100%; border-collapse: separate; border-spacing: 0; }
.tabla-fija { table-layout: fixed; }
.tabla th { position: sticky; top: 0; z-index: 1; text-align: left; padding: 12px 16px; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-texto); background: var(--gris-fila); border-bottom: 1px solid #E5E7EB; }
.tabla td { padding: 12px 16px; border-top: 1px solid #E5E7EB; vertical-align: top; line-height: 1.5; overflow-wrap: anywhere; }
.tabla tbody tr:first-child td { border-top: 0; }
.tabla tr.inactivo td { color: #9CA3AF; }
.tabla .acciones-grupo { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.tabla .acciones a, .tabla .acciones .enlace-boton { color: #8A2A00; }
.tabla .valor { font-size: .85rem; color: var(--gris-texto); word-break: break-word; }
.en-linea { display: inline; }
.muestra { display: inline-block; width: 14px; height: 14px; margin-right: 8px; border: 1px solid var(--gris-borde); border-radius: 4px; vertical-align: -2px; }
.paginacion { flex: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px; padding: 10px 16px; background: var(--blanco); border: 1px solid #E5E7EB; border-top: 0; border-radius: 0 0 12px 12px; font-size: .9rem; }
.pag-resumen { margin: 0; color: var(--gris-texto); }
.pag-tamanos, .pag-mover { display: flex; align-items: center; gap: 12px; }
.pag-tamanos span { color: var(--gris-texto); }
.paginacion a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 6px; color: #8A2A00; }
.pag-quieto { color: #9CA3AF; }
.pag-actual { font-weight: 600; }
.vacio { padding: 32px; text-align: center; color: var(--gris-texto); background: var(--blanco); border: 1px dashed var(--gris-borde); border-radius: 12px; }

/* Formularios y ayudas */
.tarjeta-form { max-width: 720px; background: var(--blanco); border: 1px solid #E5E7EB; border-radius: 12px; padding: 24px; }
.campo { margin-bottom: 16px; }
.campo label { display: block; margin: 0; font-weight: 600; color: #1F2937; }
.fila-etiqueta { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.campo input[type=text], .campo select, .campo textarea, .campo input[type=date] { width: 100%; box-sizing: border-box; }
.campo textarea { height: auto; padding: 10px 12px; }
.campo .casilla { display: flex; gap: 10px; align-items: center; font-weight: 400; min-height: 44px; }
.campo-error input, .campo-error select, .campo-error textarea { border-color: var(--error); }
.ayuda-i { position: relative; display: inline-flex; }
.ayuda-boton { width: 22px; height: 22px; padding: 0; border: 1px solid var(--gris-borde); border-radius: 50%; background: var(--blanco); color: var(--gris-texto); font: inherit; font-size: .8rem; font-weight: 600; line-height: 1; cursor: help; }
.ayuda-boton:hover, .ayuda-boton:focus-visible { border-color: var(--naranja); color: var(--negro); }
.ayuda-boton:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }
.ayuda-texto { display: none; position: absolute; z-index: 5; left: 0; top: calc(100% + 6px); width: min(22rem, 70vw); padding: 10px 12px; border-radius: 8px; background: var(--negro); color: var(--blanco); font-size: .85rem; font-weight: 400; line-height: 1.45; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.ayuda-i:hover:not(.cerrada) .ayuda-texto, .ayuda-boton:focus-visible + .ayuda-texto, .ayuda-i.visible .ayuda-texto { display: block; }
.ayuda-i.cerrada:not(.visible) .ayuda-texto { display: none; }
.error-campo { margin: 4px 0 0; font-size: .8rem; color: var(--error); font-weight: 600; }
.req { color: var(--error); }
.solo-lectura { margin: 0; padding: 10px 12px; background: var(--gris-fila); border-radius: 8px; }
.lista-casillas { max-height: 220px; overflow-y: auto; border: 1px solid var(--gris-borde); border-radius: 8px; padding: 4px 12px; }
.botones { display: flex; gap: 12px; margin-top: 8px; }
.botones .boton { margin-top: 0; }
.mensaje-ok { background: var(--ok-fondo); color: var(--ok-texto); }
.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; background: #E5E7EB; color: #1F2937; }
.chip-ok { background: var(--ok-fondo); color: var(--ok-texto); }
.chip-alerta { background: var(--error-fondo); color: var(--error); }

/* Pantallas angostas: la barra lateral pasa a un botón de menú con el logo */
.barra-movil, .velo { display: none; }
.hamburguesa, .hamburguesa::before, .hamburguesa::after { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 1px; }
.hamburguesa { position: relative; }
.hamburguesa::before, .hamburguesa::after { content: ""; position: absolute; left: 0; }
.hamburguesa::before { top: -6px; } .hamburguesa::after { top: 6px; }
@media (max-width: 899px) {
  html.html-lateral { height: auto; overflow: visible; }
  body.con-lateral { height: auto; min-height: 100vh; overflow: visible; }
  .barra-movil { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 20; padding: 8px 12px; background: var(--lateral); color: var(--blanco); }
  .boton-menu { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 8px; background: var(--lateral-2); color: var(--blanco); cursor: pointer; }
  .boton-menu:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }
  .barra-movil .logo-img { width: 32px; height: 32px; }
  .app { display: block; overflow: visible; }
  .lateral { position: fixed; z-index: 30; inset: 0 auto 0 0; width: min(var(--ancho-lateral), 86vw); transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility 0s .2s; }
  .lateral.lateral-abierto { transform: none; visibility: visible; transition: transform .2s ease, visibility 0s; }
  .velo { position: fixed; z-index: 25; inset: 0; background: rgba(0, 0, 0, .5); }
  .velo:not([hidden]) { display: block; }
  .principal { overflow: visible; padding: 20px 16px; }
  .principal-lista { display: block; }
  .tabla-caja { max-height: 70vh; }
  .encabezado { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .lateral { transition: none; } }
.sub-celda { font-size: .8rem; color: var(--gris-texto); }
.tarjeta-estado { margin-bottom: 16px; }
.botones-envolver { flex-wrap: wrap; }

/* Nueva solicitud (maqueta Nueva_solicitud): indicador de pasos, tarjetas de sección y panel de ayuda */
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pasos { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 0 0 24px; padding: 0; }
.paso { display: flex; align-items: center; gap: 10px; color: var(--gris-texto); }
.paso-num { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #6B7280; font-size: .85rem; }
.paso-hecho { color: #1F2937; }
.paso-hecho .paso-num { background: var(--negro); border-color: var(--negro); color: var(--blanco); }
.paso-actual { color: var(--negro); font-weight: 600; }
.paso-actual .paso-num { background: var(--naranja); border-color: var(--naranja); color: var(--negro); }
.sol-columnas { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.sol-form { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.sol-lateral { flex: 1 1 280px; max-width: 340px; display: flex; flex-direction: column; gap: 16px; }
.sol-tarjeta { background: var(--blanco); border: 1px solid #E5E7EB; border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.sol-tarjeta h2 { margin: 0; font-size: 1.1rem; }
.sol-grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.sol-grilla .campo { margin: 0; }
.sol-ancho { grid-column: 1 / -1; }
.sol-campo[hidden] { display: none; }
[data-solo-tipo-dato][hidden] { display: none; }
.sol-grupo { margin: 0; padding: 0; border: 0; min-width: 0; }
.sol-grupo legend { padding: 0; font-weight: 600; color: #1F2937; }
.sol-opciones { display: flex; flex-direction: column; }
.sol-personas { display: flex; flex-direction: column; gap: 12px; }
.sol-sub { display: flex; flex-direction: column; gap: 6px; font-weight: 600; color: #1F2937; font-size: .9rem; }
.sol-sub input { height: 44px; padding: 0 12px; border: 1px solid var(--gris-borde); border-radius: 8px; font: inherit; font-weight: 400; background: var(--blanco); box-sizing: border-box; width: 100%; }
.campo-error .sol-sub input, .campo-error .sol-opciones { border-color: var(--error); }
.sol-form input:focus-visible, .sol-form select:focus-visible, .sol-form textarea:focus-visible { outline: 3px solid var(--naranja); outline-offset: 1px; }
.boton-borde { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border: 1px solid #6B7280; border-radius: 8px; background: var(--blanco); color: var(--negro); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; width: auto; margin-top: 0; box-sizing: border-box; }
.boton-borde:hover { border-color: var(--negro); }
.boton-borde:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }
button[data-agregar-persona] { align-self: flex-start; margin-top: 12px; }
.sol-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px; }
.sol-acciones .boton { margin-top: 0; }
.enlace-cancelar { margin-right: auto; color: var(--negro); font-weight: 600; padding: 12px 4px; }
.sol-ficha { display: grid; grid-template-columns: max-content 1fr; gap: 10px 16px; margin: 0; }
.sol-ficha dt { color: var(--gris-texto); }
.sol-ficha dd { margin: 0; font-weight: 600; }
.sol-docs-titulo { margin: 0; padding-top: 16px; border-top: 1px solid #E5E7EB; font-size: .9rem; }
.sol-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sol-docs li { display: flex; gap: 10px; align-items: flex-start; }
.sol-doc-bloque { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid #E5E7EB; }
.sol-doc-bloque form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sol-doc-bloque .sol-docs-titulo { padding-top: 0; border-top: 0; }
.sol-doc-bloque .sol-docs li { align-items: center; flex-wrap: wrap; }
.error-linea { margin: 0; color: #B42318; font-weight: 600; }
.punto { flex: none; margin-top: .55em; border-radius: 50%; border: 2px solid var(--gris-texto); box-sizing: content-box; width: 6px; height: 6px; }
.doc-obligatorio .punto { background: var(--naranja); border-color: var(--naranja); }
.sol-aviso { background: var(--negro); color: var(--blanco); border-radius: 12px; padding: 20px 24px; }
.sol-aviso h2 { margin: 0 0 8px; font-size: 1rem; }
.sol-aviso p { margin: 0; font-size: .9rem; line-height: 1.5; color: #E5E7EB; }
.sol-resumen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px 20px; margin: 0; }
.sol-resumen dt { color: var(--gris-texto); }
.sol-resumen dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.sol-confirmacion { max-width: 640px; }
@media (max-width: 700px) {
  .sol-grilla, .sol-resumen { grid-template-columns: minmax(0, 1fr); }
  .sol-lateral { max-width: none; }
  .sol-acciones { justify-content: stretch; }
}

ul.tarjetas { list-style: none; padding: 0; margin: 0 0 16px; }

/* Bandeja y Mis solicitudes (H4). El color de Vencido es #B42300 sobre blanco (DISENO.md, sección 11). */
.pestanas { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid #E5E7EB; }
.pestanas a { padding: 10px 16px; color: var(--gris-texto); text-decoration: none; border-bottom: 3px solid transparent; min-height: 24px; }
.pestanas a.activa { color: var(--negro); font-weight: 600; border-bottom-color: var(--naranja); }
.pestanas a:hover { color: var(--negro); }
.cuenta { display: inline-block; min-width: 1.4em; padding: 0 6px; border-radius: 999px; background: #E5E7EB; color: #1F2937; font-size: .8rem; text-align: center; }
.cuenta-alerta { background: #B42300; color: var(--blanco); }
.sem { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; border: 1px solid #9CA3AF; background: var(--blanco); color: #1F2937; white-space: nowrap; }
.sem-en_riesgo { background: #FEF0B8; border-color: #FEF0B8; color: #6B4A00; }
.sem-vencido { background: #B42300; border-color: #B42300; color: var(--blanco); }
.sem-pausado, .sem-sin_ans { border-style: dashed; color: var(--gris-texto); }
.chip-estado { white-space: nowrap; }
.leyenda-ans { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 16px 0 0; color: var(--gris-texto); font-size: .9rem; }

/* Enlace Volver (ronda 4): arriba del contenido, o dentro de las migas en el detalle. */
.volver-barra { margin-bottom: 8px; }
.volver { display: inline-flex; align-items: center; gap: 6px; color: var(--negro); font-size: .9rem; font-weight: 600; text-decoration: underline; }
.volver:hover { color: #B42300; }
.volver:focus-visible { outline: 3px solid #F84300; outline-offset: 2px; }
.migas .volver { margin-right: 8px; padding-right: 12px; border-right: 1px solid #D1D5DB; }

/* Detalle de solicitud (H4, tanda 2; maqueta Detalle_de_solicitud.png). */
.migas { display: flex; gap: 8px; margin-bottom: 8px; color: var(--gris-texto); font-size: .9rem; }
.det-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.det-grilla { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.det-principal { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.det-tarjeta { background: var(--blanco); border: 1px solid #E5E7EB; border-radius: 12px; padding: 20px 24px; }
.det-tarjeta h2 { margin: 0 0 12px; font-size: 1.1rem; }
.det-cuenta { float: right; font-weight: 400; }
.det-tarjeta dt { color: var(--gris-texto); font-size: .85rem; }
.det-tarjeta dd { margin: 0 0 4px; font-weight: 600; word-break: break-word; }
.det-pasos { list-style: none; margin: 0; padding: 0; }
.det-pasos li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid #E5E7EB; }
.det-marca { flex: none; width: 20px; height: 20px; border: 2px solid #9CA3AF; border-radius: 4px; font-size: .8rem; line-height: 16px; text-align: center; color: var(--blanco); }
.det-pasos li.hecho .det-marca { background: var(--naranja); border-color: var(--naranja); }
.det-pasos form { margin: 0; flex: none; }
.det-pasos button.det-marca { padding: 0; background: var(--blanco); color: var(--blanco); cursor: pointer; font-family: inherit; }
.det-pasos button.det-marca:disabled { cursor: not-allowed; opacity: .5; }
.det-requiere { display: block; }
.det-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.det-bitacora { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.det-bitacora li { display: flex; flex-direction: column; gap: 2px; padding-left: 16px; border-left: 3px solid #E5E7EB; }
.det-comentario { white-space: pre-wrap; word-break: break-word; }
.sr-solo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 900px) { .det-grilla { grid-template-columns: minmax(0, 1fr); } }
.det-bitacora .sub, .det-estado .sub, .det-cuenta { margin: 0; }

/* Ronda 2: mensajes fijos, ventana de error, checklist por lotes y botón de confirmar */
/* Ronda 4b: banda opaca de ancho completo de la columna (los márgenes negativos cancelan el relleno de .principal).
   Sin margen inferior: su altura medida (--alto-mensajes) es exacta y la cabecera queda pegada debajo, sin hueco. */
/* Ronda 4c: `sticky` se ancla al borde del CONTENIDO de .principal (después de su relleno superior de 32 px), no al borde
   de la ventana; por eso quedaban 32 px por donde pasaba la página. La banda sube con margen negativo, se ancla en
   top: -32px y recupera esos 32 px como relleno propio: el fondo opaco llega hasta el borde superior. */
:root { --relleno-sup: 32px; --fondo-cabecera: #FDF5EE; }
.mensajes { position: sticky; top: calc(-1 * var(--relleno-sup)); z-index: 20; margin: calc(-1 * var(--relleno-sup)) -40px 0; padding: var(--relleno-sup) 40px 12px; background: var(--fondo-cabecera); }
.mensajes .mensaje { box-shadow: 0 2px 6px rgba(0, 0, 0, .12); border: 1px solid currentColor; }  /* el borde separa la tarjeta de la franja durazno */
.mensaje[tabindex="-1"]:focus { outline: 3px solid var(--error); outline-offset: 2px; }
.dialogo { max-width: 460px; width: calc(100% - 32px); padding: 24px; border: 1px solid #E5E7EB; border-radius: 12px; color: var(--negro); }
.dialogo::backdrop { background: rgba(20, 20, 20, .55); }
.dialogo h2 { margin: 0 0 12px; font-size: 1.15rem; color: var(--error); }
.dialogo p { margin: 0 0 12px; }
.dialogo form { margin: 0; text-align: right; }
.dialogo p { text-align: left; }
/* Estilo suave (ronda 4): tinte naranja claro con borde naranja de 2 px. Contrastes: texto #141414 sobre #FFE9E0 15,8:1
   (sobre el hover #FFD9C9, 14,1:1); borde #F84300 sobre el fondo de la página #F3F4F6 3,3:1 (sobre blanco 3,6:1). */
.boton-confirmar { background: #FFE9E0; color: #141414; border: 2px solid #F84300; font-weight: 600; }
.boton-confirmar:hover { background: #FFD9C9; }
.boton-confirmar:focus-visible { outline: 3px solid #141414; outline-offset: 2px; }
.boton-confirmar:disabled { background: #E5E7EB; border-color: #9CA3AF; color: #4B5563; cursor: not-allowed; }
.det-paso { display: flex; gap: 12px; align-items: center; cursor: pointer; flex: 1; }
.det-paso input[type=checkbox] { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--naranja); cursor: pointer; }
.det-paso input[type=checkbox]:disabled { cursor: not-allowed; }
.det-paso input[type=checkbox]:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }
.det-requiere { display: block; margin: 2px 0 0; }
.det-guardar { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.det-guardar .sub { margin: 0; font-weight: 600; color: #8A2A00; }

/* Ronda 3: detalle (acciones en fila, cabecera fija, bitácora en ventanas, vista del solicitante) */
:root { --alto-mensajes: 0px; } /* lo fija js/app.js con la altura del contenedor de mensajes */
.det-acciones { display: flex; flex-flow: row wrap; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.det-abre { margin: 0; }
.det-abre .boton { margin-top: 0; }
/* Acción abierta: color más claro que el negro de las cerradas; el texto blanco mantiene 7,5:1. */
.det-acciones .boton[aria-expanded="true"] { background: #4B5563; box-shadow: inset 0 0 0 2px var(--naranja); }
.det-accion { width: 100%; box-sizing: border-box; margin: 4px 0 8px; padding: 16px; border: 1px solid #E5E7EB; border-radius: 8px; background: var(--gris-fila); }
.det-accion[hidden] { display: none; }
.det-accion form { margin: 0; max-width: none; }
.det-accion textarea, .det-accion select { width: 100%; box-sizing: border-box; }
.det-accion textarea { height: auto; padding: 10px 12px; }
/* Tooltip de los botones de acción: reutiliza el estilo de la ayuda "?"; sale con el cursor y con el foco de teclado. */
.accion-ayuda { vertical-align: top; }
.accion-ayuda:focus-within:not(.cerrada) .ayuda-texto { display: block; }
/* En pantallas táctiles no hay cursor: el texto queda visible bajo el botón mientras la acción está abierta. */
@media (hover: none) {
  .accion-ayuda { flex-direction: column; }
  .accion-ayuda button[aria-expanded="true"] ~ .ayuda-texto { display: block; position: static; width: auto; margin-top: 6px; }
}

/* Ronda 4c: fondo opaco #FDF5EE con borde inferior y sombra suave. Contraste: #141414 17,1:1 y #4B5563 (texto secundario) 7,0:1.
   Sin banda de mensajes la cabecera hace lo mismo que la banda (sube 32 px y se ancla en top: -32px). Con banda
   (.mensajes ~ .det-cabecera) se ancla justo bajo ella: --alto-mensajes ya incluye los 32 px del relleno de la banda. */
.det-cabecera { position: sticky; top: calc(-1 * var(--relleno-sup)); z-index: 15; margin: calc(-1 * var(--relleno-sup)) -40px 16px; padding: calc(12px + var(--relleno-sup)) 40px 4px; background: var(--fondo-cabecera); border-bottom: 1px solid #E6D9CC; box-shadow: 0 3px 8px rgba(20, 20, 20, .08); }
.mensajes ~ .det-cabecera { top: calc(var(--alto-mensajes) - var(--relleno-sup)); margin-top: 0; padding-top: 12px; }
.det-cabecera .encabezado { margin-bottom: 12px; }
.det-cabecera h1 { margin: 0 0 4px; font-size: 1.4rem; }
.det-cab-sub { margin-bottom: 0; }
/* V.3: los títulos de ancla del detalle (#t-docs, #t-bit...) quedan visibles bajo la cabecera fija y la banda de mensajes. */
.det-tarjeta h2[id] { scroll-margin-top: calc(var(--alto-cabecera-det, 140px) + var(--alto-mensajes, 0px) + 12px); }
@media (max-width: 899px) {
  /* Pantalla angosta: la cabecera deja de ser fija para no tapar el contenido. */
  .det-cabecera, .mensajes ~ .det-cabecera { position: static; margin: 0 0 16px; padding: 0; border-bottom: 0; box-shadow: none; background: none; }
  /* Debajo de la barra móvil fija (60 px) y con el relleno de 16 px de .principal. */
  .mensajes { top: 60px; margin: 0 -16px; padding: 0 16px 12px; }
}

.det-bit-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.det-bit-botones .boton-borde { height: 40px; padding: 0 14px; }
.det-bit-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; }
.etiqueta-vis { font-size: .85rem; padding: 1px 8px; border-radius: 999px; border: 1px solid #9CA3AF; }
.etiqueta-equipo { background: var(--gris-fila); color: #1F2937; }
.etiqueta-solicitante { background: var(--info-fondo); border-color: var(--info-fondo); color: var(--info-texto); }
/* Ronda 4c: ventanas largas. Altura ligada a la ventana (vh de respaldo y dvh), encabezado con título y Cerrar siempre
   visible y cuerpo con desplazamiento propio; overscroll-behavior evita mover la página de fondo. */
.dialogo { max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overscroll-behavior: contain; }
.dialogo-ancho { max-width: 720px; padding: 0; overflow: hidden; }
.dialogo-ancho[open] { display: flex; flex-direction: column; }
.dialogo-cab { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 24px; border-bottom: 1px solid #E5E7EB; }
.dialogo-cab h2 { margin: 0; color: var(--negro); }
.dialogo-cab form { flex: none; margin: 0; }
.dialogo-cab .boton-borde { height: 36px; padding: 0 14px; }
.dialogo-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 24px 24px; }
.dialogo-barra { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.dialogo-barra .boton-borde { height: 36px; padding: 0 12px; }
.det-bit-completa, .det-ans { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.det-bit-completa li, .det-ans li { padding-left: 14px; border-left: 3px solid #E5E7EB; }
.det-bit-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 4px 16px; margin: 6px 0; }
.det-bit-datos div { min-width: 0; }
.det-bit-datos dt { font-size: .85rem; color: var(--gris-texto); }
.det-bit-datos dd { margin: 0; font-size: .9rem; word-break: break-word; }
.det-ans-texto { margin: 2px 0 0; }

/* Vista del solicitante: aviso de devolución y comentarios del equipo, muy visibles */
.det-aviso { background: #FFF4E5; border: 2px solid var(--naranja); border-radius: 12px; padding: 20px 24px; }
.det-aviso h2 { margin: 0 0 8px; font-size: 1.15rem; }
.det-aviso p { margin: 0 0 8px; }
.det-comentarios-equipo { border: 2px solid var(--negro); }
.det-lista-comentarios { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.det-lista-comentarios li { padding-left: 14px; border-left: 4px solid var(--naranja); }
.det-comentario-cab { margin: 0 0 2px; }
.det-lista-comentarios .det-comentario { margin: 0; }

/* Ronda 5: avisos de comentarios nuevos. Texto #141414 sobre naranja #F84300 (mismo par del botón principal). */
.cuenta-menu { display: inline-block; min-width: 1.4em; padding: 0 7px; border-radius: 999px; background: var(--naranja); color: var(--negro); font-size: .8rem; font-weight: 600; text-align: center; }
.aviso-novedades { margin: 0 0 20px; padding: 14px 16px; background: #FFF4EC; border: 1px solid var(--naranja); border-radius: 12px; color: var(--negro); }
.aviso-novedades h2 { margin: 0 0 8px; font-size: 1rem; }
.aviso-novedades ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.aviso-novedades { text-align: left; }
.aviso-novedades li { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; overflow-wrap: anywhere; }
.aviso-evento { color: var(--negro); }
.aviso-novedades a { color: #8A2A00; }
.aviso-mas { margin: 8px 0 0; color: var(--gris-texto); }

/* Ronda 6: notificación en pantalla (js/avisos.js), abajo a la derecha. Texto #141414 sobre #FFF4EC (17:1) y enlace
   #8A2A00 sobre #FFF4EC (7:1); borde naranja de 2 px; botón de cerrar de 44 px. */
.avisos-pantalla { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px;
  width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.aviso-pantalla { pointer-events: auto; display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 14px; background: #FFF4EC;
  border: 2px solid var(--naranja); border-radius: 12px; color: var(--negro); box-shadow: 0 6px 16px rgba(20, 20, 20, .2); }
.aviso-pantalla a { flex: 1; min-width: 0; color: #8A2A00; overflow-wrap: anywhere; }
/* Máximo 3 líneas por aviso: 1 de título (caso y evento) y 2 de fragmento; lo que no cabe se corta con puntos suspensivos. */
.aviso-pantalla-titulo, .aviso-pantalla-fragmento { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.aviso-pantalla-titulo { -webkit-line-clamp: 1; line-clamp: 1; }
.aviso-pantalla-fragmento { -webkit-line-clamp: 2; line-clamp: 2; margin-top: 2px; color: var(--negro); font-size: .9rem; line-height: 1.35; }
.aviso-pantalla-cerrar { flex: none; width: 44px; height: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--negro);
  font: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.aviso-pantalla-cerrar:hover { background: #FFD9C9; }
.aviso-pantalla-cerrar:focus-visible, .aviso-pantalla a:focus-visible { outline: 3px solid var(--negro); outline-offset: 2px; }

/* H5.2: panel Documentos del Detalle y vista previa. Controles de 44 px; texto #141414 o gris #4B5563 sobre blanco. */
.doc-reglas { margin: 0 0 12px; }
.banda-confidencial { margin: 0 0 12px; padding: 10px 12px; border-left: 4px solid var(--error); border-radius: 8px; background: var(--error-fondo); color: var(--error); font-weight: 600; }
.doc-aviso { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: var(--info-fondo); color: var(--info-texto); }
.doc-fila { padding: 14px 0; border-top: 1px solid #E5E7EB; }
.doc-fila:first-of-type { border-top: 0; }
.doc-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.doc-titulo { margin: 0; font-size: 1rem; }
.doc-ayuda { margin: 4px 0 0; }
.doc-lista { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.doc-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 8px 12px; background: var(--gris-fila); border-radius: 8px; }
.doc-dato { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.doc-meta { margin: 0; }
.doc-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin-top: 10px; }
.doc-etiqueta { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; font-weight: 600; color: #1F2937; }
.doc-texto, .doc-archivo { min-height: 44px; box-sizing: border-box; padding: 8px 12px; border: 1px solid var(--gris-borde); border-radius: 8px; font: inherit; background: var(--blanco); }
.doc-archivo { max-width: 100%; }
.doc-texto:focus-visible, .doc-archivo:focus-visible, .doc-visible input:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }
.doc-visible { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: .9rem; }
.doc-visible input { width: 20px; height: 20px; }
.doc-form .boton { margin-top: 0; }
.doc-mini { margin: 0; }
.doc-extra { flex-basis: 100%; margin: 0; }
.doc-extra.doc-form { margin-top: 0; }
.doc-nota { min-width: min(100%, 22rem); }
.doc-bloqueo { align-self: flex-start; }
.doc-historial summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.doc-historial .doc-restaurar > summary { height: 32px; min-height: 32px; padding: 0 12px; font-size: .85rem; width: fit-content; list-style: none; }
.doc-historial .doc-restaurar > summary::-webkit-details-marker { display: none; }
.doc-historial .doc-restaurar[open] > summary { margin-bottom: 12px; }
.doc-historial summary:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }
.doc-version { background: var(--blanco); }
.doc-nota-texto { font-size: .9rem; overflow-wrap: anywhere; }
.doc-visor { padding: 12px; }
.doc-marco { display: block; width: 100%; height: 75vh; min-height: 480px; border: 0; background: var(--gris-fila); }
.doc-imagen { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.doc-pie { margin: 8px 0 0; }

/* H5.3b: adjuntos de comentarios. Campo de archivos del formulario y lista bajo el comentario. Controles de 44 px
   (.boton-borde ya los trae); texto #141414 o gris #4B5563 sobre blanco o sobre --gris-fila. */
.adj-campo .doc-archivo { width: 100%; }
.adj-ayuda { margin: 6px 0 0; }
.adj-lista { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.adj-lista li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.adj-lista:empty { display: none; }
.adj-aviso { margin: 8px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--info-fondo); color: var(--info-texto); }
.adj-comentario { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.adj-comentario li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 10px; background: var(--gris-fila); border-radius: 8px; }
.adj-nombre { overflow-wrap: anywhere; font-weight: 600; }
.adj-tamano { margin: 0; }
.adj-acciones { display: flex; flex-wrap: wrap; gap: 6px; }
/* Las reglas de las listas de la bitácora (`.det-bitacora li`, `.det-bit-completa li`, `.det-lista-comentarios li`) también
   alcanzan a los elementos de la lista anidada de adjuntos; este bloque los devuelve a su aspecto propio. */
.det-bitacora .adj-comentario li, .det-bit-completa .adj-comentario li, .det-lista-comentarios .adj-comentario li {
  flex-direction: row; padding: 6px 10px; border-left: 0; }

/* Paso 4 de Nueva solicitud (H5.8): zona de pegado con Ctrl+V; la revela adjuntos.js */
.doc-zona { flex-basis: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; border: 2px dashed var(--gris-borde); border-radius: 8px; background: var(--blanco); color: var(--gris-texto, inherit); cursor: pointer; display: flex; align-items: center; }
.doc-zona:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; border-color: var(--naranja); }
.sol-doc-bloque .doc-info, .sol-doc-bloque .error-linea[data-doc-aviso] { flex-basis: 100%; margin: 0; }
.doc-zona[hidden] { display: none; }

/* Ronda L: versión de la aplicación bajo el nombre del usuario (también dentro del menú móvil, que es la misma barra) */
.lateral-version { color: #9CA3AF; font-size: .8rem; }

/* Apoyos (H6.1): lista de tareas y de documentos dentro de una tarjeta. */
.doc-lista { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 12px; }
.doc-lista li { padding-bottom: 12px; border-bottom: 1px solid #E5E7EB; }
.doc-lista li:last-child { border-bottom: 0; padding-bottom: 0; }
.doc-lista details { margin-top: 8px; }
/* H63-r: la lista de aprobadores del bloque Aprobación lleva viñetas */
.doc-lista.con-vinetas { list-style: disc; display: block; margin: 0 0 12px; padding-left: 20px; }
.doc-lista.con-vinetas li { padding-bottom: 0; border-bottom: 0; }

/* H611-e: «Cancelar este apoyo» como botón pequeño y secundario con los colores de peligro existentes. */
.apoyo-cancelar > summary { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--error); border-radius: 8px; background: var(--blanco); color: var(--error); font-size: .85rem; font-weight: 600; cursor: pointer; list-style: none; }
.apoyo-cancelar > summary::-webkit-details-marker { display: none; }
.apoyo-cancelar > summary:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }
.apoyo-cancelar[open] > summary { margin-bottom: 12px; }
/* H611-f: más aire entre las tarjetas de la tarea de apoyo y entre sus formularios. */
.det-tarjeta-apoyo { margin-bottom: 24px; }
.det-tarjeta-apoyo .formulario + .formulario { margin-top: 32px; padding-top: 24px; border-top: 1px solid #E5E7EB; }

/* Ronda P: página de clave de un PDF cifrado (dentro del marco de la vista previa) */
.clave-pdf { max-width: 420px; margin: 0 auto; padding: 32px 16px; }
.clave-titulo { font-size: 1.1rem; margin: 0 0 8px; }
.clave-formulario { display: grid; gap: 8px; margin-top: 12px; }
.clave-formulario input { padding: 8px 10px; border: 1px solid #9CA3AF; border-radius: 8px; font: inherit; }

/* H6.2c: botón secundario pequeño en morado (igual de alto que «Restaurar esta versión»), insignia de ronda y resultado del solicitante. */
.boton-morado-peq { height: 32px; padding: 0 12px; font-size: .85rem; background: var(--morado); color: var(--blanco); }
.boton-morado-peq:hover { background: #47206A; }
.boton-morado-peq:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }
.boton-morado-peq:disabled { background: #E5E7EB; color: #4B5563; cursor: not-allowed; }
.ronda-insignia { display: inline-block; padding: 3px 10px; border-radius: 999px; border: 2px solid; font-size: .9rem; font-weight: 600; }  /* A.1: ~82 % del tamaño anterior (1.1rem) */
.aprob-rondas { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--gris-borde); }  /* A.1: separa el formulario de las rondas */
.aprob-rondas-titulo { margin: 0 0 8px; font-size: 1rem; }
.ronda-aprobada { background: #E3F4E8; border-color: #1B6B3A; color: #0F4D28; }
.ronda-rechazada { background: #FDE8E8; border-color: #B42318; color: #8A1C13; }
.ronda-cancelada { background: #E5E7EB; border-color: #6B7280; color: #374151; }
.ronda-pendiente { background: #FEF0B8; border-color: #8A6100; color: #6B4A00; }
.aprob-resultado { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; border: 2px solid; font-weight: 600; }
.aprob-aprobada { background: #E3F4E8; border-color: #1B6B3A; color: #0F4D28; }
.aprob-rechazada { background: #FDE8E8; border-color: #B42318; color: #8A1C13; }

/* Ronda Documentos: sección «Documentos». Botones rellenos en #D63A00 con texto blanco (contraste 4,7:1); el #F84300 queda para acentos. */
.boton-doc { background: #D63A00; color: var(--blanco); }
.boton-doc:hover { background: #B83200; }
.boton-doc:focus-visible { outline: 3px solid var(--negro); outline-offset: 2px; }
.dl-filtros { display: flex; flex-direction: column; gap: 12px; margin: 0 0 16px; padding: 16px 20px; }
.dl-fila { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.dl-campo { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; font-weight: 600; color: #1F2937; }
.dl-campo input, .dl-campo select { height: 44px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--gris-borde); border-radius: 8px; font: inherit; font-weight: 400; background: var(--blanco); }
.dl-buscar { flex: 1 1 22rem; }
.dl-marca { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: .9rem; }
.dl-marca input { width: 20px; height: 20px; accent-color: var(--naranja); }
.dl-acciones { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.dl-limpiar { color: var(--gris-texto); }
.dl-campo input:focus-visible, .dl-campo select:focus-visible, .dl-marca input:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }
.chip-bloqueo { background: #FFE9E0; color: #8A2A00; }
.chip-morado { background: var(--morado); color: var(--blanco); }
.fila-eliminada td { background: #F3F4F6; color: #6B7280; }
.nombre-eliminado { font-style: italic; }
.dd-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dd-accesos { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dd-admin { margin-top: 16px; }
.dd-resumen { margin: 0 0 12px; }
.dd-resumen dt { color: var(--gris-texto); font-size: .85rem; }
.dd-resumen dd { margin: 0 0 4px; font-weight: 600; overflow-wrap: anywhere; }
.dd-consecuencias { margin: 0 0 16px; padding-left: 20px; }
.dd-consecuencias li { margin-bottom: 6px; }
.det-lateral > .det-tarjeta { margin-bottom: 16px; }