/* © 2026 L&C Digital & Consulting, S.L. — LCCFO Ingresos. Identidad L&C CFO®: DM Sans + Inter, dorado #C9A84C sobre #0A0A0A. */

:root {
  --sidebar-width:  220px;
  --sidebar-bg:     #0A0A0A;
  --sidebar-hover:  #161616;
  --sidebar-active: #221c0c;
  --gold:           #C9A84C;
  --sidebar-text:   rgba(255,255,255,.75);

  --bg:            oklch(0.975 0.004 90);
  --surface:       oklch(1 0.002 90);
  --surface-2:     oklch(0.965 0.006 85);
  --border:        oklch(0.88 0.007 85);
  --text:          oklch(0.14 0.005 85);
  --text-muted:    oklch(0.50 0.012 85);
  --accent:        #C9A84C;
  --accent-light:  rgba(201,168,76,.12);

  --success-bg:    oklch(0.965 0.025 145);
  --success-text:  oklch(0.38 0.1 145);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: .9rem;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .page-title, .card-header, .stat-value { font-family: 'DM Sans', 'Inter', sans-serif; }

/* ── Marca L&C | CFO® ── */
.brand-mark {
  display: inline-flex; align-items: center;
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em;
  color: #fff; line-height: 1;
}
.brand-mark .brand-sep { color: var(--gold); font-weight: 300; margin: 0 .4rem; }
.brand-mark sup { color: var(--gold); font-size: .5rem; margin-left: 2px; margin-top: -8px; font-weight: 500; }
.brand-tagline {
  display: block; margin-top: .35rem;
  font-family: 'DM Sans', sans-serif; font-size: .58rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(201,168,76,.8);
}
.brand-client {
  display: block; margin-top: .3rem;
  font-family: 'DM Sans', sans-serif; font-size: .8rem; font-weight: 600; color: #fff; letter-spacing: .01em;
}
.login-logo .brand-client { font-size: .95rem; margin-top: .45rem; }

a { color: var(--accent); }

/* ── Sidebar ── */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease-out;
}

.sidebar-brand {
  padding: 1.25rem 1rem 1rem;
  border-bottom: 1px solid rgba(201,168,76,.18);
  text-align: center;   /* L&C | CFO centrado sobre CONTROL DE INGRESOS y el cliente */
}

.sidebar-brand .brand-sub {
  font-size: .72rem;
  font-weight: 400;
  color: rgba(255,255,255,.45);
  display: block;
  margin-top: 2px;
}

.sidebar-nav { padding: .5rem 0; }

.sidebar-link {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem 1rem;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: .85rem;
  transition: background .15s, color .15s;
}

.sidebar-link:hover  { background: var(--sidebar-hover); color: var(--accent); }
.sidebar-link.active {
  background: var(--sidebar-active);
  color: var(--accent);
  font-weight: 600;
  border-left: 3px solid var(--accent);
}
.sidebar-link i { font-size: .95rem; flex-shrink: 0; opacity: .9; }

.sidebar-divider {
  height: 1px;
  background: oklch(1 0 0 / .08);
  margin: .4rem 1rem;
}

.sidebar-footer {
  padding: .75rem 0;
  border-top: 1px solid oklch(1 0 0 / .08);
}

.sidebar-footer .sidebar-link { color: oklch(0.72 0.08 15); }
.sidebar-footer .sidebar-link:hover { background: oklch(0.3 0.06 15 / .3); color: oklch(0.9 0.06 15); }

/* ── Layout ── */
.main-content {
  margin-left: var(--sidebar-width);
  padding: 2rem;
  min-height: 100vh;
}

.sidebar-toggle { position: fixed; top: 1rem; left: 1rem; z-index: 1100; }

