/*
 * Portal de informes: lo que no es de la hoja común (todo con sus tokens).
 * Diseño: design/portal/Portal de informes (Laika).dc.html y su hoja de notas.
 * Lo reutilizado de Cuentas (tabla, panel, diálogos, contraseña una vez, avisos, botones,
 * campos, pestañas) viene de /comun/laika.css; aquí sólo los ajustes que pide el export
 * del portal y las piezas nuevas de las notas (§3).
 */

/* ── Huecos de cliente (notas §1) ─────────────────────────────────────────── */
:root {
  --client-accent: var(--laika-yellow);   /* lo pone portal.js con el acento del cliente */
}

body { background: var(--surface); }
.p-app { min-height: 100vh; display: flex; flex-direction: column; background: var(--surface); }
.p-franja { height: 4px; flex: 0 0 auto; background: var(--client-accent); }
.p-franja--fina { height: 3px; }

/* Marca Laika: la órbita del diseño (no el logo de imagen). */
.p-orbita { position: relative; flex: 0 0 auto; width: 26px; height: 26px; }
.p-orbita::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--laika-blue-light); border-radius: 50%; }
.p-orbita__centro { position: absolute; left: 8px; top: 8px; width: 10px; height: 10px; background: var(--laika-blue); border-radius: 50%; }
.p-orbita__sat { position: absolute; right: 0; top: 4px; width: 5px; height: 5px; background: var(--laika-yellow); border-radius: 50%; }
.p-orbita--22 { width: 22px; height: 22px; }
.p-orbita--22 .p-orbita__centro { left: 7px; top: 7px; width: 8px; height: 8px; }
.p-orbita--22 .p-orbita__sat { top: 3px; width: 4px; height: 4px; }
.p-orbita--20 { width: 20px; height: 20px; }
.p-orbita--20 .p-orbita__centro { left: 6px; top: 6px; width: 8px; height: 8px; }
.p-orbita--20 .p-orbita__sat { top: 3px; width: 4px; height: 4px; }

/* Logo del cliente: caja de alto fijo y ancho máximo, contain, a la izquierda (notas §2). */
.p-logo { width: auto; object-fit: contain; object-position: left center; display: block; flex: 0 0 auto; }
.p-logo--login { height: 56px; max-width: 240px; }
.p-logo--cabecera { height: 32px; max-width: 180px; }
.p-logo--movil { height: 26px; max-width: 110px; }
.p-logo--visor { height: 24px; max-width: 120px; }

/* Anillo de carga con satélite (tokens) */
@keyframes p-gira { to { transform: rotate(360deg); } }
.p-cargador { position: relative; flex: 0 0 auto; width: 18px; height: 18px; animation: p-gira 2.4s linear infinite; }
.p-cargador::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--laika-blue); }
.p-cargador::after { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--laika-yellow); top: 0; right: 0; }
.p-cargador--16 { width: 16px; height: 16px; }
.p-cargador--36 { width: 36px; height: 36px; }
.p-cargador--36::after { width: 9px; height: 9px; top: 1px; right: 1px; }
.p-cargando { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 14px; color: var(--text-secondary); }

/* ── Login ────────────────────────────────────────────────────────────────── */
.p-login { flex: 1; display: flex; flex-direction: column; background: var(--surface); overflow-y: auto; min-height: 100vh; }
.p-login__marco { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 56px 24px; }
.p-login__tarjeta {
  width: 100%; max-width: 420px; background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius-large);
  box-shadow: var(--shadow-small); display: flex; flex-direction: column; gap: 20px; padding: 32px 28px;
}
.p-login__cabeza { display: flex; flex-direction: column; gap: 14px; }
.p-login__logo { height: 56px; display: flex; align-items: center; }
.p-login__titulo { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.p-login__sub { margin-top: 4px; font-size: 15px; color: var(--text-secondary); }
.p-login__campos { display: flex; flex-direction: column; gap: 16px; }
.p-login__nota { margin: -6px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary); text-wrap: pretty; }
.p-login__pie { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.p-login__pie strong { font-weight: 700; color: var(--laika-blue); }
.p-btn-entrar {
  min-height: 48px; width: 100%; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 10px;
}
.p-btn-entrar[aria-busy="true"] { opacity: .85; cursor: progress; }
.p-alerta {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius-medium);
  background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger); font-size: 14px; font-weight: 600; text-wrap: pretty;
}
.p-alerta .l-error__icono { margin-top: 1px; }

