/* ============================================================================
   HomeIDS · componentes-nuevos.css
   SOLO lo nuevo o modificado respecto de homeids-ui.css. Se carga después.
   Mismas reglas: tokens existentes, paleta rojo/azul, animación solo CSS.
   ========================================================================= */

/* ------------------------------------------------------- 1. SHELL DE LA APP
   Antes estaba inline en hub-areas.html. Ahora son clases reutilizables. */
/* <body> tiene display:flex (fila) sin flex-direction propio para las capas
   fixed (cortina de marca, modales, IDSito) -- sin un ancho explícito acá,
   .app-shell como flex item se dimensionaba según el ancho "preferido" de
   su contenido en vez de llenar el viewport: un módulo con poco contenido
   angosto (ej. Mis Estadísticas) dejaba a .app-shell entero más angosto que
   uno con grillas anchas (ej. Hub de Áreas), variando el margen en blanco
   de la derecha según qué módulo estuviera activo. */
.app-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; width: 100%; color: var(--text-dark); overflow-x: clip; }
.app-side {
  position: sticky; top: 0; align-self: start; min-height: 100vh;
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px 14px;
  background: var(--card-bg);
  border-right: 1px solid var(--border);
  box-shadow: var(--depth-1);
  z-index: 50;
  transition: transform var(--motion-base) var(--ease-enter);
}

/* Colapso manual del sidebar en escritorio (botón en .app-top-actions,
   estado persistido en localStorage). El ancho del track del grid cambia de
   golpe (sin transition -- no se anima "width"/"grid-template-columns", solo
   transform, según la regla del sistema); el sidebar mantiene su ancho
   propio y se desliza fuera de pantalla con translateX, así que lo único que
   se ve animar es ese deslizamiento, nunca un layout resize. */
/* Al reabrir el sidebar (desktop), los ítems entran con una demora
   escalonada muy corta en vez de aparecer todos de golpe en el mismo
   instante -- se nota más al usarlo seguido que un efecto puramente
   decorativo. Nunca corre mientras el sidebar está colapsado (ahí el panel
   entero está fuera de pantalla, no hace falta animar nada adentro). */
.app-side .nav-item {
  transition: transform var(--motion-fast) var(--ease-tech), opacity var(--motion-fast) var(--ease-tech), background-color var(--motion-fast) var(--ease-tech), color var(--motion-fast) var(--ease-tech);
}
@media (min-width: 769px) {
  .app-shell:not(.is-sidebar-collapsed) .app-side .nav-item {
    animation: nav-item-in var(--motion-fast) var(--ease-enter) both;
  }
  .app-side .nav-item:nth-child(1) { animation-delay: 0.01s; }
  .app-side .nav-item:nth-child(2) { animation-delay: 0.03s; }
  .app-side .nav-item:nth-child(3) { animation-delay: 0.05s; }
  .app-side .nav-item:nth-child(4) { animation-delay: 0.07s; }
  .app-side .nav-item:nth-child(5) { animation-delay: 0.09s; }
  .app-side .nav-item:nth-child(6) { animation-delay: 0.11s; }
  .app-side .nav-item:nth-child(7) { animation-delay: 0.13s; }
  .app-side .nav-item:nth-child(8) { animation-delay: 0.15s; }
  .app-side .nav-item:nth-child(n+9) { animation-delay: 0.17s; }
}
@keyframes nav-item-in {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (min-width: 769px) {
  .app-shell.is-sidebar-collapsed { grid-template-columns: 0 1fr; }
  .app-shell.is-sidebar-collapsed .app-side {
    width: var(--sidebar-w);
    transform: translateX(-101%);
    pointer-events: none;
  }
}
.app-col { min-width: 0; display: flex; flex-direction: column; }
.app-main { display: flex; flex-direction: column; gap: 30px; padding: 28px 28px 90px; width: 100%; box-sizing: border-box; }

/* header global de la app: logo, título, buscador, tema, estado */
.app-top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 28px;
  background: var(--surface-veil);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid var(--border);
}
.app-top-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; white-space: nowrap; flex: none; }
.app-top-title strong { font-family: var(--font-heading-bold); font-weight: 700; font-size: 0.9375rem; letter-spacing: -0.01em; }
.app-top-title span { font-size: 0.75rem; color: var(--text-muted); }
.app-top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* el PNG del logo trae fondo blanco opaco: placa deliberada para que lea
   igual en light y en dark */
