/*
  Mito Helpdesk — Zendesk Garden 9.16.1 + toque Mito (02.1-UI-SPEC.md).
  Un único archivo escrito a mano. Sin preprocesador, sin JS, sin fuentes alojadas (pila del sistema).
  Bloques: Tokens · Base · Tipografía · Componentes · (plantillas y pantallas).
  Solo los tokens llevan hex; los componentes usan tokens semánticos --color-*.
  Punto de ruptura de los componentes: 720px.
*/

/* =====================================================================
   Tokens
   ===================================================================== */

/*
 * Mito Helpdesk — tokens Zendesk Garden (light + dark)
 *
 * Valores copiados de @zendeskgarden/react-theming@9.16.1
 *   dist/esm/elements/palette/index.js  (paleta)
 *   dist/esm/elements/theme/index.js    (tipografía, espacio, radios, bordes, sombras, variables semánticas light/dark)
 *   dist/esm/utils/getFocusBoxShadow.js (anillo de foco)
 * Copyright Zendesk, Inc. — Apache License 2.0 (http://www.apache.org/licenses/LICENSE-2.0)
 *
 * Toque Mito (únicas adaptaciones de marca):
 *  - primaryHue (blue) → azul Mito (#006CB8 en claro, rol de blue.700; #57BAFF en oscuro, rol de blue.600)
 *  - chromeHue (kale) → negro Mito #1D1D1B, con el ítem actual en azul Mito
 *  - texto principal en claro → negro Mito (Garden: grey.900)
 * Ver README.md para el origen de cada token.
 */

:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* ---------- Paleta (primitivas, no usar en componentes) ---------- */
  --grey-100: #f8f9f9;  --grey-200: #e8eaec;  --grey-300: #d8dcde;  --grey-400: #b0b8be;
  --grey-500: #919ca5;  --grey-600: #848f99;  --grey-700: #5c6970;  --grey-800: #39434b;
  --grey-900: #293239;  --grey-1000: #1c2227; --grey-1100: #151a1e; --grey-1200: #0a0d0e;

  --blue-100: #edf7ff;  --blue-200: #ddecf8;  --blue-300: #cce0f1;  --blue-600: #2694d6;  --blue-700: #1f73b7;

  --red-100: #fff2f3;   --red-300: #f5d5d8;   --red-400: #f2a1a8;   --red-600: #eb5c69;
  --red-700: #cd3642;   --red-900: #671219;   --red-1000: #3d1418;

  --yellow-100: #fff3e4; --yellow-200: #ffe6cb; --yellow-300: #fed6a9; --yellow-400: #fca347;
  --yellow-600: #d67305; --yellow-700: #ac5918; --yellow-800: #673515; --yellow-900: #4c2c17; --yellow-1000: #2d1e15;

  --green-100: #eef8f4; --green-300: #cae3d9; --green-400: #94c1b0; --green-600: #26a178;
  --green-700: #037f52; --green-900: #0b3b29; --green-1000: #0c261c;

  --kale-700: #40787a;  --kale-900: #063940;  --kale-1000: #03252a;

  /* Marca Mito: sustituye a primaryHue */
  --mito-blue-700: #006cb8;   /* rol de blue.700 (light) */
  --mito-blue-600: #57baff;   /* rol de blue.600 (dark)  */
  --mito-black: #1d1d1b;      /* negro del logotipo: chrome, cabecera del portal, texto */

  /* ---------- Tipografía (theme.fonts / fontSizes / lineHeights / fontWeights) ---------- */
  --font-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  --font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
  --font-size-xs: 10px;  --font-size-sm: 12px;  --font-size-md: 14px;  --font-size-lg: 18px;
  --font-size-xl: 22px;  --font-size-xxl: 26px; --font-size-xxxl: 36px;
  --line-height-sm: 16px; --line-height-md: 20px; --line-height-lg: 24px;
  --line-height-xl: 28px; --line-height-xxl: 32px; --line-height-xxxl: 44px;
  --font-weight-regular: 400; --font-weight-semibold: 600; --font-weight-bold: 700;

  /* ---------- Espacio (theme.space, base 4px) ---------- */
  --space-base: 4px;
  --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 20px;
  --space-lg: 32px; --space-xl: 40px; --space-xxl: 48px;

  /* ---------- Bordes y radios ---------- */
  --border-width-sm: 1px; --border-width-md: 3px;
  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px;

  /* ---------- Tamaños de iconos y componentes ---------- */
  --icon-sm: 12px; --icon-md: 16px; --icon-lg: 26px;
  --control-height-sm: 32px;    /* Button/Input compactos (space.base*8) */
  --control-height-md: 40px;    /* Button/Input por defecto (space.base*10) */
  --table-row-md: 40px;         /* Table size md (space.base*10) */
  --table-row-sm: 32px;
  --chrome-header-height: 52px; /* Chrome Header (space.base*13) */
  --chrome-nav-width: 60px;     /* Chrome Nav (space.base*15) */
  --chrome-footer-height: 80px; /* Chrome Footer (space.base*20) */

  /* ---------- Opacidades (theme.opacity) ---------- */
  --opacity-100: .08; --opacity-200: .16; --opacity-500: .4; --opacity-700: .56;

  /* ---------- Semánticos LIGHT (colors.variables.light) ---------- */
  --color-bg-default: #fff;
  --color-bg-raised: #fff;
  --color-bg-recessed: var(--grey-100);
  --color-bg-subtle: var(--grey-100);
  --color-bg-emphasis: var(--grey-700);
  --color-bg-success: var(--green-100);
  --color-bg-warning: var(--yellow-100);
  --color-bg-danger: var(--red-100);
  --color-bg-primary-emphasis: var(--mito-blue-700);
  --color-bg-success-emphasis: var(--green-700);
  --color-bg-warning-emphasis: var(--yellow-700);
  --color-bg-danger-emphasis: var(--red-700);

  --color-border-default: var(--grey-300);
  --color-border-emphasis: var(--grey-600);
  --color-border-subtle: var(--grey-200);
  --color-border-success: var(--green-300);
  --color-border-warning: var(--yellow-300);
  --color-border-danger: var(--red-300);
  --color-border-primary-emphasis: var(--mito-blue-700);

  --color-fg-default: var(--mito-black); /* toque Mito: Garden usa grey.900 */
  --color-fg-subtle: var(--grey-700);
  --color-fg-on-emphasis: #fff;
  --color-fg-primary: var(--mito-blue-700);
  --color-fg-success: var(--green-700);
  --color-fg-warning: var(--yellow-700);
  --color-fg-danger: var(--red-700);
  --color-fg-disabled: var(--grey-600);

  /* Estados de interacción derivados como hace Garden (primaryHue con theme.opacity) */
  --color-bg-primary-hover: rgb(0 108 184 / .08);    /* opacity.100 */
  --color-bg-primary-selected: rgb(0 108 184 / .16); /* opacity.200 */
  --color-bg-neutral-hover: rgb(92 105 112 / .08);   /* grey.700 @ opacity.100 */
  --color-bg-neutral-active: rgb(92 105 112 / .16);

  /* Hover/active del botón primario: Garden usa primaryHue +100/+200 (light) y -100/-200 (dark).
     Garden no tiene rampa para el azul Mito: mismo tono, luminosidad bajada (light) o subida (dark) a mano. */
  --color-bg-primary-emphasis-hover: #005a9b;
  --color-bg-primary-emphasis-active: #004a80;
  /* Acción principal en blanco y negro (2026-10-26, como el logo): negro en claro, blanco en oscuro. Enlaces, foco y
     selección siguen en azul Mito. */
  --color-bg-action: var(--mito-black);
  --color-bg-action-hover: #3d3d3a;
  --color-bg-action-active: #5a5a56;
  --color-fg-on-action: #fff;
  /* Acceso: fondo del formulario y color al que se funde la foto (en claro no se funde: corte limpio) */
  --color-auth-bg: var(--color-bg-default);
  --color-auth-fade: transparent;
  /* Etiqueta "Nota interna" (convención Zendesk: amarillo = solo agentes) */
  --color-bg-note-label: var(--yellow-400);
  --color-fg-note-label: var(--grey-900);
  /* Chevron de <select> (icono Garden chevron-down-stroke, color fg.subtle) */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%235c6970' stroke-linecap='round' stroke-linejoin='round' d='M12 6l-4 4-4-4'/%3E%3C/svg%3E");

  /* Chrome — toque Mito: Garden usa chromeHue kale (900 fondo, 700 ítem actual).
     Aquí fondo negro Mito e ítem actual en blanco con el icono negro (2026-10-26). */
  --color-chrome-bg: var(--mito-black);
  --color-chrome-current: #fff; /* ítem actual en blanco con el icono en negro (2026-10-26) */
  --color-chrome-fg-muted: rgb(255 255 255 / .72);
  --color-chrome-divider: rgb(255 255 255 / .24);
  --color-avatar-agent-bg: var(--mito-black);
  --color-chrome-fg: #fff;
  --color-chrome-hover: rgb(255 255 255 / .08);

  /* Sombras: rgba(grey.1200, opacity.200) en light */
  --shadow-color: rgb(10 13 14 / .16);
  --shadow-menu: 0 20px 28px 0 var(--shadow-color);   /* shadows.lg(space.base*5, space.base*7) */
  --shadow-sm: 0 4px 8px 0 var(--shadow-color);

  /* Anillo de foco Garden: spacer 1px background.default + 3px border.primaryEmphasis */
  --focus-ring: 0 0 0 1px var(--color-bg-default), 0 0 0 3px var(--color-border-primary-emphasis);
  --color-chrome-edge: transparent;
  --focus-ring-inset: inset 0 0 0 3px var(--color-border-primary-emphasis);
}

/* ---------- Semánticos DARK (colors.variables.dark) ----------
   El bloque se escribe una vez para data-theme="dark" y se repite, copiado,
   dentro del @media para data-theme="system". Mantener los dos bloques iguales. */

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg-default: var(--grey-1100);
  --color-bg-raised: var(--grey-1000);
  --color-bg-recessed: var(--grey-1200);
  --color-bg-subtle: var(--grey-1000);
  --color-bg-emphasis: var(--grey-600);
  --color-bg-success: var(--green-1000);
  --color-bg-warning: var(--yellow-1000);
  --color-bg-danger: var(--red-1000);
  --color-bg-primary-emphasis: var(--mito-blue-600);
  --color-bg-success-emphasis: var(--green-600);
  --color-bg-warning-emphasis: var(--yellow-600);
  --color-bg-danger-emphasis: var(--red-600);
  --color-border-default: var(--grey-800);
  --color-border-emphasis: var(--grey-600);
  --color-border-subtle: var(--grey-900);
  --color-border-success: var(--green-900);
  --color-border-warning: var(--yellow-900);
  --color-border-danger: var(--red-900);
  --color-border-primary-emphasis: var(--mito-blue-600);
  --color-fg-default: var(--grey-300);
  --color-fg-subtle: var(--grey-500);
  --color-fg-on-emphasis: var(--grey-1100);
  --color-fg-primary: var(--mito-blue-600);
  --color-fg-success: var(--green-400);
  --color-fg-warning: var(--yellow-400);
  --color-fg-danger: var(--red-400);
  --color-fg-disabled: var(--grey-700);
  --color-bg-primary-hover: rgb(87 186 255 / .08);
  --color-bg-primary-selected: rgb(87 186 255 / .16);
  --color-bg-neutral-hover: rgb(255 255 255 / .06);
  --color-bg-neutral-active: rgb(255 255 255 / .1);
  --color-bg-primary-emphasis-hover: #85ccff;
  --color-bg-primary-emphasis-active: #b0ddff;
  --color-bg-action: #fff;
  --color-bg-action-hover: var(--grey-300);
  --color-bg-action-active: var(--grey-400);
  --color-fg-on-action: var(--mito-black);
  --color-auth-bg: var(--color-chrome-bg);
  --color-auth-fade: var(--color-chrome-bg);
  --color-bg-note-label: var(--yellow-600);
  --color-fg-note-label: var(--grey-1100);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23919ca5' stroke-linecap='round' stroke-linejoin='round' d='M12 6l-4 4-4-4'/%3E%3C/svg%3E");
  --shadow-color: rgb(10 13 14 / .64);
  --color-avatar-agent-bg: var(--grey-800);
  --color-chrome-edge: var(--grey-900);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --color-bg-default: var(--grey-1100);
    --color-bg-raised: var(--grey-1000);
    --color-bg-recessed: var(--grey-1200);
    --color-bg-subtle: var(--grey-1000);
    --color-bg-emphasis: var(--grey-600);
    --color-bg-success: var(--green-1000);
    --color-bg-warning: var(--yellow-1000);
    --color-bg-danger: var(--red-1000);
    --color-bg-primary-emphasis: var(--mito-blue-600);
    --color-bg-success-emphasis: var(--green-600);
    --color-bg-warning-emphasis: var(--yellow-600);
    --color-bg-danger-emphasis: var(--red-600);
    --color-border-default: var(--grey-800);
    --color-border-emphasis: var(--grey-600);
    --color-border-subtle: var(--grey-900);
    --color-border-success: var(--green-900);
    --color-border-warning: var(--yellow-900);
    --color-border-danger: var(--red-900);
    --color-border-primary-emphasis: var(--mito-blue-600);
    --color-fg-default: var(--grey-300);
    --color-fg-subtle: var(--grey-500);
    --color-fg-on-emphasis: var(--grey-1100);
    --color-fg-primary: var(--mito-blue-600);
    --color-fg-success: var(--green-400);
    --color-fg-warning: var(--yellow-400);
    --color-fg-danger: var(--red-400);
    --color-fg-disabled: var(--grey-700);
    --color-bg-primary-hover: rgb(87 186 255 / .08);
    --color-bg-primary-selected: rgb(87 186 255 / .16);
    --color-bg-neutral-hover: rgb(255 255 255 / .06);
    --color-bg-neutral-active: rgb(255 255 255 / .1);
    --color-bg-primary-emphasis-hover: #85ccff;
    --color-bg-primary-emphasis-active: #b0ddff;
    --color-bg-action: #fff;
    --color-bg-action-hover: var(--grey-300);
    --color-bg-action-active: var(--grey-400);
    --color-fg-on-action: var(--mito-black);
    --color-auth-bg: var(--color-chrome-bg);
    --color-auth-fade: var(--color-chrome-bg);
    --color-bg-note-label: var(--yellow-600);
    --color-fg-note-label: var(--grey-1100);
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23919ca5' stroke-linecap='round' stroke-linejoin='round' d='M12 6l-4 4-4-4'/%3E%3C/svg%3E");
    --shadow-color: rgb(10 13 14 / .64);
    --color-avatar-agent-bg: var(--grey-800);
    --color-chrome-edge: var(--grey-900);
  }
}

