/* Cygna · Theme propio (NO heredado de Orion) */
:root {
  --cygna-bg: #FFFFFF;
  --cygna-paper: #F7F4EE;
  --cygna-navy: #0F2147;
  --cygna-cisne: #1A3A6E;
  --cygna-gold: #C9A961;
  --cygna-success: #3D7E5C;
  --cygna-danger: #A8344A;
  --cygna-border: #E8E5DD;
  --cygna-muted: #6B7280;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body.cygna-app {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--cygna-paper);
  color: var(--cygna-navy);
  display: flex;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* ============ SIDEBAR ============ */
.cygna-sidebar {
  width: 240px;
  background: var(--cygna-navy);
  color: #FFFFFF;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 24px 0 16px;
  z-index: 30;
}
.cygna-logo {
  padding: 0 24px 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.cygna-logo-mark {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: rgba(201,169,97,0.14);
  border: 1px solid rgba(201,169,97,0.35);
  color: var(--cygna-gold);
}
.cygna-logo-name {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 26px;
  color: var(--cygna-gold);
  line-height: 1;
}
.cygna-nav {
  flex: 1;
  padding: 14px 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.cygna-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  color: rgba(255,255,255,0.72);
  font-size: 14px;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.cygna-nav a:hover { background: rgba(255,255,255,0.05); color: #FFFFFF; }
.cygna-nav a.active {
  color: var(--cygna-gold);
  border-left-color: var(--cygna-gold);
  background: rgba(201,169,97,0.08);
}
.cygna-nav-section {
  padding: 18px 24px 6px;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  font-weight: 600;
}
.cygna-sidebar-footer {
  padding: 14px 24px;
  font-size: 11.5px;
  color: rgba(255,255,255,0.5);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.cygna-sidebar-footer small { display: block; margin-top: 3px; opacity: 0.7; }

/* ============ MAIN ============ */
.cygna-main {
  margin-left: 240px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cygna-header {
  background: var(--cygna-bg);
  border-bottom: 1px solid var(--cygna-border);
  padding: 12px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.cygna-empresa-switcher {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--cygna-navy);
  position: relative;
}
.cygna-empresa-switcher .label {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--cygna-muted);
  text-transform: uppercase;
  font-weight: 600;
}
.cygna-empresa-switcher select.cygna-input {
  padding: 7px 10px;
  font-size: 13px;
  min-width: 200px;
  max-width: 320px;
}
.cygna-user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--cygna-muted);
}
.cygna-avatar {
  width: 34px; height: 34px;
  background: var(--cygna-navy);
  color: var(--cygna-gold);
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 600;
  font-size: 13px;
}
.cygna-content { padding: 32px; flex: 1; }

/* ============ ELEMENTS ============ */
.cygna-card {
  background: var(--cygna-bg);
  border: 1px solid var(--cygna-border);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(15,33,71,0.04);
}
.cygna-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--cygna-cisne);
  color: #FFFFFF;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font: 500 14px/1 'Inter', sans-serif;
  cursor: pointer;
  transition: background .15s, transform .15s;
  text-decoration: none;
}
.cygna-btn:hover { background: var(--cygna-navy); transform: translateY(-1px); }
.cygna-btn-gold { background: var(--cygna-gold); color: var(--cygna-navy); }
.cygna-btn-gold:hover { background: #b89554; }
.cygna-btn-ghost {
  background: transparent;
  color: var(--cygna-cisne);
  border: 1px solid var(--cygna-border);
}
.cygna-btn-ghost:hover { background: var(--cygna-paper); }
.cygna-btn-block { width: 100%; }
.cygna-h1 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.1;
  margin-bottom: 6px;
  color: var(--cygna-navy);
}
.cygna-h1 em { color: var(--cygna-gold); }
.cygna-h2 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  margin-bottom: 8px;
}
.cygna-eyebrow {
  color: var(--cygna-gold);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 8px;
}
.cygna-sub { color: var(--cygna-muted); font-size: 15px; max-width: 640px; margin-bottom: 28px; }
input.cygna-input, select.cygna-input, textarea.cygna-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--cygna-border);
  border-radius: 8px;
  font: 400 14px/1.4 'Inter', sans-serif;
  background: var(--cygna-bg);
  color: var(--cygna-navy);
}
input.cygna-input:focus, select.cygna-input:focus, textarea.cygna-input:focus {
  outline: none;
  border-color: var(--cygna-cisne);
  box-shadow: 0 0 0 3px rgba(26,58,110,0.10);
}
.cygna-field { margin-bottom: 14px; }
.cygna-field label {
  display: block;
  font-size: 12.5px;
  color: var(--cygna-muted);
  margin-bottom: 5px;
  font-weight: 500;
}
.cygna-alert {
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  margin-bottom: 16px;
}
.cygna-alert-error { background: #FBE8EB; color: #8B2A3D; border: 1px solid #F1B6BF; }
.cygna-alert-info  { background: #EAF1F9; color: #1A3A6E; border: 1px solid #C5D6EA; }

/* ============ DASHBOARD GRID ============ */
.cygna-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}
.cygna-empresa-card {
  background: var(--cygna-bg);
  border: 1px solid var(--cygna-border);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.cygna-empresa-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px -20px rgba(15,33,71,0.18);
  border-color: rgba(201,169,97,0.4);
}
.cygna-empresa-head { display: flex; align-items: center; gap: 12px; }
.cygna-empresa-logo {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cygna-gold), #b89554);
  color: var(--cygna-navy);
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}
.cygna-empresa-title { flex: 1; min-width: 0; }
.cygna-empresa-title .razon {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 19px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cygna-empresa-title .rut {
  font-family: 'JetBrains Mono', Menlo, monospace;
  font-size: 11px;
  color: var(--cygna-muted);
}
.cygna-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.cygna-badge {
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(201,169,97,0.14);
  color: #8a7038;
  font-weight: 500;
}
.cygna-badge.off { background: #f0eee9; color: #999; }
.cygna-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--cygna-border);
}
.cygna-stat .lbl {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cygna-muted);
  font-weight: 600;
}
.cygna-stat .val {
  font-size: 13px;
  font-weight: 500;
  margin-top: 2px;
  color: var(--cygna-navy);
}