.brand-plate {
  display: block; width: 100%; max-width: 172px;
  margin: 0; padding: 6px 10px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--card-radius-sm);
}
.brand-plate--sm { max-width: 118px; padding: 4px 8px; }

/* chip de usuario del sidebar */
.user-chip {
  margin-top: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius-sm);
  background: var(--surface-sunken);
}
.user-chip-avatar {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--grad-primary);
  color: #fff;
  font-family: var(--font-mono); font-size: 0.8125rem;
}
.user-chip-name { font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip-role { font-size: 0.6875rem; color: var(--text-muted); }

@media (max-width: 1080px) { .app-top-title { display: none; } }

@media (max-width: 768px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-side {
    position: fixed; left: 0; top: 0; z-index: 80;
    width: var(--sidebar-w);
    transform: translateX(-101%);
    transition: transform var(--motion-base) var(--ease-enter);
  }
  .app-side.is-open { transform: none; }
  .app-main { padding: 20px 16px 80px; }
  /* Bajo 768px ya existe el botón hamburguesa (#mobileNavToggle) para el
     drawer -- el toggle de colapso de escritorio queda oculto para no
     duplicar el control. */
  #sidebar_collapse_toggle_btn { display: none; }
}

/* --------------------------------------------- 2. BUSCADOR CON SUGERENCIAS */
.search-wrap { position: relative; flex: 1 1 200px; min-width: 150px; max-width: 420px; }
.search-drop {
  position: absolute;
  top: calc(100% + 8px); left: 0; right: 0;
  z-index: 70;
  padding: 6px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  box-shadow: var(--depth-3);
  animation: drop-in var(--motion-base) var(--ease-enter) both;
}
.search-drop-title {
  padding: 6px 10px 8px;
  font-family: var(--font-heading-bold); font-weight: 700;
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--text-muted);
}
.search-hit {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: var(--card-radius-sm);
  color: var(--text-dark);
  font-size: 0.875rem;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-tech), padding-left var(--motion-fast) var(--ease-tech);
}
.search-hit i { color: var(--text-muted); width: 16px; text-align: center; }
.search-hit small { margin-left: auto; color: var(--text-muted); font-size: 0.6875rem; }
.search-hit:hover { background: var(--primary-tint); padding-left: 13px; }
.search-hit:hover i { color: var(--primary); }

@keyframes drop-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ----------------------------------------------------- 3. FRANJA DE RESUMEN */
.meta-strip {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
}
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px;
  border-radius: var(--pill-radius);
  background: var(--grad-secondary);
  color: #fff;
  font-family: var(--font-heading-bold); font-weight: 700;
  font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.11em;
  white-space: nowrap;
}
.pill--primary { background: var(--grad-primary); }
.meta-strip-text { font-size: 0.8125rem; color: var(--text-muted); min-width: 0; }
.meta-strip-actions { margin-left: auto; display: flex; gap: 8px; }