@media (max-width: 768px) {
  /* Sidebar */
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: none; }
  .main-content { margin-left: 0; padding: 1rem; padding-top: 3.5rem; }

  /* Page header: apilar título y botones en móvil */
  .page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .6rem;
  }
  .page-header .d-flex { flex-wrap: wrap; }

  /* Título más pequeño en móvil */
  .page-title { font-size: 1.2rem; }

  /* Stat strip: 2 columnas en móvil */
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-item { padding: .6rem .5rem; }
  .stat-value { font-size: .95rem; white-space: nowrap; }
  .stat-label { font-size: .68rem; }

  /* Tablas: padding más compacto, sin layout fijo, números en una línea */
  .table { table-layout: auto !important; }
  .table thead th { padding: .45rem .6rem; font-size: .72rem; white-space: nowrap; }
  .table tbody td { padding: .55rem .6rem; }
  .table tbody td.text-end,
  .table thead th.text-end { white-space: nowrap; }

  /* Cards: sin padding lateral excesivo */
  .card-body { padding: 1rem; }
}

/* ── Page header ── */
.page-header { margin-bottom: 1.75rem; }
.page-title  { font-size: 1.5rem; font-weight: 700; color: var(--text); margin-bottom: .25rem; }

/* ── Stat strip ── */
/* Rejilla: todas las cifras del mismo ancho, centradas, y si no caben en una fila
   bajan en bloque (sin dejar una suelta descolgada). Las líneas entre celdas son el hueco de 1px. */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));  /* 7 cifras caben en ~850 px de ancho útil */
  gap: 1px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem .75rem;
  min-width: 0;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--border), 0 1px 0 var(--border);  /* separadores entre celdas */
}

.stat-value { font-size: clamp(1rem, 1.5vw, 1.3rem); font-weight: 700; color: var(--text); line-height: 1.2; white-space: nowrap; }
.stat-label { font-size: .72rem; color: var(--text-muted); margin-top: 2px; line-height: 1.25; }
.stat-sublabel { font-size: .68rem; margin-top: 1px; line-height: 1.2; white-space: nowrap; }

.stat-sep { display: none; }

/* ── Cards ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px oklch(0 0 0 / .04);
}

.card-header {
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  font-size: .875rem;
}

.card-body { padding: 1.25rem; }

/* ── Tables ── */
.table { --bs-table-bg: transparent; color: var(--text); }
.table thead th {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  padding: .65rem 1rem;
}
.table tbody td { padding: .75rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table-hover tbody tr:hover td { background: var(--accent-light); }

/* ── Buttons ── */
.btn-xs {
  padding: .2rem .55rem;
  font-size: .78rem;
  border-radius: var(--radius-sm);
}

/* ── Flash messages ── */
.flash-container { padding: 0 0 1rem; }

/* ── Login ── */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0A0A0A;
  background-image:
    radial-gradient(ellipse 60% 50% at 50% -10%, rgba(201,168,76,.08) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 80% 110%, rgba(201,168,76,.04) 0%, transparent 70%);
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: #111010;
  border: 1px solid rgba(201,168,76,.18);
  border-radius: 16px;
  padding: 2.2rem 2rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset;
  color: #fff;
}
.login-card .form-label { font-size: .75rem; font-weight: 500; color: rgba(255,255,255,.5); letter-spacing: .04em; }
.login-card .form-control {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); color: #fff; border-radius: 9px;
}
.login-card .form-control:focus { background: rgba(255,255,255,.06); border-color: rgba(201,168,76,.6); box-shadow: none; color: #fff; }
.login-card .btn-primary {
  background: var(--gold); border-color: var(--gold); color: #0A0A0A; font-weight: 600;
  font-family: 'DM Sans', sans-serif; border-radius: 9px;
}
.login-card .btn-primary:hover { background: #d8b75c; border-color: #d8b75c; color: #0A0A0A; }

.login-logo {
  text-align: center;
  margin-bottom: 1.75rem;
}
.login-logo .brand-mark { font-size: 1.6rem; }

.login-logo small {
  display: block;
  font-size: .75rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ── Botones principales en dorado (identidad L&C CFO) ── */
.btn-primary { background: var(--gold); border-color: var(--gold); color: #0A0A0A; font-weight: 600; }
.btn-primary:hover, .btn-primary:focus { background: #d8b75c; border-color: #d8b75c; color: #0A0A0A; }
.btn-outline-primary { color: #8a6f22; border-color: var(--gold); }
.btn-outline-primary:hover { background: var(--gold); border-color: var(--gold); color: #0A0A0A; }
.form-control:focus, .form-select:focus { border-color: rgba(201,168,76,.7); box-shadow: 0 0 0 .2rem rgba(201,168,76,.18); }