/* ============ LOGIN ============ */
.cygna-login {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  min-height: 100vh;
  background: var(--cygna-paper);
}
.cygna-login-visual {
  background: var(--cygna-navy);
  color: #FFFFFF;
  padding: 56px 64px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.cygna-login-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 18px 18px, rgba(201,169,97,0.10) 1px, transparent 1px);
  background-size: 36px 36px;
}
.cygna-login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 2;
}
.cygna-login-brand .name {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 30px;
  color: var(--cygna-gold);
}
.cygna-login-hero {
  position: relative; z-index: 2;
  max-width: 460px;
}
.cygna-login-hero .eyebrow {
  color: var(--cygna-gold);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-weight: 600;
}
.cygna-login-hero h1 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 44px;
  line-height: 1.1;
  margin-bottom: 18px;
}
.cygna-login-hero p {
  color: rgba(255,255,255,0.72);
  font-size: 15px;
  line-height: 1.6;
}
.cygna-login-foot {
  position: relative; z-index: 2;
  font-size: 11.5px;
  color: rgba(255,255,255,0.45);
  font-family: 'JetBrains Mono', Menlo, monospace;
}
.cygna-login-form-side {
  background: var(--cygna-bg);
  padding: 56px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cygna-login-form { width: 100%; max-width: 380px; margin: 0 auto; }
.cygna-login-form h2 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
  margin-bottom: 6px;
}
.cygna-login-form .desc { color: var(--cygna-muted); font-size: 14px; margin-bottom: 26px; }
.cygna-login-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; margin: 8px 0 20px;
}
.cygna-login-row label { display: inline-flex; align-items: center; gap: 7px; color: var(--cygna-muted); cursor: pointer; }
.cygna-login-row a { color: var(--cygna-cisne); font-weight: 500; }
.cygna-login-foot-link {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--cygna-border);
  text-align: center;
  font-size: 13px;
  color: var(--cygna-muted);
}

/* ============ EMPTY STATE ============ */
.cygna-empty {
  background: var(--cygna-bg);
  border: 1px dashed var(--cygna-border);
  border-radius: 14px;
  padding: 48px 32px;
  text-align: center;
}
.cygna-empty h3 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  margin-bottom: 10px;
}
.cygna-empty p { color: var(--cygna-muted); margin-bottom: 22px; }

