/* =========================================================================
   GD SEO · tema mate. Paleta: tinta, salvia, azul pizarra, arcilla, ocre, malva.
   ========================================================================= */
:root {
  --tinta: #2b3240;        /* texto fuerte, barra superior */
  --tinta-2: #353d4d;
  --texto: #474e5c;
  --suave: #858b95;
  --linea: #e7e4de;
  --fondo: #f3f1ec;        /* fondo general, papel cálido */
  --papel: #ffffff;
  --papel-2: #faf9f6;
  --salvia: #6f9483;
  --salvia-osc: #5b7d6e;
  --salvia-cl: #e7efea;
  --azul: #5b7493;
  --azul-cl: #e6ebf1;
  --arcilla: #c48a6a;
  --arcilla-cl: #f6ebe4;
  --ocre: #c9a85c;
  --ocre-cl: #f6efdc;
  --malva: #8c7a9b;
  --bien: #5e8c76;
  --mal: #b56a5a;
  --radio: 14px;
  --sombra: 0 1px 2px rgba(43, 50, 64, .04), 0 4px 16px rgba(43, 50, 64, .05);

  /* Bootstrap */
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-color: var(--texto);
  --bs-body-bg: var(--fondo);
  --bs-border-color: var(--linea);
  --bs-secondary-color: var(--suave);
  --bs-link-color: var(--azul);
  --bs-link-color-rgb: 91, 116, 147;
  --bs-link-hover-color: var(--tinta);
  --bs-link-hover-color-rgb: 43, 50, 64;
  --bs-primary: var(--salvia);
  --bs-primary-rgb: 111, 148, 131;
  --bs-success-rgb: 94, 140, 118;
  --bs-danger-rgb: 181, 106, 90;
  --bs-warning-rgb: 201, 168, 92;
  --bs-info-rgb: 91, 116, 147;
  --bs-dark-rgb: 43, 50, 64;
  --bs-secondary-rgb: 133, 139, 149;
  --bs-light-rgb: 247, 245, 241;
  --bs-border-radius: 10px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 14px;
}

