/* ── Digital Core · portal público y formulario desde un modelo ─────────────
   Páginas abiertas sin inicio de sesión (p. ej. Solicitudes de Portfolio IA,
   /apps/portfolio-ia/solicitudes/) con la cabecera del Hub, y los estilos del
   formulario que pinta shared/js/ui/form-modelo.js (errores por campo,
   obligatorios, tarjetas por sección, justificante tras enviar). */

/* Es una página de documento (como el Hub), no el shell de una app: sin esto
   hereda `#app { height: 100vh; overflow: hidden }` y el formulario se corta. */
#app.dc-portal-publico { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }
.dc-portal-main { max-width: 1080px; margin: 0 auto; }

/* Tarjetas de sección con un tono pastel apenas perceptible para distinguirlas. */
/* Selector de tarjetas común («Qué quieres hacer»): separación estándar (16 px) con lo de debajo. */
.dc-portal-card.dc-portal-selector { margin-bottom: 16px; }
.dc-portal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }   /* tarjetas de una misma fila, misma altura */
.dc-portal-card { --dc-tono: var(--view-9); margin: 0; background: color-mix(in srgb, var(--dc-tono) 4%, var(--bg2)); border-color: color-mix(in srgb, var(--dc-tono) 16%, var(--border)); }
.dc-portal-card.is-ancha { grid-column: 1 / -1; }
.dc-portal-card > .card-header { background: transparent; border-bottom-color: color-mix(in srgb, var(--dc-tono) 14%, var(--border)); }
.dc-portal-card > .card-header .card-title-sm { display: inline-flex; align-items: center; gap: 8px; }
.dc-portal-card > .card-header .card-title-sm::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--dc-tono) 70%, transparent); }
.dc-portal-card:nth-child(3n + 1) { --dc-tono: var(--view-9); }
.dc-portal-card:nth-child(3n + 2) { --dc-tono: var(--view-6); }
.dc-portal-card:nth-child(3n + 3) { --dc-tono: var(--view-3); }

/* Campos a rellenar en blanco (misma superficie en los dos temas). */
.dc-portal-form .form-input, .dc-portal-form .form-select, .dc-portal-form .form-textarea { background: var(--campo-publico-bg); color: var(--campo-publico-texto); border-color: var(--border2); }
.dc-portal-form .form-select option { background: var(--campo-publico-bg); color: var(--campo-publico-texto); }
.dc-portal-form .filter-ms.dd-form .filter-ms-trigger,
.dc-portal-form .filter-ms.dd-form .filter-ms-dropdown,
.dc-portal-form .filter-ms.dd-form .ms-search-wrap { background: var(--campo-publico-bg); color: var(--campo-publico-texto); border-color: var(--border2); }
.dc-portal-form .filter-ms.dd-form .ms-option { color: var(--campo-publico-texto); }
.dc-portal-form .filter-ms.dd-form .ms-option:hover,
.dc-portal-form .filter-ms.dd-form .ms-option.is-resaltada { background: color-mix(in srgb, var(--campo-publico-texto) 6%, var(--campo-publico-bg)); }
.dc-portal-form .form-input::placeholder, .dc-portal-form .form-textarea::placeholder { color: color-mix(in srgb, var(--campo-publico-texto) 50%, var(--campo-publico-bg)); }

/* Tipo de solicitud: opciones como tarjetas seleccionables (radio nativo). */
.dc-portal-tipos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; border: 0; padding: 0; min-width: 0; width: 100%; grid-column: 1 / -1; }
.dc-portal-tipos legend { font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 8px; padding: 0; }
.dc-portal-tipo { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--border2); border-radius: var(--radius); background: var(--campo-publico-bg); color: var(--campo-publico-texto); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.dc-portal-tipo input { position: absolute; opacity: 0; pointer-events: none; }
.dc-portal-tipo strong { font-size: 14px; }
.dc-portal-tipo span { font-size: 12px; line-height: 1.45; color: color-mix(in srgb, var(--campo-publico-texto) 65%, var(--campo-publico-bg)); }
.dc-portal-tipo:has(input:checked) { border-color: var(--view-9); box-shadow: 0 0 0 2px color-mix(in srgb, var(--view-9) 35%, transparent); }
.dc-portal-tipo:has(input:checked) strong { color: var(--view-9); }
/* Texto de presentación a todo el ancho de la tarjeta. */
.dc-portal-publico .hub-intro .hub-lead { max-width: none; }
.dc-portal-tipo:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Acciones y nota al pie del formulario. */
.dc-portal-acciones { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding: 12px 0; }
.dc-portal-nota { margin-right: auto; font-size: 12px; color: var(--text2); max-width: 560px; line-height: 1.5; }