/* =====================================================================
   Base
   ===================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg-default);
  color: var(--color-fg-default);
  font-family: var(--font-system);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: 1.4286; /* 20/14 = lineHeights.md */
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--color-fg-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

img,
svg {
  vertical-align: middle;
}

.icon {
  flex: none;
  width: var(--icon-md);
  height: var(--icon-md);
}

.icon-sm {
  flex: none;
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.num,
.ticket-num {
  font-variant-numeric: tabular-nums;
}

.muted,
.subtle {
  color: var(--color-fg-subtle);
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Anillo de foco Garden (1px de fondo + 3px azul). Nunca outline: none sin sustituto. */

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  z-index: 10;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--color-bg-default);
  color: var(--color-fg-primary);
  font-weight: var(--font-weight-semibold);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* Movimiento: solo el fondo de los botones y el giro del chevron de <details>. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

/* =====================================================================
   Tipografía — escala Garden 12/14/18/22/26, pesos 400 y 600
   ===================================================================== */

h1,
h2,
h3 {
  margin: 0;
  font-weight: var(--font-weight-semibold);
}

/* Título de página (panel, cuenta): 22/28 */
h1 {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-xl);
}

/* Título de sección: 18/24 */
h2,
.heading {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
}

h3 {
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
}

/* Display (portal): 26/32 */
.display,
.portal-main h1 {
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xxl);
}

p {
  margin: 0 0 16px;
  max-width: 65ch;
}

/* Metadato: 12/16 */
small,
.text-sm {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

strong,
b {
  font-weight: var(--font-weight-semibold);
}

/* Monoespaciada solo en códigos de 2FA y la clave manual */
.mono {
  font-family: var(--font-mono);
  letter-spacing: .08em;
}

@media (max-width: 719.98px) {
  .display,
  .portal-main h1 {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-xl);
  }
}

/* =====================================================================
   Componentes compartidos (métricas Garden, mismos nombres de clase)
   ===================================================================== */

/* ---------- Botones ---------- */

/* Métricas comunes: .btn-primary, .btn-danger y compañía son botones completos por sí solos (sin .btn). */
.btn,
.btn-primary,
.btn-outline,
.btn-danger,
.btn-danger-outline,
.btn-basic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  height: var(--control-height-md);
  margin: 0;
  padding: 0 19px; /* 20px menos el borde */
  border: var(--border-width-sm) solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-fg-default);
  font-family: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-md);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .1s ease-out;
}

.btn:hover,
.btn-primary:hover,
.btn-outline:hover,
.btn-danger:hover,
.btn-danger-outline:hover,
.btn-basic:hover {
  text-decoration: none;
}

/* .btn: neutro */
.btn:hover {
  background: var(--color-bg-neutral-hover);
}

.btn:active {
  background: var(--color-bg-neutral-active);
}

/* Primario: en blanco y negro como el logo (2026-10-26) */
.btn-primary {
  border-color: var(--color-bg-action);
  background: var(--color-bg-action);
  color: var(--color-fg-on-action);
  font-weight: var(--font-weight-semibold);
}

.btn-primary:hover {
  border-color: var(--color-bg-action-hover);
  background: var(--color-bg-action-hover);
}

.btn-primary:active {
  border-color: var(--color-bg-action-active);
  background: var(--color-bg-action-active);
}

/* Contorno azul (Garden por defecto) */
.btn-outline {
  border-color: var(--color-fg-primary);
  color: var(--color-fg-primary);
}

.btn-outline:hover {
  background: var(--color-bg-primary-hover);
}

.btn-outline:active {
  background: var(--color-bg-primary-selected);
}

/* Peligro */
.btn-danger {
  border-color: var(--color-bg-danger-emphasis);
  background: var(--color-bg-danger-emphasis);
  color: var(--color-fg-on-emphasis);
}

.btn-danger:hover,
.btn-danger:active {
  background: var(--color-fg-danger);
  border-color: var(--color-fg-danger);
}

.btn-danger-outline {
  border-color: var(--color-fg-danger);
  color: var(--color-fg-danger);
}

.btn-danger-outline:hover,
.btn-danger-outline:active {
  background: var(--color-bg-danger);
}

/* Básico: sin borde */
.btn-basic {
  height: var(--control-height-sm);
  padding: 0 var(--space-sm);
  border-color: transparent;
  color: var(--color-fg-subtle);
}

.btn-basic:hover {
  background: var(--color-bg-neutral-hover);
  color: var(--color-fg-default);
}

/* Compacto */
.btn-sm {
  height: var(--control-height-sm);
  padding: 0 var(--space-sm);
}

/* Deshabilitado */
.btn:disabled,
.btn-primary:disabled,
.btn-outline:disabled,
.btn-danger:disabled,
.btn-danger-outline:disabled,
.btn-basic:disabled {
  border-color: transparent;
  background: var(--color-bg-neutral-hover);
  color: var(--color-fg-disabled);
  cursor: not-allowed;
}

/* Paginador: extremo sin destino */
.btn[aria-disabled="true"],
.btn[aria-disabled="true"]:hover {
  border-color: var(--color-border-subtle);
  background: transparent;
  color: var(--color-fg-disabled);
  cursor: not-allowed;
}

/* Anonimizar: el botón se ve deshabilitado mientras la casilla obligatoria no esté marcada (sin JS).
   El servidor valida la casilla igualmente. */
form:has(input[type="checkbox"]:not(:checked)) .btn-danger {
  border-color: transparent;
  background: var(--color-bg-neutral-hover);
  color: var(--color-fg-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* Botón «link»: sin borde ni fondo, subrayado solo en hover */
.btn-link {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-fg-primary);
  font-family: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-md);
  text-decoration: none;
  cursor: pointer;
}

.btn-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.chrome .btn-link,
.rail .btn-link,
.portal-header .btn-link {
  color: var(--color-chrome-fg);
}

/* Enlace a una acción destructiva secundaria (Anonimizar) */
.link-danger,
a.link-danger {
  color: var(--color-fg-danger);
}

.link-danger:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Botón solo icono: círculo de 40 (32 en -sm) */
.icon-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--control-height-md);
  height: var(--control-height-md);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-fg-subtle);
  cursor: pointer;
  transition: background-color .1s ease-out;
}

.icon-btn:hover {
  background: var(--color-bg-neutral-hover);
  color: var(--color-fg-default);
  text-decoration: none;
}

.icon-btn-sm {
  width: var(--control-height-sm);
  height: var(--control-height-sm);
}

/* Primario a todo el ancho de la columna (login y pasos de cuenta). */
.btn-block {
  width: 100%;
}

/* Fila de acciones: baja de línea con texto largo. */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* ---------- Formularios ---------- */

.form {
  max-width: 480px;
}

.form-wide {
  max-width: 640px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0 0 var(--space-md);
}

.field > label,
.field-label {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-md);
  color: var(--color-fg-default);
}

input:not([type]),
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="month"],
input[type="datetime-local"],
textarea,
select,
.select {
  display: block;
  width: 100%;
  height: var(--control-height-md);
  margin: 0;
  padding: 0 var(--space-sm);
  border: var(--border-width-sm) solid var(--color-border-default);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-default);
  color: var(--color-fg-default);
  font-family: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-md);
}

textarea {
  height: auto;
  min-height: 80px;
  padding: var(--space-xs) var(--space-sm);
  resize: vertical;
}

input:not([type]):hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="number"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="date"]:hover,
input[type="month"]:hover,
input[type="datetime-local"]:hover,
textarea:hover,
select:hover,
.select:hover {
  border-color: var(--color-border-emphasis);
}

input:not([type]):focus-visible,
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="password"]:focus-visible,
input[type="search"]:focus-visible,
input[type="number"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="url"]:focus-visible,
input[type="date"]:focus-visible,
input[type="month"]:focus-visible,
input[type="datetime-local"]:focus-visible,
textarea:focus-visible,
select:focus-visible,
.select:focus-visible {
  border-color: var(--color-border-primary-emphasis);
  box-shadow: var(--focus-ring);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-fg-disabled);
  opacity: 1;
}

input:disabled,
textarea:disabled,
select:disabled {
  background-color: var(--color-bg-subtle);
  color: var(--color-fg-disabled);
  cursor: not-allowed;
}

[aria-invalid="true"],
[aria-invalid="true"]:hover {
  border-color: var(--color-bg-danger-emphasis);
}

select,
.select {
  appearance: none;
  padding-right: 36px;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  cursor: pointer;
}

.field-help {
  margin: 0;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  color: var(--color-fg-subtle);
}

.field-error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  margin: 0;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  color: var(--color-fg-danger);
}

.field-error .icon {
  margin-top: 2px;
}

/* Enlace en la línea del label, alineado a la derecha («¿Has olvidado tu contraseña?»). */
.field-with-link {
  position: relative;
}

.field-with-link > .field-link,
.field-link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-sm);
}

.field-with-link > .field-link {
  position: absolute;
  top: 2px;
  right: 0;
}

/* Campo de código: monoespaciada 18/24, 12ch (TOTP) o 20ch (recuperación). */
input.code {
  width: calc(12ch + 1em + 2 * var(--space-sm) + 2px);
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
  letter-spacing: .08em;
}

input.code-recovery {
  width: calc(20ch + 2em + 2 * var(--space-sm) + 2px);
}

input[type="checkbox"],
input[type="radio"] {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--color-bg-primary-emphasis);
  cursor: pointer;
}

/* Casilla con su texto en línea */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  margin: 0 0 16px;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
}

.check input {
  margin-top: 2px;
}

.check label {
  font-weight: var(--font-weight-regular);
}

/* Grupo de radios */
.radio-group {
  min-width: 0;
  margin: 0 0 var(--space-md);
  padding: 0;
  border: 0;
}

.radio-group legend {
  margin: 0 0 var(--space-xs);
  padding: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-md);
}

.radio-option {
  display: grid;
  grid-template-columns: 16px 1fr;
  column-gap: var(--space-xs);
  align-items: start;
  margin: 0 0 var(--space-sm);
}

.radio-option input {
  margin-top: 2px;
}

.radio-option label {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-md);
}

.radio-desc {
  grid-column: 2;
  margin: 0;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  color: var(--color-fg-subtle);
}

/* Sección de un formulario largo (p. ej. «Bolsa de horas» en Editar empresa) */
.form-section {
  min-width: 0;
  margin: var(--space-md) 0 0;
  padding: var(--space-md) 0 0;
  border: 0;
  border-top: var(--border-width-sm) solid var(--color-border-subtle);
}

.form-section > legend {
  float: left;
  width: 100%;
  margin: 0 0 var(--space-sm);
  padding: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-lg);
}

.form-section > legend + * {
  clear: both;
}

/* Campo corto (horas, cantidades) */
.input-sm {
  max-width: 160px;
}

/* Resumen de errores: aviso de error con título */
.error-summary {
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) 16px;
  border: var(--border-width-sm) solid var(--color-border-danger);
  border-radius: var(--radius-md);
  background: var(--color-bg-danger);
  color: var(--color-fg-default);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
}

.error-summary-title {
  margin: 0 0 var(--space-xxs);
  font-weight: var(--font-weight-semibold);
}

.error-summary ul {
  margin: 0;
  padding-left: 16px;
}

/* ---------- Avisos (Garden Alert / Well) ---------- */

.flash,
.callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) 16px;
  border: var(--border-width-sm) solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  color: var(--color-fg-default);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
}

.flash .icon,
.callout .icon {
  margin-top: 2px;
}

.flash-ok {
  border-color: var(--color-border-success);
  background: var(--color-bg-success);
}

.flash-ok .icon {
  color: var(--color-fg-success);
}

.flash-error {
  border-color: var(--color-border-danger);
  background: var(--color-bg-danger);
}

.flash-error .icon {
  color: var(--color-fg-danger);
}

.callout p {
  max-width: none;
}

.callout-title {
  margin: 0 0 var(--space-xxs);
  font-weight: var(--font-weight-semibold);
}

.callout-text {
  margin: 0;
}

.callout-warn {
  border-color: var(--color-border-warning);
  background: var(--color-bg-warning);
}

.callout-warn .icon {
  color: var(--color-fg-warning);
}

.callout-off {
  color: var(--color-fg-subtle);
}

/* ---------- Etiquetas (Garden Tag): siempre con texto, nunca solo color ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  height: 20px;
  padding: 0 var(--space-xs);
  border-radius: var(--radius-sm);
  background: var(--color-bg-emphasis);
  color: var(--color-fg-on-emphasis);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-sm);
  white-space: nowrap;
}

.badge .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.badge-sm {
  height: 16px;
  padding: 0 var(--space-xxs);
  font-size: var(--font-size-xs);
}

/* Estados del ticket (02.2 D-12): Abierto relleno oscuro · En curso neutro · Esperando azul Mito.
   El rojo queda solo para Urgente, errores y SLA vencido; Resuelto y Cerrado reutilizan .badge-ok / .badge-off. */
.badge-open {
  background: var(--color-fg-default);
  color: var(--color-bg-default);
}

.badge-pending {
  background: var(--color-bg-primary-emphasis);
  color: var(--color-fg-on-emphasis);
}

/* Neutra con borde (En curso, Recibido, «Nuevo» y entorno) */
.badge-neutral {
  border: var(--border-width-sm) solid var(--color-border-emphasis);
  background: var(--color-bg-subtle);
  color: var(--color-fg-default);
}

.badge-env {
  margin-left: var(--space-xs);
}

.badge-internal {
  background: var(--color-bg-note-label);
  color: var(--color-fg-note-label);
}

/* Estados de cuentas: variante tenue */
.badge-ok {
  background: var(--color-bg-success);
  color: var(--color-fg-success);
}

.badge-warn {
  background: var(--color-bg-warning);
  color: var(--color-fg-warning);
}

/* SLA vencido (07 D-12) */
.badge-danger {
  background: var(--color-bg-danger);
  color: var(--color-fg-danger);
}

/* off (cuentas caducadas o inactivas) y chip, en neutro */
.badge-off,
.chip {
  border: var(--border-width-sm) solid var(--color-border-default);
  background: var(--color-bg-subtle);
  color: var(--color-fg-subtle);
}

.chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--space-xs);
  border-radius: 12px;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  white-space: nowrap;
}

/* Prioridad: texto, sin etiqueta. Urgente en 14/600 rojo. */
.prio {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-md);
  color: var(--color-fg-default);
}

.prio-urgent {
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg-danger);
}

/* Las filas urgentes ya no llevan barra: la clase queda como gancho, sin estilo. */

/* ---------- Avatar ---------- */

.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-bg-emphasis);
  color: var(--color-fg-on-emphasis);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

.avatar-lg {
  width: 40px;
  height: 40px;
  font-size: var(--font-size-md);
}

.avatar-sm {
  width: 24px;
  height: 24px;
}

