/* ============================================================================
   Dental 360 — Fase 2 UX: skeletons, vacíos, confirmación, carga, impresión
   ============================================================================ */

/* --- Skeleton --- */
@keyframes ux-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton,
.skeleton-line,
.skeleton-block {
  background: linear-gradient(90deg, #E2E8F0 0%, #F1F5F9 50%, #E2E8F0 100%);
  background-size: 800px 100%;
  animation: ux-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm, 6px);
}

.skeleton-line {
  height: 14px;
  margin-bottom: 10px;
}
.skeleton-line:last-child { margin-bottom: 0; width: 70%; }
.skeleton-line.w-40 { width: 40%; }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-80 { width: 80%; }

.skeleton-block {
  width: 100%;
  min-height: 220px;
}

.skeleton-kpi {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--d360-border);
  border-radius: var(--radius);
}
.skeleton-kpi__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  flex-shrink: 0;
}
.skeleton-kpi__lines { flex: 1; }

.rep-chart-wrap.is-skeleton-loading canvas { visibility: hidden; }
.rep-chart-wrap.is-skeleton-loading::after {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, #E2E8F0 0%, #F1F5F9 50%, #E2E8F0 100%);
  background-size: 800px 100%;
  animation: ux-shimmer 1.4s ease-in-out infinite;
}

.rep-chart-wrap { position: relative; }

/* --- Estados vacíos guiados --- */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--d360-muted);
}
.empty-state__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #F1F5F9;
  display: grid;
  place-items: center;
}
.empty-state__icon i {
  font-size: 1.75rem;
  color: #94A3B8;
  margin: 0;
  display: block;
}
.empty-state__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--d360-text);
  margin-bottom: 6px;
}
.empty-state__text {
  font-size: .875rem;
  max-width: 360px;
  margin: 0 auto 16px;
  line-height: 1.5;
}
.empty-state__cta { margin-top: 4px; }

/* Compatibilidad con .empty existente */
.empty.empty--guided {
  padding: 48px 24px;
}
.empty.empty--guided .empty-state__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--d360-text);
  margin-top: 8px;
}

/* --- Modal de confirmación --- */
.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, visibility .2s;
}
.confirm-modal.open {
  opacity: 1;
  visibility: visible;
}
.confirm-modal__box {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 28px 24px 20px;
  max-width: 400px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  transform: scale(.96);
  transition: transform .2s;
}
.confirm-modal.open .confirm-modal__box { transform: scale(1); }
.confirm-modal__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #FEF3C7;
  color: #D97706;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  margin: 0 auto 14px;
}
.confirm-modal__msg {
  text-align: center;
  font-size: .95rem;
  color: var(--d360-text);
  margin: 0 0 20px;
  line-height: 1.5;
}
.confirm-modal__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* --- Botones en carga --- */
.btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ux-spin .6s linear infinite;
}
.btn-light.is-loading::after {
  border-color: rgba(37,99,235,.25);
  border-top-color: var(--d360-primary);
}
@keyframes ux-spin { to { transform: rotate(360deg); } }

form.is-submitting { opacity: .85; pointer-events: none; }

/* --- Flash → toast (oculto visualmente, leído por JS) --- */
.flash-zone--toast-only .flash {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* --- Toast extra tipos --- */
.toast--warning { background: #fff; border: 1px solid #FDE68A; color: #B45309; }
.toast--warning i { color: #D97706; font-size: 1.2rem; }
.toast--info { background: #fff; border: 1px solid #BAE6FD; color: #0369A1; }
.toast--info i { color: #0284C7; font-size: 1.2rem; }

/* --- Impresión ampliada --- */
@media print {
  .sidebar, .topbar, .mobile-quicknav, .sidebar-backdrop,
  .page-head .btn, .btn, .flash, .confirm-modal,
  .tabs, .tab-actions, .rep-filters, .mobile-quicknav {
    display: none !important;
  }

  body { background: #fff; }
  .layout { display: block; }
  .main { margin: 0; }
  .content { padding: 0; max-width: none; }

  .card {
    box-shadow: none;
    border: 1px solid #CBD5E1;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .kpi-grid, .grid { break-inside: avoid; }

  /* Odontograma / periodontograma */
  .odo-palette-wrap, .odo-control-bar, .odo-footer-bar,
  .perio-actions, .odo-sidebar-tools {
    display: none !important;
  }
  .odo-workspace { grid-template-columns: 1fr !important; }
  .odo-canvas-wrap { max-width: 100%; }
  #odontograma, #periodontograma { padding: 0; }

  /* POS ticket */
  .pos-layout { display: block !important; }
  .pos-catalog, .pos-sidebar, .pos-history, .pos-header-actions {
    display: none !important;
  }
  .pos-ticket { width: 100% !important; max-width: none !important; }
  .pos-ticket-table { font-size: 11pt; }

  /* Reportes */
  .rep-chart-wrap { min-height: 200px; }
  .rep-chart-wrap canvas { max-height: 280px !important; }

  /* Tablas */
  .table-wrap { overflow: visible; }
  .tbl { font-size: 10pt; }
  .tbl thead { display: table-header-group; }
  .tbl tr { break-inside: avoid; }

  a[href]::after { content: none !important; }
}