/* Justificante tras enviar. */
.dc-portal-recibo { max-width: 760px; }
.dc-portal-recibo-titulo { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin: 0 0 8px; color: var(--text); }
.dc-portal-recibo p { margin: 0 0 14px; color: var(--text2); line-height: 1.6; }
.dc-portal-recibo-aviso { margin: 0 0 14px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border)); border-radius: var(--radius); background: var(--warning-soft); font-size: 13px; }

/* Check verde del justificante (los trazos y colores son los de .dc-check-ok, motion.css §17). */
.dc-portal-recibo-check { width: 56px; height: 56px; margin-bottom: 10px; }
.dc-portal-recibo-check svg { width: 100%; height: 100%; overflow: visible; }
.dc-portal-recibo-check.is-dibujado svg { animation: dcPortalCheckSalta 520ms cubic-bezier(.34, 1.56, .64, 1); }
@keyframes dcPortalCheckSalta { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Aviso del formulario de pruebas (?entorno=dev). */
.dc-portal-entorno { margin: 0 0 14px; padding: 8px 12px; border: 1px dashed color-mix(in srgb, var(--warning) 60%, var(--border)); border-radius: var(--radius-sm); background: var(--warning-soft); font-size: 13px; font-weight: 600; }

/* Entrada al abrir: intro y tarjetas en cascada; los campos de cada tarjeta, después. */
.dc-portal-entra { animation: dcPortalEntra 620ms cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--dc-entra-i, 0) * 90ms); }
.dc-portal-entra .form-group,
.dc-portal-entra .dc-portal-tipo { animation: dcPortalCampo 480ms cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--dc-entra-i, 0) * 90ms + 180ms + var(--dc-entra-j, 0) * 45ms); }
@keyframes dcPortalEntra { from { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes dcPortalCampo { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Nombre del campo + icono «i» en una línea. */
/* Línea 1: nombre + «i»; línea 2 (si hay): responsable, «Consulta con», quién respondió. */
/* La pregunta a la izquierda y sus datos (responsable, «Consulta con», quién respondió) a
   la derecha, alineados arriba; en pantallas estrechas los datos bajan debajo. */
.fm-etiqueta { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 6px 16px; text-align: left; }
.fm-etiqueta-linea { flex: 1 1 auto; }
/* Aclaraciones de una pregunta ([…] y lo que queda fuera de «¿…?»): pequeñas y sin negrita (form-modelo.js · fmEtiquetaTextoHtml). */
.fm-etiqueta-nota { font-size: 12px; font-weight: 400; color: var(--text2); }
.fm-etiqueta > .fm-meta { flex: 0 1 auto; max-width: 45%; justify-content: flex-end; text-align: right; padding-top: 1px; }
@media (max-width: 640px) {
  .fm-etiqueta { flex-direction: column; }
  .fm-etiqueta > .fm-meta { max-width: none; justify-content: flex-start; text-align: left; }
}
.fm-etiqueta-linea { display: flex; align-items: flex-start; gap: 4px; min-width: 0; }
.fm-etiqueta-linea .dashboard-info-wrap { flex: none; margin-top: 1px; }
.fm-etiqueta .form-label { margin-bottom: 0; }
.fm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fm-meta .fm-autor { background: transparent; padding: 0; color: var(--text3); }
.fm-etiqueta + .form-input, .fm-etiqueta + .form-select, .fm-etiqueta + .form-textarea, .fm-etiqueta + .ms-wrap { margin-top: 6px; }

/* form-modelo.js · tipo «ejes»: opciones marcables, cada una con su comentario. */
/* Ejes: lista de filas (como las filas de una ficha) con un interruptor a la
   derecha; al activarlo se despliega debajo su comentario. Sin negritas. */
.fm-ejes { display: flex; flex-direction: column; border: 1px solid var(--border2); border-radius: var(--radius); background: var(--campo-publico-bg); color: var(--campo-publico-texto); overflow: hidden; }
.fm-eje { padding: 0 14px; border-bottom: 1px solid var(--border); transition: background-color .15s; }
.fm-eje:last-child { border-bottom: 0; }
.fm-eje.is-marcado { background: var(--accent-soft); }
.fm-eje-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; font-size: var(--field-fs); font-weight: 400; cursor: pointer; }
.fm-eje-nombre { min-width: 0; }
.fm-eje.is-marcado .fm-eje-nombre { color: var(--accent); }
.fm-eje-switch { appearance: none; -webkit-appearance: none; position: relative; flex: 0 0 auto; width: 36px; height: 20px; margin: 0; border-radius: 999px; background: var(--border2); cursor: pointer; transition: background-color .2s; }
.fm-eje-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface-white); transition: transform .22s cubic-bezier(.22, 1, .36, 1); }
.fm-eje-switch:checked { background: var(--accent); }
.fm-eje-switch:checked::after { transform: translateX(16px); }
.fm-eje-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fm-eje-comentario { padding: 0 0 12px; }
.fm-eje-despliega { animation: fmEjeDespliega 360ms cubic-bezier(.22, 1, .36, 1); }
@keyframes fmEjeDespliega { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
[data-fm-campo].is-invalid .fm-eje.is-marcado .form-textarea { border-color: var(--red); }

/* Campo trampa contra bots (fuera de la vista y del foco). */
.dc-trampa { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ── form-modelo.js: obligatorios y errores por campo ── */
.fm-req { color: var(--red); }
.fm-error { font-size: 12px; color: var(--red); margin-top: 4px; }
.fm-error:empty { display: none; }
[data-fm-campo].is-invalid .form-input,
[data-fm-campo].is-invalid .form-textarea,
[data-fm-campo].is-invalid .form-select,
[data-fm-campo].is-invalid .filter-ms-trigger { border-color: var(--red); box-shadow: 0 0 0 2px var(--red-soft); }

@media (max-width: 760px) {
  .dc-portal-grid { grid-template-columns: minmax(0, 1fr); }
  .dc-portal-tipos { grid-template-columns: minmax(0, 1fr); }
  .dc-portal-acciones .btn-primary, .dc-portal-acciones .btn-secondary { flex: 1 1 auto; }
}

/* «Rellenar con mi cuenta UAX» (opcional) al principio de «Quién lo solicita». */
/* «Cuenta UAX»: botón compacto a la derecha del título «Quién lo solicita». */
.dc-portal-card > .card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dc-portal-cuenta-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px;
  border: 1px solid var(--border2); border-radius: var(--radius-pill); background: var(--bg2);
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text2); cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.dc-portal-cuenta-btn:hover { border-color: var(--accent); color: var(--text); }
.dc-portal-cuenta-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dc-portal-cuenta-btn.is-conectando { opacity: .6; cursor: progress; }
.dc-portal-cuenta-btn.is-identificado { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); background: var(--accent-soft); color: var(--text); }
.dc-logo-uax { height: 14px; width: auto; display: block; }
.dc-logo-uax.is-claro { display: none; }
:root[data-theme="light"] .dc-logo-uax.is-claro { display: block; }
:root[data-theme="light"] .dc-logo-uax.is-oscuro { display: none; }
/* Campos fijados por la cuenta (nombre y correo): visibles pero no editables. */
#app.dc-portal-publico .form-input[readonly] { background: var(--bg3); color: var(--text2); cursor: not-allowed; }
.dc-portal-form .form-input[readonly] { opacity: .85; cursor: not-allowed; }