.avatar-xs {
  width: 20px;
  height: 20px;
}

.avatar-agent {
  background: var(--color-avatar-agent-bg);
  color: var(--color-chrome-fg);
}

/* ---------- Menú / popover ---------- */

.menu {
  border: var(--border-width-sm) solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-raised);
  box-shadow: var(--shadow-menu);
}

/* ---------- Superficies ---------- */

.card {
  padding: var(--space-md);
  border: var(--border-width-sm) solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-default);
}

.section {
  margin-top: var(--space-lg);
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
  margin: 0 0 var(--space-md);
}

.page-head .actions {
  margin-top: 0;
}

.page-sub {
  margin: var(--space-xxs) 0 0;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  color: var(--color-fg-subtle);
}

/* ---------- Tabla (Garden Table) ---------- */

/* Siempre con scroll propio: la tabla no se encoge y la página no hace scroll horizontal. */
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.table-wrap > .table {
  min-width: 640px;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.table th {
  height: var(--table-row-md);
  padding: 0 var(--space-sm);
  border-bottom: var(--border-width-sm) solid var(--color-border-default);
  color: var(--color-fg-default);
  font-weight: var(--font-weight-semibold);
  text-align: start;
  white-space: nowrap;
  vertical-align: middle;
}

.table td {
  height: var(--table-row-md);
  padding: 0 var(--space-sm);
  border-bottom: var(--border-width-sm) solid var(--color-border-subtle);
  white-space: nowrap;
  vertical-align: middle;
}

.table td.col-subject,
.table td.col-wrap {
  padding-block: var(--space-xs);
  white-space: normal;
  overflow-wrap: anywhere;
}

.table tbody tr:hover {
  background: var(--color-bg-neutral-hover);
}

.table .num {
  text-align: right;
}

/* Bandeja: estado primero, asunto con todo el ancho libre y, debajo, nº · empresa · solicitante en gris.
   Las demás columnas tienen ancho fijo; toda la fila abre el ticket (el enlace del asunto se estira sobre ella). */
.table-dense {
  table-layout: fixed;
}

.table-wrap > .table-dense {
  min-width: 720px;
}

.table-dense th.col-status { width: 152px; }
.table-dense th.col-priority { width: 92px; }
.table-dense th.col-assignee { width: 140px; }
/* «Última actividad» / «Last activity» caben enteros en la cabecera */
.table-dense th.col-activity { width: 140px; }

.table-dense th,
.table-dense td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-dense td {
  height: 56px;
  padding-block: var(--space-xs);
}

.table-dense td.col-subject {
  white-space: nowrap;
}

.table-dense .subject-link,
.table-dense .row-meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-dense .subject-link {
  color: var(--color-fg-default);
  font-weight: var(--font-weight-semibold);
}

.table-dense .subject-link:hover {
  text-decoration: none;
}

.table-dense .row-meta {
  margin-top: 2px;
  color: var(--color-fg-subtle);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.table-dense .row-meta .ticket-num {
  font-variant-numeric: tabular-nums;
}

.table-dense tbody tr {
  position: relative;
}

.table-dense .subject-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.table-dense tbody tr:hover {
  background: var(--color-bg-primary-hover);
  cursor: pointer;
}

.table-dense tbody tr:hover .subject-link {
  color: var(--color-fg-primary);
}

/* El foco de teclado se ve en la fila entera */
.table-dense .subject-link:focus-visible {
  box-shadow: none;
}

.table-dense tbody tr:focus-within {
  box-shadow: var(--focus-ring-inset);
}

/* ---------- Pestañas (Garden Tabs) ---------- */

.tabs {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 var(--space-md);
  padding: 0;
  border-bottom: var(--border-width-sm) solid var(--color-border-default);
  list-style: none;
}

.tabs a {
  display: flex;
  align-items: center;
  height: 40px;
  margin-right: 24px;
  padding: 0 var(--space-xs);
  color: var(--color-fg-subtle);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-md);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.tabs a:hover {
  color: var(--color-fg-default);
  text-decoration: none;
}

.tabs a[aria-current="page"] {
  color: var(--color-fg-default);
  box-shadow: inset 0 -3px 0 var(--color-border-primary-emphasis);
}

.tabs a:focus-visible {
  box-shadow: var(--focus-ring-inset);
}

/* Filtro segmentado (Míos/Todos): dos botones de 32 pegados */
.segmented {
  display: inline-flex;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: var(--border-width-sm) solid var(--color-border-default);
  border-radius: var(--radius-md);
  list-style: none;
}

.segmented a {
  display: inline-flex;
  align-items: center;
  height: calc(var(--control-height-sm) - 2px);
  padding: 0 var(--space-sm);
  color: var(--color-fg-subtle);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-md);
  text-decoration: none;
  transition: background-color .1s ease-out;
}

.segmented li + li a,
.segmented a + a {
  border-left: var(--border-width-sm) solid var(--color-border-default);
}

.segmented a:hover {
  background: var(--color-bg-neutral-hover);
  color: var(--color-fg-default);
  text-decoration: none;
}

.segmented a[aria-current="page"] {
  background: var(--color-bg-neutral-active);
  color: var(--color-fg-default);
  font-weight: var(--font-weight-semibold);
}

.segmented a:focus-visible {
  box-shadow: var(--focus-ring-inset);
}

/* ---------- Estado vacío, confirmación y paginador ---------- */

.empty {
  padding: var(--space-lg);
}

.empty h2 {
  margin: 0 0 var(--space-xs);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
}

.empty p {
  max-width: 60ch;
  margin: 0;
  color: var(--color-fg-subtle);
}

.empty .btn {
  margin-top: var(--space-md);
}

.confirm {
  max-width: 480px;
  margin-inline: auto;
}

.confirm h1 {
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-xl);
}

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.pager-range {
  color: var(--color-fg-subtle);
  font-variant-numeric: tabular-nums;
}

.pager .btn {
  height: var(--control-height-sm);
  padding: 0 var(--space-sm);
}

/* ---------- Plegables y fichas de solo lectura ---------- */

/* <details class="details">: summary de 40 con chevron que gira 180° */
details.details {
  border-bottom: var(--border-width-sm) solid var(--color-border-subtle);
}

details.details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  min-height: 40px;
  font-weight: var(--font-weight-semibold);
  list-style: none;
  cursor: pointer;
}

details.details > summary::-webkit-details-marker {
  display: none;
}

details.details > summary::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: var(--chevron) no-repeat center / 16px;
  transition: transform .2s ease-out;
}

details.details[open] > summary::after {
  transform: rotate(180deg);
}

/* <dl class="details">: pares etiqueta / valor (P5, C4) */
dl.details {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--space-xs) var(--space-md);
  margin: 0 0 var(--space-md);
}

dl.details dt {
  color: var(--color-fg-subtle);
}

dl.details dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* ---------- Códigos de recuperación y placa QR ---------- */

.recovery-codes {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: var(--space-xs) var(--space-lg);
  margin: 0 0 var(--space-md);
  padding: var(--space-md);
  border: var(--border-width-sm) solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
  letter-spacing: .08em;
}

/* Placa QR: siempre negro sobre blanco en los dos temas */
.qr-plate {
  display: inline-block;
  padding: 16px;
  background: #FFFFFF;
  line-height: 0;
}

.qr-plate svg,
.qr-plate img {
  width: 192px;
  height: 192px;
}

/* ---------- Componentes en móvil (<720px) ---------- */

@media (max-width: 719.98px) {
  /* iOS no hace zoom al enfocar campos de 16px */
  input:not([type="checkbox"]):not([type="radio"]):not(.code),
  select,
  textarea {
    font-size: 16px;
  }

  .card {
    padding: 16px;
  }

  .recovery-codes {
    grid-template-columns: 1fr;
  }

  dl.details {
    grid-template-columns: 1fr;
    gap: 0;
  }

  dl.details dd {
    margin-bottom: var(--space-sm);
  }
}

/* =====================================================================
   Plantillas y pantallas (02.1-03, Garden + Mito)
   Puntos de ruptura únicos: <720 móvil · ≥1024 escritorio · ≥1280 ficha en 3 columnas.
   Por debajo de 720px nada fuerza un ancho mayor que la ventana: solo .table-wrap hace scroll.
   ===================================================================== */

/* ---------- Marca ---------- */

.brand {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.brand:hover {
  color: inherit;
  text-decoration: none;
}

.brand-logo {
  flex: none;
  display: block;
  width: auto;
  height: 32px;
}

.brand-mark {
  flex: none;
  display: block;
  width: 30px;
  height: 28px;
}

/* ---------- Cromo (rail del panel y cabecera del portal) ---------- */

.chrome {
  background: var(--color-chrome-bg);
  color: var(--color-chrome-fg);
}

.chrome a,
.chrome .btn-link {
  color: var(--color-chrome-fg);
}

.chrome a:hover,
.chrome .btn-link:hover {
  color: var(--color-chrome-fg);
}

.chrome .muted {
  color: var(--color-chrome-fg-muted);
}

/* Columna centrada de máx. 720 (formularios, confirmaciones y fichas simples) */
.page-narrow {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
}

/* Selector de idioma de las páginas de acceso (las píldoras están en .auth-lang) */
.lang-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xxs);
  margin: 0;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
}

.lang-switch [aria-current="true"] {
  font-weight: var(--font-weight-semibold);
}

/* ---------- Plantilla del panel (_LayoutPanel, D-04) ---------- */

.panel {
  display: grid;
  grid-template-columns: var(--chrome-nav-width) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

/* Rail negro de iconos: alto completo y fijo mientras la página hace scroll */
.rail {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  border-right: var(--border-width-sm) solid var(--color-chrome-edge);
}

.rail-mark {
  display: grid;
  place-items: center;
  flex: none;
  height: var(--chrome-header-height);
}

.rail-items,
.rail-foot {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rail-foot {
  margin-top: auto;
}

.rail-foot form {
  margin: 0;
}

.rail a,
.rail button {
  display: grid;
  place-items: center;
  width: 100%;
  height: var(--chrome-header-height);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-chrome-fg);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  opacity: var(--opacity-700);
}

.rail a:hover,
.rail button:hover {
  background: var(--color-chrome-hover);
  color: var(--color-chrome-fg);
  text-decoration: none;
  opacity: 1;
}

.rail a[aria-current="page"] {
  background: var(--color-chrome-current);
  color: var(--mito-black);
  opacity: 1;
}

.rail .icon {
  width: 20px;
  height: 20px;
}

/* El símbolo de arriba no es un ítem: sin atenuar ni fondo de hover */
.rail-mark .brand {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  opacity: 1;
}

.rail-mark .brand:hover {
  background: transparent;
}

.panel-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.panel-header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
  height: var(--chrome-header-height);
  padding: 0 20px;
  border-bottom: var(--border-width-sm) solid var(--color-border-default);
  background: var(--color-bg-default);
}

/* Buscador global: 320 × 32 con la lupa dentro */
.header-search {
  position: relative;
  width: 320px;
  max-width: 100%;
  margin: 0;
}

.header-search .icon {
  position: absolute;
  top: 50%;
  left: 12px;
  width: var(--icon-sm);
  height: var(--icon-sm);
  color: var(--color-fg-subtle);
  pointer-events: none;
  transform: translateY(-50%);
}

.header-search input {
  width: 100%;
  height: var(--control-height-sm);
  padding-left: 36px;
}

.header-end {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-left: auto;
}

.header-end .avatar:hover {
  text-decoration: none;
}

/* Barra negra de 56px con el menú: solo en móvil */
.panel-topbar {
  display: none;
}

.menu-toggle > summary {
  display: inline-grid;
  place-items: center;
  min-width: 48px;
  min-height: 48px;
  border-radius: var(--radius-md);
  list-style: none;
  cursor: pointer;
}

.menu-toggle > summary::-webkit-details-marker {
  display: none;
}

.menu-toggle > summary:hover {
  background: var(--color-chrome-hover);
}

.menu-sheet {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 20;
  padding: var(--space-xs) 0 16px;
  border-top: var(--border-width-sm) solid var(--color-chrome-divider);
  background: var(--color-chrome-bg);
}

.menu-sheet ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-sheet form {
  margin: 0;
}

.menu-sheet a,
.menu-sheet button {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--color-chrome-fg);
  font: inherit;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.menu-sheet a:hover,
.menu-sheet button:hover {
  background: var(--color-chrome-hover);
  text-decoration: none;
}

.menu-sheet a[aria-current="page"] {
  background: var(--color-chrome-current);
  color: var(--mito-black);
}

.menu-sheet .icon {
  width: 20px;
  height: 20px;
}

.panel-main {
  width: 100%;
  max-width: 1280px;
  min-width: 0;
  margin-inline: auto;
  padding: 20px 32px 32px;
}

/* Formularios, confirmaciones y fichas simples: columna de 720 (más el padding) centrada (UR-2) */
.panel-main:has(.form, .form-wide, .confirm) {
  max-width: calc(720px + 64px);
}

/* Bandeja y ficha del ticket: a sangre */
.panel-main.full-bleed {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* ---------- Plantilla del portal (_LayoutPortal, D-08) ---------- */

.portal-header {
  height: 64px;
}

.portal-header-inner {
  display: flex;
  align-items: center;
  height: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}

.portal-header .brand-logo {
  height: 32px;
}

.portal-header-inner > nav {
  display: flex;
  align-self: stretch;
  min-width: 0;
  margin-left: 24px;
}

.portal-nav {
  display: flex;
  align-self: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-nav li {
  display: flex;
}

.portal-nav a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 12px;
  color: var(--color-chrome-fg-muted);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-md);
  text-decoration: none;
  white-space: nowrap;
}

.portal-nav a:hover {
  color: var(--color-chrome-fg);
  text-decoration: none;
}

.portal-nav a[aria-current="page"] {
  color: var(--color-chrome-fg);
  box-shadow: inset 0 -3px 0 var(--mito-blue-600);
}

/* Menú de usuario: <details> sin JS */
.user-menu {
  position: relative;
  margin-left: auto;
}

.user-menu > summary {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  height: 40px;
  padding: 0 var(--space-xs);
  border-radius: var(--radius-md);
  list-style: none;
  cursor: pointer;
}

.user-menu > summary::-webkit-details-marker {
  display: none;
}

.user-menu > summary:hover {
  background: var(--color-chrome-hover);
}

.user-menu-name {
  max-width: 200px;
  overflow: hidden;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu .menu {
  position: absolute;
  top: calc(100% + var(--space-xxs));
  right: 0;
  z-index: 20;
  width: 240px;
  padding: var(--space-xs);
  color: var(--color-fg-default);
}

.user-menu-company {
  margin: 0 0 var(--space-xs);
  padding: 0 var(--space-xs);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--color-fg-subtle);
  overflow-wrap: anywhere;
}