/* ============ MODULE WRAPPER ============ */
/* Wrappa contenido legacy del modulo Orion bajo paper background */
.cygna-module-frame { }
.cygna-module-frame .topbar,
.cygna-module-frame .banner-soporte,
.cygna-module-frame .cygna-banner { display: none !important; }

/* ============ RESPONSIVE ============ */
@media (max-width: 880px) {
  .cygna-sidebar { transform: translateX(-100%); transition: transform .25s; }
  .cygna-sidebar.open { transform: translateX(0); }
  .cygna-main { margin-left: 0; }
  .cygna-login { grid-template-columns: 1fr; }
  .cygna-login-visual { display: none; }
  .cygna-login-form-side { padding: 40px 28px; }
  .cygna-content { padding: 22px 18px; }
}


/* === Buscador de empresas (dashboard) === */
.cygna-search{position:relative;display:flex;align-items:center;gap:.6rem;background:var(--cygna-bg);border:1.5px solid var(--cygna-border);border-radius:12px;padding:.65rem 1rem;margin:1rem 0 1.5rem;max-width:560px;transition:all .15s}
.cygna-search:focus-within{border-color:var(--cygna-cisne);box-shadow:0 0 0 4px rgba(26,58,110,.08)}
.cygna-search-icon{color:var(--cygna-muted);flex-shrink:0}
.cygna-search:focus-within .cygna-search-icon{color:var(--cygna-cisne)}
.cygna-search-input{flex:1;border:none;outline:none;background:transparent;font-size:.95rem;font-family:inherit;color:var(--cygna-navy);padding:.2rem 0}
.cygna-search-input::placeholder{color:var(--cygna-muted);font-style:italic}
.cygna-search-input::-webkit-search-cancel-button{cursor:pointer;-webkit-appearance:none;width:14px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round'><path d='M18 6L6 18M6 6l12 12'/></svg>") no-repeat center;background-size:contain;opacity:.6}
.cygna-search-input::-webkit-search-cancel-button:hover{opacity:1}
.cygna-search-count{font-size:.78rem;color:var(--cygna-muted);font-variant-numeric:tabular-nums;flex-shrink:0;font-family:'JetBrains Mono',Menlo,monospace}
@media(max-width:640px){.cygna-search{max-width:100%}}

/* ============================================================
   === Modulos legacy dentro del wrapper Cygna ===
   Aplica look Cygna (Instrument Serif + paleta navy/gold/paper)
   a cualquier modulo legacy renderizado dentro de .cygna-content
   sin necesidad de tocar el HTML del modulo.
   ============================================================ */

.cygna-content {
  max-width: 1240px;
  margin: 0 auto;
}

/* Tipografia */
.cygna-content h1, .cygna-content h2 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--cygna-navy);
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0 0 .5rem;
}
.cygna-content h1 { font-size: 2.2rem; }
.cygna-content h2 { font-size: 1.6rem; margin-top: 2rem; }

.cygna-content h3, .cygna-content h4 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: var(--cygna-navy);
  margin: 1.5rem 0 .75rem;
  font-size: 1.05rem;
  letter-spacing: -.01em;
}
.cygna-content h4 { font-size: .95rem; color: var(--cygna-cisne); }

.cygna-content p {
  line-height: 1.6;
  color: var(--cygna-navy);
  margin: 0 0 1rem;
  font-size: .95rem;
}

/* Header del modulo: bloque "Servicio profesional · LDHS · contabilidad nativa" */
.cygna-content > p:first-of-type,
.cygna-content > h1 + p {
  color: var(--cygna-muted);
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Strong / em destacados */
.cygna-content strong { color: var(--cygna-navy); font-weight: 600; }
.cygna-content em { color: var(--cygna-gold); font-style: italic; }

/* Links */
.cygna-content a {
  color: var(--cygna-cisne);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: all .12s;
}
.cygna-content a:hover {
  color: var(--cygna-navy);
  border-bottom-color: var(--cygna-gold);
}

/* Nav superior del modulo: "Dashboard | Libro Diario | + Nuevo asiento | ..."
   El modulo legacy renderiza estos como <a>'s separados por pipes "|" o espacios.
   Los convertimos visualmente en pills sin tocar HTML. */
.cygna-content nav,
.cygna-content .nav-modulo,
.cygna-content > p:has(> a:nth-of-type(2)) {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--cygna-border);
  margin: -.5rem 0 1.5rem;
}
.cygna-content nav a,
.cygna-content .nav-modulo a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .85rem;
  background: var(--cygna-bg);
  border: 1px solid var(--cygna-border);
  border-radius: 8px;
  font-size: .85rem;
  color: var(--cygna-navy);
  border-bottom-color: var(--cygna-border);
  font-weight: 500;
}
.cygna-content nav a:hover,
.cygna-content .nav-modulo a:hover {
  background: var(--cygna-paper);
  border-color: var(--cygna-cisne);
  color: var(--cygna-cisne);
  transform: translateY(-1px);
}
.cygna-content nav a.active,
.cygna-content nav a[aria-current="page"] {
  background: var(--cygna-navy);
  color: var(--cygna-gold);
  border-color: var(--cygna-navy);
}

/* Tablas */
.cygna-content table {
  width: 100%;
  border-collapse: collapse;
  background: var(--cygna-bg);
  border-radius: 12px;
  overflow: hidden;
  margin: 1rem 0 1.5rem;
  font-size: .9rem;
  box-shadow: 0 1px 3px rgba(15,33,71,.04);
  border: 1px solid var(--cygna-border);
}
.cygna-content thead { background: var(--cygna-paper); }
.cygna-content th {
  padding: .85rem 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--cygna-navy);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 2px solid var(--cygna-border);
}
.cygna-content td {
  padding: .75rem 1rem;
  border-top: 1px solid var(--cygna-border);
  color: var(--cygna-navy);
}
.cygna-content tbody tr:hover { background: var(--cygna-paper); }
.cygna-content tfoot td,
.cygna-content tr.total td {
  font-weight: 600;
  background: var(--cygna-paper);
  border-top: 2px solid var(--cygna-navy);
}

/* Inputs / selects (sobre lo que ya existe) */
.cygna-content select,
.cygna-content input[type="text"],
.cygna-content input[type="search"],
.cygna-content input[type="date"],
.cygna-content input[type="number"],
.cygna-content input[type="email"],
.cygna-content input[type="month"],
.cygna-content textarea {
  padding: .55rem .85rem;
  border: 1px solid var(--cygna-border);
  border-radius: 8px;
  background: var(--cygna-bg);
  color: var(--cygna-navy);
  font-family: inherit;
  font-size: .9rem;
  transition: all .12s;
}
.cygna-content select:focus,
.cygna-content input:focus,
.cygna-content textarea:focus {
  outline: none;
  border-color: var(--cygna-cisne);
  box-shadow: 0 0 0 3px rgba(26,58,110,.08);
}
.cygna-content label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--cygna-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .35rem;
}

/* Botones inline (button, input[type=submit]) */
.cygna-content button,
.cygna-content input[type="submit"],
.cygna-content input[type="button"] {
  padding: .55rem 1rem;
  background: var(--cygna-cisne);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: .88rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .12s;
}
.cygna-content button:hover,
.cygna-content input[type="submit"]:hover {
  background: var(--cygna-navy);
  transform: translateY(-1px);
}
.cygna-content button.secondary,
.cygna-content button.btn-ghost {
  background: transparent;
  color: var(--cygna-cisne);
  border: 1px solid var(--cygna-border);
}
.cygna-content button.secondary:hover {
  border-color: var(--cygna-cisne);
  background: var(--cygna-paper);
}

/* "Cards" generales: divs con borde o sombra */
.cygna-content > div,
.cygna-content section {
  background: var(--cygna-bg);
  border-radius: 12px;
}
.cygna-content section {
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--cygna-border);
}

/* KPIs / mini dashboard rows: "Ingresos $0", "Egresos $0", etc.
   Estos en el modulo legacy son <h2> + <p> apilados. */
.cygna-content h2 + p {
  font-size: 1.8rem;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--cygna-gold);
  margin: -.25rem 0 .5rem;
  letter-spacing: -.02em;
}