body { background: var(--fondo); font-size: .925rem; -webkit-font-smoothing: antialiased; letter-spacing: -.003em; }
h1, h2, h3, h4, h5, .h4, .h5 { color: var(--tinta); font-weight: 600; letter-spacing: -.015em; }
a { text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code { color: var(--arcilla); background: var(--arcilla-cl); padding: .05rem .35rem; border-radius: 5px; }
::selection { background: var(--salvia-cl); }

/* --- Barra superior -------------------------------------------------- */
.navbar.barra-app { background: var(--tinta) !important; padding: .55rem 0; box-shadow: 0 1px 0 rgba(255,255,255,.04); }
.barra-app .navbar-brand { color: #f3f1ec; font-weight: 700; letter-spacing: -.02em; }
.barra-app .navbar-brand .logo { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: var(--salvia); color: #fff; margin-right: .45rem; font-size: .95rem; }
.barra-app .nav-link { color: #c4c8cf !important; font-weight: 500; border-radius: 8px; padding: .4rem .75rem !important; }
.barra-app .nav-link:hover, .barra-app .nav-link.active { color: #fff !important; background: rgba(255,255,255,.07); text-decoration: none; }
.dropdown-menu { border: 1px solid var(--linea); box-shadow: var(--sombra); border-radius: 12px; padding: .35rem; }
.dropdown-item { border-radius: 8px; font-size: .9rem; }
.dropdown-item:active { background: var(--salvia); }

/* --- Botones ----------------------------------------------------------- */
.btn { font-weight: 500; border-radius: 9px; }
.btn-primary { --bs-btn-bg: var(--salvia); --bs-btn-border-color: var(--salvia); --bs-btn-hover-bg: var(--salvia-osc);
  --bs-btn-hover-border-color: var(--salvia-osc); --bs-btn-active-bg: var(--salvia-osc); --bs-btn-active-border-color: var(--salvia-osc);
  --bs-btn-disabled-bg: var(--salvia); --bs-btn-disabled-border-color: var(--salvia); }
.btn-outline-primary { --bs-btn-color: var(--salvia-osc); --bs-btn-border-color: #c4d6cd; --bs-btn-hover-bg: var(--salvia);
  --bs-btn-hover-border-color: var(--salvia); --bs-btn-active-bg: var(--salvia); --bs-btn-active-border-color: var(--salvia); }
.btn-outline-secondary { --bs-btn-color: var(--texto); --bs-btn-border-color: var(--linea); --bs-btn-bg: var(--papel);
  --bs-btn-hover-bg: var(--papel-2); --bs-btn-hover-color: var(--tinta); --bs-btn-hover-border-color: #d6d2ca;
  --bs-btn-active-bg: var(--tinta); --bs-btn-active-border-color: var(--tinta); --bs-btn-active-color: #fff; }
.btn-outline-danger { --bs-btn-color: var(--mal); --bs-btn-border-color: #e5c9c2; --bs-btn-hover-bg: var(--mal); --bs-btn-hover-border-color: var(--mal); }
.btn-dark { --bs-btn-bg: var(--tinta); --bs-btn-border-color: var(--tinta); }
.btn-link { color: var(--azul); }
.btn-group .btn.active { background: var(--tinta); border-color: var(--tinta); color: #fff; }

/* --- Formularios ---------------------------------------------------- */
.form-control, .form-select { border-color: var(--linea); background-color: var(--papel); border-radius: 9px; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--salvia); box-shadow: 0 0 0 .2rem rgba(111,148,131,.18); }
.form-check-input:checked { background-color: var(--salvia); border-color: var(--salvia); }
.form-label { color: var(--tinta); font-weight: 500; font-size: .875rem; }
.form-text { color: var(--suave); }

/* --- Tarjetas y KPIs ---------------------------------------------------- */
.tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.tarjeta > .cabecera { padding: .85rem 1.1rem; border-bottom: 1px solid var(--linea); font-weight: 600; color: var(--tinta);
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.tarjeta > .cuerpo { padding: 1.1rem; }
.tarjeta.position-sticky { overflow: visible; }
.kpi { position: relative; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 1rem 1.1rem; height: 100%; box-shadow: var(--sombra); overflow: hidden; }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--salvia); opacity: .7; }
.row > div:nth-child(4n+2) > .kpi::before { background: var(--azul); }
.row > div:nth-child(4n+3) > .kpi::before { background: var(--arcilla); }
.row > div:nth-child(4n+4) > .kpi::before { background: var(--ocre); }
.kpi .etiqueta { font-size: .72rem; color: var(--suave); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
.kpi .valor { font-size: 1.65rem; font-weight: 650; line-height: 1.25; color: var(--tinta); letter-spacing: -.02em; }
.kpi .detalle { font-size: .8rem; color: var(--suave); }

/* --- Tablas ------------------------------------------------------------- */
.table { --bs-table-bg: transparent; --bs-table-hover-bg: var(--papel-2); --bs-table-striped-bg: var(--papel-2);
  --bs-table-border-color: #efece6; color: var(--texto); }
.table-sm td, .table-sm th { vertical-align: middle; padding: .5rem .65rem; }
.table thead th { font-size: .7rem; text-transform: uppercase; color: var(--suave); font-weight: 600; letter-spacing: .06em;
  white-space: nowrap; background: var(--papel-2); border-bottom: 1px solid var(--linea); }
.table thead th a { color: inherit; }
.table-primary { --bs-table-bg: var(--salvia-cl); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.url { max-width: 480px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }

/* --- Pestañas del dominio -------------------------------------------- */
.nav-dominio { border-bottom: 1px solid var(--linea); gap: .15rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.nav-dominio .nav-link { color: var(--suave); border: 0; border-bottom: 2px solid transparent; border-radius: 0; font-weight: 500;
  padding: .55rem .8rem; white-space: nowrap; }
.nav-dominio .nav-link:hover { color: var(--tinta); text-decoration: none; }
.nav-dominio .nav-link.active { color: var(--tinta); background: transparent; border-bottom-color: var(--salvia); font-weight: 600; }
.nav-pills .nav-link { color: var(--texto); border-radius: 8px; }
.nav-pills .nav-link.active { background: var(--tinta); }

/* --- Insignias y estados -------------------------------------------- */
.badge { font-weight: 600; border-radius: 6px; letter-spacing: .01em; }
.text-bg-success { background: var(--salvia-cl) !important; color: var(--salvia-osc) !important; }
.text-bg-danger { background: #f4e3de !important; color: var(--mal) !important; }
.text-bg-warning { background: var(--ocre-cl) !important; color: #8f7533 !important; }
.text-bg-primary { background: var(--azul-cl) !important; color: var(--azul) !important; }
.text-bg-secondary { background: #ecebe8 !important; color: var(--suave) !important; }
.text-bg-dark { background: var(--tinta) !important; color: #fff !important; }
.text-bg-light { background: var(--papel-2) !important; color: var(--texto) !important; }
.sube { color: var(--bien); }
.baja { color: var(--mal); }
.text-warning { color: #a8873c !important; }
.text-danger { color: var(--mal) !important; }
.text-primary { color: var(--salvia-osc) !important; }
.pos-badge { display: inline-block; min-width: 2.5rem; text-align: center; font-weight: 600; border-radius: 7px; padding: .12rem .4rem; font-size: .85rem; }
.pos-top3 { background: var(--salvia-cl); color: var(--salvia-osc); }
.pos-top10 { background: var(--azul-cl); color: var(--azul); }
.pos-top20 { background: var(--ocre-cl); color: #8f7533; }
.pos-resto { background: #efedea; color: var(--suave); }

/* --- Avisos ----------------------------------------------------------- */
.alert { border-radius: 12px; border: 1px solid transparent; }
.alert-info { background: var(--azul-cl); border-color: #d3dce7; color: #3f5672; }
.alert-success { background: var(--salvia-cl); border-color: #d2e1d9; color: #46685a; }
.alert-warning { background: var(--ocre-cl); border-color: #ecdfb9; color: #7d6629; }
.alert-danger { background: #f6e6e1; border-color: #ecd0c8; color: #8e4f42; }
.alert-light { background: var(--papel); border-color: var(--linea) !important; color: var(--texto); }
.list-group-item { border-color: #efece6; color: var(--texto); }

/* --- Gráficas y otros --------------------------------------------------- */
.sparkline { width: 90px; height: 24px; }
.grafica { position: relative; height: 260px; }
.modal-content { border-radius: 16px; border: 0; box-shadow: 0 20px 60px rgba(43,50,64,.2); }
footer.pie { color: var(--suave); }
.bg-body-tertiary { background: rgba(250, 249, 246, .95) !important; backdrop-filter: blur(6px); }

/* --- Login -------------------------------------------------------------- */
.login-fondo { min-height: 70vh; display: grid; place-items: center; }
.login-marca { width: 52px; height: 52px; border-radius: 15px; background: var(--salvia); color: #fff; display: grid;
  place-items: center; font-size: 1.4rem; margin: 0 auto .8rem; }

/* --- Menú lateral (Configuración) ---------------------------------------- */
.menu-lateral { position: sticky; top: 1rem; }
.menu-lateral .nav-link { color: var(--texto); border-radius: 9px; padding: .5rem .75rem; font-weight: 500; display: flex; align-items: center; gap: .55rem; }
.menu-lateral .nav-link:hover { background: var(--papel-2); color: var(--tinta); text-decoration: none; }
.menu-lateral .nav-link.active { background: var(--salvia-cl); color: var(--salvia-osc); font-weight: 600; }
.menu-lateral .nav-link .bi { width: 1.1rem; text-align: center; opacity: .8; }
.menu-sep { border-top: 1px solid var(--linea); margin: .4rem .5rem; }
.punto { width: 7px; height: 7px; border-radius: 50%; margin-left: auto; }
.punto.ok { background: var(--salvia); } .punto.pendiente { background: var(--ocre); }
.cabecera-pagina { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }