/**
 * components.css — Core (Módulo 0)
 * ─────────────────────────────────────────────────────────────────
 * Componentes de UI reutilizables por todos los módulos.
 * Requiere que global.css esté cargado previamente.
 *
 * Índice:
 *  1. Botones
 *  2. Cards
 *  3. Formularios
 *  4. Modales
 *  5. Toasts
 *  6. Skeletons
 *  7. Badges
 *  8. Estados vacíos y errores
 *  9. Tablas
 * 10. Títulos de módulo
 *
 * Doc: /docs/modules/module-0-core.md
 */

/* ── 1. Botones ──────────────────────────────────────────────── */
.btn {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--spacing-xs);
  padding:         var(--spacing-sm) var(--spacing-md);
  border-radius:   var(--radius-md);
  border:          none;
  font-size:       var(--font-size-sm);
  font-weight:     var(--font-weight-medium);
  cursor:          pointer;
  transition:      background-color var(--transition-fast), opacity var(--transition-fast);
  text-align:      center;
  white-space:     nowrap;
}

.btn:disabled {
  opacity: 0.5;
  cursor:  not-allowed;
}

.btn--primary {
  background-color: var(--color-primary);
  color:            #FFFFFF;
}
.btn--primary:hover:not(:disabled) {
  background-color: var(--color-primary-dark);
}

.btn--secondary {
  background-color: var(--color-border);
  color:            var(--color-text);
}
.btn--secondary:hover:not(:disabled) {
  background-color: var(--color-border-dark);
}

.btn--danger {
  background-color: var(--color-danger);
  color:            #FFFFFF;
}
.btn--danger:hover:not(:disabled) {
  background-color: #c62828;
}

.btn--ghost {
  background-color: transparent;
  color:            var(--color-primary);
  border:           1px solid var(--color-primary);
}
.btn--ghost:hover:not(:disabled) {
  background-color: rgba(var(--color-success-rgb), 0.08);
}

.btn--sm {
  padding:   var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
}

/* ── 2. Cards ────────────────────────────────────────────────── */
.card {
  background-color: var(--color-surface);
  border-radius:    var(--radius-lg);
  border:           1px solid var(--color-border);
  box-shadow:       var(--shadow-sm);
  padding:          var(--spacing-lg);
}

.card__title {
  font-size:    var(--font-size-sm);
  font-weight:  var(--font-weight-medium);
  color:        var(--color-text-muted);
  margin-bottom: var(--spacing-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.card__value {
  font-size:   var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color:       var(--color-text);
}

.card--metric {
  display:     flex;
  flex-direction: column;
  gap:         var(--spacing-xs);
}

.card--highlight {
  border-left: 4px solid var(--color-primary);
}

/* ── 3. Formularios ──────────────────────────────────────────── */
.form-group {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-xs);
  margin-bottom:  var(--spacing-md);
}

.form-label {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color:       var(--color-text);
}

.form-label--required::after {
  content: ' *';
  color:   var(--color-danger);
}

.form-control {
  width:         100%;
  padding:       var(--spacing-sm) var(--spacing-md);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size:     var(--font-size-base);
  color:         var(--color-text);
  background:    var(--color-surface);
  transition:    border-color var(--transition-fast);
}

.form-control:focus {
  outline:      none;
  border-color: var(--color-primary);
  box-shadow:   0 0 0 3px rgba(var(--color-success-rgb), 0.15);
}

.form-control--error {
  border-color: var(--color-danger);
}

.form-error {
  font-size: var(--font-size-xs);
  color:     var(--color-danger);
  margin-top: 2px;
}

/* ── 4. Modales ──────────────────────────────────────────────── */
.modal-overlay {
  position:         fixed;
  inset:            0;
  background:       rgba(0, 0, 0, 0.5);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  z-index:          500;
  padding:          var(--spacing-md);
  overflow-y:       auto;   /* seguridad: si el modal supera la altura, se puede scrollear */
}

/* Los modales NO deben heredar el zoom del control de tamaño de fuente
 * (que se aplica a #app-content). Se cancela con el inverso --modal-unzoom
 * (seteado por el control en index.html) para que las ventanas emergentes se
 * vean a tamaño real y quepan en el viewport, sin importar el nivel de zoom del
 * contenido. Cubre todos los overlays de modales de la app. */
.modal-overlay,
.tx-confirm-overlay,
.inv-confirm-overlay,
.sup-form-overlay,
.farewell-overlay {
  zoom: var(--modal-unzoom, 1);
}

/* Mientras hay un modal abierto, ocultar el dock de acciones del módulo: ahí no
 * sirve y estorba sobre los botones del modal. Reaparece al cerrar. */
body:has(.modal-overlay:not([hidden])) .app-dock,
body:has(.tx-confirm-overlay:not([hidden])) .app-dock,
body:has(.inv-confirm-overlay:not([hidden])) .app-dock,
body:has(.sup-form-overlay:not([hidden])) .app-dock {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease, visibility .15s ease;
}

.modal {
  background:    var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow:    var(--shadow-lg);
  padding:       var(--spacing-xl);
  width:         100%;
  max-width:     480px;
  max-height:    90vh;
  overflow-y:    auto;
}

.modal__header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   var(--spacing-lg);
}