/* Listas */
.cygna-content ul, .cygna-content ol {
  padding-left: 1.5rem;
  margin: .5rem 0 1rem;
  line-height: 1.7;
  font-size: .9rem;
}
.cygna-content li { margin: .25rem 0; }

/* Code / mono */
.cygna-content code, .cygna-content pre {
  font-family: 'JetBrains Mono', Menlo, monospace;
  background: var(--cygna-paper);
  padding: .15rem .35rem;
  border-radius: 4px;
  font-size: .85rem;
  color: var(--cygna-cisne);
}

/* Hr / separadores */
.cygna-content hr {
  border: none;
  border-top: 1px solid var(--cygna-border);
  margin: 2rem 0;
}

/* Mensajes flash / alerts */
.cygna-content .alert,
.cygna-content .flash,
.cygna-content .msg-success {
  padding: 1rem 1.25rem;
  border-radius: 10px;
  margin: 1rem 0;
  font-size: .9rem;
  border-left: 4px solid var(--cygna-success);
  background: rgba(61,126,92,.06);
  color: var(--cygna-navy);
}
.cygna-content .alert-error,
.cygna-content .msg-error {
  border-left-color: var(--cygna-danger);
  background: rgba(168,52,74,.06);
}
.cygna-content .alert-info,
.cygna-content .msg-info {
  border-left-color: var(--cygna-cisne);
  background: rgba(26,58,110,.06);
}

/* Modo tiempo real / hint texto */
.cygna-content [class*="hint"],
.cygna-content small,
.cygna-content .meta {
  font-size: .8rem;
  color: var(--cygna-muted);
}

/* Responsive: tabla scroll horizontal en mobile */
@media (max-width: 768px) {
  .cygna-content table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  .cygna-content h1 { font-size: 1.7rem; }
  .cygna-content h2 { font-size: 1.3rem; }
}

/* ============================================================
   === Compat clases legacy Orion ===
   El CSS de Orion (paper/ink/gold) NO se carga en Cygna.
   Aqui mapeamos las clases mas usadas (.btn, .card, .alerta...)
   y variables (--line-2, --muted, --ink) a la paleta Cygna.
   ============================================================ */

.cygna-content {
  /* Mapeo de variables Orion -> Cygna */
  --line: var(--cygna-border);
  --line-2: var(--cygna-border);
  --muted: var(--cygna-muted);
  --ink: var(--cygna-navy);
  --paper: var(--cygna-paper);
  --gold: var(--cygna-gold);
  --green: var(--cygna-success);
  --red: var(--cygna-danger);
  --bg: var(--cygna-bg);
  --primary: var(--cygna-cisne);
}

/* ===== .card ===== */
.cygna-content .card {
  background: var(--cygna-bg);
  border: 1px solid var(--cygna-border);
  border-radius: 12px;
  padding: 1.25rem;
  margin: 0 0 1rem 0;
  box-shadow: 0 1px 3px rgba(15,33,71,.04);
}
.cygna-content .card.mb-16 { margin-bottom: 1rem; }

/* ===== .btn family ===== */
.cygna-content .btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .55rem 1rem;
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 500;
  font-size: .9rem;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: all .12s;
  line-height: 1.2;
  white-space: nowrap;
  border-bottom: 1px solid transparent !important;
}
.cygna-content .btn:hover { transform: translateY(-1px); }

.cygna-content .btn-sm {
  padding: .4rem .75rem;
  font-size: .82rem;
}

.cygna-content .btn-primary,
.cygna-content a.btn-primary {
  background: var(--cygna-navy);
  color: #fff !important;
  border-color: var(--cygna-navy);
}
.cygna-content .btn-primary:hover {
  background: var(--cygna-cisne);
  border-color: var(--cygna-cisne);
  color: #fff !important;
}

.cygna-content .btn-ghost,
.cygna-content a.btn-ghost {
  background: var(--cygna-bg);
  color: var(--cygna-navy) !important;
  border: 1px solid var(--cygna-border);
}
.cygna-content .btn-ghost:hover {
  background: var(--cygna-paper);
  border-color: var(--cygna-cisne);
  color: var(--cygna-cisne) !important;
}

.cygna-content .btn-secondary {
  background: var(--cygna-paper);
  color: var(--cygna-navy) !important;
  border-color: var(--cygna-border);
}

