/* ui.css — correcciones visuales comunes del administrador (auditoría 23-sep-2026).
   Se carga después de motion.css, al final del <head>, para ganar a los estilos de cada página. */

/* Un hijo flex no se encoge por debajo de su contenido sin esto: Operaciones se salía 72 px en escritorio */
#main-area { min-width: 0; }

/* Cifras de ancho fijo: las columnas de montos y los indicadores quedan alineados */
body { font-variant-numeric: tabular-nums; }

/* Iconos de línea (sustituyen emojis). Toman el color del texto. */
.ic {
  display: inline-block; width: 1em; height: 1em; flex-shrink: 0;
  vertical-align: -0.125em; background-color: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
}

/* Barra inferior del celular. Las páginas grandes ya la traían en su propio <style>;
   Clientes, Lealtad, Usuarios y Calendario no, y en el celular no había cómo salir de ellas */
.mobile-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  background: #1a1d27; border-top: 1px solid #2d3148; z-index: 200; height: 56px;
}
.mobile-nav-inner { display: flex; height: 100%; }
.mobile-nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: #8391a7; text-decoration: none; font-size: 11px; font-weight: 500;
  border: none; background: none; cursor: pointer; padding: 6px 0; transition: color .15s;
}
.mobile-nav-item.active { color: #818cf8; }
.mobile-nav-item svg { width: 20px; height: 20px; }

@media (max-width: 768px) {
  /* Barra inferior: 9 secciones no caben en 390 px; se desliza en vez de apretar las etiquetas */
  .mobile-nav-inner {
    overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-nav-inner::-webkit-scrollbar { display: none; }
  .mobile-nav { display: block; padding-bottom: env(safe-area-inset-bottom); height: calc(56px + env(safe-area-inset-bottom)); }
  .mobile-nav-item { flex: 0 0 auto; min-width: 72px; padding: 6px 8px; scroll-snap-align: start; white-space: nowrap; }

  /* Objetivos táctiles de al menos 44 px */
  .p-btn, .btn, .t-btn, .p-filter-btn, .period-btn, .filter-btn, .apply-btn, .btn-wa { min-height: 44px; }
  .p-input, .p-select, input:not([type=checkbox]):not([type=radio]):not([type=color]), select { min-height: 44px; }

  /* Espacio final para que la última fila pueda subir por encima de Sensei y la barra */
  #main-area { padding-bottom: calc(56px + 76px + env(safe-area-inset-bottom)) !important; }
}

/* Iconos Lucide (ISC) */
.ic-pencil { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3C/svg%3E"); }
.ic-trash { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6'/%3E%3Cpath d='M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2'/%3E%3C/svg%3E"); }
.ic-camera { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E"); }
.ic-file { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E"); }
.ic-alert { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
.ic-gift { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E"); }

/* Punto de estado (sustituye 🔴🟡✅) */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; vertical-align: middle; flex-shrink: 0; }

/* ── Fondo: polvo de matcha ──────────────────────────────────────────────────
   El canvas lo pinta js/fondo.js detrás de todo (z-index:-1 dentro de body aislado).
   Las superficies dejan ver un poco el polvo: las tarjetas con transparencia simple y el
   cromo fijo (menú, encabezado, pestañas, barra móvil) además con desenfoque. Sin blur en
   las tarjetas: decenas de backdrop-filter pesan mucho en Safari/iPhone. */
body { isolation: isolate; }
#dnm-fondo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.card, .p-card, .p-box, .idea-card, .bucket-card, .chart-box, .table-box, .t-stat, .rt-card,
.hist-card, .movers-card, .kanban-card, .rent-card, .kpi, .periodos, .report-hist-item {
  background-color: rgb(26 29 39 / .8) !important;
}
#sidebar, #main-area header, .p-tabs, .t-tabs, .mobile-nav, #mobile-nav {
  background-color: rgb(26 29 39 / .78) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
@media print { #dnm-fondo { display: none; } }

/* ── Tablas en celular (js/tablas.js pone .tc / .tn y data-label) ────────────── */
@media (max-width: 768px) {
  /* Lista → tarjetas: sin desplazamiento horizontal, cada dato con su etiqueta */
  table.tc { min-width: 0 !important; width: 100% !important; border-collapse: separate; border-spacing: 0; }
  table.tc thead { display: none; }
  /* Si la tabla se puede ordenar, sus encabezados quedan como botones arriba de las tarjetas */
  table.tc.tc-ordenable thead { display: block; margin-bottom: 10px; }
  table.tc.tc-ordenable thead tr { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  table.tc.tc-ordenable thead tr::before { content: 'Ordenar por'; font-size: 12px; color: #8391a7; margin-right: 2px; }
  table.tc.tc-ordenable thead th { display: none; }
  table.tc.tc-ordenable thead th.tc-sort {
    display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px !important;
    border: 1px solid #2d3148 !important; border-radius: 999px; background: #0f1117 !important;
    font-size: 12px !important; text-transform: none !important; letter-spacing: 0 !important; position: static !important;
  }
  table.tc, table.tc tbody, table.tc tr, table.tc td { display: block; width: 100% !important; }
  table.tc tr {
    background: rgb(26 29 39 / .8) !important; border: 1px solid #2d3148; border-radius: 10px;
    padding: 10px 12px; margin-bottom: 10px; height: auto !important;
  }
  table.tc tr:hover td { background: transparent !important; }
  table.tc td {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 5px 0 !important; border: 0 !important; text-align: right !important;
    white-space: normal !important; max-width: none !important; min-height: 0; height: auto !important;
    background: transparent !important; position: static !important;
  }
  table.tc td::before {
    content: attr(data-label); flex-shrink: 0; max-width: 45%; text-align: left;
    color: #8391a7; font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0;
  }
  table.tc td[data-label=""]::before { display: none; }
  table.tc td[data-label=""] { justify-content: flex-end; }
  table.tc td.tc-title { justify-content: flex-start; text-align: left !important; font-size: 15px; font-weight: 600; color: #e2e8f0; padding-bottom: 8px !important; margin-bottom: 4px; border-bottom: 1px solid #2d3148 !important; }
  table.tc td.tc-title::before { display: none; }
  table.tc td.tc-full { display: block; text-align: left !important; }
  table.tc td > * { max-width: 100%; }
  /* Barras de distribución y otros bloques sin ancho propio: que ocupen el espacio libre */
  table.tc td > div:not([class]) { flex: 1 1 auto; min-width: 0; }
  /* Los contenedores que desplazaban la tabla ya no lo necesitan */
  :is(div, section):has(> table.tc) { overflow-x: visible !important; }

  /* Matriz: sigue desplazándose, con la primera columna fija para no perder la fila */
  table.tn th:first-child, table.tn td:first-child {
    position: sticky; left: 0; z-index: 1; background: #1a1d27 !important;
    box-shadow: 1px 0 0 #2d3148;
  }
}

/* ── Ajustes de la revisión móvil completa (3 teléfonos, 23-sep) ──────────────── */
@media (max-width: 768px) {
  /* Sub-pestañas de Tendencias: se deslizan como las demás pestañas en vez de salirse */
  .t-tabs { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-left: 12px !important; padding-right: 12px !important; }
  .t-tabs::-webkit-scrollbar { display: none; }
  .t-tab { flex-shrink: 0; }
  /* Filas del Radar: los botones bajan a su renglón */
  .t-row { flex-wrap: wrap; }
  .t-row-actions { width: 100%; justify-content: flex-end; }
  /* Etiquetas (nivel y estado) arriba y el texto a todo lo ancho: entre las dos quedaba en 120 px */
  .t-row > .status-badge { order: 1; margin-left: auto; }
  .t-row > div[style*="flex:1"] { order: 2; flex: 1 1 100% !important; min-width: 0; }
  .t-row > .t-row-actions { order: 3; }
  /* Punto de equilibrio (Finanzas): una columna, mini-indicadores en rejilla flexible */
  .bep-grid { grid-template-columns: 1fr !important; }
  .bep-mini { grid-template-columns: 1fr !important; } /* en 3 columnas de ~90 px, "$X,XXX/día" a 22 px no cabía */
  .bep-grid > div:first-child { min-width: 0 !important; }
  /* Elementos de cuadrícula: sin min-width:0 no se encogen y empujan el ancho */
  .two-col > *, .p-cards > *, .charts-row > *, .cards-grid > *, .p-box { min-width: 0; }
  /* Filas de tarea (Resumen de Planeación): título en su renglón, datos abajo */
  .task-row { flex-wrap: wrap; row-gap: 6px; }
  .task-row .task-title { flex: 1 1 calc(100% - 80px); min-width: 0; }
  /* Puntajes de la ventana de idea (Tendencias): una columna, las etiquetas con su ayuda no caben en dos */
  .score-grid { grid-template-columns: minmax(0, 1fr) !important; }
  /* Tarjetas: si el valor (varios botones, montos largos) no cabe junto a su etiqueta,
     baja a su renglón en vez de salirse */
  table.tc td { flex-wrap: wrap; row-gap: 6px; }
  /* Filtros de año/mes con ancho fijo de 130 px: "Todos los meses" se cortaba */
  #compras-year-filter, #gastos-year-filter, #inc-year-filter { width: auto !important; min-width: 0; flex: 0 0 96px; }
  #compras-month-sel, #gastos-month-sel, #inc-month-sel { width: auto !important; min-width: 170px; flex: 1 1 170px; }
  /* Encabezado "Gastos con AI" / "Ingresos Extra con AI": título arriba, descripción abajo */
  #ai-parse-box > div:first-child, #inc-parse-box > div:first-child { flex-direction: column; align-items: flex-start !important; gap: 4px !important; }
  /* Etiqueta "AI" de las pestañas: en línea junto al nombre; flotando arriba la recortaba la barra */
  .p-tab > span[style*="position:absolute"] { position: static !important; order: 9; margin-left: 2px; }
  /* Cuadros de texto con la letra del sistema, no la de máquina de escribir, y a todo lo ancho */
  textarea { font-family: inherit; width: 100%; max-width: 100%; }
  /* Tarjetas de tabla: botones de acción juntos a la derecha, no repartidos en los extremos */
  table.tc td { justify-content: flex-end; }
  table.tc td::before { margin-right: auto; }
  table.tc td.tc-largo { display: block; text-align: left !important; }
  table.tc td.tc-largo::before { display: block; max-width: none; margin: 0 0 3px; }
  /* Ganadores y perdedores (Insights): la gráfica y el % no cabían y el % quedaba cortado */
  .movers-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .movers-card { padding: 14px !important; min-width: 0; }
  .mv-row { gap: 8px; }
  .mv-row > div[style*="width:90px"] { width: 60px !important; }
  .mv-pct { width: auto !important; min-width: 44px; }
  .mv-name { white-space: normal !important; overflow-wrap: anywhere; }
  /* Horas pico por día: 8 columnas caben en el ancho del teléfono sin deslizar */
  .hm-dow th, .hm-dow td { padding: 4px 2px !important; width: auto !important; }
  /* Calendario de Planeación: en 40 px el nombre quedaba en una letra ("G…"). Barras de color;
     al tocar el día se abre su detalle con los nombres completos */
  .cal-item { font-size: 0 !important; height: 5px; padding: 0 !important; border-left: 0 !important; border-radius: 3px; margin-top: 3px; }
  .cal-item-event { background: #4ade80 !important; }
  .cal-item-task { background: #60a5fa !important; }
  .cal-item-overdue { background: #f87171 !important; }
  .cal-item-deadline { background: #fb923c !important; }
  /* Lealtad, lista de miembros: nombre completo en su renglón; teléfono y estado abajo.
     Antes el nombre se cortaba y la etiqueta "Loyverse" se partía letra por letra */
  .resultado { flex-wrap: wrap; row-gap: 4px; }
  .resultado .nom { white-space: normal !important; flex: 1 1 100%; }
  .resultado .row > * { white-space: nowrap; flex-shrink: 0; }
  /* Botón de WhatsApp: texto centrado a la altura mínima de 44 px */
  .btn-wa { display: inline-flex !important; align-items: center; justify-content: center; }
  /* Textos largos (tablero, ventana de cliente, montos grandes): se parten en vez de salirse */
  .kanban-card-title, .idea-card-name, .modal, .p-modal, .t-modal, .card, .p-card, .kpi { overflow-wrap: anywhere; }
  /* Campos dentro de ventanas: nunca más anchos que la ventana */
  :is(.p-modal, .modal, .t-modal) :is(input, select, textarea) { max-width: 100%; min-width: 0; }
}

/* Sensei no tapa las ventanas: se oculta mientras hay una abierta (!important: el widget fija display en línea) */
body:has(.modal-overlay.open, .p-modal-overlay.open, .t-modal-overlay.open) #dnm-agent-btn { display: none !important; }