.modal__title {
  font-size:   var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.modal__close {
  background: none;
  border:     none;
  font-size:  var(--font-size-xl);
  cursor:     pointer;
  color:      var(--color-text-muted);
  line-height: 1;
}

.modal__footer {
  display:         flex;
  justify-content: flex-end;
  gap:             var(--spacing-sm);
  margin-top:      var(--spacing-xl);
}

/* Variante ancha — para modales que necesitan más espacio (ej. formulario de movimientos) */
.modal--wide {
  max-width: 600px;
}

/* ── 5. Toasts ───────────────────────────────────────────────── */
.toast {
  padding:       var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  color:         #FFFFFF;
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-medium);
  max-width:     320px;
  box-shadow:    var(--shadow-md);
  animation:     slideInRight 0.3s ease;
}

.toast--info    { background-color: var(--color-info); }
.toast--success { background-color: var(--color-success); }
.toast--warning { background-color: var(--color-warning); color: var(--color-text); }
.toast--error   { background-color: var(--color-danger); }

.toast--hiding {
  animation: slideOutRight 0.3s ease forwards;
}

/* Toast con acción "Deshacer" */
.toast--undo {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-md);
  max-width:   360px;
}
.toast__undo-btn {
  margin-left:    auto;
  flex-shrink:    0;
  background:      rgba(255, 255, 255, 0.18);
  border:         1px solid rgba(255, 255, 255, 0.55);
  color:          #FFFFFF;
  font:           inherit;
  font-weight:    var(--font-weight-bold, 700);
  padding:        2px 12px;
  border-radius:  var(--radius-sm, 6px);
  cursor:         pointer;
}
.toast__undo-btn:hover    { background: rgba(255, 255, 255, 0.30); }
.toast__undo-btn:disabled { opacity: 0.5; cursor: default; }

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes slideOutRight {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}

/* ── 6. Skeletons (loading placeholders) ─────────────────────── */
.skeleton {
  background:           linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%);
  background-size:      200% 100%;
  animation:            shimmer 1.5s infinite;
  border-radius:        var(--radius-md);
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton--title {
  height:       28px;
  width:        40%;
  margin-bottom: var(--spacing-lg);
}

.skeleton--card {
  height:        120px;
  margin-bottom: var(--spacing-md);
}

.skeleton--text {
  height:        16px;
  width:         80%;
  margin-bottom: var(--spacing-sm);
}

.skeleton--full {
  height:        400px;
}

.route-skeleton {
  padding: var(--spacing-md);
}

/* ── 7. Badges ───────────────────────────────────────────────── */
.badge {
  display:       inline-flex;
  align-items:   center;
  padding:       2px var(--spacing-sm);
  border-radius: var(--radius-full);
  font-size:     var(--font-size-xs);
  font-weight:   var(--font-weight-medium);
}

.badge--income, .badge--success {
  background-color: rgba(var(--color-success-rgb), 0.12);
  color:            var(--color-success);
}

.badge--expense, .badge--danger {
  background-color: rgba(230, 57, 70, 0.12);
  color:            var(--color-danger);
}

.badge--warning {
  background-color: rgba(244, 162, 97, 0.2);
  color:            #a05a1a;
}