.cygna-content .btn-danger {
  background: var(--cygna-danger);
  color: #fff !important;
  border-color: var(--cygna-danger);
}
.cygna-content .btn-success {
  background: var(--cygna-success);
  color: #fff !important;
  border-color: var(--cygna-success);
}

/* Botones con style inline color (override a paleta Cygna) */
.cygna-content .btn[style*="background:#0c4a6e"],
.cygna-content .btn[style*="background: #0c4a6e"] {
  background: var(--cygna-gold) !important;
  color: var(--cygna-navy) !important;
  border-color: var(--cygna-gold) !important;
}

/* ===== .alerta ===== */
.cygna-content .alerta {
  padding: 1rem 1.25rem;
  border-radius: 10px;
  margin: 1rem 0;
  font-size: .9rem;
  border-left: 4px solid var(--cygna-cisne);
  background: rgba(26,58,110,.06);
  color: var(--cygna-navy);
}
.cygna-content .alerta-info {
  border-left-color: var(--cygna-cisne);
  background: rgba(26,58,110,.06);
}
.cygna-content .alerta-success,
.cygna-content .alerta-ok {
  border-left-color: var(--cygna-success);
  background: rgba(61,126,92,.06);
}
.cygna-content .alerta-warning {
  border-left-color: var(--cygna-gold);
  background: rgba(201,169,97,.08);
}
.cygna-content .alerta-error,
.cygna-content .alerta-danger {
  border-left-color: var(--cygna-danger);
  background: rgba(168,52,74,.06);
}

/* ===== Utilities Orion ===== */
.cygna-content .mb-4  { margin-bottom: .25rem; }
.cygna-content .mb-8  { margin-bottom: .5rem; }
.cygna-content .mb-12 { margin-bottom: .75rem; }
.cygna-content .mb-16 { margin-bottom: 1rem; }
.cygna-content .mb-24 { margin-bottom: 1.5rem; }
.cygna-content .mb-32 { margin-bottom: 2rem; }
.cygna-content .mt-8  { margin-top: .5rem; }
.cygna-content .mt-16 { margin-top: 1rem; }
.cygna-content .mt-24 { margin-top: 1.5rem; }

.cygna-content .text-muted { color: var(--cygna-muted); }
.cygna-content .text-success { color: var(--cygna-success); }
.cygna-content .text-danger { color: var(--cygna-danger); }
.cygna-content .text-gold { color: var(--cygna-gold); }
.cygna-content .text-right { text-align: right; }
.cygna-content .text-center { text-align: center; }

.cygna-content .flex { display: flex; }
.cygna-content .flex-1 { flex: 1; }
.cygna-content .gap-8 { gap: .5rem; }
.cygna-content .gap-12 { gap: .75rem; }
.cygna-content .gap-16 { gap: 1rem; }

/* ===== Headings dentro de .card (anular reglas previas que afectaban h2+p) ===== */
.cygna-content .card h2,
.cygna-content .card h3,
.cygna-content .card h4 {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 600;
  margin-top: 0;
}
.cygna-content .card h2 + p,
.cygna-content .kpi p {
  font-size: 1.6rem;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  color: var(--cygna-gold);
  margin: 0;
}

/* ===== KPI cards (Ingresos/Egresos/Resultado/Saldo bancos) =====
   Cuando el modulo legacy las apila, las normalizamos en grid. */