/* ── Cuestionarios por responsables (form-modelo.js: Clasificación IA Act y Protocolo de
   proveedores, en la página pública /apps/portfolio-ia/formularios/ y en los popups) ── */
.fm-pregunta { padding: 16px 0; border-bottom: 1px solid var(--border); text-align: left; }
.fm-pregunta:last-child { border-bottom: 0; }
.fm-pregunta .fm-etiqueta { margin-bottom: 10px; }
.fm-pregunta .fm-etiqueta .form-label { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.45; white-space: pre-line; }
.fm-chip { font-size: 11px; }
.fm-consulta { font-size: 11.5px; color: var(--text2); padding: 1px 8px; border-radius: var(--radius-pill); background: var(--bg3); }
.fm-obs, .fm-extra { margin-top: 8px; }
.fm-obs .form-label, .fm-extra .form-label { font-size: 12px; color: var(--text2); }
.fm-pregunta.is-solo-lectura .form-select, .fm-pregunta.is-solo-lectura .form-input, .fm-pregunta.is-solo-lectura .form-textarea { opacity: .8; cursor: default; }
.fm-seccion-intro { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: var(--text2); font-style: italic; }
.frm-resumen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; }
.frm-resumen > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.frm-resumen p { margin: 0; color: var(--text); line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.frm-resumen-ancho { grid-column: 1 / -1; }
.frm-texto-largo { white-space: pre-line; line-height: 1.6; color: var(--text2); }
.frm-pasos { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--text2); line-height: 1.5; }
.frm-pasos strong { color: var(--text); }
/* Cabecera plegable de «Instrucciones»: toda la barra es el botón (sin subrayado), el chevron va siempre
   a la derecha del todo (estándar de tarjeta plegable). */