/* El portal pide campos de 16 px (export) en vez de los 15 de Cuentas. */
.p-app .l-input { font-size: 16px; }
.p-app .l-input--mono { font-size: 15px; }
.p-app textarea.l-input { min-height: 0; padding: 10px 12px; line-height: 1.5; resize: vertical; }

/* ── Cabecera de portal (notas §3) ────────────────────────────────────────── */
.p-cabecera { background: #FFFFFF; border-bottom: 1px solid var(--border); flex: 0 0 auto; position: relative; z-index: 15; }
.p-cabecera__dentro { display: flex; align-items: center; gap: 16px; height: 68px; padding: 0 40px; max-width: 1400px; margin: 0 auto; width: 100%; }
.p-marca { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.p-marca__nombre { font-size: 15px; font-weight: 700; color: var(--laika-blue); letter-spacing: -.01em; }
.p-separador { width: 1px; height: 28px; background: var(--border); flex: 0 0 auto; }
.p-cliente { flex: 0 1 auto; min-width: 110px; line-height: 1.25; }
.p-cliente__nombre { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-cliente__sub { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.p-nav__enlace {
  min-height: 40px; padding: 0 12px; border: none; border-radius: var(--radius-control); font-size: 14px; font-weight: 600;
  cursor: pointer; white-space: nowrap; background: transparent; color: var(--text-body);
}
.p-nav__enlace:hover { background: var(--surface-hover); }
.p-nav__enlace[aria-current="page"] { background: var(--surface-active); color: var(--laika-blue); }
.p-yo { text-align: right; line-height: 1.25; flex: 0 0 auto; }
.p-yo__nombre { font-size: 14px; font-weight: 600; }
.p-yo__rol { font-size: 12px; color: var(--text-secondary); }
.p-btn-salir { min-height: 40px; padding: 0 14px; font-size: 14px; flex: 0 0 auto; }

/* Móvil (y la administración por debajo de 1100 px): botón «Menú» con panel. */
.p-cabecera__movil { display: none; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; min-height: 60px; }
.p-cabecera__movil .p-separador { height: 24px; }
.p-cabecera__movil .p-cliente__nombre { flex: 1; min-width: 0; font-size: 14px; }
.p-btn-menu {
  min-height: 44px; padding: 0 14px; border-radius: var(--radius-control); border: 1.5px solid var(--border); background: #FFFFFF;
  color: var(--laika-blue); font-size: 14px; font-weight: 600; cursor: pointer; flex: 0 0 auto;
}
.p-menu {
  position: absolute; left: 0; right: 0; top: 100%; background: #FFFFFF; border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-medium); padding: 8px 8px 12px; display: flex; flex-direction: column; gap: 2px;
}
.p-menu__yo { padding: 10px 12px 12px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 4px; }
.p-menu__nombre { font-size: 15px; font-weight: 700; }
.p-menu__rol { font-size: 13px; color: var(--text-secondary); }
.p-menu .p-nav__enlace { min-height: 48px; font-size: 15px; text-align: left; color: var(--text-primary); }
.p-menu .p-nav__enlace[aria-current="page"] { color: var(--laika-blue); }
.p-menu__salir {
  min-height: 48px; padding: 0 12px; border: none; border-radius: var(--radius-control); background: transparent;
  color: var(--danger); font-size: 15px; font-weight: 600; cursor: pointer; text-align: left;
}
.p-compacto .p-cabecera__dentro { display: none; }
.p-compacto .p-cabecera__movil { display: flex; }

/* ── Pestañas de administración ───────────────────────────────────────────── */
.p-pestanas .l-pestanas__dentro { max-width: 1400px; align-items: center; }
.p-pestanas__titulo { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); padding: 0 12px; }

/* ── Contenido ────────────────────────────────────────────────────────────── */
.p-principal { flex: 1; padding: 36px 40px 56px; overflow-y: auto; position: relative; }
.p-contenido { margin: 0 auto; width: 100%; max-width: 1180px; }
.p-contenido--ancho { max-width: 1400px; }
.p-h1 { margin: 0; font-size: 32px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--text-primary); }
.p-entradilla { margin-top: 6px; font-size: 15px; color: var(--text-secondary); text-wrap: pretty; max-width: 74ch; }
.p-titular { margin-bottom: 24px; }
.p-titular-admin { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 20px; }
.p-titular-admin > div:first-child { flex: 1 1 360px; }
.p-titular-admin .p-entradilla { font-size: 14px; }

/* Tarjetas de informe (notas §3) */
.p-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.p-informe {
  border-radius: var(--radius-large); display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; min-height: 176px;
  background: #FFFFFF; border: 1px solid var(--border); box-shadow: var(--shadow-small); cursor: pointer; text-align: left;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-fast);
}
.p-informe:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); border-color: var(--laika-blue-light); }
.p-informe__titulo { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; color: var(--laika-blue); text-wrap: pretty; }
.p-informe__desc { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-secondary); text-wrap: pretty; }
.p-informe__pie { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.p-informe__fecha { font-size: 13px; font-weight: 600; color: var(--text-body); }
.p-informe__abrir { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--laika-teal-dark); }
.p-informe--preparacion { background: var(--surface); border: 1.5px dashed var(--border); box-shadow: none; cursor: default; }
.p-informe--preparacion:hover { transform: none; box-shadow: none; border-color: var(--border); }
.p-informe--preparacion .p-informe__titulo { color: var(--text-secondary); }
.p-informe--preparacion .p-informe__pie { border-top-color: var(--border); }
.p-informe__espera { font-size: 13px; color: var(--text-secondary); text-wrap: pretty; }
.p-esqueleto { background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius-large); padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; min-height: 168px; }
.p-hueso { height: 12px; border-radius: 6px; background: var(--surface-hover); }
.p-hueso--fuerte { background: var(--surface-muted); }