.badge--info {
  background-color: rgba(58, 134, 255, 0.12);
  color:            var(--color-info);
}

.badge--neutral {
  background-color: var(--color-border);
  color:            var(--color-text-muted);
}

/* ── 8. Estados vacíos y errores ─────────────────────────────── */
.empty-state, .error-state, .module-error {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding:         var(--spacing-2xl);
  text-align:      center;
  color:           var(--color-text-muted);
  gap:             var(--spacing-md);
}

.empty-state__icon, .module-error__icon {
  font-size: 3rem;
}

.empty-state p, .module-error p {
  max-width: 320px;
  font-size: var(--font-size-sm);
}

.module-error h3 {
  color:       var(--color-text);
  font-size:   var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

/* ── 9. Tablas ───────────────────────────────────────────────── */
.table-wrapper {
  overflow-x:    auto;
  border-radius: var(--radius-lg);
  border:        1px solid var(--color-border);
}

.table {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--font-size-sm);
}

.table th {
  background-color: var(--color-bg);
  color:            var(--color-text-muted);
  font-weight:      var(--font-weight-medium);
  text-align:       left;
  padding:          var(--spacing-sm) var(--spacing-md);
  border-bottom:    2px solid var(--color-border);
  white-space:      nowrap;
}

.table td {
  padding:       var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.table tr:last-child td {
  border-bottom: none;
}

.table tr:hover td {
  background-color: rgba(0, 0, 0, 0.02);
}

/* ── 10. Títulos de módulo ───────────────────────────────────── */
.module-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   var(--spacing-xl);
  flex-wrap:       wrap;
  gap:             var(--spacing-md);
}

.module-title {
  font-size:   var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color:       var(--color-text);
}

.module-subtitle {
  font-size: var(--font-size-sm);
  color:     var(--color-text-muted);
  margin-top: var(--spacing-xs);
}

/* ── Disclaimer legal centralizado (Bloque 5) ────────────────────── */
/* Se inyecta desde modules/module-0-core/legal-disclaimers.js para
   mantener una única redacción y un único estilo en todos los módulos. */
.legal-disclaimer {
  display:       flex;
  align-items:   flex-start;
  gap:           8px;
  font-size:     var(--font-size-xs);
  color:         var(--color-text-muted);
  background:    rgba(244, 162, 97, 0.07);
  border:        1px solid rgba(244, 162, 97, 0.22);
  border-radius: var(--radius-md);
  padding:       10px var(--spacing-md);
  margin:        var(--spacing-sm) 0 0;
  line-height:   1.5;
}
.legal-disclaimer__icon {
  width: 14px; height: 14px;
  stroke: #C97A2A;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  margin-top: 1px;
}
.legal-disclaimer--compact {
  background:  transparent;
  border:      none;
  padding:     0;
  margin:      4px 0 0;
  font-style:  italic;
  font-size:   var(--font-size-xs);
  color:       var(--color-text-muted);
}
[data-theme="dark"] .legal-disclaimer {
  background:   rgba(244, 162, 97, 0.12);
  border-color: rgba(244, 162, 97, 0.32);
}
[data-theme="dark"] .legal-disclaimer__icon { stroke: #F4A261; }

/* Modal de bienvenida tributaria (Bloque 5.3) */
.tax-welcome-modal {
  position: fixed;
  inset:    0;
  display:  flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.50);
  z-index:  10010;
  padding:  var(--spacing-md);
  animation: legalFadeIn 0.18s ease both;
}
.tax-welcome-modal__panel {
  background: var(--color-surface, #fff);
  border-radius: var(--radius-lg);
  max-width: 460px;
  width: 100%;
  padding: var(--spacing-lg) var(--spacing-xl, 2rem);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  text-align: left;
  animation: legalPanelIn 0.22s ease both;
}
.tax-welcome-modal__icon {
  width: 44px; height: 44px;
  margin-bottom: var(--spacing-sm);
  color: var(--color-primary);
}
.tax-welcome-modal__title {
  font-size: var(--font-size-lg, 1.25rem);
  font-weight: 700;
  margin: 0 0 var(--spacing-sm);
  color: var(--color-text-primary);
}
.tax-welcome-modal__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0 0 var(--spacing-md);
}
.tax-welcome-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
}
[data-theme="dark"] .tax-welcome-modal__panel {
  background: #1e293b;
  color: #e2e8f0;
}
@keyframes legalFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes legalPanelIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ── Glosario contable (Bloque 7) ────────────────────────────────── */
.glossary-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 5px;
  padding: 0;
  border: 1px solid rgba(58, 134, 255, 0.30);
  background: rgba(58, 134, 255, 0.08);
  color: #3A86FF;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  transition: background 120ms, border-color 120ms;
}
.glossary-trigger:hover {
  background: rgba(58, 134, 255, 0.18);
  border-color: rgba(58, 134, 255, 0.45);
}
.glossary-trigger:focus-visible {
  outline: 2px solid #3A86FF;
  outline-offset: 1px;
}