.user-menu .menu form {
  margin: 0;
}

.user-menu .menu a,
.user-menu .menu .btn-link {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 0 var(--space-xs);
  border-radius: var(--radius-md);
  color: var(--color-fg-default);
  text-align: start;
  text-decoration: none;
}

.user-menu .menu a:hover,
.user-menu .menu .btn-link:hover {
  background: var(--color-bg-neutral-hover);
  color: var(--color-fg-default);
  text-decoration: none;
}

.portal-main {
  max-width: 1160px;
  margin: 0 auto;
  padding: 32px 20px 48px;
}

/* Formularios y confirmaciones del portal: columna de 720 (más el padding) centrada (UR-2) */
.portal-main:has(.form, .form-wide, .confirm) {
  max-width: calc(720px + 40px);
}

/* ---------- Plantilla de acceso (_LayoutAuth, D-27) ---------- */

/* Pantalla partida 50/50 (2026-10-26): a la izquierda la foto del cubo-laberinto (Unsplash KYHef_yxspI, licencia
   Unsplash: uso comercial sin atribución) con logo, «Help Desk» y la frase abajo; a la derecha el formulario sin
   tarjeta. Los tamaños escalan con clamp() para que en pantallas de 2560px no quede todo diminuto. En oscuro la foto se
   funde con el fondo negro del formulario; en claro hay corte limpio. */
body.auth-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-auth-bg);
}

.auth-brand {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(12px, 1vw, 20px);
  padding: clamp(40px, 5vw, 112px);
  background: var(--color-chrome-bg) url("../img/login-laberinto.jpg") 45% 50% / cover no-repeat;
  color: var(--color-chrome-fg);
}

/* Oscurecido abajo para leer el texto y fundido lateral hacia el formulario */
.auth-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgb(0 0 0 / .9) 0%, rgb(0 0 0 / .55) 35%, rgb(0 0 0 / .1) 70%, rgb(0 0 0 / .3) 100%),
    linear-gradient(to right, transparent 45%, color-mix(in srgb, var(--color-auth-fade) 75%, transparent) 82%,
      var(--color-auth-fade) 100%);
}

.auth-side {
  position: relative;
  display: grid;
  place-items: center;
  padding: 96px clamp(24px, 4vw, 96px) 64px;
}

.auth-lang {
  position: absolute;
  top: 16px;
  right: 16px;
}

.auth-lang .lang-switch .btn-link,
.auth-lang .lang-switch [aria-current="true"] {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xxs) var(--space-xs);
  border-radius: var(--radius-md);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  text-decoration: none;
}

.auth-lang .lang-switch .btn-link {
  color: var(--color-fg-subtle);
  font-weight: var(--font-weight-regular);
}

.auth-lang .lang-switch .btn-link:hover {
  background: var(--color-bg-neutral-hover);
  color: var(--color-fg-default);
  text-decoration: none;
}

.auth-lang .lang-switch [aria-current="true"] {
  background: var(--color-bg-neutral-active);
  color: var(--color-fg-default);
  font-weight: var(--font-weight-semibold);
}

.auth-col {
  width: 100%;
  max-width: clamp(360px, 22vw, 440px);
}

.auth-logo {
  display: flex;
}

.auth-logo .brand-logo {
  width: auto;
  height: clamp(72px, 5.5vw, 128px);
}

.auth-brand-name {
  margin: 0;
  font-size: clamp(32px, 2.8vw, 60px);
  font-weight: var(--font-weight-semibold);
  line-height: 1.1;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}

.auth-brand-tagline {
  margin: calc(clamp(12px, 1vw, 20px) * -.5) 0 0;
  color: var(--color-chrome-fg-muted);
  font-size: clamp(16px, 1.1vw, 20px);
  line-height: 1.4;
}

.auth-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.auth-card h1 {
  margin: 0 0 var(--space-xs);
  font-size: clamp(28px, 1.9vw, 40px);
  font-weight: var(--font-weight-semibold);
  line-height: 1.15;
  letter-spacing: -.01em;
}

/* Campos más altos y sin caja de color: solo el borde, sobre el fondo del formulario */
.auth-card :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select) {
  height: 48px;
  background-color: transparent;
  font-size: 16px;
}

.auth-card .btn-primary,
.auth-card .btn {
  height: 48px;
  font-size: 16px;
}

.auth-help {
  margin: clamp(32px, 2.5vw, 48px) 0 0;
  color: var(--color-fg-subtle);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
}

/* ---------- Foco en el cromo y sobre fondos azules ----------
   Anillo interior blanco de 3px: el azul no se vería sobre el ítem actual (UI-SPEC «Accesibilidad»).
   Va después de las reglas de estado ([aria-current], :hover) para ganarles por orden. */

.chrome :focus-visible,
.chrome a:focus-visible,
.chrome button:focus-visible,
.chrome summary:focus-visible,
.rail a:focus-visible,
.rail button:focus-visible,
.portal-nav a:focus-visible {
  box-shadow: inset 0 0 0 3px var(--color-chrome-fg);
  opacity: 1;
}

/* El ítem actual es blanco: ahí el anillo interior va en negro */
.rail a[aria-current="page"]:focus-visible,
.menu-sheet a[aria-current="page"]:focus-visible {
  box-shadow: inset 0 0 0 3px var(--mito-black);
}

/* Dentro del menú de usuario el fondo vuelve a ser claro: anillo Garden normal */
.chrome .menu :focus-visible,
.chrome .menu a:focus-visible,
.chrome .menu button:focus-visible {
  box-shadow: var(--focus-ring);
}

/* ---------- Plantillas en tableta (<1024px) ---------- */

@media (max-width: 1023.98px) {
  .panel-main {
    padding: 20px 24px 32px;
  }
}

/* ---------- Plantillas en móvil (<720px) ---------- */

@media (max-width: 719.98px) {
  /* Acceso: la foto pasa a cabecera encima del formulario */
  body.auth-page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  .auth-brand {
    min-height: 200px;
    padding: 24px 16px;
  }

  .auth-brand::before {
    background: linear-gradient(to top, rgb(0 0 0 / .9) 0%, rgb(0 0 0 / .35) 100%);
  }

  .auth-logo .brand-logo {
    height: 48px;
  }

  .auth-brand-name {
    font-size: var(--font-size-xxl);
  }

  .auth-side {
    place-items: start center;
    padding: 64px 16px 32px;
  }

  /* Panel: sin rail; barra negra de 56px con menú y debajo la cabecera con el buscador a todo el ancho */
  .panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  .rail,
  .panel-header .header-end {
    display: none;
  }

  .panel-topbar {
    position: relative;
    order: -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: 0 8px 0 16px;
  }

  .panel-header {
    padding: 0 16px;
  }

  .header-search {
    width: 100%;
  }

  .panel-main {
    padding: 20px 16px 32px;
  }

  .panel-main:has(.form, .form-wide, .confirm) {
    max-width: none;
  }

  /* Portal: cabecera de 56px; el menú sigue visible y el nombre del usuario se oculta */
  .portal-header {
    height: 56px;
  }

  .portal-header-inner {
    padding: 0 16px;
  }

  .portal-header .brand-logo {
    height: 26px;
  }

  .portal-header-inner > nav {
    margin-left: 8px;
  }

  .portal-nav a {
    padding: 0 8px;
  }

  .user-menu > summary {
    padding: 0 4px;
  }

  .user-menu-name {
    display: none;
  }

  .portal-main {
    padding: 20px 16px 32px;
  }
}

/* Zona de la acción destructiva secundaria (Anonimizar) */
.danger-zone {
  margin-top: var(--space-lg);
}

/* ---------- Tickets: piezas comunes ---------- */

/* #MITO-N: mismo tamaño que su contexto, en gris y con cifras tabulares */
.ticket-num {
  color: var(--color-fg-subtle);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Asunto en las listas del panel: texto normal, subrayado en hover */
.subject-link {
  color: var(--color-fg-default);
  font-weight: var(--font-weight-regular);
}

/* Enlaces entre tickets (D-08): icono + «Continúa #MITO-N · asunto», el asunto con elipsis. */
.ticket-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
}

.ticket-links li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
}

.ticket-links li > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Listas de tickets: controles y búsqueda ---------- */

.list-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 20px;
  border-bottom: var(--border-width-sm) solid var(--color-border-default);
}

.list-controls .tabs {
  margin: 0;
  border-bottom: 0;
}

.list-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) 16px;
  padding-bottom: var(--space-xs);
}

.search-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

.search-bar .field {
  flex: 1 1 240px;
  max-width: 400px;
  margin: 0;
}

.search-results {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) 16px;
  margin: 0 0 16px;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
}

/* ---------- Bandeja (T1, D-05) ---------- */

/* Columna de vistas de 240px + lista; llena el alto bajo la cabecera */
.inbox {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: calc(100vh - var(--chrome-header-height));
  min-height: calc(100dvh - var(--chrome-header-height));
}

.views {
  padding: 20px 12px;
  border-right: var(--border-width-sm) solid var(--color-border-default);
}

.views h2 {
  margin: 0 0 var(--space-xs);
  padding: 0 12px 12px;
  border-bottom: var(--border-width-sm) solid var(--color-border-subtle);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-lg);
}

.views ul {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.views a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: var(--space-xs) 12px;
  border-radius: var(--radius-md);
  color: var(--color-fg-default);
  text-decoration: none;
}

.views a:hover {
  background: var(--color-bg-neutral-hover);
  text-decoration: none;
}

.views a[aria-current="page"] {
  background: var(--color-bg-primary-selected);
  font-weight: var(--font-weight-semibold);
}

.view-count {
  color: var(--color-fg-subtle);
  font-variant-numeric: tabular-nums;
}

.list {
  min-width: 0;
  padding: 20px 32px 32px;
}

.list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
}

.list-head h1 {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xl);
}

.list-head .btn-primary {
  margin-left: auto;
}

.list-count {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
  margin: 0;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  color: var(--color-fg-subtle);
}

.list .pager {
  padding-top: 12px;
}

/* ---------- Ficha del panel (T2, D-06) ---------- */

/* Barra de ruta: empresa · solicitante · estado + número */
.crumbs-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  min-height: 56px;
  padding: 0 20px;
  border-bottom: var(--border-width-sm) solid var(--color-border-default);
  background: var(--color-bg-subtle);
}

.crumbs {
  display: flex;
  max-width: 100%;
  overflow: hidden;
  border: var(--border-width-sm) solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-default);
}

.crumb {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
  height: 32px;
  padding: 0 12px;
  color: var(--color-fg-default);
  white-space: nowrap;
}

.crumb + .crumb {
  border-left: var(--border-width-sm) solid var(--color-border-default);
}

.crumb a {
  color: inherit;
}

.crumb > .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  color: var(--color-fg-subtle);
}

/* Rejilla: por debajo de 1024px, una columna con scroll de página en el orden
   cabecera → propiedades → hilo → compositor → contexto (la sección .conv se «disuelve» con display: contents). */
.ticket {
  display: flex;
  flex-direction: column;
}

.ticket > *,
.conv > * {
  order: 3;
}

.conv {
  display: contents;
}

.conv-head {
  order: 1;
}

.props {
  order: 2;
}

.thread-scroll {
  order: 3;
}

.conv > .composer-section {
  order: 4;
}

.context {
  order: 5;
}

/* Columna de propiedades */
.props {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  padding: 20px;
  border-bottom: var(--border-width-sm) solid var(--color-border-default);
}

.props hr {
  margin: 0 -20px;
  border: 0;
  border-top: var(--border-width-sm) solid var(--color-border-subtle);
}

.props form {
  margin: 0;
}

.props p {
  margin: 0;
  overflow-wrap: anywhere;
}

.props-label {
  margin: 0 0 var(--space-xxs);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-md);
}

/* «Imputar tiempo» en propiedades (05-07): en la columna estrecha duración y fecha comparten fila, el resto a todo
   el ancho; las ayudas quedan solo para lectores de pantalla (siguen enlazadas con aria-describedby). */
.props-time .time-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.props-time .time-grid .field:has(> select[name="Time.PoolId"]),
.props-time .time-grid .time-billable,
.props-time .time-grid .time-wide {
  grid-column: 1 / -1;
}

/* Ancla las ayudas absolutas dentro del scroll de .props; si no, alargan la página y el rail se corta al bajar */
.props {
  position: relative;
}

.props-time .time-grid .field-help:not(.field-error) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.props-time .time-grid .time-billable {
  margin-bottom: var(--space-sm);
}

.props-time .actions {
  margin: 0;
}

/* Partes del ticket (05-08, HRS-04): cifra a la izquierda, descripción y datos a la derecha, separados por una línea.
   Anulado = etiqueta de texto + cifra tachada; la nota interna, como .note-box */
.props-entries {
  margin-top: var(--space-lg);
}

.entries-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--space-xs);
}

.entries-head .muted {
  font-size: 12px;
}

.entries {
  margin: var(--space-xs) 0 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-width-sm) solid var(--color-border-subtle);
}

.entry {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: var(--border-width-sm) solid var(--color-border-subtle);
}

.entry-mins {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: 20px;
}

.entry-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.entry-head {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-fg-subtle);
}

.entry-head .badge {
  margin-left: 4px;
  vertical-align: 1px;
}

.entry-desc {
  font-size: 14px;
  line-height: 20px;
}

.entry-reverse {
  justify-self: start;
  font-size: 12px;
  line-height: 16px;
}

.entry.is-reversed .entry-mins {
  color: var(--color-fg-subtle);
  text-decoration: line-through;
}

.entry.is-reversed .entry-desc {
  color: var(--color-fg-subtle);
}

.props .entry-note {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  padding: 8px 12px;
  border: var(--border-width-sm) solid var(--color-border-warning);
  border-radius: 4px;
  background: var(--color-bg-warning);
  font-size: 12px;
  line-height: 16px;
}

/* Saldo de la bolsa (05-07, HRS-05): rojo solo en negativo y siempre con texto (DESIGN) */
.balance-value {
  margin: 0 0 var(--space-xxs);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xl);
  font-variant-numeric: tabular-nums;
  color: var(--color-fg-default);
}

.balance-value.is-negative,
.balance-alert {
  color: var(--color-fg-danger);
}

.balance-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xxs);
  margin: 0 0 12px;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
}

.balance-alert .icon {
  flex: none;
  width: var(--icon-md);
  height: var(--icon-md);
  margin-top: 2px;
}

.balance > .muted {
  margin: 0 0 12px;
}

.crumb-balance.is-negative .num {
  color: var(--color-fg-danger);
}

/* Propiedades editables (Estado, Prioridad y Técnico) con un único «Guardar cambios» */
.ticket-props .actions {
  margin-top: 0;
}

/* Conversación */
.conv-head {
  padding: 16px 24px;
  border-bottom: var(--border-width-sm) solid var(--color-border-default);
}