.frm-plegar { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; border: 0; background: none; text-align: left; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.frm-plegar:hover, .frm-plegar:focus-visible { text-decoration: none; }
.frm-plegar-ico { display: inline-flex; flex: none; }
.frm-plegar-ico svg { width: 18px; height: 18px; }
.frm-plegar-titulo { min-width: 0; }
.frm-plegar-chevron { display: inline-flex; flex: none; margin-left: auto; transition: transform .25s ease; }
.frm-plegar-chevron svg { width: 16px; height: 16px; }
.frm-plegar[aria-expanded="true"] .frm-plegar-chevron { transform: rotate(180deg); }
.frm-devuelta { border-color: color-mix(in srgb, var(--warning) 50%, var(--border)); background: var(--warning-soft); }
.frm-devuelta p { margin: 6px 0 0; white-space: pre-line; }
.frm-mensaje p { line-height: 1.6; color: var(--text2); }
.frm-local { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--border2); }
.frm-local-fila { display: flex; gap: 8px; }
.frm-local-fila .form-input { flex: 1; min-width: 0; }
.frm-decision .dc-portal-acciones { padding-bottom: 0; }
/* «Tu decisión» va fuera de la rejilla: el mismo hueco que entre las demás tarjetas. */
.frm-decision { margin-top: 16px; }
@media (max-width: 640px) {
  .frm-resumen { grid-template-columns: minmax(0, 1fr); }
  .frm-local-fila { flex-direction: column; }
}
.frm-instrucciones-cuerpo[hidden] { display: none; }
.frm-instrucciones-cuerpo > .card-body { border-top: 1px solid var(--border); }
.frm-despliega { animation: fmEjeDespliega 360ms cubic-bezier(.22, 1, .36, 1); }

/* Etiqueta del responsable de cada pregunta (IA Act y Seguridad): un color por perfil,
   solo en la etiqueta (la pregunta no se colorea). Paleta decorativa --view-N. */
.fm-chip-rol { --rol-tono: var(--view-12); background: color-mix(in srgb, var(--rol-tono) 18%, transparent); border: 1px solid color-mix(in srgb, var(--rol-tono) 50%, transparent); color: color-mix(in srgb, var(--rol-tono) 60%, var(--text)); }
.fm-chip-rol[data-rol="sponsor"], .iaact-rol-tab[data-rol="sponsor"] { --rol-tono: var(--view-2); }
.fm-chip-rol[data-rol="equipo-ia"], .iaact-rol-tab[data-rol="equipo-ia"] { --rol-tono: var(--view-8); }
.fm-chip-rol[data-rol="legal"], .iaact-rol-tab[data-rol="legal"] { --rol-tono: var(--view-10); }
.fm-chip-rol[data-rol="ciso"], .iaact-rol-tab[data-rol="ciso"] { --rol-tono: var(--view-6); }
.fm-chip-rol[data-rol="proveedor"], .iaact-rol-tab[data-rol="proveedor"] { --rol-tono: var(--view-13); }