.glossary-popover {
  position: fixed;
  z-index: 11000;
  background: #fff;
  color: var(--color-text-primary, #1e293b);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
  padding: 12px 14px;
  font-size: 0.86rem;
  line-height: 1.5;
  animation: glossPopIn 0.12s ease both;
}
@keyframes glossPopIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

.glossary-popover__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.glossary-popover__title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-text-primary);
}
.glossary-popover__close {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 4px;
}
.glossary-popover__close:hover { background: rgba(0,0,0,0.05); }

.glossary-popover__short {
  margin: 0 0 10px;
  color: var(--color-text-secondary);
}

.glossary-popover__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}
.glossary-popover__row-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
}
.glossary-popover__formula {
  background: rgba(0,0,0,0.04);
  padding: 4px 8px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  color: var(--color-text-primary);
}
.glossary-popover__example {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--color-text-secondary);
}

.glossary-popover__foot {
  font-size: 0.66rem;
  color: var(--color-text-muted);
  margin: 6px 0 0;
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  opacity: 0.7;
}

[data-theme="dark"] .glossary-trigger {
  background: rgba(58, 134, 255, 0.18);
  border-color: rgba(58, 134, 255, 0.40);
  color: #93c5fd;
}
[data-theme="dark"] .glossary-trigger:hover {
  background: rgba(58, 134, 255, 0.28);
}
[data-theme="dark"] .glossary-popover {
  background: #1e293b;
  color: #e2e8f0;
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 12px 40px rgba(0,0,0,0.50);
}
[data-theme="dark"] .glossary-popover__close:hover { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .glossary-popover__formula { background: rgba(255,255,255,0.06); }

/* ── Mensajes de usuario centralizados (Bloque 11) ──────────────── */
.user-message {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md, 10px);
  border: 1px solid transparent;
  background: rgba(58, 134, 255, 0.06);
  margin: var(--spacing-md) 0;
  animation: umFadeIn 0.18s ease both;
}
@keyframes umFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.user-message--info  {
  background: rgba(58, 134, 255, 0.06);
  border-color: rgba(58, 134, 255, 0.20);
  color: #1e40af;
}
.user-message--warn  {
  background: rgba(244, 162, 97, 0.10);
  border-color: rgba(244, 162, 97, 0.30);
  color: #C97A2A;
}
.user-message--error {
  background: rgba(230, 57, 70, 0.08);
  border-color: rgba(230, 57, 70, 0.25);
  color: #991b1b;
}

.user-message__icon {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  margin-top: 1px;
}
.user-message__icon-sm {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
  margin-right: 6px;
  vertical-align: text-bottom;
}
.user-message__body { flex: 1; min-width: 0; }
.user-message__title {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 4px;
}
.user-message__text {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin: 0 0 8px;
  line-height: 1.55;
}
.user-message__action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-primary, #3A86FF);
  text-decoration: none;
  padding: 4px 0;
}
.user-message__action:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.user-message--compact {
  display: flex;
  align-items: baseline;
  padding: 8px var(--spacing-md);
  font-size: var(--font-size-xs);
  margin: var(--spacing-xs) 0;
  gap: 6px;
}
.user-message--compact .user-message__action { margin-left: 6px; }