/* ------------------------------------------------------------- 4. MI DÍA */
.todo-list { display: flex; flex-direction: column; gap: 8px; }
.todo-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius-sm);
  background: var(--surface-sunken);
  transition: border-color var(--motion-fast) var(--ease-tech), background var(--motion-fast) var(--ease-tech);
}
.todo-item:hover { border-color: var(--hairline-strong); background: var(--card-bg); }
.todo-check {
  width: 20px; height: 20px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card-bg);
  color: transparent;
  font-size: 0.625rem;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-tech), border-color var(--motion-fast) var(--ease-tech), color var(--motion-fast) var(--ease-tech);
}
.todo-check:hover { border-color: var(--primary); }
.todo-item.is-done .todo-check { background: var(--success); border-color: var(--success); color: #fff; }
.todo-item.is-done .todo-text { color: var(--text-muted); text-decoration: line-through; }
.todo-text { font-size: 0.875rem; flex: 1; min-width: 0; overflow-wrap: break-word; }

/* Feedback de borrado: usado por eliminarTodoItem() antes de sacar la fila
   del DOM de verdad, para que la acción se sienta reconocida en vez de que
   el ítem desaparezca de golpe. Solo transform/opacity. */
.item-removing { animation: item-remove-out 0.16s var(--ease-tech) both; }
@keyframes item-remove-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.92); }
}
.todo-time { margin-left: auto; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }

/* ------------------------------------------------- 5. FORMULARIOS LARGOS */
.form-section { display: flex; flex-direction: column; gap: 16px; }
.form-section > h2 {
  display: flex; align-items: center; gap: 12px;
  margin: 0;
  font-family: var(--font-heading-bold); font-weight: 700;
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.11em;
  color: var(--text-muted);
}
.form-section > h2::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.form-section > h2 .step {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 7px;
  background: var(--primary-tint);
  color: var(--primary);
  font-family: var(--font-mono); font-size: 0.6875rem;
}
.form-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.form-grid--full { grid-template-columns: 1fr; }
.field-hint { font-size: 0.75rem; color: var(--text-muted); }
.input-tech textarea {
  flex: 1; padding: 12px 0;
  border: 0; outline: none; background: transparent; resize: vertical;
  color: var(--text-dark); font-family: var(--font-body); font-size: 0.9375rem;
  min-height: 84px;
}
.input-tech select {
  flex: 1; padding: 12px 0;
  border: 0; outline: none; background: transparent;
  color: var(--text-dark); font-family: var(--font-body); font-size: 0.9375rem;
}
.form-foot {
  display: flex; align-items: center; gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.form-foot .btn-premium:first-of-type { margin-left: auto; }

/* slider de estimación */
.range-tech { display: flex; flex-direction: column; gap: 8px; }
.range-tech-head { display: flex; align-items: baseline; gap: 10px; }
.range-tech-head label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-muted); }
.range-tech-head output {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 1rem;
  color: var(--text-dark); font-variant-numeric: tabular-nums;
}
.range-tech input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; margin: 8px 0;
  border-radius: 2px;
  background: var(--surface-sunken);
  outline: none;
}
.range-tech input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px;
  border: 2px solid var(--card-bg);
  border-radius: 50%;
  background: var(--primary);
  box-shadow: var(--glow-primary);
  cursor: pointer;
  transition: transform var(--motion-fast) var(--ease-tech);
}
.range-tech input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.range-tech input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  border: 2px solid var(--card-bg);
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
}
.range-tech input[type="range"]:focus-visible { box-shadow: var(--focus-ring); }

/* ----------------------------------- 6. LOGIN: error + reglas de contraseña */
.error-panel {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px;
  border: 1px solid color-mix(in oklab, var(--primary) 45%, transparent);
  border-left-width: 3px;
  border-radius: var(--card-radius-sm);
  background: var(--primary-tint);
  animation: shake-in 0.42s var(--ease-tech) both;
}
.error-panel-msg { display: flex; align-items: center; gap: 9px; font-size: 0.875rem; color: var(--text-dark); }
.error-panel-msg i { color: var(--primary); }
.error-panel pre {
  margin: 0; padding: 9px 11px;
  max-height: 130px; overflow: auto;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-mono); font-size: 0.6875rem;
  color: var(--text-muted);
  white-space: pre-wrap;
}

@keyframes shake-in {
  0%   { opacity: 0; transform: translateX(-8px); }
  55%  { opacity: 1; transform: translateX(4px); }
  100% { opacity: 1; transform: none; }
}

.rule-list { display: grid; gap: 7px; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.rule-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.75rem;
  color: var(--text-muted);
  transition: color var(--motion-fast) var(--ease-tech);
}
.rule-item i {
  width: 15px; height: 15px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: 0.5rem;
  transition: background-color var(--motion-base) var(--ease-tech), color var(--motion-base) var(--ease-tech), transform var(--motion-base) var(--ease-tech);
}
.rule-item.is-ok { color: var(--success); }
.rule-item.is-ok i { background: var(--success); color: #fff; transform: scale(1.08); }

/* --------------------------------------------------------- 7. FILTROS */
.filters-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  box-shadow: var(--depth-1);
}
.filters-bar .input-tech { flex: 1 1 200px; min-width: 160px; }
.filters-bar .input-tech input, .filters-bar .input-tech select { padding: 9px 0; font-size: 0.875rem; }
.filters-bar-actions { margin-left: auto; display: flex; gap: 8px; }
.table-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  font-size: 0.75rem; color: var(--text-muted);
}
.table-foot-pages { margin-left: auto; display: flex; gap: 6px; }

/* ---------------------------------------------------------- 8. KANBAN */
.kanban-board {
  display: grid; gap: 16px;
  grid-auto-flow: column;
  grid-auto-columns: minmax(272px, 1fr);
  overflow-x: auto;
  padding-bottom: 10px;
}
.kanban-col {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  min-height: 240px;
  /* antes sin transition: al arrastrar una tarjeta, el resaltado de
     columna válida (is-drop-target) aparecía de golpe. */
  transition: border-color var(--motion-fast) var(--ease-tech), background-color var(--motion-fast) var(--ease-tech);
}
.kanban-col.is-drop-target { border-color: var(--secondary); background: var(--secondary-tint); }
.kanban-head { display: flex; align-items: center; gap: 9px; padding: 2px 4px 6px; }
.kanban-head strong {
  font-family: var(--font-heading-bold); font-weight: 700;
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted);
}
.kanban-count {
  margin-left: auto;
  min-width: 22px; padding: 2px 7px;
  border-radius: var(--pill-radius);
  background: var(--card-bg);
  border: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 0.6875rem;
  text-align: center;
}
.kanban-card {
  display: flex; flex-direction: column; gap: 9px;
  padding: 13px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--card-radius-sm);
  box-shadow: var(--depth-1);
  cursor: grab;
  /* el desplazamiento (translateY) va en motion-base, no motion-fast: es un
     hover "con desplazamiento", según la tabla de Movimiento del SKILL. */
  transition: transform var(--motion-base) var(--ease-tech), box-shadow var(--motion-base) var(--ease-tech);
}
.kanban-card:hover { transform: translateY(-2px); box-shadow: var(--depth-2); }
.kanban-card:active { cursor: grabbing; transform: scale(0.99); }
.kanban-card.is-dragging { opacity: 0.5; }
.kanban-card-title { font-size: 0.875rem; line-height: 1.45; }
.kanban-card-foot { display: flex; align-items: center; gap: 8px; }
.kanban-card-foot .kanban-date { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--text-muted); }
.avatar-mini {
  margin-left: auto;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--grad-secondary);
  color: #fff;
  font-family: var(--font-mono); font-size: 0.625rem;
}

/* ------------------------------------------ 9. HERRAMIENTA DE UN PASO */
.split-tool {
  display: grid; gap: 16px;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
}
.split-tool-mid {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding-top: 68px;
}
.split-tool-mid .split-line { width: 1px; flex: 1; min-height: 40px; background: var(--border); }
.code-pane {
  margin: 0;
  padding: 13px 14px;
  min-height: 168px;
  max-height: 320px;
  overflow: auto;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--card-radius-sm);
  font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.65;
  color: var(--text-dark);
  white-space: pre-wrap;
}
.code-pane mark {
  padding: 1px 2px;
  border-radius: 3px;
  background: color-mix(in oklab, var(--warning) 40%, transparent);
  color: inherit;
}
@media (max-width: 900px) {
  .split-tool { grid-template-columns: 1fr; }
  .split-tool-mid { flex-direction: row; padding-top: 0; }
  .split-tool-mid .split-line { height: 1px; width: auto; min-height: 0; }
}

/* --------------------------------------------- 10. ASISTENTE IA FLOTANTE */
.ia-bubble {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 800;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--grad-primary);
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
  box-shadow: var(--glow-primary), var(--depth-2);
  transition: transform var(--motion-base) var(--ease-tech), box-shadow var(--motion-base) var(--ease-tech);
}
.ia-bubble::after {
  content: "";
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--primary) 40%, transparent);
  animation: ia-ring 3s var(--ease-tech) infinite;
}
.ia-bubble:hover { transform: translateY(-3px) scale(1.05); }
.ia-bubble:focus-visible { box-shadow: var(--focus-ring-danger); }
.ia-bubble .fa-solid { transition: transform var(--motion-base) var(--ease-tech); }
.ia-bubble:hover .fa-solid { transform: rotate(-8deg) scale(1.08); }

@keyframes ia-ring {
  0%   { opacity: 0.7; transform: scale(0.96); }
  70%  { opacity: 0; transform: scale(1.18); }
  100% { opacity: 0; }
}

.ia-panel {
  position: fixed;
  right: 24px; bottom: 92px;
  z-index: 800;
  width: min(372px, calc(100vw - 40px));
  max-height: min(560px, calc(100vh - 130px));
  display: flex; flex-direction: column;
  background: var(--card-bg);
  color: var(--text-dark);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--depth-3);
  overflow: hidden;
  animation: ia-in var(--motion-slow) var(--ease-enter) both;
}
.ia-panel[hidden] { display: none; }
.ia-panel-head {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 16px;
  background: var(--grad-header);
  border-bottom: 1px solid var(--border);
}
.ia-panel-head .ia-avatar {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--grad-primary);
  color: #fff; font-size: 0.8125rem;
}
/* Antes esta caja no fijaba `color` propio: quedaba a merced de lo que
   heredara desde el body, y si algo por el camino puenteaba esa herencia
   (p.ej. el fondo casi negro de --grad-header en dark), el texto podía
   terminar renderizando muy cerca del color del fondo. Se fija explícito
   contra los mismos tokens que ya usa el resto de la UI en dark. */
.ia-panel-head strong { font-family: var(--font-heading-bold); font-weight: 700; font-size: 0.875rem; color: var(--text-dark); }
.ia-panel-head small { display: block; font-size: 0.6875rem; color: var(--text-muted); }
.ia-msgs { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.ia-msg {
  max-width: 84%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 0.875rem; line-height: 1.5;
  animation: ia-msg-in 0.3s var(--ease-enter) both;
}
.ia-msg--bot { align-self: flex-start; background: var(--surface-sunken); color: var(--text-dark); border: 1px solid var(--border); border-bottom-left-radius: 5px; }
.ia-msg--me { align-self: flex-end; background: var(--grad-secondary); color: #fff; border-bottom-right-radius: 5px; }
.ia-typing { display: inline-flex; gap: 4px; align-items: center; }
.ia-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-muted); animation: ia-dot 1s var(--ease-tech) infinite; }
.ia-typing i:nth-child(2) { animation-delay: 0.15s; }
.ia-typing i:nth-child(3) { animation-delay: 0.3s; }
.ia-foot { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); }
.ia-foot .input-tech { flex: 1; }
.ia-foot .input-tech input { padding: 10px 0; font-size: 0.875rem; color: var(--text-dark); }

@keyframes ia-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes ia-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ia-dot {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%      { transform: translateY(-3px); opacity: 1; }
}

/* ------------------------------- 11. AJUSTES A COMPONENTES EXISTENTES */
/* card de área deshabilitada ("próximamente") */
.tech-area-card.is-disabled {
  cursor: default;
  opacity: 0.62;
  border-style: dashed;
  background: var(--surface-sunken);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.tech-area-card.is-disabled:hover { transform: none; box-shadow: var(--depth-1); border-color: var(--border); }
.tech-area-card.is-disabled:hover::after { transform: scaleX(0); }
.tech-area-card.is-disabled .area-icon { background: var(--surface-sunken); color: var(--text-muted); box-shadow: none; }

/* subgrupos de 2do nivel dentro de un mismo flyout (caso Desarrollo, 20 accesos):
   en vez de una lista plana larga, columnas con título */
.nav-flyout--wide { width: 560px; }
.nav-flyout-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.nav-subgroup { display: flex; flex-direction: column; gap: 2px; padding: 4px 0 8px; }
.nav-subgroup > .nav-flyout-title { padding: 4px 12px 4px; }
.nav-flyout--wide .nav-item { font-size: 0.8125rem; padding: 7px 12px; }

@media (max-width: 768px) {
  .nav-flyout--wide { width: auto; }
  .nav-flyout-cols { grid-template-columns: 1fr; }
}


/* =========================================================
   ESTILOS SINGLE-CARD PARA HUB DE ÁREAS SEGMENTADO
   ========================================================= */
.area-grid.single-card {
  grid-template-columns: minmax(280px, 480px);
}

/* --------------------------------------------- 12. MODALES LEGACY
   .modal-backdrop: overlay a pantalla completa + un único <div> hijo como
   panel, con estilos siempre inline (posición/fondo) -- el patrón que usan
   los modales de Sprints/Tareas/Proyectos y confirmaciones en index.html,
   el comparador de candidatos en talento.html y los modales de código de
   barras / pre-evaluación IA en administracion.html (9+ casos). No es un
   componente nuevo: es el mismo par overlay+panel que .modal-overlay/.modal
   de homeids-ui.css, solo que aquí el panel no tiene clase propia -- por eso
   se reusan sus mismos @keyframes (overlay-in, modal-in) en vez de crear
   otros. Antes: el JS solo cambiaba display:none→flex, sin ninguna
   transición. */
.modal-backdrop {
  animation: overlay-in var(--motion-base) var(--ease-tech) both;
}
/* Techo de altura defensivo: el panel centra con align-items:center sobre
   un backdrop de 100vh, así que un panel más alto que la pantalla (formularios
   largos con muchos campos) empujaba su propio borde superior por encima del
   viewport -- visible recién a mitad de camino hacia abajo, con el resto
   cortado por el borde inferior. La mayoría de estos paneles ya scrollean su
   propio cuerpo interno con un max-height menor (ej. 80vh); este techo de
   92vh en el panel completo (header + cuerpo) es la red de contención para
   los que no lo hacen, sin duplicar scroll en los que sí. */
.modal-backdrop > div {
  animation: modal-in var(--motion-slow) var(--ease-enter) both;
  max-height: min(92vh, 100%);
  overflow-y: auto;
}
.area-grid.single-card .tech-area-card {
  min-height: 200px;
}

/* ============================================================================
   13. ADAPTACIÓN RESPONSIVA GLOBAL MÓVIL (<= 768px y <= 440px)
   Garantiza que ningún componente quede cortado en celulares ni tablets,
   asegura el menú deslizante con backdrop, aplana grids de escritorio,
   permite scroll táctil fluido en tablas y previene zoom automático en iOS.
   ========================================================================= */

@media (max-width: 768px) {
  /* --- 1. Shell y Contenedores Principales --- */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  img, video, canvas, iframe {
    max-width: 100% !important;
    height: auto;
  }
  pre {
    max-width: 100% !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    overflow-x: auto !important;
  }
  body {
    display: block !important;
    position: relative !important;
  }
  .app-shell {
    display: block !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  .app-col {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  .app-main {
    padding: 12px 10px 75px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  .main-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 12px 10px 75px !important;
    padding-top: 56px !important;
    overflow-x: hidden !important;
  }
  .page-view, .admin-view {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* --- 2. Sidebar Móvil (Drawer con elevación y backdrop) --- */
  .app-side {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    z-index: 950 !important;
    width: min(290px, 86vw) !important;
    transform: translateX(-101%) !important;
    transition: transform var(--motion-base) var(--ease-enter) !important;
    box-shadow: 10px 0 35px rgba(0, 0, 0, 0.4) !important;
    background: var(--card-bg) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .app-side.is-open,
  .app-side.sidebar-open {
    transform: translateX(0) !important;
  }
  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 920;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .sidebar-backdrop.is-open,
  .sidebar-backdrop.sidebar-open {
    display: block !important;
  }

  /* --- 3. Botón Hamburguesa Fijo --- */
  .mobile-nav-toggle {
    display: flex !important;
    position: fixed !important;
    top: 9px !important;
    left: 10px !important;
    z-index: 910 !important;
    width: 38px !important;
    height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    border-radius: 9px !important;
    background: var(--primary) !important;
    color: #fff !important;
    font-size: 1.1rem !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    cursor: pointer !important;
  }
  .mobile-nav-toggle:active {
    transform: scale(0.94);
  }

  /* --- 4. Barra Superior (.app-top) --- */
  .app-top {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    padding: 8px 10px 8px 56px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    min-height: 52px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .brand-plate--sm {
    max-width: 86px !important;
    padding: 2px 6px !important;
  }
  .app-top-title {
    display: none !important;
  }
  .search-wrap {
    order: 10 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    margin-top: 4px !important;
  }
  .app-top-actions {
    margin-left: auto !important;
    gap: 6px !important;
  }
  #hub_bi_sync_badge,
  #sidebar_collapse_toggle_btn {
    display: none !important;
  }
  #header_notif_btn,
  #header_theme_toggle_btn {
    padding: 6px 10px !important;
    font-size: 0.9rem !important;
  }

  /* --- 5. Franja de Resumen (.meta-strip) y Saludo del Hub --- */
  section:has(> .module-enter > .h-title) {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  section:has(> .module-enter > .h-title) > div:last-child {
    margin-left: 0 !important;
    width: 100% !important;
    display: flex !important;
    gap: 8px !important;
  }
  section:has(> .module-enter > .h-title) > div:last-child .btn-premium {
    flex: 1 1 50% !important;
    justify-content: center !important;
    font-size: 0.78rem !important;
    padding: 7px 8px !important;
  }

  .meta-strip {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    border-radius: var(--card-radius-sm) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .meta-strip-text {
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
    width: 100% !important;
  }
  .meta-strip-actions {
    margin-left: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .meta-strip-actions .btn-premium {
    flex: 1 1 calc(50% - 4px) !important;
    justify-content: center !important;
    font-size: 0.72rem !important;
    padding: 6px 6px !important;
  }

  /* --- 6. Desactivación de Grids Rígidos Multicolumna (Flattening) --- */
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 1.2fr 2fr"],
  [style*="grid-template-columns: 1.3fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 1.5fr 1.5fr"],
  [style*="grid-template-columns: 140px 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns: 1fr 1.8fr"],
  [style*="grid-template-columns: 1.8fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 2fr"],
  [style*="grid-template-columns: 2fr 1.2fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(340px, 1fr))"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(350px, 1fr))"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(400px, 1fr))"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(450px, 1fr))"],
  [style*="grid-template-columns: repeat(auto-fit,minmax(320px,1fr))"],
  [style*="grid-template-columns: repeat(auto-fill, minmax(260px, 1fr))"],
  [style*="grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))"] {
    grid-template-columns: 1fr !important;
  }

  .area-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .tech-area-card {
    min-height: auto !important;
    padding: 14px 12px !important;
  }
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .form-section {
    padding: 14px 12px !important;
    border-radius: var(--card-radius-sm) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .card {
    padding: 14px 12px !important;
    border-radius: var(--card-radius-sm) !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .header-card {
    padding: 14px 12px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .header-card-icon-bg {
    display: none !important;
  }
  .header-title,
  .header-card .header-title {
    font-size: 1.15rem !important;
    word-break: break-word !important;
  }
  .header-subtitle {
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
  }

  /* KPIs del Hub: 2 columnas balanceadas */
  section.module-enter:has(.kpi-tile),
  [style*="grid-template-columns: repeat(auto-fit, minmax(206px, 1fr))"],
  [style*="grid-template-columns:repeat(auto-fit,minmax(206px,1fr))"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .kpi-tile {
    min-width: 0 !important;
    padding: 10px 12px !important;
  }
  .kpi-value {
    font-size: 1.35rem !important;
  }
  .kpi-label {
    font-size: 0.7rem !important;
  }

  /* Widgets del Hub (Mi día, Actividad, IDS Comunica) */
  section:has(#hub_todo_widget) {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  #comunica_feed {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Tableros Kanban de 5 Columnas (Sprints / CRM): Scroll horizontal contenido */
  [style*="repeat(5, 1fr)"],
  [style*="repeat(5, minmax(180px, 1fr))"],
  .kanban-board,
  .sprints-kanban {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(240px, 1fr)) !important;
    gap: 12px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-bottom: 10px !important;
    box-sizing: border-box !important;
  }

  /* Calendarios de 7 Columnas */
  #lic_cal_grid,
  [id*="cal_grid"],
  [style*="repeat(7,1fr)"],
  [style*="repeat(7, 1fr)"] {
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 2px !important;
    font-size: 0.72rem !important;
  }

  /* --- 7. Tablas Seguras y Wrappers Fluidos --- */
  .card:has(table),
  .card:has(.table-tech),
  .card:has(.table),
  .form-section:has(table) {
    overflow-x: auto !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .table-wrap,
  .table-container,
  .auto-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
    width: 100% !important;
    border-radius: var(--card-radius-sm) !important;
    display: block !important;
    box-sizing: border-box !important;
  }
  table {
    max-width: none !important;
  }
  .table-tech {
    min-width: 440px !important;
  }
  .table-tech th,
  .table-tech td,
  table th,
  table td {
    padding: 7px 9px !important;
    font-size: 0.78rem !important;
  }

  /* --- 8. Modales y Overlays --- */
  .modal-overlay:not(#login_overlay),
  .modal-backdrop:not(#sidebarBackdrop):not(.sidebar-backdrop),
  [id^="modal_"] {
    padding: 8px !important;
    align-items: flex-start !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }
  .modal,
  .modal-content,
  .modal-backdrop > div:not(.sidebar-backdrop) {
    width: 100% !important;
    max-width: calc(100vw - 16px) !important;
    padding: 16px 14px !important;
    margin: 8px auto !important;
    border-radius: var(--card-radius-sm) !important;
    box-sizing: border-box !important;
  }
  .modal-head h2,
  .modal-head .modal-title {
    font-size: 1.15rem !important;
  }
  .modal-foot,
  .modal-actions {
    flex-direction: column-reverse !important;
    gap: 8px !important;
  }
  .modal-foot .btn-premium,
  .modal-actions .btn-premium {
    width: 100% !important;
    justify-content: center !important;
  }

  /* --- 9. Inputs y Prevención de Zoom en iOS --- */
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="date"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px !important;
  }
  .input-tech input {
    font-size: 16px !important;
  }
}

/* --- 10. Dispositivos Ultra-Estrechos (<= 440px) --- */
@media (max-width: 440px) {
  .meta-strip-actions .btn-premium {
    flex: 1 1 100% !important;
  }
  .h-title {
    font-size: 1.25rem !important;
  }
  .brand-plate--sm {
    max-width: 75px !important;
  }
  .app-top {
    padding-left: 52px !important;
  }
  .mobile-nav-toggle {
    width: 36px !important;
    height: 36px !important;
    top: 8px !important;
    left: 8px !important;
  }
}