/* ── Estilos de instrucciones y campos bloqueados ────────────────────────── */
.frm-intro-bloques { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.frm-intro-p { line-height: 1.6; color: var(--text2); margin: 0; }
.frm-pasos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-top: 14px; }
.frm-paso-card {
  display: flex; flex-direction: column; gap: 6px; padding: 12px 14px;
  background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius);
}
.frm-paso-cab { display: flex; align-items: flex-start; gap: 10px; }
.frm-paso-num {
  flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--accent); color: var(--on-accent);
  font-size: 11px; font-weight: 700; line-height: 1;
}
.frm-paso-tit { font-size: 13px; color: var(--text); line-height: 1.35; padding-top: 2px; }
.frm-paso-desc { font-size: 12px; color: var(--text2); line-height: 1.5; margin: 0; }

/* Título de cada tarjeta: negrita y la versión oscura de su propio tono (verde → verde
   oscuro…). La mezcla con --text lo oscurece en claro y lo mantiene legible en oscuro. */
.dc-portal-card { --dc-tono-oscuro: color-mix(in srgb, var(--dc-tono) 50%, var(--text)); }
.dc-portal-card > .card-header .card-title-sm { font-weight: 700; color: var(--dc-tono-oscuro); }
/* «Instrucciones para completar el formulario»: tarjeta morada, todo el texto en morado oscuro; los pasos son
   tarjetas moradas numeradas (la numeración en el morado oscuro, no en el azul de acento). */
.dc-portal-card.frm-instrucciones { --dc-tono: var(--view-9); background: color-mix(in srgb, var(--dc-tono) 9%, var(--bg2)); border-color: color-mix(in srgb, var(--dc-tono) 34%, var(--border)); }
.dc-portal-card.frm-instrucciones > .card-header { padding-block: 14px; border-bottom: 0; }
.frm-instrucciones .frm-plegar,
.frm-instrucciones .frm-intro-p,
.frm-instrucciones .frm-paso-tit,
.frm-instrucciones .frm-paso-desc { color: var(--dc-tono-oscuro); }
.dc-portal-card.frm-instrucciones { --dc-tono-oscuro: color-mix(in srgb, var(--view-9) 22%, var(--text)); }
.frm-instrucciones strong { font-weight: 700; }
.frm-instrucciones .frm-paso-tit { font-weight: 700; }
.ms-btn svg .ms-r { fill: var(--ms-logo-rojo); }
.ms-btn svg .ms-g { fill: var(--ms-logo-verde); }
.ms-btn svg .ms-b { fill: var(--ms-logo-azul); }
.ms-btn svg .ms-y { fill: var(--ms-logo-amarillo); }
.frm-instrucciones .frm-paso-desc { opacity: 1; }
.frm-instrucciones .frm-instrucciones-cuerpo > .card-body { border-top: 1px solid color-mix(in srgb, var(--dc-tono) 26%, var(--border)); }
.frm-instrucciones .frm-paso-card { background: color-mix(in srgb, var(--dc-tono) 8%, var(--bg2)); border-color: color-mix(in srgb, var(--dc-tono) 28%, var(--border)); }
.frm-instrucciones .frm-paso-num { background: var(--dc-tono-oscuro); color: var(--bg2); }

/* Campos bloqueados / no editables: cursor not-allowed */
/* Texto en negrita de cada pregunta: el color oscuro de la tarjeta (no negro). */
.dc-portal-card .fm-pregunta .fm-etiqueta .form-label { color: var(--dc-tono-oscuro); }

.fm-pregunta.is-solo-lectura,
.fm-pregunta.is-solo-lectura *,
.dc-portal-form .form-input[disabled],
.dc-portal-form .form-textarea[disabled],
.dc-portal-form .form-select[disabled],
.dc-portal-form .filter-ms.is-disabled,
.dc-portal-form .filter-ms.is-disabled * {
  cursor: not-allowed !important;
}
.fm-pregunta.is-solo-lectura .form-select,
.fm-pregunta.is-solo-lectura .form-input,
.fm-pregunta.is-solo-lectura .form-textarea,
.fm-pregunta.is-solo-lectura .filter-ms-trigger {
  opacity: .75;
  background: var(--bg3);
}

