/* Talk2Doc base styles — extracted from base.html for CSP (script/style-src hardening). */
    /* WCAG 2.1 AA — accesibilidad base (Task #110).
       Skip-link off-screen hasta foco; foco visible global vía
       :focus-visible para usuarios de teclado (no afecta clics ratón). */
    .skip-link {
      position: absolute; top: -100px; left: 8px; z-index: 10000;
      padding: 10px 16px; background: #2c5171; color: white;
      text-decoration: none; border-radius: 0 0 8px 8px;
      font-weight: 600; font-size: 14px;
    }
    .skip-link:focus { top: 0; outline: 3px solid #ff8c3c; }
    /* Foco visible global — sólo cuando llegó por teclado (focus-visible),
       evitando halos antiestéticos en clics de ratón. Color naranja pibiCo
       contrasta 6.5:1 sobre blanco y 3.8:1 sobre el azul de fondo. */
    :focus-visible {
      outline: 2px solid #ff8c3c;
      outline-offset: 2px;
      border-radius: 4px;
    }
    /* Inputs y áreas editables: reforzamos el borde para que el outline
       respete el border-radius nativo. */
    input:focus-visible, textarea:focus-visible, select:focus-visible {
      outline-offset: 0;
    }

    /* RGPD aviso de privacidad — banner inferior fijo, se muestra una sola
       vez por navegador. Se oculta tras click en "Aceptar" (localStorage). */
    #cookie-consent-banner {
      position: fixed; left: 16px; right: 16px; bottom: 16px;
      background: rgba(255,255,255,0.97); backdrop-filter: blur(8px);
      border: 1px solid rgba(70,130,180,0.30); border-radius: 12px;
      padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center;
      gap: 12px; justify-content: space-between;
      box-shadow: 0 4px 20px rgba(0,0,0,0.12);
      z-index: 9999; font-size: 13px; color: #2c5171; line-height: 1.5;
    }
    #cookie-consent-banner[hidden] { display: none !important; }
    .cookie-consent-text { flex: 1 1 320px; }
    .cookie-consent-text strong { color: #2c5171; margin-right: 6px; }
    .cookie-consent-text a { color: #4682b4; text-decoration: underline; }
    .cookie-consent-actions { display: flex; gap: 8px; flex-wrap: wrap; }
    .cookie-consent-btn {
      padding: 7px 14px; font-size: 12px; border-radius: 8px;
      border: 1px solid #4682b4; background: white; color: #2c5171;
      cursor: pointer; font-weight: 600;
    }
    .cookie-consent-btn:hover { background: #f0f6fb; }
    .cookie-consent-primary {
      background: linear-gradient(135deg, #4682b4, #2c5171);
      color: white; border: none;
    }
    .cookie-consent-primary:hover { filter: brightness(1.08); }

/* ══════════════════════════════════════════════════════════════════════════
   SOPORTE — el ticket, escrito una sola vez

   Todo esto vivía en atributos `style` dentro de `base.html` y de
   `t2d_base_ui.js`: 12,5 px aquí, 10,5 px allá, `#c0392b` a pelo, bordes
   `rgba(70,130,180,0.35)` repetidos catorce veces. Por eso Soporte parecía de
   otra aplicación — porque literalmente no compartía una sola regla con ella.

   Va en `t2d_base.css` y NO en `app_shell.css` a propósito: el mismo marcado
   se usa en el panel deslizante de la portada y de la guía, que no cargan la
   hoja del explorador. Los valores son los de las escalas cerradas del
   repaso: radio `--radius-sm`, tipografía en los pasos 9·10·11·12·13, y el
   rótulo en versalitas con su `0.12em`.
   ══════════════════════════════════════════════════════════════════════════ */

/* La tira de dos pestañas del panel. En el explorador NO se usa: allí la
   navegación es la tarjeta izquierda, y el módulo la retira. */
.t2d-sup-tabstrip {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  padding-bottom: 0;
  border-bottom: 1px solid rgba(70, 130, 180, 0.18);
}
.t2d-sup-tab {
  padding: 3px 12px;
  margin-bottom: -1px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: #8aa4bd;
  cursor: pointer;
}
.t2d-sup-tab.active { color: #2c5171; border-bottom-color: #4682b4; }

/* ---- Formulario ---- */
.t2d-sup-intro { margin: 0 0 8px; font-size: 13px; line-height: 1.2; color: #444; }
.t2d-sup-label {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: #2c5171;
}
.t2d-sup-field {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 8px;
  padding: 3px 8px;
  border: 1px solid rgba(70, 130, 180, 0.35);
  border-radius: var(--radius-sm);
  background: #fff;
  color: #333;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1;
}
textarea.t2d-sup-field { line-height: 1.2; resize: vertical; margin-bottom: 4px; }
.t2d-sup-hint { margin: 0 0 4px; font-size: 11px; line-height: 1; color: #9ca3af; }
.t2d-sup-atts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.t2d-sup-send-row { display: flex; justify-content: flex-end; gap: 8px; }
.t2d-sup-msg { margin: 6px 0 0; font-size: 12px; line-height: 1; }

/* La lista scrollea DENTRO del panel deslizante. En el explorador el módulo se
   la lleva a la tarjeta izquierda, que ya tiene su propio scroll, y entonces
   este selector deja de existir solo — que es justo lo que se quiere. */
#support-panel #support-list { max-height: calc(100vh - 270px); overflow-y: auto; }

/* ══════════════════════════════════════════════════════════════════════════
   UN FILTRO SEGMENTADO, declarado UNA sola vez

   Había dos, con dos aspectos, a treinta píxeles uno de otro en la misma
   pantalla del Asistente: el «Ver: Mis conversaciones / Todas del
   repositorio» de la lista de hilos (borde gris, activo en degradado) y el
   «Conversaciones / Valoradas / Útiles / Incorrectas» de Valoraciones
   (sin borde, activo en azul plano). Dos formas de decir «elige uno de
   estos» en el mismo sitio es justo lo que hace que una pantalla no se
   entienda a la primera.

   Un segmentado NO es una pestaña: no cambia de vista, filtra la que ya
   estás viendo. Por eso no se parece a los finger tabs ni a la tira de dos
   pestañas del panel de Soporte.
   ══════════════════════════════════════════════════════════════════════════ */
/* SUELTAS, no unidas. Se probó como barra segmentada —un borde alrededor de
   todo y divisorias dentro— y no es lo que hace el resto de la aplicación:
   los filtros de Búsqueda y de Filtros son fichas sueltas con hueco, y son
   los que se ven a todas horas. Se manda el más usado.
   La exclusividad la sigue diciendo el estado: sólo una queda marcada. */
.t2d-seg {
  display: inline-flex;
  gap: 4px;
}
.t2d-seg-opt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* 4×9, que es EXACTAMENTE lo que mide una ficha de faceta
     (`.t2d-srch-chip`). Los dos controles filtran y se ven en la misma
     columna; estaban a 3×10 y 4×9, dos medidas para el mismo bocado. */
  padding: 4px 9px;
  border: 1px solid rgba(70, 130, 180, 0.18);
  border-radius: var(--radius-sm);
  background: rgba(70, 130, 180, 0.08);
  color: #2c5171;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}
.t2d-seg-opt:hover:not(.active) { background: rgba(70, 130, 180, 0.16); }
/* Marcada en tinte y no en azul macizo: es exactamente lo que hace una ficha
   de faceta marcada (`.t2d-srch-chip.active`), que es la vecina con la que se
   compara. */
.t2d-seg-opt.active {
  background: rgba(70, 130, 180, 0.14);
  border-color: rgba(70, 130, 180, 0.45);
  color: var(--accent-color, #2c5171);
  font-weight: 600;
}
.t2d-seg-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light, #666);
  white-space: nowrap;
}

/* ---- Paginador ---- */
.t2d-pager {
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(70, 130, 180, 0.10);
  font-size: 11px;
  color: #577793;
}
/* Debajo de la lista en vez de encima: misma pieza, la raya del otro lado.
   Lo usan el historial de conversaciones y Valoraciones, que paginan al pie. */
.t2d-pager-foot {
  justify-content: center;
  margin-bottom: 0;
  padding: 6px 10px;
  border-bottom: none;
  border-top: 1px solid rgba(70, 130, 180, 0.10);
}
.t2d-pager-left { display: inline-flex; align-items: center; gap: 6px; }
.t2d-pager-pages { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.t2d-pager-size,
.t2d-pager-btn {
  min-width: 24px;
  padding: 2px 6px;
  border: 1px solid rgba(70, 130, 180, 0.35);
  /* Un solo radio, como el resto de controles. Nada de cápsulas. */
  border-radius: var(--radius-sm);
  background: #fff;
  color: #577793;
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}
.t2d-pager-btn:hover:not(:disabled):not(.current) { background: rgba(70, 130, 180, 0.08); }
.t2d-pager-btn:disabled { opacity: 0.45; cursor: default; }
.t2d-pager-btn.current {
  background: #4682b4;
  border-color: #4682b4;
  color: #fff;
  font-weight: 600;
  cursor: default;
}

/* ---- La fila de un ticket ----
   Mismo gesto que `.t2d-lib-card` en Bibliotecas y Conectores: sin línea
   divisoria, el fondo es quien marca el hover y el elegido. Una lista con
   rayas y otra sin ellas es exactamente la sensación de «cada pestaña la hizo
   otro» que se está quitando. */
.t2d-sup-row {
  padding: 6px 8px 6px 10px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.14s, box-shadow 0.14s;
}
.t2d-sup-row:hover { background: rgba(70, 130, 180, 0.07); }
.t2d-sup-row.active {
  background: rgba(70, 130, 180, 0.14);
  box-shadow: 0 2px 8px rgba(70, 130, 180, 0.18);
}
.t2d-sup-row-top { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.t2d-sup-row-subject {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-weight: 600;
  color: #1a3a54;
}
.t2d-sup-row.active .t2d-sup-row-subject { font-weight: 700; color: var(--accent-color); }
.t2d-sup-count { color: #4682b4; font-size: 10px; font-weight: 400; }
.t2d-sup-date { white-space: nowrap; color: #9ca3af; font-size: 11px; }
.t2d-sup-row-bot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 3px; }

/* Botón de icono suelto (papelera). Atenuado, se enciende al acercarse — no
   escondido hasta pasar el ratón: sin ratón no aparecería nunca. */
.t2d-sup-iconbtn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: #9ca3af;
  font-size: 13px;
  line-height: 1;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.14s, background 0.14s;
}
.t2d-sup-iconbtn:hover { opacity: 1; background: rgba(70, 130, 180, 0.10); color: #2c5171; }

/* ---- Chapas de estado y de tipo ----
   Fondo del tramo 50 y texto del 800 de la paleta pastel, que es la regla de
   marca para las chapas. Antes eran blanco sobre color pleno: «Abierto» salía
   en rojo de alarma cuando abierto no es un error, es el estado normal de un
   ticket recién enviado. */
.t2d-sup-pill {
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.03em;
}
.t2d-sup-pill-abierto    { background: var(--sky-50, #EEF6FF);      color: var(--sky-800, #1A4A7A); }
.t2d-sup-pill-en_curso   { background: var(--marigold-50, #FFF8E6); color: var(--marigold-800, #7A5A10); }
.t2d-sup-pill-resuelto   { background: var(--mint-50, #ECFDF5);     color: var(--mint-800, #1A5C3A); }
.t2d-sup-pill-error         { background: var(--rose-50, #FFF0F0);     color: var(--rose-800, #9E3A4A); }
.t2d-sup-pill-funcionalidad { background: var(--lavender-50, #F4F0FF); color: var(--lavender-800, #4A3580); }
.t2d-sup-pill-mejora        { background: var(--orchid-50, #FDF0F8);   color: var(--orchid-800, #7A2E5A); }

/* ---- El ticket abierto ---- */
.t2d-sup-detail-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  line-height: 1;
}
.t2d-sup-detail-id { font-family: var(--font-mono); font-weight: 700; color: #2c5171; }
.t2d-sup-detail-subject {
  margin-top: 5px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: #1a3a54;
}
/* El color va explícito: sin él hereda el azul de acero de la tarjeta del
   explorador y el cuerpo del ticket se lee como si fuera un enlace. */
.t2d-sup-quote {
  margin-top: 4px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  background: #f5f7fa;
  color: #333;
  font-size: 12px;
  line-height: 1.3;
  white-space: pre-wrap;
}
/* El rótulo en versalitas, con el mismo `0.12em` que los del explorador. */
.t2d-sup-section {
  margin: 8px 0 3px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light, #666);
}
.t2d-sup-note { margin-top: 6px; font-size: 11px; line-height: 1.3; color: #9ca3af; }
.t2d-sup-msg-item {
  margin-top: 4px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: #f5f7fa;
}
.t2d-sup-msg-item.admin { background: #eef4fa; }
.t2d-sup-msg-who { margin-bottom: 2px; font-size: 10px; line-height: 1; color: #888; }
.t2d-sup-msg-body { font-size: 12px; line-height: 1.3; color: #333; white-space: pre-wrap; }
.t2d-sup-reply { display: flex; align-items: flex-end; gap: 6px; margin-top: 8px; }
.t2d-sup-reply textarea {
  flex: 1;
  padding: 3px 8px;
  border: 1px solid rgba(70, 130, 180, 0.35);
  border-radius: var(--radius-sm);
  outline: none;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.3;
  resize: vertical;
}
.t2d-sup-reply-send {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-sm);
  background: #4682b4;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
.t2d-sup-reply-send:hover { background: #2c5171; }
.t2d-sup-back {
  margin-bottom: 6px;
  padding: 0;
  border: none;
  background: none;
  color: #4682b4;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.t2d-sup-empty, .t2d-sup-loading { font-size: 12px; line-height: 1.3; color: #9ca3af; }
.t2d-sup-error { font-size: 12px; line-height: 1.3; color: #c0392b; }

/* embed-mobile (Android WebView host) — .embed-mobile scope, safe to always load */
  /* Android / WebView host: hide chrome, full-viewport main, transparent bg */
  .embed-mobile .app-header,
  .embed-mobile .app-footer,
  .embed-mobile .pibico-tab-row,
  .embed-mobile #cookie-consent-banner { display: none !important; }
  .embed-mobile main.app-main { height: 100vh !important; padding-top: 0 !important; }
  .embed-mobile { background: transparent !important; }

/* ── El pie global compone una sola línea ──
   `pibico.css` dice `.app-footer .footer-link-btn { line-height: inherit }`,
   así que el botón hereda el interlineado del pie (1 → 12 px). Los `<span>`
   de al lado NO lo heredan: los coge una regla por elemento —
   `p, li, td, th, label, span { line-height: 1.2 }`— que les da 14,4. Dos
   alturas de línea distintas en una fila centrada dejan el texto del botón
   0,2 px por debajo del de sus vecinos. Es poco y se ve: «Acerca de» va
   colgando del resto.

   Se igualan por donde manda el pie. No se toca `pibico.css`: es byte a byte
   la misma en api_auth, api_talk2doc y api_script. Va aquí, en la hoja que
   cargan TODAS las páginas (portada, guía y explorador), porque el pie es de
   las tres y no solo del explorador. */
.app-footer > span,
.app-footer > span > span,
.app-footer .footer-sep,
.app-footer a { line-height: inherit; }