/* Estado vacío orbital (tokens) */
.p-vacio { background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius-large); padding: 48px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.p-vacio__orbita { width: 96px; height: 96px; position: relative; margin-bottom: 10px; }
.p-vacio__orbita span { position: absolute; border-radius: 50%; }
.p-vacio__orbita .a { inset: 0; border: 1px solid var(--laika-blue-light); }
.p-vacio__orbita .b { inset: 20px; border: 1px solid var(--laika-teal-light); }
.p-vacio__orbita .c { left: 40px; top: 40px; width: 16px; height: 16px; background: var(--laika-blue); }
.p-vacio__orbita .d { right: 10px; top: 8px; width: 11px; height: 11px; background: var(--laika-yellow); }
.p-vacio__orbita .e { left: 14px; bottom: 18px; width: 8px; height: 8px; background: var(--laika-teal); }
.p-vacio--admin { padding: 40px 24px; margin-bottom: 20px; }
.p-vacio--admin .p-vacio__orbita { width: 80px; height: 80px; margin-bottom: 8px; }
.p-vacio--admin .p-vacio__orbita .b { inset: 16px; }
.p-vacio--admin .p-vacio__orbita .c { left: 33px; top: 33px; width: 14px; height: 14px; }
.p-vacio--admin .p-vacio__orbita .d { right: 8px; top: 6px; width: 10px; height: 10px; }
.p-vacio--admin .p-vacio__orbita .e { left: 12px; bottom: 14px; width: 7px; height: 7px; }
.p-vacio__titulo { font-size: 17px; font-weight: 600; }
.p-vacio--admin .p-vacio__titulo { font-size: 16px; }
.p-vacio__texto { font-size: 14px; color: var(--text-secondary); max-width: 46ch; text-wrap: pretty; }
.p-vacio--admin .p-vacio__texto { max-width: 52ch; }
.p-vacio .l-btn { margin-top: 8px; }

/* Errores con «Reintentar» del export (44 px en la home). */
.p-error-casa .l-btn { min-height: 44px; }