.cygna-content .kpi-grid,
.cygna-content .kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.cygna-content .kpi {
  background: var(--cygna-bg);
  border: 1px solid var(--cygna-border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
}
.cygna-content .kpi-label,
.cygna-content .kpi small {
  font-size: .75rem;
  color: var(--cygna-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}
.cygna-content .kpi-value,
.cygna-content .kpi strong {
  display: block;
  font-size: 1.6rem;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  color: var(--cygna-navy);
  margin: .25rem 0 0;
}

/* ===== Form rows ===== */
.cygna-content .form-row {
  display: flex;
  gap: 1rem;
  align-items: end;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.cygna-content .form-row > div { flex: 1; min-width: 180px; }

/* ===== Breadcrumbs ===== */
.cygna-content .breadcrumb,
.cygna-content .crumbs {
  font-size: .8rem;
  color: var(--cygna-muted);
  margin-bottom: 1rem;
  letter-spacing: .04em;
}
.cygna-content .breadcrumb a,
.cygna-content .crumbs a {
  color: var(--cygna-cisne);
  border-bottom: none;
}
.cygna-content .breadcrumb-sep { color: var(--cygna-muted); padding: 0 .35rem; }

/* ===== Dejar las reglas anteriores limpias ===== */
/* Anular el comportamiento que convertia <a>'s sueltos en pills (causaba conflicto con .btn) */
.cygna-content > p:has(> a:nth-of-type(2)),
.cygna-content > nav,
.cygna-content > .nav-modulo {
  /* Estos selectores anteriores ya no aplican; los reemplazamos por null */
  all: revert;
}

/* ============================================================
   === Densidad y aprovechamiento espacio ===
   Reducir paddings/margins, KPIs en grid auto, max-width amplio
   ============================================================ */

/* Aumentar zona util: mas ancho, menos padding lateral */
.cygna-main { padding: 0; }
.cygna-content {
  max-width: 1480px;
  padding: 1.25rem 1.75rem;
  margin: 0 auto;
}
@media (max-width: 900px) { .cygna-content { padding: 1rem; } }

/* Cards mas compactas */
.cygna-content .card {
  padding: 1rem 1.15rem;
  margin: 0 0 .75rem;
}
.cygna-content .card.mb-16 { margin-bottom: .75rem; }
.cygna-content section { padding: 1rem 1.15rem; margin-bottom: .75rem; }

/* Headings con menos margin-top en cards */
.cygna-content .card > h1:first-child,
.cygna-content .card > h2:first-child,
.cygna-content .card > h3:first-child { margin-top: 0; }

/* Reducir margin-top de h2 standalone (estaba en 2rem) */
.cygna-content h2 { margin-top: 1.25rem; font-size: 1.4rem; }
.cygna-content h3 { margin: 1rem 0 .5rem; }

/* KPI grid: agrupa cards consecutivas con poco contenido en 4 cols */
.cygna-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .75rem;
  margin: 0 0 1rem 0;
}
.cygna-kpi-row .card {
  margin: 0 !important;
  padding: 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.cygna-kpi-row .card h1,
.cygna-kpi-row .card h2,
.cygna-kpi-row .card h3 {
  font-family: 'Inter', sans-serif !important;
  font-style: normal !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  color: var(--cygna-muted) !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 !important;
}
.cygna-kpi-row .card > p:nth-of-type(1) {
  font-family: 'Instrument Serif', serif !important;
  font-style: italic !important;
  font-size: 1.7rem !important;
  font-weight: 400 !important;
  color: var(--cygna-navy) !important;
  margin: 0 !important;
  line-height: 1.1;
  text-transform: none;
  letter-spacing: -.01em;
}
.cygna-kpi-row .card small,
.cygna-kpi-row .card > p:nth-of-type(2) {
  font-size: .72rem !important;
  color: var(--cygna-muted) !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  font-family: 'Inter', sans-serif !important;
  font-style: normal !important;
}

/* Mensaje "tiempo real" mas sutil */
.cygna-content .alerta-info,
.cygna-content .alerta {
  padding: .65rem 1rem;
  font-size: .85rem;
  margin: .25rem 0 .75rem;
  border-radius: 8px;
}

/* Tabla mas densa */
.cygna-content table {
  margin: .5rem 0 1rem;
  font-size: .88rem;
}
.cygna-content th { padding: .65rem .85rem; font-size: .72rem; }
.cygna-content td { padding: .55rem .85rem; }

/* Form-row mas compacto */
.cygna-content form { margin-bottom: .25rem; }

/* Eliminar el outline azul gigante */
.cygna-content > div,
.cygna-content section {
  background: transparent;
  border: none;
  padding: 0;
}
.cygna-content section.card,
.cygna-content > div.card { 
  background: var(--cygna-bg);
  border: 1px solid var(--cygna-border);
  padding: 1rem 1.15rem;
}

/* Header del modulo (titulo + selector periodo) en mismo card compacto */
.cygna-content > .card:first-of-type {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 1.25rem;
}
.cygna-content > .card:first-of-type h1 {
  font-size: 1.7rem;
  margin: 0;
  flex: 1 1 auto;
}