[data-theme="dark"] .user-message--info  {
  background: rgba(58, 134, 255, 0.14);
  border-color: rgba(58, 134, 255, 0.32);
  color: #93c5fd;
}
[data-theme="dark"] .user-message--warn  {
  background: rgba(244, 162, 97, 0.16);
  border-color: rgba(244, 162, 97, 0.36);
  color: #fbbf24;
}
[data-theme="dark"] .user-message--error {
  background: rgba(230, 57, 70, 0.18);
  border-color: rgba(230, 57, 70, 0.36);
  color: #fca5a5;
}
[data-theme="dark"] .user-message__title { color: #f1f5f9; }
[data-theme="dark"] .user-message__text  { color: #cbd5e1; }

/* ── Dock de acciones — único, persistente, con morph (macOS/iOS) ── */
.app-dock {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 8px 12px;
  background: var(--color-surface, #fff);
  background: color-mix(in srgb, var(--color-surface, #fff) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--color-border, rgba(20,28,60,.10));
  border-radius: 18px;
  box-shadow: 0 14px 38px rgba(20,28,60,.20);
  z-index: 800;
  transition: opacity .45s ease, transform .4s cubic-bezier(.2,.8,.2,1);
}
/* Fila de ítems: sobre ella va el morph al cambiar de módulo. */
.app-dock__inner {
  display: flex;
  gap: 8px;
  transition: opacity .16s ease, transform .16s ease;
}
.app-dock__inner--swap { opacity: 0; transform: translateY(8px) scale(.96); }

/* Estados: atenuado por inactividad, oculto al hacer scroll, vacío. */
.app-dock--idle  { opacity: .35; }
.app-dock:hover  { opacity: 1; }
.app-dock--hidden,
.app-dock--empty {
  opacity: 0;
  transform: translateX(-50%) translateY(160%);
  pointer-events: none;
}
.app-dock__item {
  position: relative;
  width: 48px; height: 48px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--color-text, #1d2342);
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform .16s cubic-bezier(.2,.8,.2,1), background .16s;
}
.app-dock__item:hover    { transform: translateY(-9px) scale(1.20); background: rgba(20, 28, 60, .07); }
.app-dock__item:active   { transform: translateY(-4px) scale(1.08); }
.app-dock__item:focus-visible { outline: 2px solid var(--color-primary, #5b6fe8); outline-offset: 2px; }
.app-dock__item i,
.app-dock__item svg { width: 22px; height: 22px; }
.app-dock__item--primary { background: var(--color-primary, #5b6fe8); color: #fff; }
.app-dock__item--primary:hover { background: var(--color-primary, #5b6fe8); }
.app-dock__item--green { background: var(--color-success, #2e8b5a); color: #fff; }
.app-dock__item--green:hover { background: var(--color-success, #2e8b5a); }
.app-dock__item--danger { background: var(--color-danger, #e05c6e); color: #fff; }
.app-dock__item--danger:hover { background: var(--color-danger, #e05c6e); }

/* Etiqueta (tooltip) al pasar el cursor */
.app-dock__tip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #1d2342;
  color: #fff;
  font-size: .74rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 4px 9px;
  border-radius: 7px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s, transform .14s;
}
.app-dock__tip::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #1d2342;
}
.app-dock__item:hover .app-dock__tip,
.app-dock__item:focus-visible .app-dock__tip { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Deja espacio para que el dock no tape el final del contenido.
   El dock vive en <body>, por eso reservamos con la clase del body. */
body.has-dock #app-content { padding-bottom: 104px; }

[data-theme="dark"] .app-dock { border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .app-dock__item:hover { background: rgba(255,255,255,.10); }

/* En móvil la barra inferior (.mobile-nav, 64px) ocupa el fondo, así que
   el dock debe flotar JUSTO por encima de ella; si no, sus acciones
   (p. ej. "Nuevo producto" del inventario) quedan ocultas detrás del nav
   y se vuelven intocables. */
@media (max-width: 768px) {
  .app-dock {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 12px);
    padding: 6px 10px;
  }
  .app-dock__inner { gap: 6px; }
  .app-dock__item { width: 44px; height: 44px; }
  /* Reservar espacio para nav (64px) + dock por encima, y que el dock
     oculto al hacer scroll no deje hueco extra. */
  body.has-dock #app-content {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 88px);
  }
}

/* ── Barra de filtros compartida (.filter-bar) ───────────────────
   Base reutilizable para filtros multi-campo. Las variantes específicas
   (--amount, --search, etc.) y los inputs particulares viven en el módulo.
   Ver docs/design-system.md §3. */
.filter-bar {
  display:        flex;
  flex-wrap:      wrap;
  gap:            var(--spacing-md);
  align-items:    flex-end;
  margin-bottom:  var(--spacing-lg);
  padding:        var(--spacing-md) var(--spacing-lg);
  background:     rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border:         1px solid rgba(0, 0, 0, 0.06);
  border-radius:  var(--radius-lg);
  box-shadow:     0 1px 4px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.filter-bar__group {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-xs);
  min-width:      140px;
  flex:           1;
}
.filter-bar .form-control {
  background:   rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.1);
}
.filter-bar .form-control:focus {
  border-color: var(--color-primary);
  box-shadow:   0 0 0 3px rgba(108, 99, 255, 0.12);
}
[data-theme="dark"] .filter-bar {
  background:   rgba(26, 26, 46, 0.70);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:   0 1px 4px rgba(0, 0, 0, 0.30);
}
[data-theme="dark"] .filter-bar .form-control {
  background:   rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

/* ── Selector de período compartido (.period-picker) ─────────────
   Mismo lenguaje visual para mes/año, presets y rango. Ver docs/design-system.md. */
.period-picker { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.period-picker__label {
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold, 700);
  text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted);
}
/* Segmento de pills (presets) */
.seg {
  display: inline-flex; background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-full, 999px); padding: 3px; gap: 2px;
}
.seg__btn {
  font: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold, 600);
  border: 0; background: transparent; color: var(--color-text-muted);
  padding: 7px 15px; border-radius: var(--radius-full, 999px); cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast); white-space: nowrap;
}
.seg__btn:hover { color: var(--color-text); }
.seg__btn--active { background: var(--color-primary); color: #fff; box-shadow: 0 2px 8px rgba(108,99,255,.30); }
/* Select que comparte el aspecto del segmento */
.period-select {
  font: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text); background: var(--color-surface);
  border: 1px solid var(--color-border-dark); border-radius: var(--radius-full, 999px);
  padding: 8px 16px; cursor: pointer;
}
.period-select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(108,99,255,.15); }

/* ─────────────────────────────────────────────────────────────────
 * Franjas de acento de tarjetas — DESACTIVADAS (Fase 3, apartado visual)
 * ─────────────────────────────────────────────────────────────────
 * Las tarjetas KPI/resumen tenían una barra de color (gradiente) en el borde
 * superior/inferior que daba un aire "plantilla generada". Se eliminan para un
 * look más sobrio; el color semántico ya lo comunican el número y las badges.
 *
 * `!important` es necesario porque cada módulo inyecta su styles.css DESPUÉS de
 * este archivo, así que sin él la regla del módulo ganaría por orden de carga.
 * Para revertir: borrar este bloque. Para una versión sutil en su lugar, cambiar
 * `display:none` por `background: var(--color-border) !important; height: 1px;`.
 */
.tx-summary__card::before,     /* Transacciones */
.sa-card::before,              /* Ventas — KPIs */
.sa-cost-card::before,         /* Ventas — costos */
.sa-inv-stat-card::before,     /* Ventas — inventario */
.sa-inv-highlight::before,     /* Ventas — destacados */
.inv-summary__card::before,    /* Inventario — resumen */
.inv-highlight::before,        /* Inventario — destacados */
.tax-card::before,             /* Tributario */
.sup-card::before,             /* Proveedores (aparecía en hover) */
.dash-mc-util::after,          /* Dashboard — barra inferior de margen */
.pnd-card__bar,                /* Pendientes — barra (pulsante) de vencidas */
.ruc-suspended::before,        /* Mi RUC — estado suspendido */
.ruc-warning-state::before,    /* Mi RUC — estado de advertencia */
.ruc-manual-guide::before {    /* Mi RUC — guía manual */
  display: none !important;
}

/* NOTA (Fase 3): la "limpieza total" de tarjetas (fondo plano + ocultar
 * watermark y flechas) se REVIRTIÓ a pedido del usuario. Se conservan las
 * animaciones (círculos internos y la lluvia de flechas) y el degradado sutil
 * de fondo para que la tarjeta no se vea vacía. Solo quedan desactivadas las
 * FRANJAS de acento (bloque de arriba). */