/*
  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;
  /* 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 azul Mito (blanco sobre #006cb8 = 5.3:1). */
  --color-chrome-bg: var(--mito-black);
  --color-chrome-current: var(--mito-blue-700);
  --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-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-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 */
.btn-primary {
  border-color: var(--color-border-primary-emphasis);
  background: var(--color-bg-primary-emphasis);
  color: var(--color-fg-on-emphasis);
}

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

.btn-primary:active {
  border-color: var(--color-bg-primary-emphasis-active);
  background: var(--color-bg-primary-emphasis-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);
  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);
}

.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) ---------- */

/* Dos columnas: panel de marca negro Mito a la izquierda y la tarjeta centrada sobre fondo neutro a la derecha,
   con el idioma arriba a la derecha de esa columna. */
body.auth-page {
  display: grid;
  grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg-subtle);
}

.auth-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-lg);
  padding: 48px clamp(32px, 6vw, 80px);
  border-inline-end: var(--border-width-sm) solid var(--color-chrome-edge);
  background: var(--color-chrome-bg);
  color: var(--color-chrome-fg);
}

.auth-side {
  position: relative;
  display: grid;
  place-items: center;
  padding: 72px 16px 48px;
}

.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: 400px;
}

.auth-logo {
  display: flex;
}

.auth-logo .brand-logo {
  width: auto;
  height: 96px;
}

.auth-brand-name {
  margin: 0;
  padding-top: var(--space-lg);
  border-top: var(--border-width-sm) solid var(--color-chrome-divider);
  font-size: var(--font-size-xxxl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xxxl);
  overflow-wrap: anywhere;
}

.auth-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: var(--space-lg);
  border: var(--border-width-sm) solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-default);
}

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

.auth-help {
  margin: 24px auto 0;
  color: var(--color-fg-subtle);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  text-align: center;
}

/* ---------- 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,
.btn-primary:focus-visible {
  box-shadow: inset 0 0 0 3px var(--color-chrome-fg);
  opacity: 1;
}

/* 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: el panel de marca pasa a cabecera compacta encima del formulario */
  body.auth-page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  .auth-brand {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: var(--space-md);
    padding: 12px 16px;
    border-inline-end: 0;
    border-bottom: var(--border-width-sm) solid var(--color-chrome-edge);
  }

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

  .auth-brand-name {
    padding: 0 0 0 var(--space-md);
    border-top: 0;
    border-inline-start: var(--border-width-sm) solid var(--color-chrome-divider);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-lg);
  }

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

  .auth-card {
    padding: 24px;
  }

  /* 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;
}

.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;
}

.attachment-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

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

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

.attachment-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  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 === */