/* ── Visor (notas §3) ─────────────────────────────────────────────────────── */
.p-visor { flex: 1; display: flex; flex-direction: column; min-height: 0; height: 100vh; background: #FFFFFF; }
.p-visor__cabeza { flex: 0 0 auto; background: #FFFFFF; border-bottom: 1px solid var(--border); }
.p-visor__barra { display: flex; align-items: center; gap: 14px; padding: 0 20px; height: 52px; }
.p-btn-volver {
  min-height: 40px; padding: 0 12px 0 10px; border-radius: var(--radius-control); border: 1.5px solid var(--border); background: #FFFFFF;
  color: var(--laika-blue); font-size: 14px; font-weight: 600; cursor: pointer; flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
}
.p-btn-volver:hover { background: var(--surface-active); border-color: var(--laika-blue-light); }
.p-visor__titulos { min-width: 0; flex: 1; display: flex; align-items: baseline; gap: 12px; }
.p-visor__nombre { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.p-visor__fecha { font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.p-visor__logo { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.p-visor__cuerpo { flex: 1; position: relative; min-height: 0; }
.p-visor__marco { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #FFFFFF; }
.p-visor__capa { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #FFFFFF; }
.p-visor__capa span { font-size: 15px; color: var(--text-secondary); }
.p-visor__error { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--surface); }
.p-visor__aviso { max-width: 440px; background: #FFFFFF; border: 1px solid var(--danger-border); border-radius: var(--radius-large); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.p-visor__aviso-cabeza { display: flex; align-items: center; gap: 10px; }
.p-visor__aviso-cabeza .l-error__icono { width: 20px; height: 20px; }
.p-visor__aviso h2 { margin: 0; font-size: 18px; font-weight: 700; }
.p-visor__aviso p { margin: 0; font-size: 15px; color: var(--text-body); text-wrap: pretty; }
.p-visor__botones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

/* ── Mi cuenta ────────────────────────────────────────────────────────────── */
.p-cuenta { max-width: 480px; }
.p-cuenta__datos { margin: 18px 0 22px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.p-gris { color: var(--text-secondary); }
.p-mono-azul { font-family: var(--font-mono); font-size: 14px; color: var(--laika-blue); }
.p-cuenta .l-aviso-ok { margin-bottom: 18px; padding: 12px 16px; }
.p-cuenta .l-btn--primario { padding: 0 22px; }
.p-cuenta__nota { margin: 16px 0 0; font-size: 13px; color: var(--text-secondary); text-wrap: pretty; }

/* ── Administración ───────────────────────────────────────────────────────── */
.p-aviso-movil { display: none; background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius-large); padding: 24px; flex-direction: column; gap: 8px; }
.p-aviso-movil h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.p-aviso-movil p { margin: 0; font-size: 15px; color: var(--text-body); text-wrap: pretty; }
.p-estrecho .p-aviso-movil { display: flex; }
.p-estrecho .p-solo-escritorio { display: none !important; }

.p-esqueleto-tabla { background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius-large); overflow: hidden; }
.p-esqueleto-tabla__cabeza { height: 44px; background: var(--laika-blue-light); }
.p-esqueleto-tabla__fila { display: flex; gap: 24px; align-items: center; padding: 0 18px; height: 52px; border-top: 1px solid var(--border-subtle); }
.p-chip--teal { background: var(--laika-teal-light); color: var(--laika-teal-dark); }
.p-tu { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--laika-yellow-light); color: var(--text-primary); }
.p-celda-nombre { display: flex; align-items: center; gap: 8px; }
.p-celda-nombre span:first-child { font-weight: 600; white-space: nowrap; }
.p-login-mono { font-family: var(--font-mono); font-size: 13px; color: var(--laika-blue); white-space: nowrap; }
.p-nunca { color: var(--text-secondary); font-style: italic; }
.p-fecha-tabla { white-space: nowrap; color: var(--text-body); }
.p-desc-tabla { font-size: 13px; color: var(--text-secondary); margin-top: 2px; text-wrap: pretty; }
.p-lo-ven { color: var(--laika-teal-dark); font-weight: 600; cursor: pointer; background: none; border: none; padding: 0; font-size: 14px; }
.p-lo-ven:hover { text-decoration: underline; }
.p-nota-tabla { margin: 12px 0 0; font-size: 13px; color: var(--text-secondary); text-wrap: pretty; }
.p-app .l-tabla-marco { display: block; }   /* administración sólo en escritorio: sin fichas */

/* Cuadrícula de permisos (notas §3) */
.p-cuadricula { background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius-large); box-shadow: var(--shadow-small); overflow: auto; max-height: calc(100vh - 300px); min-height: 240px; }
.p-cuadricula table { border-collapse: separate; border-spacing: 0; font-size: 14px; width: max-content; min-width: 100%; }
.p-cuadricula thead th { position: sticky; top: 0; z-index: 2; padding: 12px 8px 6px; width: 112px; min-width: 112px; max-width: 112px; vertical-align: bottom; text-align: center; border-left: 1px solid #B5C3DB; background: var(--laika-blue-light); }
.p-cuadricula thead th.p-esquina { left: 0; z-index: 3; color: var(--laika-blue); text-align: left; padding: 12px 18px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; min-width: 230px; width: auto; max-width: none; border-left: 0; border-right: 1px solid #B5C3DB; }
.p-cuadricula thead th.p-resaltada { background: #B5C3DB; }
.p-col { display: flex; flex-direction: column; gap: 6px; align-items: center; height: 100%; }
.p-col__nombre { font-size: 12.5px; font-weight: 700; line-height: 1.3; color: var(--laika-blue); text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.p-col__sin { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--surface-muted); color: var(--text-secondary); white-space: nowrap; }
.p-col__cuenta { margin-top: auto; font-size: 12px; font-weight: 500; color: var(--text-body); white-space: nowrap; }
.p-todos { min-height: 32px; padding: 0 8px; border: none; border-radius: var(--radius-small); background: transparent; color: var(--laika-teal-dark); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.p-todos:hover { background: var(--surface-hover); }
.p-cuadricula tbody th { position: sticky; left: 0; z-index: 1; text-align: left; font-weight: 400; padding: 8px 10px 8px 18px; border-top: 1px solid var(--border-subtle); border-right: 1px solid var(--border); background: #FFFFFF; }
.p-cuadricula tbody th.p-resaltada { background: var(--surface-active); }
.p-cuadricula tbody th.p-resaltada .p-todos:hover { background: var(--surface-active); }
.p-fila { display: flex; align-items: center; gap: 10px; }
.p-fila__nombre { font-size: 14px; font-weight: 600; white-space: nowrap; }
.p-fila__cuenta { font-size: 12px; color: var(--text-secondary); margin-top: 2px; white-space: nowrap; }
.p-cuadricula td { padding: 0; border-top: 1px solid var(--border-subtle); border-left: 1px solid var(--border-subtle); background: #FFFFFF; }
.p-cuadricula td.p-resaltada { background: var(--surface-hover); }
.p-cuadricula td.p-cambiada { background: var(--laika-yellow-light); }
.p-celda { height: 52px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.p-casilla { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #FFFFFF; line-height: 1; background: #FFFFFF; border: 1.5px solid var(--text-tertiary); }
[aria-checked="true"] > .p-casilla { background: var(--laika-blue); border-color: var(--laika-blue); }
.p-leyenda { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-size: 13px; color: var(--text-secondary); }
.p-leyenda__muestra { display: flex; align-items: center; gap: 6px; }
.p-leyenda__muestra::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--laika-yellow-light); border: 1px solid var(--laika-yellow-line); }

/* Barra de cambios sin guardar, versión oscura (notas §3) */
.p-barra-cambios {
  position: sticky; bottom: 0; margin-top: 16px; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 20px;
  border-radius: var(--radius-large); background: var(--text-primary); color: #FFFFFF; box-shadow: var(--shadow-medium); z-index: 4;
}
.p-barra-cambios::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--laika-yellow); flex: 0 0 auto; }
.p-barra-cambios__texto { flex: 1; font-size: 14px; font-weight: 600; }
.p-barra-cambios .l-btn { min-height: 40px; font-size: 14px; }
.p-btn-descartar { padding: 0 16px; border: 1.5px solid rgba(255, 255, 255, .55); background: transparent; color: #FFFFFF; }
.p-btn-descartar:hover { background: rgba(255, 255, 255, .10); }
.p-btn-guardar { padding: 0 18px; background: var(--laika-yellow); color: var(--text-primary); font-weight: 700; }
.p-btn-guardar:hover { background: var(--laika-yellow-dark); }

/* Panel lateral: 480 px en el export del portal. */
#capas .l-panel { width: 480px; }

/* Rol: opciones en columna con punto de radio; «Próximamente» desactivada (notas §3). */
.p-roles { display: flex; flex-direction: column; gap: 8px; }
.p-rol {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: var(--radius-control); min-height: 44px;
  border: 1.5px solid var(--border); background: #FFFFFF; color: var(--text-primary); cursor: pointer; text-align: left; width: 100%;
}
.p-rol[aria-checked="true"] { border-color: var(--laika-blue); background: var(--surface-active); color: var(--laika-blue); }
.p-rol[aria-disabled="true"] { border-color: var(--surface-muted); background: var(--surface); color: var(--text-tertiary); cursor: not-allowed; }
.p-rol__punto { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto; border: 1.5px solid var(--text-tertiary); background: #FFFFFF; }
.p-rol[aria-checked="true"] .p-rol__punto { border: 5px solid var(--laika-blue); }
.p-rol[aria-disabled="true"] .p-rol__punto { border-color: var(--laika-blue-light); }
.p-rol__texto { flex: 1; }
.p-rol__titulo { font-size: 14px; font-weight: 700; }
.p-rol__desc { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }
.p-rol__pronto { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--surface-muted); color: var(--text-secondary); white-space: nowrap; }
.p-lista-informes { border: 1px solid var(--border); border-radius: var(--radius-medium); overflow: hidden; }
.p-elige { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 14px; border: none; border-top: 1px solid var(--border-subtle); cursor: pointer; background: #FFFFFF; width: 100%; text-align: left; font-size: 14px; color: var(--text-primary); }
.p-elige:first-child { border-top: none; }
.p-elige:hover { background: var(--surface); }
.p-elige .p-casilla { width: 22px; height: 22px; font-size: 14px; }
.p-nota-gris { padding: 11px 14px; border-radius: var(--radius-medium); background: var(--surface); font-size: 14px; color: var(--text-body); }
.p-opcional { font-weight: 500; color: var(--text-secondary); }
.p-bloque-contenido { margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.p-eyebrow-gris { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); }
.p-linea-contenido { font-size: 14px; color: var(--text-body); text-wrap: pretty; }
.p-enlace-gris {
  min-height: 36px; padding: 0 8px; margin-left: -8px; border: none; border-radius: var(--radius-control); background: transparent;
  color: var(--text-secondary); font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.p-enlace-gris:hover { background: var(--surface-hover); color: var(--laika-teal-dark); }
.p-subida { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-medium); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.p-subida__titulo { font-size: 14px; font-weight: 600; }
.p-subida__texto { font-size: 13px; color: var(--text-body); text-wrap: pretty; }
.p-archivo {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 1.5px dashed var(--text-tertiary);
  border-radius: var(--radius-control); background: #FFFFFF; cursor: pointer; font-size: 14px;
}
.p-archivo__elegir { color: var(--laika-blue); font-weight: 600; white-space: nowrap; }
.p-archivo__nombre { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-archivo input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.p-archivo:focus-within { outline: 3px solid var(--laika-yellow); outline-offset: 2px; }
.p-subida__botones { display: flex; gap: 8px; justify-content: flex-end; }
.p-subida__botones .l-btn { min-height: 40px; font-size: 14px; }
.p-btn-subir { padding: 0 16px; }
.p-btn-subir[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* ── Estrecho (< 760 px, el corte del export) ─────────────────────────────── */
.p-estrecho .p-principal { padding: 20px 16px 32px; }
.p-estrecho .p-h1 { font-size: 26px; }
.p-estrecho .p-informe { padding: 18px; min-height: 0; }
.p-estrecho .p-login__marco { padding: 32px 16px; }
.p-estrecho .p-visor__barra { padding: 8px 12px; min-height: 56px; height: auto; }
.p-estrecho .p-visor__titulos { flex-direction: column; gap: 1px; line-height: 1.3; align-items: flex-start; }
.p-estrecho .p-visor__logo { display: none; }
@media (max-width: 999px) {
  /* laika.css convierte la tabla en fichas por debajo de 1000 px; aquí no hace falta. */
  .p-app .l-tabla-marco { display: block; }
  #capas .l-panel { margin-left: auto; margin-top: 0; height: 100%; max-height: none; border-radius: 0; }
}