/* Pregunta 8 (Descripción detallada): altura mayor y saltos de línea */
.fm-textarea-descripcion,
textarea#frm-descripcion {
  min-height: 200px;
  line-height: 1.55;
  white-space: pre-wrap;
  font-family: inherit;
}

/* ── Identificación y mensajes de los formularios: mismo aire que el login de Digital Core ── */
.frm-login { display: flex; justify-content: center; padding: 48px 0 24px; }
.frm-login-card { text-align: left; }
.frm-login-card .login-logo { margin-bottom: 32px; }
.frm-login-card p { margin-bottom: 28px; line-height: 1.6; }
.frm-login-card .login-footer a { color: var(--accent); }
.frm-login-card .frm-local { margin-top: 20px; }
/* Justificante: tarjeta centrada, con el check grande sobre un halo verde. */
.dc-portal-recibo { max-width: 520px; margin: 48px auto 24px; text-align: center; border-radius: var(--radius-lg); animation: fadeUp 0.6s ease both; }
.dc-portal-recibo .card-body { padding: 44px 40px 36px; }
.dc-portal-recibo-check { width: 84px; height: 84px; margin: 0 auto 18px; padding: 10px; border-radius: 50%; background: var(--green-soft); }
.dc-portal-recibo .dc-portal-recibo-titulo { font-size: 24px; }
.dc-portal-recibo p { font-size: 14px; }
@media (max-width: 560px) { .dc-portal-recibo .card-body { padding: 32px 20px 28px; } .frm-login { padding-top: 24px; } }

/* Filtro por rol de la pregunta (Legal y CISO): en la barra superior, a la izquierda del tema. */
.frm-filtro-rol { flex: 0 0 auto; width: 170px; }
.frm-filtro-rol .ms-wrap { width: 100%; }
.frm-filtro-rol .filter-ms-trigger { min-height: var(--control-h-sm); height: var(--control-h-sm); font-size: 12px; padding-block: 0; }
.frm-filtro-rol .filter-ms-label { font-size: 12px; }
/* En móvil no se muestra: desplazaría el selector de tema. */
@media (max-width: 768px) { .frm-filtro-rol { display: none; } }
.dc-portal-form .is-filtrada-rol { display: none; }
.frm-devolver-grupo { padding: 10px 0; border-top: 1px solid var(--border); }
.frm-devolver-grupo:first-of-type { border-top: 0; }
.frm-devolver-preguntas { margin: 6px 0 0 26px; }

/* ── «Solicitar permisos Portfolio» (shared/js/ui/solicitud-permisos.js) ── */
.dc-permisos-texto { margin: 0 0 12px; color: var(--text2); font-size: 14px; line-height: 1.55; }
.dc-permisos-subtitulo { margin: 8px 0 6px; font-size: 13px; font-weight: 600; }
.dc-permisos-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; margin-bottom: 4px; }
.dc-permisos-fila.is-final { grid-template-columns: minmax(0, 1fr); margin-top: 12px; }
.dc-permisos-quitar { margin-top: 26px; }
.dc-permisos-recibo h3 { margin: 0 0 8px; }
@media (max-width: 640px) {
  .dc-permisos-fila { grid-template-columns: minmax(0, 1fr); }
  .dc-permisos-quitar { margin-top: 0; justify-self: end; }
}
.dc-portal-form + .dc-portal-grid { margin-top: 16px; }   /* tarjeta de permisos tras el formulario (Solicitudes de IA) */

/* Acceso a un formulario de solicitud sin sesión (shared/js/core/formulario-sesion.js). */
.dc-formulario-acceso { max-width: 520px; margin: 48px auto; text-align: center; }
.dc-formulario-acceso .card-body { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 28px; }
.dc-formulario-acceso-icono { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.dc-formulario-acceso-icono svg { width: 26px; height: 26px; }
.dc-formulario-acceso-titulo { margin: 4px 0 0; font-family: var(--font-display, inherit); font-size: 22px; }
.dc-formulario-acceso-texto { margin: 0; color: var(--text2); line-height: 1.5; }
.dc-formulario-acceso-btn { margin-top: 8px; }