/* ─── app-kit-extras.css ──────────────────────────────────────────
   Primitivos R3 del UI Kit (Cecomunica Design System) que aún no
   existen en `ceco-ui.css`. Importado al final de ceco-ui para que
   esté disponible globalmente.

   Espejo de los bloques nuevos en
   `Cecomunica Design System/ui_kits/app/app.css`. Cuando se consolide
   la migración (Fase final), todo `app.css` reemplazará a `ceco-ui.css`
   y este archivo desaparece.
   ──────────────────────────────────────────────────────────────── */


/* ── Toggle pill (compact inline switch) ─────────────────────── */
.toggle-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  background: var(--surface-sunken, #F4F7FA);
  border: 1px solid var(--border-default, #DDE4EB);
  border-radius: var(--radius-pill, 999px);
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-2, #2F3942);
  cursor: pointer;
  transition: background var(--dur-fast, 0.12s), border-color var(--dur-fast, 0.12s), color var(--dur-fast, 0.12s);
  white-space: nowrap;
}
.toggle-pill:hover { border-color: var(--accent); color: var(--accent); }
.toggle-pill input[type="checkbox"] { cursor: pointer; margin: 0; }
.toggle-pill.is-on {
  background: var(--accent-soft, rgba(0,180,216,0.10));
  border-color: var(--accent);
  color: var(--accent);
}


/* ── Dropdown menu ───────────────────────────────────────────── */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  min-width: 220px;
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-subtle, #EEF2F6);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-lg, 0 10px 25px rgba(0,0,0,0.10));
  padding: 6px;
  animation: dropdown-in 0.14s ease;
}
.dropdown.open .dropdown-menu,
.dropdown-menu.open { display: block; }
@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  width: 100%;
  font-size: 13px;
  color: var(--fg-1, #0E1418);
  background: none;
  border: 0;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.dropdown-item:hover { background: var(--surface-sunken, #F4F7FA); }
.dropdown-item svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--fg-3, #6B7884); }
.dropdown-item.danger { color: var(--status-critical, #D24545); }
.dropdown-item.danger svg { color: var(--status-critical, #D24545); }
.dropdown-item:disabled { opacity: 0.5; cursor: not-allowed; }
.dropdown-divider {
  height: 1px;
  margin: 4px 6px;
  background: var(--border-subtle, #EEF2F6);
}
.dropdown-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-4, #9AA7B4);
  padding: 8px 10px 4px;
}


/* ── Floating tooltip ────────────────────────────────────────── */
.tooltip-floating {
  position: fixed;
  z-index: 9999;
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-subtle, #EEF2F6);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-lg, 0 10px 25px rgba(0,0,0,0.10));
  padding: 12px 16px;
  max-width: 420px;
  pointer-events: none;
  font-size: 13px;
  color: var(--fg-1, #0E1418);
  animation: tooltip-in 0.12s ease;
}
@keyframes tooltip-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tooltip-floating .tooltip-line { margin: 4px 0; line-height: 1.4; }
.tooltip-floating .tooltip-line strong { color: var(--fg-1, #0E1418); margin-right: 4px; }
.tooltip-floating .tooltip-line.muted { color: var(--fg-3, #6B7884); font-size: 12px; }


/* ── Alert banner (in-flow, non-toast) ───────────────────────── */
.alert-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: var(--accent-soft, rgba(0,145,215,0.08));
  border: 1px solid var(--accent-line, rgba(0,145,215,0.3));
  border-radius: var(--radius-md, 8px);
  font-size: 13px;
  color: var(--fg-1, #0E1418);
  margin-bottom: 16px;
}
.alert-banner.alert-success { background: #ECFDF5; border-color: #A7F3D0; color: #065F46; }
.alert-banner.alert-warning { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }
.alert-banner.alert-error   { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.alert-banner-icon { flex-shrink: 0; padding-top: 1px; }
.alert-banner-icon svg { width: 18px; height: 18px; }
.alert-banner-body { flex: 1; }
.alert-banner-body strong { display: block; margin-bottom: 2px; }
.alert-banner-close {
  background: none;
  border: 0;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  padding: 2px;
  border-radius: var(--radius-sm, 4px);
}
.alert-banner-close:hover { opacity: 1; background: rgba(0,0,0,0.05); }


/* ── Page header centered ────────────────────────────────────── */
.page-header-centered {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 32px;
  padding: 32px 16px 0;
}
.page-header-centered .page-header-icon {
  width: 56px;
  height: 56px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-md, 8px);
  background: var(--accent-soft, rgba(0,145,215,0.10));
  color: var(--accent);
  margin-bottom: 12px;
}
.page-header-centered .page-header-icon svg { width: 28px; height: 28px; }
.page-header-centered h1 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--fg-1, #0E1418);
  margin: 0 0 8px;
}
.page-header-centered p {
  font-size: 14px;
  color: var(--fg-3, #6B7884);
  margin: 0;
  line-height: 1.55;
}


/* ── Pager input ─────────────────────────────────────────────── */
.pager-input {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--fg-2, #2F3942);
}
.pager-input input {
  width: 64px;
  padding: 5px 8px;
  border: 1px solid var(--border-default, #DDE4EB);
  border-radius: var(--radius-sm, 4px);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--surface-card, #fff);
}
.pager-input input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,145,215,0.12);
}
.pager-input .pager-input-total { color: var(--fg-4, #9AA7B4); }


/* ── Responsive cards fallback ───────────────────────────────── */
.responsive-cards { display: none; flex-direction: column; gap: 8px; }
.responsive-card {
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-subtle, #EEF2F6);
  border-radius: var(--radius-md, 8px);
  padding: 12px 16px;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.05));
}
.responsive-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 4px;
}
.responsive-card-title { font-weight: 600; color: var(--fg-1, #0E1418); font-size: 14px; }
.responsive-card-sub { font-size: 13px; color: var(--fg-3, #6B7884); }
.responsive-card-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--fg-3, #6B7884);
  margin-top: 8px;
  flex-wrap: wrap;
}
.responsive-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
@media (max-width: 900px) {
  .responsive-table-wrap { display: none; }
  .responsive-cards { display: flex; }
}


/* ── Module grid (home launcher) ─────────────────────────────── */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.module-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-subtle, #EEF2F6);
  border-radius: var(--radius-lg, 12px);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.05));
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.module-card:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.10));
  border-color: var(--accent);
}
.module-card-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md, 8px);
  background: var(--accent-soft, rgba(0,145,215,0.10));
  color: var(--accent);
}
.module-card-icon svg { width: 24px; height: 24px; }
.module-card-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.module-card-title { font-weight: 600; color: var(--fg-1, #0E1418); font-size: 15px; }
.module-card-sub { font-size: 12px; color: var(--fg-3, #6B7884); }
.module-card-shortcut {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: var(--radius-sm, 4px);
  background: var(--surface-sunken, #F4F7FA);
  color: var(--fg-4, #9AA7B4);
  font-family: var(--font-mono);
  font-size: 11px;
  flex-shrink: 0;
}


/* ── Empty state with hint ───────────────────────────────────── */
.empty-state-hint {
  padding: 32px 20px;
  text-align: center;
  color: var(--fg-3, #6B7884);
}
.empty-state-hint-icon {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface-sunken, #F4F7FA);
  margin-bottom: 12px;
}
.empty-state-hint-icon svg { width: 28px; height: 28px; color: var(--fg-4, #9AA7B4); }
.empty-state-hint .title {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-1, #0E1418);
  margin: 0 0 4px;
}
.empty-state-hint .hint {
  font-size: 13px;
  color: var(--fg-3, #6B7884);
  margin: 0 0 16px;
}


/* ── .app-card override (passive surface wrapper) ────────────────
   `ceco-ui.css` define .app-card como el "launcher card" del home
   con cursor:pointer + flex + hover translate. El home actual usa
   .module-card en su lugar, así que aquí neutralizamos el comportamiento
   y .app-card se convierte en el wrapper pasivo (alias funcional de
   .ds-card) que usa el kit para envolver formularios, tablas, etc.
   ────────────────────────────────────────────────────────────── */
.app-card {
  display: block;
  gap: 0;
  align-items: stretch;
  cursor: default;
  padding: 0;
  transition: none;
}
.app-card:hover,
.app-card:active { transform: none; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.05)); border-color: var(--border-subtle, #EEF2F6); }
.app-card-padded { padding: var(--sp-6, 24px); }
/* .module-card no debe heredar este reset (ya tiene su propio cursor:pointer + hover) */
.module-card { cursor: pointer; padding: 16px 20px; }


/* ── Bulk action bar (contextual selección) ─────────────────────
   Visible cuando hay filas seleccionadas; alterna con .visible.
   ──────────────────────────────────────────────────────────── */
.bulk-bar {
  display: none;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 16px;
  background: var(--brand-soft, #E6F4FB);
  border: 1px solid var(--border-default, #DDE4EB);
  border-radius: var(--radius-md, 8px);
}
.bulk-bar.visible { display: flex; }
.bulk-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 12px;
  background: var(--brand, #0B2A47);
  color: #fff;
  border-radius: var(--radius-sm, 4px);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.bulk-count strong { color: #fff; font-weight: 800; }
.bulk-divider {
  width: 1px;
  height: 20px;
  background: var(--border-default, #DDE4EB);
  flex-shrink: 0;
}
.bulk-tag-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 160px;
}
.bulk-tag-wrap .form-input { height: 32px; font-size: 12px; min-width: 140px; }


/* ── Auth shell (scoped — no colisión con login.html actual) ─────
   Las clases .auth-brand / .auth-card / .auth-bullets ya existen en
   ceco-ui.css con otra firma. Aquí sólo aplican cuando están dentro
   de un .auth-shell (la versión nueva del kit). Cuando se migre
   public/login.html a .auth-shell, hereda automáticamente el kit.
   ──────────────────────────────────────────────────────────── */
.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  background: linear-gradient(135deg, #061829 0%, #0B2A47 100%);
}
.auth-shell .auth-brand {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 64px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  max-width: 560px;
  margin: 0 auto;
  box-shadow: none;
  backdrop-filter: none;
}
.auth-shell .auth-brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.auth-shell .auth-brand-logo h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  margin: 0;
}
.auth-shell .auth-brand-logo div { font-size: 13px; color: rgba(255,255,255,0.65); }
.auth-shell .auth-brand p {
  font-size: 15px;
  color: rgba(255,255,255,0.78);
  line-height: 1.55;
  max-width: 460px;
  margin: 0;
}
.auth-shell .auth-bullets {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.auth-shell .auth-bullets li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  margin: 0;
}
.auth-shell .auth-bullets li svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.auth-shell .auth-form-wrap {
  background: var(--surface-page, #F7F9FB);
  display: grid;
  place-items: center;
  padding: 48px;
}
.auth-shell .auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-subtle, #EEF2F6);
  border-radius: var(--radius-lg, 12px);
  padding: 48px;
  box-shadow: var(--shadow-lg, 0 10px 25px rgba(0,0,0,0.10));
}
.auth-shell .auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  color: var(--fg-4, #9AA7B4);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.auth-shell .auth-divider::before,
.auth-shell .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle, #EEF2F6);
}
.auth-shell .auth-input-toggle { position: relative; }
.auth-shell .auth-input-toggle .form-input { padding-right: 40px; }
.auth-shell .auth-input-toggle button {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  padding: 6px;
  color: var(--fg-3, #6B7884);
  cursor: pointer;
  border-radius: var(--radius-sm, 4px);
}
.auth-shell .auth-input-toggle button:hover { color: var(--accent); background: var(--surface-sunken, #F4F7FA); }
.auth-shell .auth-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0;
  font-size: 13px;
}
.auth-shell .auth-footer-row a { color: var(--accent); }
@media (max-width: 760px) {
  .auth-shell { grid-template-columns: 1fr; min-height: auto; }
  .auth-shell .auth-brand { padding: 32px 24px; text-align: left; }
  .auth-shell .auth-brand-logo { justify-content: flex-start; }
  .auth-shell .auth-form-wrap { padding: 24px; }
  .auth-shell .auth-card { box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.10)); padding: 24px; }
}

/* ============================================================================
   Facturación — componentes compartidos
   (antes copiados a mano en cada página: control de pestañas, chips de
   verificación, badges de mapeo, dot de guardado, empty-state, KPIs).
   ========================================================================== */

/* Control segmentado de pestañas (con contador opcional) */
.seg { display:inline-flex; border:1px solid var(--border-default); border-radius:var(--radius-pill); overflow:hidden; flex-wrap:wrap; }
.seg-btn { border:0; background:var(--surface-card); color:var(--fg-2); padding:5px 12px; font-size:13px; font-weight:600; cursor:pointer; }
.seg-btn.is-on { background:var(--accent); color:#fff; }
.seg-btn + .seg-btn { border-left:1px solid var(--border-default); }
.seg-btn span { display:inline-block; min-width:18px; margin-left:4px; padding:0 6px; border-radius:999px; background:rgba(0,0,0,.08); font-size:11px; }
.seg-btn.is-on span { background:rgba(255,255,255,.25); }

/* Chips de verificación (readiness) y badges de mapeo */
.r-chip { display:inline-flex; align-items:center; gap:3px; border-radius:999px; padding:1px 8px; font-size:11px; font-weight:600; border:1px solid transparent; white-space:nowrap; }
.r-ok, .map-ok   { background:#ECFDF5; color:#065F46; border-color:#A7F3D0; }
.r-warn, .map-warn { background:#FFFBEB; color:#92400E; border-color:#FDE68A; }
.r-bad   { background:#FEF2F2; color:#991B1B; border-color:#FECACA; }
.map-badge { display:inline-flex; align-items:center; gap:4px; border-radius:999px; padding:1px 8px; font-size:11px; font-weight:600; border:1px solid transparent; white-space:nowrap; }
.map-none { color: var(--fg-4); }

/* Variantes de botón por estado */
.btn.btn-warn { background:#FEF3C7; color:#92400E; border:1px solid #FDE68A; }
.btn.btn-warn:hover { background:#FDE68A; }
.btn.btn-ok { background:#ECFDF5; color:#065F46; border:1px solid #A7F3D0; }
.btn.btn-ok:hover { background:#D1FAE5; }

/* Dot de guardado por fila (hojas de cálculo de tarifas) */
.row-status { position:absolute; left:4px; top:50%; transform:translateY(-50%); width:6px; height:6px; border-radius:50%; background:transparent; transition:background var(--dur-fast,.15s); }
.row-status.saving { background:var(--status-warning); animation:rowPulse 1s ease-in-out infinite; }
.row-status.saved  { background:var(--status-online); }
.row-status.error  { background:var(--status-critical); }
@keyframes rowPulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Estado vacío y KPIs */
.empty-state { text-align:center; padding:34px 16px; color:var(--fg-3); }
.empty-state .es-title { font-weight:600; color:var(--fg-2); margin:6px 0 2px; }
.fact-kpis { display:flex; gap:20px; flex-wrap:wrap; align-items:center; font-size:13px; color:var(--fg-3); }
.fact-kpis .k b { font-family:var(--font-mono); color:var(--fg-1); font-size:16px; display:block; line-height:1.1; }
.fact-kpis .k.warn b { color:#92400E; }