.conv-head h1 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-lg);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.conv-meta {
  margin: var(--space-xxs) 0 0;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  color: var(--color-fg-subtle);
}

.jump-composer {
  display: none;
}

.thread-scroll {
  min-height: 0;
  padding: var(--space-xs) 24px 24px;
}

/* Contexto: solicitante y otros tickets abiertos de la empresa */
.context {
  min-width: 0;
}

.context-section {
  padding: 20px;
  border-bottom: var(--border-width-sm) solid var(--color-border-subtle);
}

.context-section h2 {
  margin: 0 0 12px;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-md);
}

.context-person {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
}

.context-person p {
  margin: 0;
  overflow-wrap: anywhere;
}

.context-person > div > p:first-child {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-lg);
}

.kv {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--space-xs) 12px;
  margin: 0;
}

.kv dt {
  color: var(--color-fg-subtle);
}

.kv dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Un email largo no se parte: se recorta con «…» y el completo queda en el title */
.kv dd .kv-email {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.other-open {
  margin: 0;
  padding: 0;
  list-style: none;
}

.other-open li {
  padding: 10px 0;
  border-top: var(--border-width-sm) solid var(--color-border-subtle);
}

.other-open li:first-child {
  padding-top: 0;
  border-top: 0;
}

.other-open a {
  display: block;
  color: var(--color-fg-default);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-md);
  overflow-wrap: anywhere;
}

/* Texto en línea (no flex): con flex, «· nombre ·» sería un bloque anónimo y los separadores quedarían desiguales */
.other-open li > :not(a) {
  display: block;
  margin: var(--space-xxs) 0 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--color-fg-subtle);
}

/* 720–1023px: los tres selects de propiedades en dos columnas */
@media (min-width: 720px) and (max-width: 1023.98px) {
  .ticket-props {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 16px;
  }

  .ticket-props .actions {
    grid-column: 1 / -1;
  }
}

/* ≥1024px: el hilo y el compositor en una columna con alto fijo; la barra inferior queda fija abajo */
@media (min-width: 1024px) {
  .ticket {
    display: grid;
    grid-template-columns: 296px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "props conv"
      "context conv";
    align-items: start;
  }

  .ticket > *,
  .conv > * {
    order: 0;
  }

  .props {
    grid-area: props;
    border-right: var(--border-width-sm) solid var(--color-border-default);
    border-bottom: 0;
  }

  .context {
    grid-area: context;
    align-self: stretch;
    border-top: var(--border-width-sm) solid var(--color-border-subtle);
    border-right: var(--border-width-sm) solid var(--color-border-default);
  }

  /* 1024–1279: la columna izquierda (propiedades + contexto) sigue el scroll de la página y la conversación
     se queda a la vista. */
  .conv {
    position: sticky;
    top: 0;
    grid-area: conv;
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--chrome-header-height) - 56px - 56px);
    height: calc(100dvh - var(--chrome-header-height) - 56px - 56px);
    min-height: 0;
  }

  .conv-head,
  .conv > .composer-section {
    flex: none;
  }

  .thread-scroll {
    flex: 1 1 0;
    overflow: auto;
  }

  /* Reserva el alto de la barra inferior fija para que no tape nada */
  .panel-main.full-bleed:has(.composer-bar) {
    padding-bottom: 56px;
  }
}

/* ≥1280px: tres columnas de alto fijo y scroll propio (cabecera, ruta y barra inferior fuera) */
@media (min-width: 1280px) {
  .ticket {
    grid-template-columns: 296px minmax(0, 1fr) 320px;
    grid-template-rows: none;
    grid-template-areas: "props conv context";
    align-items: stretch;
    height: calc(100vh - var(--chrome-header-height) - 56px - 56px);
    height: calc(100dvh - var(--chrome-header-height) - 56px - 56px);
  }

  .props,
  .context {
    overflow: auto;
  }

  .context {
    border-top: 0;
    border-right: 0;
    border-left: var(--border-width-sm) solid var(--color-border-default);
  }

  .conv {
    position: static;
    height: auto;
  }
}

/* ---------- Barra inferior del compositor (D-06) ---------- */

/* Por debajo de 1024px, estática al final del formulario y apilada */
.composer-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  /* Sin padding lateral: ya lo pone la sección del compositor (así se alinea con el editor) */
  padding: 12px 0;
  border-top: var(--border-width-sm) solid var(--color-border-default);
  background: var(--color-bg-default);
}

.composer-bar .picker,
.composer-bar .picker > summary {
  width: 100%;
}

.composer-bar .picker > summary {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  cursor: pointer;
}

/* El summary lleva su propio icono chevron-down en el marcado: sin el chevron de fondo de .select (saldrían dos) */
.picker-summary {
  padding-right: var(--space-sm);
  background-image: none;
}

.composer-bar .picker > summary > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* «Enviar como [Automático ▾] [Enviar respuesta]»: el select y el primario pegados */
.send-split {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.send-split label {
  margin: 0 0 var(--space-xxs);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-md);
  color: var(--color-fg-subtle);
}

.send-split select,
.send-split .select {
  width: 100%;
}

.send-split .btn-primary {
  width: 100%;
  margin: var(--space-xs) 0 0;
}

.send-split select:focus-visible,
.send-split .btn-primary:focus-visible {
  position: relative;
  z-index: 1;
}

@media (min-width: 1024px) {
  .composer-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: var(--chrome-nav-width);
    z-index: 10;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 20px;
  }

  .composer-bar .picker {
    width: auto;
  }

  .composer-bar .picker > summary {
    width: 256px;
  }

  /* La hoja de respuestas se abre hacia arriba desde la barra */
  .composer-bar .picker-sheet {
    top: auto;
    bottom: calc(100% + var(--space-xxs));
  }

  /* En la barra fija, a la derecha (por debajo, a todo el ancho: margin-left: auto anularía el stretch) */
  .send-split {
    flex-direction: row;
    align-items: center;
    margin-left: auto;
  }

  .send-split label {
    margin: 0 var(--space-xs) 0 0;
    white-space: nowrap;
  }

  .send-split select,
  .send-split .select {
    width: 200px;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
  }

  .send-split .btn-primary {
    width: auto;
    margin: 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
  }

  /* El error del estado no cabe en 56px: sale encima de la barra, alineado a la derecha */
  .composer-bar .field-error {
    position: absolute;
    right: 20px;
    bottom: calc(100% + var(--space-xxs));
    margin: 0;
    padding: var(--space-xxs) var(--space-xs);
    border-radius: var(--radius-md);
    background: var(--color-bg-default);
  }
}

/* ---------- Hilo (_Thread, panel y portal; D-07) ---------- */

.thread {
  margin: 0;
  padding: 0;
  list-style: none;
}

.msg {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  padding: 20px 0;
  border-bottom: var(--border-width-sm) solid var(--color-border-subtle);
}

.thread > li:last-child > .msg,
.thread > li.event:last-child {
  border-bottom: 0;
}

.msg-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xxs) var(--space-xs);
  margin: 0;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
}

.msg-author {
  color: var(--color-fg-default);
  font-weight: var(--font-weight-semibold);
}

.msg-org,
.msg-time,
.msg-head time {
  color: var(--color-fg-subtle);
}

/* Texto plano del usuario: respeta saltos de línea y no rompe el ancho con logs largos (D-10) */
.msg-body {
  max-width: 72ch;
  margin-top: 12px;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Nota interna: etiqueta «Nota interna» con candado y el cuerpo en una caja ámbar (sin barra lateral) */
.note-tag .icon {
  width: 12px;
  height: 12px;
}

.note-box,
.msg-note .note-box {
  max-width: calc(72ch + 34px);
  margin-top: 12px;
  padding: 12px 16px;
  border: var(--border-width-sm) solid var(--color-border-warning);
  border-radius: var(--radius-md);
  background: var(--color-bg-warning);
}

.note-box .msg-body {
  margin-top: 0;
}

/* Adjuntos (D-11): miniaturas 160×120 sin recortar y lista de ficheros */
.attachments {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: 12px;
}

.attachment-thumbs,
.attachment-files {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Capturas a tamaño legible bajo el texto (una por fila): sin ellas muchas conversaciones no se entienden */
.attachment-thumbs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.attachment-thumbs li {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  max-width: min(640px, 100%);
}

.attachment-thumb {
  display: block;
  max-width: 100%;
  overflow: hidden;
  border: var(--border-width-sm) solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  cursor: zoom-in;
}

.attachment-thumb img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
}

.attachment-thumb-name {
  overflow: hidden;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-files {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}

.attachment-files li {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  padding: var(--space-xs) 12px;
  border: var(--border-width-sm) solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
}

.attachment-files .icon {
  color: var(--color-fg-subtle);
}

.attachment-files a {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-size {
  flex: none;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--color-fg-subtle);
}

/* Línea de historial: 12/16 gris con icono de historial; texto en línea (sin flex, para no perder espacios) */
.event {
  padding: 12px 0 12px 52px;
  border-bottom: var(--border-width-sm) solid var(--color-border-subtle);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--color-fg-subtle);
}

.event .icon {
  width: 12px;
  height: 12px;
  margin-right: var(--space-xs);
  vertical-align: -2px;
}

.event b {
  color: var(--color-fg-default);
  font-weight: var(--font-weight-semibold);
}

/* ---------- Compositor (_Composer; D-06) ----------
   Sin JS: el modo Nota lo marca el radio Kind=note y :has() cambia el color del editor y los textos
   .when-reply / .when-note. */

.composer-section {
  padding: 0 24px 12px;
  border-top: var(--border-width-sm) solid var(--color-border-default);
  background: var(--color-bg-default);
}

.composer-section > h2 {
  margin: 0 0 16px;
}

.composer {
  margin: 0;
}

.composer:not(:has(input[name="Kind"][value="note"]:checked)) .when-note,
.composer:has(input[name="Kind"][value="note"]:checked) .when-reply {
  display: none;
}

.composer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 16px;
}

/* Conmutador Responder / Nota interna con aspecto de pestañas Garden */
.mode-switch {
  display: flex;
  gap: 24px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.mode-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  height: 40px;
  padding: 0 2px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  color: var(--color-fg-subtle);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-md);
  cursor: pointer;
  box-shadow: inset 0 -3px 0 transparent;
}

.mode-tab:hover {
  color: var(--color-fg-default);
}

.mode-tab:has(input:checked) {
  color: var(--color-fg-default);
  box-shadow: inset 0 -3px 0 var(--color-border-primary-emphasis);
}

.mode-tab:has(:focus-visible) {
  box-shadow: var(--focus-ring-inset);
}

.composer-hint {
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
  margin: 0;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  color: var(--color-fg-subtle);
}

.composer-hint-note {
  color: var(--color-fg-warning);
  font-weight: var(--font-weight-semibold);
}

.composer .field {
  margin-bottom: 0;
}

/* Editor: caja con el textarea sin borde y la fila de herramientas debajo */
.editor {
  border: var(--border-width-sm) solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-default);
}

.editor:focus-within {
  border-color: var(--color-border-primary-emphasis);
  box-shadow: var(--focus-ring);
}

.editor:has(textarea[aria-invalid="true"]) {
  border-color: var(--color-border-danger);
}

.editor textarea {
  display: block;
  width: 100%;
  min-height: 96px;
  padding: 12px;
  border: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: transparent;
  resize: vertical;
}

.editor textarea:hover,
.editor textarea:focus-visible,
.editor textarea[aria-invalid="true"] {
  border: 0;
  box-shadow: none;
}

.editor-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xxs) var(--space-xs);
  padding: var(--space-xxs) var(--space-xs);
  border-top: var(--border-width-sm) solid var(--color-border-subtle);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--color-fg-subtle);
}

/* Dentro de la fila: «Adjuntar» a la izquierda, la ayuda a la derecha; pendientes y errores debajo */
.editor-tools .attach-field {
  flex: 1 1 100%;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xxs) var(--space-xs);
}

.editor-tools .attach-help {
  margin: 0 0 0 auto;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--color-fg-subtle);
}

.editor-tools .pending-files,
.editor-tools .attach-errors {
  flex: 1 1 100%;
}

.editor-tools .attach-button {
  height: var(--control-height-sm);
  padding: 0 var(--space-xs);
  border-color: transparent;
  background: transparent;
  color: var(--color-fg-subtle);
}

.editor-tools .attach-button:hover {
  background: var(--color-bg-neutral-hover);
  color: var(--color-fg-default);
}

/* Modo nota: el editor se tiñe de ámbar (el texto del botón y la ayuda también cambian: nunca solo color) */
.composer:has(input[name="Kind"][value="note"]:checked) .editor {
  border-color: var(--color-border-warning);
  background: var(--color-bg-warning);
}

.composer:has(input[name="Kind"][value="note"]:checked) .editor-tools {
  border-top-color: var(--color-border-warning);
}

.composer-help {
  margin: var(--space-xs) 0 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--color-fg-subtle);
}

.composer-help p,
.composer-help .field-help {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

/* «Añadir tiempo» (05-07): <details> entre el editor y las ayudas, nunca dentro de la barra de 56px.
   Summary en línea de 32px; el chevron gira 180° al abrir, como las FAQ del portal. */
.composer-time {
  margin: var(--space-xs) 0 0;
}

.composer-time > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 32px;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  color: var(--color-fg-subtle);
  border-radius: var(--radius-md);
  list-style: none;
  cursor: pointer;
}

.composer-time > summary::-webkit-details-marker {
  display: none;
}

.composer-time > summary .icon {
  flex: none;
  width: var(--icon-md);
  height: var(--icon-md);
}

.composer-time > summary .icon:last-child {
  transition: transform .2s ease-out;
}

.composer-time[open] > summary .icon:last-child {
  transform: rotate(180deg);
}

.composer-time > .time-grid,
.composer-time > .muted {
  margin: var(--space-xs) 0 0;
}

/* Campos del parte: una columna; desde 720px duración · fecha · casilla y los textos a todo el ancho */
.time-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 12px;
}

.time-grid .field,
.time-grid .check {
  min-width: 0;
}

.time-grid textarea {
  min-height: 0;
}

.time-billable .field-help {
  margin: 0;
}

.time-grid label > .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  margin-right: var(--space-xxs);
  vertical-align: -2px;
  color: var(--color-fg-subtle);
}

@media (min-width: 720px) {
  .time-grid {
    grid-template-columns: 160px 160px minmax(0, 1fr);
  }

  .time-grid .time-billable {
    align-self: center;
  }

  .time-grid .time-wide {
    grid-column: 1 / -1;
  }
}

/* Compositor del portal: el primario a la derecha */
.composer > .actions {
  justify-content: flex-end;
}

@media (min-width: 1024px) {
  .editor textarea {
    height: 96px;
  }
}

/* Bloque de adjuntar _AttachField (D-11, D-12). El botón es el <label> del <input type="file"> oculto: el foco del
   input se pinta en el botón. Sin JS solo se ven el botón, la ayuda y los errores. */
.attach-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  max-width: 100%;
}

.attach-button {
  cursor: pointer;
}

.attach-field:has(input[type="file"]:focus-visible) .attach-button {
  box-shadow: var(--focus-ring);
}

.attach-errors:not(:has(*)) {
  display: none;
}

.attach-errors {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}

/* Lista de pendientes (la rellena ticket-composer.js; oculta por defecto con [hidden]). */
.pending-files {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pending-files[hidden] {
  display: none;
}

/* Fila de pendiente (ticket-composer.js la clona de <template>): clip, nombre con elipsis, tamaño y «Quitar». */
.pending-file {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
  max-width: 100%;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  color: var(--color-fg-default);
}

/* Miniatura de una imagen pendiente (pegada con Ctrl+V, soltada o elegida) */
.pending-thumb {
  flex: none;
  max-width: 160px;
  max-height: 96px;
  border: var(--border-width-sm) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  object-fit: contain;
  background: var(--color-bg-neutral-hover);
}

.pending-name {
  min-width: 0;
  overflow: hidden;
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg-default);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pending-size {
  flex: none;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--color-fg-subtle);
}

.pending-remove {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
}

.attach-drop-hint[hidden],
.attach-help-text[hidden] {
  display: none;
}

/* «Soltar aquí» mientras se arrastra un fichero sobre el formulario (sin transición). */
.is-dragover {
  outline: 2px dashed var(--color-border-primary-emphasis);
  outline-offset: -2px;
}

/* ---------- Respuestas predefinidas (_CannedPicker; CONV-06, D-20) ---------- */

.canned-intro {
  max-width: 72ch;
  margin: 0 0 24px;
}

/* Vista previa de R1: primeros 80 caracteres en una sola línea */
.canned-preview {
  max-width: 40ch;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.canned-vars {
  margin-bottom: 24px;
}

.canned-vars h2 {
  margin: 0 0 var(--space-xs);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.canned-vars .details {
  margin: 0;
}

.canned-vars code {
  font-family: var(--font-mono);
}

/* Desplegable: <details> nativo (teclado gratis). Sale con [hidden] y ticket-composer.js lo muestra. */
.picker {
  position: relative;
}

.picker[hidden] {
  display: none;
}

.picker > summary {
  list-style: none;
}

.picker > summary::-webkit-details-marker {
  display: none;
}

/* Hoja con aspecto de menú Garden: 400 de ancho, lista con máx. 320 de alto */
.picker-sheet {
  position: absolute;
  top: calc(100% + var(--space-xxs));
  left: 0;
  z-index: 20;
  width: 400px;
  max-width: calc(100vw - 32px);
  padding: 12px;
  border: var(--border-width-sm) solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-raised);
  box-shadow: var(--shadow-menu);
}

.picker-list {
  max-height: 320px;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.picker-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--space-xs) 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-fg-default);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.picker-item:hover {
  background: var(--color-bg-neutral-hover);
}

.picker-name {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-md);
  color: var(--color-fg-default);
}

.picker-preview {
  max-width: 100%;
  overflow: hidden;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--color-fg-subtle);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.picker-nomatch[hidden] {
  display: none;
}

/* ---------- Portal: Inicio (D-09) ---------- */

.home {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
}

/* Saludo: título y primario en la primera fila; empresa y recuento debajo */
.hello {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xxs) 16px;
}

/* El bloque del saludo ocupa el hueco: «Nuevo ticket» queda a la derecha */
.hello > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.hello h1 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xxl);
}

.hello .btn-primary {
  order: 2;
}

.hello-sub {
  order: 3;
  flex-basis: 100%;
  margin: 0;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  color: var(--color-fg-subtle);
}

.sec {
  margin-top: 40px;
}

.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
  margin: 0 0 12px;
}

.sec-head h2 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-lg);
}

.sec-count {
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  color: var(--color-fg-subtle);
  font-variant-numeric: tabular-nums;
}

.sec-head a {
  margin-left: auto;
}

/* Esperan vuestra respuesta */
.waiting {
  margin: 0;
  padding: 0;
  border: var(--border-width-sm) solid var(--color-border-default);
  border-radius: var(--radius-lg);
  list-style: none;
}

.waiting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-xxs) 20px;
  padding: 16px 20px;
  border-bottom: var(--border-width-sm) solid var(--color-border-subtle);
}

.waiting-row:last-child {
  border-bottom: 0;
}

.waiting-subject,
.waiting-meta {
  grid-column: 1;
}

.waiting-subject {
  display: block;
  color: var(--color-fg-default);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-md);
  overflow-wrap: anywhere;
}

.waiting-meta {
  margin: var(--space-xxs) 0 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--color-fg-subtle);
}

.waiting-row > .btn,
.waiting-row > .btn-outline {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.waiting-quote {
  display: -webkit-box;
  grid-column: 1 / -1;
  margin: var(--space-xxs) 0 0;
  /* El hueco inferior es un borde transparente: overflow corta en la caja de padding, así la 4.ª línea no asoma */
  padding: 12px 16px 0;
  overflow: hidden;
  border-bottom: 12px solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  color: var(--color-fg-default);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.waiting-quote b {
  font-weight: var(--font-weight-semibold);
}

/* Columna de ayuda */
.help-col {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: var(--space-xs);
}

.help-col h2 {
  margin: 0 0 12px;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-md);
}

.tips {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Consejos sin números (02.2, Discreción 5): título 14/600 y texto 14 en subtle */
.tips li {
  color: var(--color-fg-subtle);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
}

.tips li > * {
  display: block;
  margin: 0;
}

.tips li strong {
  color: var(--color-fg-default);
  font-weight: var(--font-weight-semibold);
}

/* Preguntas frecuentes: el chevron gira al abrir (único movimiento, anulado con reduced-motion) */
.faq details {
  border-bottom: var(--border-width-sm) solid var(--color-border-subtle);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  min-height: 40px;
  padding: var(--space-xs) 0;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* Chevron de 16px, como el de los selects (con 12px apenas se veía) */
.faq summary .icon {
  flex: none;
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--color-fg-subtle);
  transition: transform .2s ease-out;
}

.faq details[open] summary .icon {
  transform: rotate(180deg);
}

.faq details p {
  margin: 0;
  padding: 0 0 12px;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  color: var(--color-fg-subtle);
}

@media (prefers-reduced-motion: reduce) {
  .faq summary .icon {
    transition: none;
  }
}

/* Dar acceso a un compañero (solo Responsable) */
.contact {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 12px;
  padding: 16px;
  border: var(--border-width-sm) solid var(--color-border-default);
  border-radius: var(--radius-lg);
}

.contact > .icon {
  grid-row: 1 / span 2;
  margin-top: 2px;
  color: var(--color-fg-subtle);
}

.contact > :not(.icon) {
  grid-column: 2;
  margin: 0;
}

.contact > p:first-of-type {
  margin-bottom: var(--space-xxs);
  font-weight: var(--font-weight-semibold);
}

/* ---------- Portal: Solicitudes (D-09) ---------- */

.list-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
}

.list-filters form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0;
}

.list-filters .segmented {
  margin-left: auto;
}

.search-field {
  position: relative;
  width: 360px;
  max-width: 100%;
}

.search-field .icon {
  position: absolute;
  top: 50%;
  left: 12px;
  width: var(--icon-sm);
  height: var(--icon-sm);
  color: var(--color-fg-subtle);
  pointer-events: none;
  transform: translateY(-50%);
}

.search-field input {
  width: 100%;
  padding-left: 36px;
}

/* Buscador del portal (D-21): campo y «Buscar» siempre en la misma línea, a 8px */
.list-filters .search-group {
  display: flex;
  flex: 1 1 280px;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
}

.list-filters .search-group .search-field {
  flex: 1 1 280px;
  width: auto;
  min-width: 0;
  max-width: 360px;
}

.list-filters .search-group .search-field input,
.list-filters .search-group > .btn {
  height: var(--control-height-md);
}

.list-filters .search-group > .btn {
  flex: none;
}

.p-table {
  table-layout: auto;
}

.p-table td {
  height: auto;
  padding-block: 12px;
  white-space: normal;
}

.p-table .col-subject {
  width: 46%;
}

/* El número (#MITO-1003) y el solicitante («Laura Gómez (tú)») nunca se parten */
.p-table td.ticket-num,
.p-table td.ticket-requester {
  white-space: nowrap;
}

/* Asunto en el color del texto (D-21): el azul queda para los enlaces dentro de un texto */
.p-table .subject-link {
  color: var(--color-fg-default);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
}

.p-table .subject-link:hover,
.p-table .subject-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Cuándo respondemos («Normalmente respondemos el mismo día laborable.») */
.expectation {
  margin: 0;
  color: var(--color-fg-subtle);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
}

/* «Te hemos respondido»: icono + texto en azul, junto al asunto */
.replied {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  margin-left: var(--space-xs);
  color: var(--color-fg-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-sm);
  white-space: nowrap;
  vertical-align: middle;
}

.replied .icon {
  width: 12px;
  height: 12px;
}

/* Metadatos apilados de móvil: fuera del árbol accesible en escritorio (nunca se anuncian dos veces) */
.m-meta {
  display: none;
}

@media (min-width: 720px) {
  .p-table.mini tr {
    height: 48px;
  }

  .p-table.mini td {
    padding-block: var(--space-xs);
  }
}

/* ---------- Portal: ficha ---------- */

.p-ticket {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  gap: 32px;
  align-items: start;
}

.p-ticket-head {
  margin: 0 0 20px;
}

.p-ticket-head h1 {
  margin: 0;
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xxl);
  overflow-wrap: anywhere;
}

.p-ticket .ticket-links {
  margin: 0 0 20px;
}

.p-ticket .composer-section {
  margin-top: 20px;
  padding: 20px 0 0;
  background: none;
}

.p-ticket-side {
  display: flex;
  flex-direction: column;
}

.meta-list {
  margin: 0;
}

.meta-list dt {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--color-fg-subtle);
}

.meta-list dd {
  margin: 0 0 12px;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  overflow-wrap: anywhere;
}

.p-ticket-side .btn-block {
  margin-top: var(--space-xs);
}

/* ---------- Bandeja 02.2: dos líneas, no leído, turno, filtros, orden y masivas (D-03, D-14 a D-16, D-19) ---------- */

.table-wrap > .inbox-table {
  min-width: 1000px;
}

/* Anchos de columna de la bandeja (UI-SPEC); el asunto se queda con el resto. «Última actividad» sigue en 140 (su cabecera no cabe en 112) */
.inbox-table th.col-num { width: 96px; }
.inbox-table th.col-company { width: 160px; }
.inbox-table th.col-requester { width: 116px; }
.inbox-table th.col-status { width: 140px; }
.inbox-table th.col-priority { width: 84px; }
.inbox-table th.col-assignee { width: 108px; }

/* Asa para redimensionar columnas (inbox.js): franja de 8px en el borde derecho de la cabecera */
table[data-resize] th {
  position: relative;
}

.col-resize {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
}

.col-resize::after {
  content: "";
  position: absolute;
  top: 25%;
  left: 3px;
  width: 2px;
  height: 50%;
  border-radius: 1px;
  background: transparent;
}

.col-resize:hover::after,
.col-resize:focus-visible::after {
  background: var(--color-border-primary-emphasis);
}

.col-resize:focus-visible {
  outline: none;
}

@media (max-width: 719.98px) {
  .col-resize { display: none; }
}

/* Línea 1: punto + asunto con elipsis + entorno; el asunto deja sitio a lo que lleva al lado */
.inbox-table .subject-link {
  display: inline-block;
  max-width: 100%;
  font-weight: var(--font-weight-regular);
  vertical-align: top;
}

.inbox-table tr.is-unread .subject-link {
  max-width: calc(100% - 12px);
  font-weight: var(--font-weight-semibold);
}

/* shortcut: reserva fija para «Producción» (la etiqueta más larga); si se añade otra más larga, subir el valor */
.inbox-table .subject-link:has(+ .badge-env) {
  max-width: calc(100% - 104px);
}

.inbox-table tr.is-unread .subject-link:has(+ .badge-env) {
  max-width: calc(100% - 116px);
}

.inbox-table .badge-env {
  vertical-align: top;
}

.unread-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: var(--space-xxs);
  border-radius: 50%;
  background: var(--color-fg-primary);
  vertical-align: middle;
}

.row-sub {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--color-fg-subtle);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.turn-customer {
  color: var(--color-fg-default);
  font-weight: var(--font-weight-semibold);
}

.turn-us {
  color: var(--color-fg-subtle);
  font-weight: var(--font-weight-regular);
}

/* Fragmento de búsqueda: la coincidencia en gris tenue y 600 (nunca azul, D-24) */
.row-sub mark {
  padding: 0 2px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-neutral-active);
  color: var(--color-fg-default);
  font-weight: var(--font-weight-semibold);
}

.snippet-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  margin-right: var(--space-xxs);
  color: var(--color-fg-subtle);
  font-weight: var(--font-weight-semibold);
  vertical-align: top;
}

.snippet-note .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

/* La fila con foco de teclado (j/k) se ve como en hover; la marcada para masivas, seleccionada */
.inbox-table tbody tr:focus-within {
  background: var(--color-bg-primary-hover);
}

.inbox-table tr:has(input[name="ids"]:checked) {
  background: var(--color-bg-primary-selected);
}

/* Barra de filtros del panel (formulario GET) */
.inbox .list-filters {
  margin-bottom: 12px;
}

.filter-select {
  flex: none;
  width: 200px;
  max-width: 100%;
  height: var(--control-height-sm);
}

.filter-select.is-company {
  width: 240px;
}

/* Cabeceras ordenables: el enlace ocupa toda la celda; flecha solo en la columna activa */
th .sort {
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
  height: var(--table-row-md);
  color: var(--color-fg-default);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-md);
  text-decoration: none;
}

th .sort:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

th .sort .icon {
  flex: none;
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--color-fg-subtle);
}

/* La celda recorta (overflow: hidden): anillo interior */
th .sort:focus-visible {
  box-shadow: var(--focus-ring-inset);
}

/* Acciones masivas (solo ≥720) */
.bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: var(--space-xs) 0;
  border-bottom: var(--border-width-sm) solid var(--color-border-subtle);
}

.bulk-count {
  margin: 0;
  color: var(--color-fg-subtle);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
}

.inbox-table th:has([data-select-all-wrap]),
.inbox-table .bulk-check {
  width: 40px;
  padding: 0;
}

/* El label ocupa la celda entera y queda por encima del enlace estirado del asunto */
.inbox-table th:has([data-select-all-wrap]) label,
.bulk-check label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: var(--table-row-md);
  cursor: pointer;
}

.bulk-skipped {
  margin: var(--space-xxs) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
}

/* Confirmación masiva: lista de tickets afectados (máx. 25) */
.confirm-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  margin: 0 0 var(--space-md);
  padding: 0;
  list-style: none;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
}

.confirm-list .num {
  color: var(--color-fg-subtle);
  font-variant-numeric: tabular-nums;
}

/* ---------- Hilo 02.2: mensajes intermedios plegados (D-10) ---------- */

.thread-fold > summary {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 40px;
  padding-left: 52px;
  border-bottom: var(--border-width-sm) solid var(--color-border-subtle);
  color: var(--color-fg-primary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  list-style: none;
  cursor: pointer;
}

.thread-fold > summary::-webkit-details-marker {
  display: none;
}

.thread-fold > summary:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.thread-fold > summary .icon {
  flex: none;
  width: var(--icon-md);
  height: var(--icon-md);
  transition: transform .2s ease-out;
}

.thread-fold[open] > summary .icon {
  transform: rotate(180deg);
}

.thread-fold[open] > summary .when-closed,
.thread-fold:not([open]) > summary .when-open {
  display: none;
}

/* Dentro del pliegue vienen más mensajes detrás: el último plegado conserva su separador */
.thread-fold .thread > li:last-child > .msg,
.thread-fold .thread > li.event:last-child {
  border-bottom: var(--border-width-sm) solid var(--color-border-subtle);
}

/* ---------- Compositor y ficha 02.2 (D-06, D-07, D-09, D-25, D-26) ---------- */

.draft-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xxs) var(--space-xs);
  margin: var(--space-xs) 0 0;
  color: var(--color-fg-subtle);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.draft-note .btn-link {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.props-help {
  margin: var(--space-xxs) 0 0;
  color: var(--color-fg-subtle);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

/* Plegable de propiedades: en ≥1024 no se ve el summary y el contenido sigue el hueco de 20 de .props */
.props-fold > summary {
  display: none;
}

.props-fold > :not(summary) + :not(summary) {
  margin-top: 20px;
}

.tech-notes {
  margin: 0;
  color: var(--color-fg-default);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.tech-notes.is-empty {
  color: var(--color-fg-subtle);
}

/* Aviso de colisión sobre el compositor: recibe el foco al cargar y no queda bajo la cabecera */
.collision {
  margin: 0 0 var(--space-sm);
  border-radius: var(--radius-md);
  scroll-margin-top: calc(var(--chrome-header-height) + 20px);
}

.collision:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---------- Atajos de teclado 02.2 (D-04) ---------- */

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  min-height: 20px;
  padding: 0 var(--space-xxs);
  border: var(--border-width-sm) solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  color: var(--color-fg-default);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

dialog.shortcuts {
  width: calc(100% - 32px);
  max-width: 480px;
  padding: var(--space-md);
  border: var(--border-width-sm) solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-raised);
  color: var(--color-fg-default);
  box-shadow: var(--shadow-menu);
}

dialog.shortcuts::backdrop {
  background: rgb(0 0 0 / .4);
}

dialog.shortcuts h2 {
  margin: 0 0 var(--space-md);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-lg);
}

dialog.shortcuts dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-xs) 12px;
  margin: 0;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
}

dialog.shortcuts dt {
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
  white-space: nowrap;
}

dialog.shortcuts dd {
  margin: 0;
}

.shortcuts-off {
  margin: var(--space-md) 0 0;
  color: var(--color-fg-subtle);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.shortcuts-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-md);
}

/* ---------- Administración 02.2 (D-02): una tarjeta por página; toda la tarjeta es el enlace ---------- */

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--space-md);
}

.admin-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  transition: border-color .1s ease-out;
}

.admin-card .icon {
  width: 20px;
  height: 20px;
  color: var(--color-fg-subtle);
}

.admin-card h2 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-lg);
}

.admin-card h2 a {
  color: var(--color-fg-default);
  text-decoration: none;
}

.admin-card h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.admin-card p {
  margin: 0;
  color: var(--color-fg-subtle);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
}

.admin-card:hover {
  border-color: var(--color-border-emphasis);
}

/* El anillo va en la tarjeta, no en el texto del enlace */
.admin-card h2 a:focus-visible {
  box-shadow: none;
}

.admin-card:focus-within {
  box-shadow: var(--focus-ring);
}

/* ---------- Pantallas en tableta (<1024px) ---------- */

@media (max-width: 1023.98px) {
  /* Bandeja: las vistas pasan encima de la lista como píldoras */
  .inbox {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .views {
    padding: 20px 24px 0;
    border-right: 0;
  }

  .views h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .views ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .views a {
    min-height: 32px;
    padding: var(--space-xxs) 12px;
    border: var(--border-width-sm) solid var(--color-border-default);
    border-radius: 16px;
  }

  .views a[aria-current="page"] {
    border-color: var(--color-border-primary-emphasis);
  }

  .list {
    padding: 20px 24px 32px;
  }

  /* Ficha del panel */
  .crumbs-bar {
    padding: 12px 24px;
  }

  .crumbs {
    flex-wrap: wrap;
  }

  .jump-composer {
    display: inline-flex;
    margin-top: var(--space-xs);
  }

  .editor textarea {
    min-height: 0;
  }

  /* Propiedades plegables (D-26): título y valores actuales a la izquierda, chevron a la derecha */
  .props-fold > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-xs);
    min-height: 48px;
    padding: var(--space-xxs) 0;
    border-bottom: var(--border-width-sm) solid var(--color-border-subtle);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-md);
    list-style: none;
    cursor: pointer;
  }

  .props-fold > summary::-webkit-details-marker {
    display: none;
  }

  .props-fold-values {
    grid-column: 1;
    overflow: hidden;
    color: var(--color-fg-subtle);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .props-fold > summary .icon {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: var(--icon-md);
    height: var(--icon-md);
    color: var(--color-fg-subtle);
    transition: transform .2s ease-out;
  }

  .props-fold[open] > summary {
    margin-bottom: 20px;
  }

  .props-fold[open] > summary .icon {
    transform: rotate(180deg);
  }

  /* Portal */
  .home {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  /* Ficha del portal: una columna; los datos justo después de la cabecera */
  .p-ticket {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .p-ticket-main {
    display: contents;
  }

  .p-ticket > *,
  .p-ticket-main > * {
    order: 3;
  }

  .p-ticket-head {
    order: 1;
  }

  .p-ticket-side {
    order: 2;
    margin: 0 0 20px;
  }
}

/* ---------- Pantallas en móvil (<720px) ---------- */

@media (max-width: 719.98px) {
  .list-controls,
  .list-tools,
  .search-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .search-bar .field {
    flex-basis: auto;
    max-width: none;
  }

  /* Bandeja */
  .views {
    padding: 16px 16px 0;
  }

  .list {
    padding: 20px 16px 32px;
  }

  /* Bandeja como tarjetas apiladas (D-26): sin scroll horizontal; la cabecera sigue para lectores */
  .table-wrap:has(.inbox-table) {
    overflow-x: visible;
  }

  .table-wrap:has(.inbox-table) > .inbox-table {
    min-width: 0;
  }

  .inbox-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .inbox-table,
  .inbox-table tbody,
  .inbox-table tr,
  .inbox-table td {
    display: block;
    width: auto;
  }

  .inbox-table tr {
    padding: 12px 0;
    border-bottom: var(--border-width-sm) solid var(--color-border-subtle);
  }

  .table-dense.inbox-table td {
    height: auto;
    padding: 0;
    overflow: visible;
    border: 0;
    white-space: normal;
  }

  .inbox-table .d-only,
  .inbox-table .bulk-check,
  .bulk-bar,
  .filter-select.is-agent,
  .filter-select.is-priority {
    display: none;
  }

  .filter-select.is-company {
    width: 100%;
  }

  .inbox-table .subject-link {
    display: inline;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Ficha del panel */
  .crumbs-bar {
    padding: 12px 16px;
  }

  .crumb {
    height: auto;
    min-height: 32px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .conv-head,
  .props,
  .context-section {
    padding: 16px;
  }

  .props hr {
    margin: 0 -16px;
  }

  .thread-scroll {
    padding: var(--space-xs) 16px 16px;
  }

  .composer-section {
    padding: 0 16px 12px;
  }

  .picker-sheet {
    position: static;
    width: 100%;
    max-width: none;
    margin-top: var(--space-xxs);
  }

  /* Portal: Inicio */
  .waiting-row {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px 16px;
  }

  .waiting-row > .btn,
  .waiting-row > .btn-outline {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    margin-top: var(--space-xs);
  }

  /* Portal: Solicitudes. Filas apiladas sin scroll horizontal (UR-1); la cabecera sigue para lectores */
  .list-filters,
  .list-filters form,
  .search-field {
    width: 100%;
  }

  .search-field {
    flex: 1 1 auto;
  }

  /* Buscador y «Buscar» en la misma fila (la regla general de .search-bar los apilaría) */
  .list-filters form.search-bar {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }

  .list-filters .segmented {
    width: 100%;
    margin-left: 0;
  }

  /* Buscador a todo el ancho en su línea y, debajo, Míos/Todos al 50 % cada uno (D-21) */
  .list-filters .search-group {
    flex-basis: 100%;
  }

  .list-filters .search-group .search-field {
    max-width: none;
  }

  .list-filters .segmented > li,
  .list-filters .segmented > a {
    flex: 1 1 50%;
  }

  .list-filters .segmented li > a {
    width: 100%;
  }

  .list-filters .segmented a {
    justify-content: center;
  }

  .table-wrap:has(.p-table) > .p-table {
    min-width: 0;
  }

  .p-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .p-table,
  .p-table tbody,
  .p-table tr,
  .p-table td {
    display: block;
    width: auto;
  }

  .p-table tr {
    height: auto;
    padding: 12px 0;
    border-bottom: var(--border-width-sm) solid var(--color-border-subtle);
  }

  .p-table td {
    height: auto;
    padding: 0;
    border: 0;
  }

  .p-table .col-subject {
    width: auto;
  }

  .d-only,
  .p-table .d-only {
    display: none;
  }

  .m-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xxs) var(--space-xs);
    margin-top: var(--space-xxs);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    color: var(--color-fg-subtle);
  }

  .replied {
    display: flex;
    width: fit-content;
    margin: var(--space-xxs) 0 0;
  }
}

/* ==========================================================================
   UAT 02.1 (02.1-10, ajustes del usuario). Bloque aparte para facilitar merges:
   A) rail del panel desplegable, B) selector de tema en la cabecera,
   C) buscadores de las listas (Empresas, Portal › Solicitudes).
   ========================================================================== */

/* ---- A) Rail desplegable: 60px plegado; con :hover o con el foco dentro se abre a 240px por encima del contenido
   (no empuja la página) y enseña el nombre de cada destino. El actual sigue en azul Mito. Solo escritorio: en móvil el
   rail no se pinta y manda el menú de la barra superior. ---- */

.rail {
  z-index: 20;
  width: var(--chrome-nav-width);
  overflow: hidden;
  background: var(--color-chrome-bg);
  transition: width .15s ease-out, box-shadow .15s ease-out;
}

.rail:hover,
.rail:focus-within {
  width: 240px;
  box-shadow: var(--shadow-menu);
}

/* Abrir con un pequeño retardo al pasar el ratón: cruzar el rail camino del contenido no lo despliega */
.rail:hover {
  transition-delay: .12s;
}

.rail-mark {
  width: var(--chrome-nav-width);
}

.rail a,
.rail button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 0 calc((var(--chrome-nav-width) - 20px) / 2);
  white-space: nowrap;
}

.rail .icon {
  flex: none;
}

.rail-label {
  font-size: var(--font-size-md);
  font-weight: 600;
  opacity: 0;
  transition: opacity .12s ease-out;
}

.rail:hover .rail-label,
.rail:focus-within .rail-label {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .rail,
  .rail:hover,
  .rail-label {
    transition: none;
  }
}

/* ---- B) Selector de tema (_ThemeSwitch) junto al avatar (panel) o al menú de usuario (portal) ---- */

.theme-switch {
  display: flex;
  align-items: center;
  margin: 0;
}

.theme-switch .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

/* En la cabecera negra del portal: icono blanco atenuado, como el resto del cromo */
.chrome .theme-switch .icon-btn {
  color: var(--color-chrome-fg-muted);
}

.chrome .theme-switch .icon-btn:hover {
  background: var(--color-chrome-hover);
  color: var(--color-chrome-fg);
}

/* Portal: el selector empuja a la derecha y el menú de usuario va pegado a él */
.portal-header-inner > .theme-switch {
  margin-left: auto;
}

.portal-header-inner > .theme-switch + .user-menu {
  margin-left: var(--space-xxs);
}

/* ---- C) Buscadores de lista: campo ancho (el placeholder no se corta) y alineado con «Buscar» (los dos a 40px) ---- */

.search-bar {
  flex-wrap: nowrap;
  align-items: center;
}

.search-bar .search-field {
  flex: 1 1 360px;
  width: auto;
  min-width: min(320px, 100%);
  max-width: 480px;
}

.search-bar .search-field input,
.search-bar > .btn {
  height: var(--control-height-md);
}

.search-bar > .btn {
  flex: none;
}

/* En la cabecera de una lista (Empresas) el formulario crece hasta 600px y queda a la derecha */
.page-head > form.search-bar {
  flex: 0 1 600px;
  justify-content: flex-end;
}

@media (max-width: 719.98px) {
  /* En móvil buscador y «Buscar» siguen en la misma fila (la regla general de .search-bar los apilaría) */
  .search-bar:has(.search-field) {
    flex-direction: row;
    align-items: center;
  }

  .search-bar .search-field {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }

  .page-head > form.search-bar {
    flex-basis: 100%;
  }
}

/* ---------- Informes (05-02) ---------- */

.report-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: flex-end;
  margin: 0 0 var(--space-md);
}

.report-filters .field {
  width: 160px;
  margin: 0;
}

.report h3 {
  margin: var(--space-md) 0 var(--space-xs);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-md);
}

.report + .report {
  margin-top: var(--space-md);
}

/* 07-11: el % en plazo es la cifra que se lee primero */
.report .rate {
  font-weight: var(--font-weight-semibold);
}

/* 05-06: descargas del informe de horas */
.report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0 0 var(--space-md);
}

.table tfoot td,
.table tfoot th {
  font-weight: var(--font-weight-semibold);
  border-top: var(--border-width-sm) solid var(--color-border-default);
}

/* ---------- Salud de la ingesta (04-12) ---------- */

.ingest-counts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
  gap: var(--space-md);
  margin: 0;
}

.ingest-counts dt {
  color: var(--color-fg-subtle);
}

.ingest-counts dd {
  margin: var(--space-xxs) 0 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

.ingest-table .col-from,
.ingest-table td.col-subject {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ingest-table .cell-sub {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-fg-subtle);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.ingest-actions {
  display: flex;
  gap: var(--space-xs);
}

.ingest-actions form {
  margin: 0;
}

/* ---------- 05-09: horas en el portal (HRS-08) y «Ajustar saldo» en la ficha de empresa (HRS-10) ---------- */
.balance-card {
  margin-top: 32px;
}

.balance-card h2 {
  margin: 0 0 var(--space-xs);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-lg);
}

.balance-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.balance-row > p,
.balance-card > .muted {
  min-width: 0;
  margin: 0 0 var(--space-xxs);
}

.p-hours, .p-dev {
  margin-top: 16px;
  padding-top: 16px;
  border-top: var(--border-width-sm) solid var(--color-border-subtle);
}

.p-hours h2, .p-dev h2 {
  margin: 0 0 var(--space-xxs);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-md);
}

.p-hours .entry-head,
.p-hours .entry-desc {
  margin: 0;
  overflow-wrap: anywhere;
}

.balance-section h3 {
  margin: 20px 0 var(--space-xs);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-md);
}

.balance-form {
  margin-top: 20px;
  padding-top: 20px;
  border-top: var(--border-width-sm) solid var(--color-border-subtle);
}

.balance-form h3 {
  margin-top: 0;
}

/* ---------- Cola «Sin clasificar» y detalle del correo (04-10) ---------- */

/* La cola reutiliza la tabla de la bandeja (filas enteras clicables y tarjetas en móvil) con solo cuatro columnas */
.table-wrap > .email-queue {
  min-width: 720px;
}

.email-queue th.col-from {
  width: 240px;
}

.email-subject {
  overflow-wrap: anywhere;
}

/* Original del correo: iframe sandbox sin scripts (T-04-50); la página /Original lleva su propia CSP */
.email-original {
  display: block;
  width: 100%;
  height: 480px;
  border: var(--border-width-sm) solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-default);
}

.email-files .attachment-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Personas en copia y origen del mensaje (04-11, D-07, D-09) ---------- */
/* Etiqueta de CC: control compacto de 32px y radio 2, sobre .chip (que en Empresas sigue siendo la píldora de 24px) */
.cc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip.cc-chip {
  height: 32px;
  max-width: 100%;
  padding: 0 0 0 var(--space-xs);
  border-color: var(--color-border-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-fg-default);
  font-size: var(--font-size-sm);
  line-height: 16px;
}

.cc-chip-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cc-chip form {
  display: contents;
}

.chip-remove {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-fg-subtle);
  cursor: pointer;
}

.chip-remove:hover {
  color: var(--color-fg-default);
}

.chip-remove:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.chip-remove svg {
  width: 16px;
  height: 16px;
}

.msg-original {
  margin-left: auto;
}

/* ---------- 03.1: plantillas de correo ---------- */
/* Lista: cabe en 390 px (sin el min-width de .table-wrap), el nombre del caso parte en varias líneas. */
.table-wrap > .templates-table {
  min-width: 0;
}

.templates-table td {
  height: var(--table-row-md);
}

.templates-table .col-audience { width: 96px; }
.templates-table .col-lang { width: 120px; }

.templates-table td.col-subject,
.templates-table .subject-link {
  white-space: normal;
  overflow-wrap: anywhere;
}

.templates-table .row-sub {
  display: none;
}

@media (max-width: 719.98px) {
  .templates-table .row-sub {
    display: block;
  }
}

/* Editor: una columna; a partir de 900 px, formulario y vista previa (03.1-04) lado a lado. */
.template-editor {
  display: grid;
  gap: var(--space-lg);
  align-items: start;
}

@media (min-width: 900px) {
  .template-editor {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.template-form h2 {
  margin: 0 0 var(--space-md);
}

.template-form .field + .field {
  margin-top: var(--space-md);
}

.template-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin: 24px 0 var(--space-md);
  color: var(--color-fg-subtle);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.template-back {
  display: inline-block;
  margin-bottom: var(--space-xs);
}

/* Marcadores permitidos bajo cada campo (mismo estilo que .canned-vars code). */
.placeholders {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xxs) var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-fg-subtle);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.placeholders code {
  color: var(--color-fg-default);
  font-family: var(--font-mono);
}

.template-form .field-help {
  display: grid;
  gap: var(--space-xxs);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.template-form .field-help p {
  margin: 0;
}

.template-form .actions .link-danger {
  margin-left: auto;
}

/* Fase 12 · marco HTML (código), miniaturas e imágenes de la biblioteca (12-UI-SPEC). */
.code-input {
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  resize: vertical;
}

.image-thumb {
  display: block;
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  /* El correo es claro: la miniatura va sobre blanco en los dos temas (como .qr-plate). */
  background: #FFFFFF;
}

.image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.templates-images {
  min-width: 0;
}

.templates-images td {
  vertical-align: middle;
}

.templates-images th:nth-child(1) { width: 72px; }
.templates-images th:nth-child(3) { width: 128px; }
.templates-images th:nth-child(4) { width: 160px; }
.templates-images th:nth-child(5) { width: 96px; }

.field input[type="file"] {
  height: auto;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
}

/* 03.1-04 · Vista previa: HTML en iframe sandbox y texto plano; pestañas con radios y :has() (sin JS). */
.template-preview h2 {
  margin: 0 0 var(--space-xs);
}

@media (min-width: 900px) {
  .template-preview {
    position: sticky;
    top: var(--space-md);
    align-self: start;
  }
}

.preview-note {
  margin: 0 0 var(--space-md);
  color: var(--color-fg-subtle);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.preview-meta {
  margin: 0 0 var(--space-md);
  padding: 16px;
  border-radius: 4px;
  background: var(--color-bg-subtle);
  overflow-wrap: anywhere;
}

.preview-tabs {
  display: flex;
  margin: 0 0 var(--space-xs);
  padding: 0;
  border: 0;
  border-bottom: var(--border-width-sm) solid var(--color-border-default);
}

.preview-tabs label {
  display: flex;
  align-items: center;
  height: 40px;
  margin-right: 24px;
  padding: 0 var(--space-xs);
  color: var(--color-fg-subtle);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-md);
  cursor: pointer;
}

.preview-tabs label:hover,
.preview-tabs label:has(:checked) {
  color: var(--color-fg-default);
}

.preview-tabs label:has(:checked) {
  box-shadow: inset 0 -3px 0 var(--color-border-primary-emphasis);
}

.preview-tabs label:has(:focus-visible) {
  box-shadow: var(--focus-ring-inset);
}

.template-preview:has(#pv-text:checked) .preview-panel-html,
.template-preview:has(#pv-html:checked) .preview-panel-text {
  display: none;
}

/* El correo declara color-scheme: light: siempre blanco en los dos temas (como .qr-plate). */
iframe.preview-frame {
  display: block;
  width: 100%;
  max-width: 600px;
  height: 560px;
  border: var(--border-width-sm) solid var(--color-border-default);
  border-radius: 4px;
  background: #FFFFFF;
  color-scheme: light;
}

@media (min-width: 900px) {
  iframe.preview-frame {
    height: 720px;
  }
}

pre.preview-text {
  max-width: 600px;
  max-height: 720px;
  margin: 0;
  overflow-y: auto;
  padding: 16px;
  border-radius: 4px;
  background: var(--color-bg-subtle);
  color: var(--color-fg-default);
  font: 14px/20px var(--font-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* /03.1-04 */
/* ---------- /03.1 ---------- */

/* === Fase 6: bolsas, extracto, áreas y fusión === */

/* Inicio del portal: una tarjeta de saldo por bolsa */
.balance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.balance-grid > .balance-card {
  margin-top: 0;
}

/* Saldos por bolsa en la columna de contexto de la ficha */
.pool-balances {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pool-balances li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  min-height: 32px;
}

.pool-balances .pool-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pool-balances .num {
  flex: none;
  font-weight: var(--font-weight-semibold);
}

/* Barra de ruta con varias bolsas */
.crumbs {
  flex-wrap: wrap;
}

.crumb-pool + .crumb-pool::before {
  content: " · ";
}

/* Tabla de bolsas de la ficha de empresa */
/* 06-12: las acciones de la fila sin el margen superior de .actions, alineadas con el resto de celdas */
.table td > .actions {
  margin-top: 0;
}

.table-wrap > .pools-table {
  min-width: 720px;
}

/* Extracto de horas (portal y panel) */
.statement-meta {
  margin-bottom: var(--space-md);
}

.statement-totals {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
  gap: var(--space-md);
  margin: 0 0 var(--space-md);
}

.statement-totals dt {
  color: var(--color-fg-subtle);
  font-size: var(--font-size-md);
}

.statement-totals dd {
  margin: var(--space-xxs) 0 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-lg);
}

.table-wrap > .statement-table {
  min-width: 760px;
}

.statement-table tr.month-row th {
  background: var(--color-bg-subtle);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.statement-table tr.opening-row {
  background: var(--color-bg-subtle);
}

.statement-table tr.is-info {
  color: var(--color-fg-subtle);
}

/* 06-12: los textos .visually-hidden (absolutos) de una tabla se quedan dentro de su scroll y no ensanchan la página a 390px */
.table-wrap {
  position: relative;
}

/* 06-12: fecha y número de ticket en una sola línea */
.nowrap {
  white-space: nowrap;
}

.statement-table td.col-wrap {
  max-width: 48ch;
}

/* Fusión */
.merged-list h2 {
  margin: 0 0 var(--space-xs);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-md);
}

/* Hoja de impresión del extracto: A4 vertical y siempre en claro (D-15) */
@media print {
  @page {
    size: A4 portrait;
    margin: 16mm 12mm;
  }

  :root,
  :root[data-theme] {
    color-scheme: light;
    --color-bg-default: #fff;
    --color-bg-subtle: var(--grey-100);
    --color-fg-default: var(--mito-black);
    --color-fg-subtle: var(--grey-700);
    --color-border-default: var(--grey-300);
    --color-border-subtle: var(--grey-200);
    --color-fg-danger: var(--red-700);
    --color-fg-primary: var(--mito-blue-700);
  }

  .rail,
  .panel-topbar,
  .panel-header,
  .portal-header,
  .skip-link,
  .flash,
  .menu,
  .menu-sheet,
  .no-print {
    display: none !important;
  }

  body,
  .panel-main,
  .portal-main {
    margin: 0;
    padding: 0;
    max-width: none;
  }

  .card {
    border: 0;
    padding: 0;
  }

  .page-head h1 {
    font-size: 22px;
    line-height: 28px;
  }

  .table-wrap {
    overflow: visible;
  }

  .table-wrap > .statement-table,
  .statement-table {
    min-width: 0;
    width: 100%;
    font-size: 12px;
    line-height: 16px;
  }

  .statement-table th,
  .statement-table td {
    height: auto;
    padding: 4px 8px;
  }

  thead {
    display: table-header-group;
  }

  tfoot {
    display: table-row-group;
  }

  tr {
    break-inside: avoid;
  }

  tr.month-row {
    break-after: avoid;
  }

  .statement-totals,
  .statement-meta {
    break-inside: avoid;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  .month-row,
  .opening-row {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}
/* === /Fase 6 === */

/* === 07-03: SLA, horario laboral y satisfacción (07-UI-SPEC) === */

/* Bandeja con columna SLA (07-08): 128 px más de ancho mínimo */
.inbox-table th.col-sla { width: 128px; }

.table-wrap > .inbox-table.has-sla {
  min-width: 1128px;
}

/* Ajustes de servicio: días laborables */
.workdays {
  min-width: 0;
  margin: 0 0 var(--space-md);
  padding: 0;
  border: 0;
}

.workdays legend {
  margin: 0 0 var(--space-xs);
  padding: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-md);
}

.workdays .workdays-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.workdays label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--control-height-md);
}

/* Horario: inicio y fin */
.time-range {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.time-range input {
  width: 160px;
  height: var(--control-height-md);
}

/* Alta de festivo */
.holiday-add {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-sm);
}

.holiday-add input[type="date"] { width: 200px; }
.holiday-add input[type="text"] { width: 280px; }

/* Tiempos objetivo por prioridad: cabe sin min-width */
.table-wrap > .targets-table {
  min-width: 0;
}

.targets-table input {
  width: 112px;
  height: var(--control-height-sm);
  text-align: right;
}

.targets-table input[aria-invalid="true"] {
  border-color: var(--color-border-danger);
}

/* Resumen de los informes SLA y satisfacción */
.report-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin: 0 0 var(--space-md);
}

.report-summary dt {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--color-fg-subtle);
}

.report-summary dd {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xl);
  font-variant-numeric: tabular-nums;
}

/* Ficha: bloques SLA y valoración */
.props-sla dl,
.props-csat dl {
  display: grid;
  gap: var(--space-xxs);
  margin: 0;
}

.props-sla dt,
.props-csat dt {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-sm);
  color: var(--color-fg-subtle);
}

.props-sla dd,
.props-csat dd {
  margin: 0;
}

.props-csat .csat-comment {
  margin: var(--space-xs) 0 0;
  padding-left: var(--space-sm);
  border-left: var(--border-width-md) solid var(--color-border-default);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Informe de satisfacción: comentarios */
.table-wrap > .csat-comments {
  min-width: 720px;
}

.csat-comments td.col-comment {
  min-width: 280px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 719.98px) {
  /* La bandeja en tarjetas no fuerza ancho, también con la columna SLA */
  .table-wrap:has(.inbox-table) > .inbox-table.has-sla {
    min-width: 0;
  }

  .time-range > *,
  .time-range input,
  .holiday-add > *,
  .holiday-add input[type="date"],
  .holiday-add input[type="text"] {
    width: 100%;
  }

  /* Encuesta: Bien y Mal en columna, 40 px de alto */
  .auth-page .radio-option {
    align-items: center;
    min-height: var(--control-height-md);
    margin: 0;
  }
}
/* === /07-03 === */

/* === 08-02: separador "o" de la tarjeta de acceso === */
.auth-or {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-fg-subtle);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.auth-or::before,
.auth-or::after {
  content: "";
  flex: 1;
  height: var(--border-width-sm);
  background: var(--color-border-default);
}
/* === /08-02 === */

/* === Fase 9 · Azure DevOps (09-02) === */
.props-devops {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.devops-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xxs) var(--space-xs);
}

/* El icono va detrás del texto y alineado con la línea */
.devops-link .icon {
  margin-left: var(--space-xxs);
  vertical-align: -3px;
}

.devops-form {
  max-width: 480px;
}

/* Una URL larga pegada en el campo de enlazar no ensancha la página a 390px */
.props-devops input {
  width: 100%;
  min-width: 0;
}
/* === /09-02 === */