/* UrraHosting — Sistema de diseño (rediseño 2026)
   Portado desde new_design/assets/styles.css (ver brand-spec.md).

   Ámbito: todas las reglas de componentes van prefijadas con "body.urra-ds"
   para poder convivir con Bootstrap 5 en las plantillas que aún no han sido
   migradas (evita colisionar con .btn/.card/.badge/.nav-link de Bootstrap).
   Los tokens de :root son variables CSS globales — declararlas no tiene
   efecto visual por sí solo, son seguras de cargar en todas las páginas. */

:root {
  --bg:          #F3F4F7;
  --surface:     #FFFFFF;
  --fg:          #14151A;
  --muted:       #6B7280;
  --border:      #E4E6EB;
  --accent:      #EA6A1E;
  --accent-2:    #C6450D;
  --success:     #17A34A;
  --danger:      #DC2626;
  --sidebar-bg:  #121116;
  --sidebar-fg:  #C7C9D1;

  --accent-soft:   color-mix(in oklch, var(--accent) 14%, white);
  --accent-border: color-mix(in oklch, var(--accent) 45%, white);
  --success-soft:  color-mix(in oklch, var(--success) 15%, white);
  --danger-soft:   color-mix(in oklch, var(--danger) 12%, white);
  --fg-soft:       color-mix(in oklch, var(--fg) 5%, transparent);

  --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --sidebar-w: 272px;
}

/* ─── reset base (solo dentro del ámbito .urra-ds) ─────────────────── */
body.urra-ds, body.urra-ds *, body.urra-ds *::before, body.urra-ds *::after { box-sizing: border-box; }
body.urra-ds {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body.urra-ds a { color: inherit; text-decoration: none; }
body.urra-ds button { font: inherit; cursor: pointer; }
body.urra-ds p { margin: 0; text-wrap: pretty; }
body.urra-ds .icon { width: 18px; height: 18px; flex-shrink: 0; }
body.urra-ds .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
body.urra-ds .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ─── layout shell ──────────────────────────────────────────────── */
body.urra-ds .app { display: flex; min-height: 100vh; }
body.urra-ds .main { flex: 1; min-width: 0; display: flex; flex-direction: column; margin-left: var(--sidebar-w); }
body.urra-ds .content { padding: 28px 32px 64px; max-width: 1580px; width: 100%; margin-inline: auto; }

/* ─── sidebar ───────────────────────────────────────────────────── */
body.urra-ds .sidebar {
  position: fixed; inset-block: 0; left: 0; width: var(--sidebar-w); z-index: 40;
  background: var(--sidebar-bg);
  color: var(--sidebar-fg);
  display: flex; flex-direction: column;
  border-right: 1px solid color-mix(in oklch, white 8%, var(--sidebar-bg));
  transition: transform 0.2s ease;
}
body.urra-ds .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 22px 20px 18px; }
body.urra-ds .brand-mark {
  width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid; place-items: center;
}
body.urra-ds .brand-mark svg { width: 19px; height: 19px; color: white; }
/* El logo real (logo.png) ya trae su propio degradado naranja/rojo con
   fondo transparente — envolverlo en la caja de acento lo hace invisible
   (naranja sobre naranja). Se muestra directo, más grande, sobre el
   sidebar oscuro en vez de dentro de la caja. */
body.urra-ds .brand-mark:has(img) { background: transparent; }
body.urra-ds .brand-mark img { width: 100%; height: 100%; object-fit: contain; }
body.urra-ds .brand-name { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: white; letter-spacing: -0.01em; }
body.urra-ds .brand-beta {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  background: var(--accent); color: white; padding: 2px 7px; border-radius: 999px; margin-left: 2px;
}

body.urra-ds .sidebar-nav { flex: 1; overflow-y: auto; padding: 6px 14px 14px; }
body.urra-ds .nav-group + .nav-group { margin-top: 18px; padding-top: 16px; border-top: 1px solid color-mix(in oklch, white 8%, var(--sidebar-bg)); }
body.urra-ds .nav-group-title { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in oklch, var(--sidebar-fg) 55%, transparent); padding: 0 10px; margin-bottom: 6px; }
body.urra-ds .nav-link {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 500; color: var(--sidebar-fg);
  margin-bottom: 2px; border: 1px solid transparent;
}
body.urra-ds .nav-link svg { width: 18px; height: 18px; opacity: 0.85; }
body.urra-ds .nav-link i.bi { font-size: 16px; width: 18px; text-align: center; opacity: 0.85; flex-shrink: 0; }
body.urra-ds .nav-link:hover { background: color-mix(in oklch, white 6%, var(--sidebar-bg)); color: white; }
body.urra-ds .nav-link.active { background: var(--accent); color: white; font-weight: 600; }
body.urra-ds .nav-link.active svg, body.urra-ds .nav-link.active i { opacity: 1; }

body.urra-ds .sidebar-footer { position: relative; margin: 8px 14px 16px; padding: 16px; border-radius: var(--radius); overflow: hidden;
  background:
    radial-gradient(120% 140% at 100% 100%, color-mix(in oklch, var(--accent) 55%, transparent), transparent 60%),
    linear-gradient(200deg, #29221d, #16141a 60%);
  border: 1px solid color-mix(in oklch, white 10%, var(--sidebar-bg));
}
body.urra-ds .sidebar-footer::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(115deg, color-mix(in oklch, var(--accent) 30%, transparent) 0 1px, transparent 1px 26px);
  opacity: 0.25; mix-blend-mode: screen;
}
body.urra-ds .sidebar-footer-inner { position: relative; }
body.urra-ds .sidebar-footer h4 { color: white; font-size: 13px; font-weight: 700; margin: 0 0 4px; font-family: var(--font-display); }
body.urra-ds .sidebar-footer p { color: color-mix(in oklch, var(--sidebar-fg) 90%, transparent); font-size: 12.5px; line-height: 1.5; margin: 0 0 12px; }

body.urra-ds .sidebar-backdrop { display: none; }

/* ─── topbar ────────────────────────────────────────────────────── */
body.urra-ds .topbar { position: sticky; top: 0; z-index: 30; background: color-mix(in oklch, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
body.urra-ds .topbar-inner { display: flex; align-items: center; gap: 16px; padding: 16px 32px; }
body.urra-ds .icon-btn.menu-toggle { display: none; }
body.urra-ds .search-field { flex: 1; max-width: 640px; position: relative; }
body.urra-ds .search-field svg, body.urra-ds .search-field i.bi {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted); font-size: 16px; line-height: 1;
}
body.urra-ds .search-field input {
  width: 100%; padding: 10px 14px 10px 40px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); font: inherit; font-size: 14px; color: var(--fg);
}
body.urra-ds .search-field input:focus-visible { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
body.urra-ds .topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
body.urra-ds .location-pill {
  display: flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); font-size: 13px; font-weight: 500; color: var(--fg);
  white-space: nowrap;
}
body.urra-ds .location-pill svg { width: 15px; height: 15px; color: var(--muted); }
body.urra-ds .location-pill .chev { width: 13px; height: 13px; margin-left: 2px; color: var(--muted); }
body.urra-ds .icon-btn {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface);
  display: grid; place-items: center; color: var(--fg); position: relative; flex-shrink: 0;
}
body.urra-ds .icon-btn:hover { border-color: color-mix(in oklch, var(--fg) 30%, var(--border)); }
body.urra-ds .icon-btn i.bi { font-size: 16px; }
body.urra-ds .btn i.bi { font-size: 13.5px; }
body.urra-ds .icon-btn:focus-visible, body.urra-ds .nav-link:focus-visible, body.urra-ds .btn:focus-visible, body.urra-ds .tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.urra-ds .notif-dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 999px; background: var(--accent); border: 2px solid var(--surface); }

body.urra-ds .user-menu { position: relative; }
body.urra-ds .user-trigger { display: flex; align-items: center; gap: 6px; border: none; background: transparent; padding: 2px; border-radius: 999px; }
body.urra-ds .avatar {
  width: 36px; height: 36px; border-radius: 999px; background: var(--fg); color: white;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 13px; flex-shrink: 0;
}
body.urra-ds .avatar.lg { width: 64px; height: 64px; font-size: 21px; background: white; color: var(--fg); }
body.urra-ds .user-trigger .chev { width: 15px; height: 15px; color: var(--muted); }
body.urra-ds .user-dropdown {
  position: absolute; right: 0; top: calc(100% + 10px); width: 232px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 16px 40px -12px rgba(15,15,20,0.25);
  padding: 8px; display: none; z-index: 50;
}
body.urra-ds .user-dropdown.open { display: block; }
body.urra-ds .user-dropdown .who { padding: 10px 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
body.urra-ds .user-dropdown .who strong { display: block; font-size: 13.5px; }
body.urra-ds .user-dropdown .who span { font-size: 12px; color: var(--muted); }
body.urra-ds .user-dropdown a, body.urra-ds .user-dropdown button.ddi {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 8px;
  font-size: 13.5px; color: var(--fg); border: none; background: none;
}
body.urra-ds .user-dropdown a:hover, body.urra-ds .user-dropdown button.ddi:hover { background: var(--fg-soft); }
body.urra-ds .user-dropdown svg { width: 16px; height: 16px; color: var(--muted); }
body.urra-ds .user-dropdown .ddi.danger { color: var(--danger); }
body.urra-ds .user-dropdown .ddi.danger svg { color: var(--danger); }

/* ─── banners ───────────────────────────────────────────────────── */
body.urra-ds .banner { border-radius: var(--radius-lg); overflow: hidden; position: relative; margin-bottom: 24px; }
body.urra-ds .banner-light {
  background: linear-gradient(120deg, #FDEBDD 0%, #FBD9C2 45%, #F7C7A8 100%);
  padding: 34px 36px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
}
body.urra-ds .banner-light .eyebrow { color: var(--accent-2); }
body.urra-ds .banner-status {
  background: var(--surface); border-radius: var(--radius); padding: 16px 20px; min-width: 260px;
  box-shadow: 0 12px 30px -16px rgba(70,40,10,0.35);
}
body.urra-ds .banner-dark {
  background:
    radial-gradient(90% 160% at 85% 0%, color-mix(in oklch, var(--accent) 40%, transparent), transparent 60%),
    repeating-linear-gradient(100deg, color-mix(in oklch, var(--accent) 16%, transparent) 0 1px, transparent 1px 34px),
    linear-gradient(120deg, #16151b, #0f0e12 70%);
  color: white; padding: 40px 36px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  min-height: 168px;
}
body.urra-ds .banner-dark .eyebrow { color: color-mix(in oklch, var(--accent) 70%, white 20%); }
body.urra-ds .banner-dark h1 { color: white; }
body.urra-ds .banner-dark p.lead { color: color-mix(in oklch, white 78%, transparent); }
body.urra-ds .eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
body.urra-ds .eyebrow::before { content: ''; width: 16px; height: 2px; background: currentColor; border-radius: 2px; }
body.urra-ds .banner h1 { font-family: var(--font-display); font-size: 30px; letter-spacing: -0.01em; margin: 0 0 6px; }
body.urra-ds .banner p.lead { color: var(--muted); font-size: 14.5px; max-width: 46ch; margin: 0; }

/* ─── buttons ───────────────────────────────────────────────────── */
body.urra-ds .btn {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 10px 17px; border-radius: 10px; border: 1px solid transparent;
  font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body.urra-ds .btn svg { width: 16px; height: 16px; }
body.urra-ds .btn-primary { background: var(--accent); color: white; border-color: var(--accent); }
body.urra-ds .btn-primary:hover { background: color-mix(in oklch, var(--accent) 85%, black); border-color: color-mix(in oklch, var(--accent) 85%, black); color: white; }
body.urra-ds .btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--border); }
body.urra-ds .btn-secondary:hover { border-color: color-mix(in oklch, var(--fg) 35%, var(--border)); }
/* .btn-dark tiene dos usos: dentro del sidebar-footer oscuro del mockup
   (fondo ya oscuro, necesita blanco translucido) y como boton "oscuro"
   normal de Bootstrap sobre fondo claro (ej. dev/panel.html). Se resuelve
   el segundo caso por defecto (mas comun hoy) y el primero via .sidebar
   .btn-dark cuando exista ese componente. */
body.urra-ds .btn-dark { background: var(--fg); color: white; border-color: var(--fg); }
body.urra-ds .btn-dark:hover { background: color-mix(in oklch, var(--fg) 85%, white); border-color: color-mix(in oklch, var(--fg) 85%, white); }
body.urra-ds .sidebar .btn-dark { background: color-mix(in oklch, white 12%, transparent); color: white; border-color: color-mix(in oklch, white 30%, transparent); }
body.urra-ds .sidebar .btn-dark:hover { background: color-mix(in oklch, white 20%, transparent); }
body.urra-ds .btn-danger-outline { background: var(--surface); color: var(--danger); border-color: color-mix(in oklch, var(--danger) 45%, var(--border)); }
body.urra-ds .btn-danger-outline:hover { background: var(--danger-soft); }
/* Variantes "outline" de Bootstrap (.btn-outline-*) - el .btn base de arriba
   fija border-color:transparent con mas especificidad que Bootstrap, lo que
   dejaba estos botones sin borde visible. Se retematizan con los tokens del
   sistema en vez de quitarles el tratamiento de "boton" por completo -
   se siguen usando en paginas/modales aun no migrados. */
body.urra-ds .btn-outline-primary, body.urra-ds .btn-outline-dark { background: var(--surface); color: var(--accent-2); border-color: var(--accent-border); }
body.urra-ds .btn-outline-primary:hover, body.urra-ds .btn-outline-dark:hover { background: var(--accent-soft); }
body.urra-ds .btn-outline-secondary { background: var(--surface); color: var(--fg); border-color: var(--border); }
body.urra-ds .btn-outline-secondary:hover { background: var(--fg-soft); }
body.urra-ds .btn-outline-success { background: var(--surface); color: var(--success); border-color: color-mix(in oklch, var(--success) 45%, var(--border)); }
body.urra-ds .btn-outline-success:hover { background: var(--success-soft); }
body.urra-ds .btn-outline-danger { background: var(--surface); color: var(--danger); border-color: color-mix(in oklch, var(--danger) 45%, var(--border)); }
body.urra-ds .btn-outline-danger:hover { background: var(--danger-soft); }
body.urra-ds .btn-outline-warning, body.urra-ds .btn-outline-info { background: var(--surface); color: var(--accent-2); border-color: var(--accent-border); }
body.urra-ds .btn-outline-warning:hover, body.urra-ds .btn-outline-info:hover { background: var(--accent-soft); }
body.urra-ds .btn-light { background: var(--surface); color: var(--fg); border-color: var(--border); }
body.urra-ds .btn-light:hover { background: var(--fg-soft); }

/* .btn-group de Bootstrap (ej. acciones por fila en dev/panel.html): el
   .border-radius uniforme de nuestro .btn gana por sobre la variable CSS
   que Bootstrap usa para achatar el radio entre botones contiguos,
   dejando cada boton con las 4 esquinas redondeadas y un "doble borde"
   donde se tocan. Se restaura explicitamente aqui. */
body.urra-ds .btn-group > .btn:not(:first-child),
body.urra-ds .btn-group > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
body.urra-ds .btn-group > .btn:not(:last-child):not(.dropdown-toggle),
body.urra-ds .btn-group > .btn-group:not(:last-child) > .btn { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
body.urra-ds .btn-group > .btn { margin-left: -1px; }
body.urra-ds .btn-group > .btn:first-child { margin-left: 0; }
body.urra-ds .btn-group > .btn:hover, body.urra-ds .btn-group > .btn:focus { position: relative; z-index: 1; }

body.urra-ds .btn-sm { padding: 7px 12px; font-size: 12.5px; border-radius: 8px; }
body.urra-ds .btn-block { width: 100%; justify-content: center; }
body.urra-ds .btn:disabled,
body.urra-ds .btn.disabled,
body.urra-ds .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* ─── cards ─────────────────────────────────────────────────────── */
/* display:block explicito: Bootstrap 5 define .card como flex column por
   defecto, lo que estira los hijos (ej. un boton suelto) a todo el ancho. */
body.urra-ds .card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; box-shadow: none; transition: none; transform: none; }
body.urra-ds .card:hover { box-shadow: none; transform: none; }
/* Neutraliza el .card-header naranja/blanco heredado de main.css (el
   dashboard original le da fondo degradado + texto blanco vía !important
   en border-radius) para que coincida con el header limpio del mockup. */
body.urra-ds .card-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px;
  background: none; color: var(--fg); border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; font-weight: normal;
}
body.urra-ds .card-title { display: flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 700; font-family: var(--font-display); }
body.urra-ds .card-title .ico {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent-2);
}
body.urra-ds .card-title .ico svg { width: 17px; height: 17px; }
body.urra-ds .card-sub { font-size: 13px; color: var(--muted); margin-top: 3px; }
body.urra-ds .link-arrow { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--accent-2); }
body.urra-ds .link-arrow svg { width: 14px; height: 14px; }

/* ─── stat grid ─────────────────────────────────────────────────── */
body.urra-ds .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
body.urra-ds .stat-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
body.urra-ds .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; }
body.urra-ds .stat-card-top { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
body.urra-ds .stat-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-2); flex-shrink: 0; }
body.urra-ds .stat-icon svg { width: 18px; height: 18px; }
body.urra-ds .stat-icon.green { background: var(--success-soft); color: var(--success); }
body.urra-ds .stat-icon.red { background: var(--danger-soft); color: var(--danger); }
body.urra-ds .stat-label { font-size: 13px; color: var(--muted); font-weight: 500; }
body.urra-ds .stat-value { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.01em; }
body.urra-ds .stat-trend { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); margin-top: 6px; }
body.urra-ds .stat-trend svg { width: 13px; height: 13px; }
body.urra-ds .stat-trend.up { color: var(--success); }
body.urra-ds .stat-trend.up svg { color: var(--success); }
body.urra-ds .progress-track { height: 8px; background: var(--fg-soft); border-radius: 999px; overflow: hidden; margin-top: 12px; }
body.urra-ds .progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 999px; }

/* ─── badges / pills / tags ─────────────────────────────────────── */
body.urra-ds .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
body.urra-ds .badge svg { width: 10px; height: 10px; }
body.urra-ds .badge::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
body.urra-ds .badge.no-dot::before { display: none; }
body.urra-ds .badge-success { background: var(--success-soft); color: var(--success); }
body.urra-ds .badge-accent { background: var(--accent-soft); color: var(--accent-2); }
body.urra-ds .badge-danger { background: var(--danger-soft); color: var(--danger); }
body.urra-ds .badge-neutral { background: var(--fg-soft); color: var(--muted); }
body.urra-ds .badge-dark { background: var(--fg); color: white; }

/* Spinners de Bootstrap (.spinner-border) - color de marca en vez del azul
   por defecto, sin tocar el markup/JS que los muestra/oculta. */
body.urra-ds .spinner-border { color: var(--accent) !important; }

/* Reskin ligero de formularios de Bootstrap (.form-control/.form-select/
   .form-check) - usado por los modales reales (editar perfil, cambiar
   contraseña, equipo, etc.) que se mantienen con markup/JS de Bootstrap
   sin reescribir. Beneficia a toda la app, no solo a las paginas migradas. */
body.urra-ds .form-control, body.urra-ds .form-select {
  border-radius: 9px; border-color: var(--border); font-size: 14px;
}
body.urra-ds .form-control:focus, body.urra-ds .form-select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 0.2rem var(--accent-soft);
}
body.urra-ds .form-label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
body.urra-ds .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
body.urra-ds .form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 0.2rem var(--accent-soft); }
body.urra-ds .form-text { font-size: 12px; color: var(--muted); }

/* Reskin ligero de .modal-content de Bootstrap (radios/bordes con los
   tokens del sistema) - los modales reales se mantienen con su JS/markup
   de Bootstrap intacto (backdrop estatico, eventos show.bs.modal, etc.). */
body.urra-ds .modal-content { border-radius: var(--radius-lg); border: 1px solid var(--border); }
body.urra-ds .modal-header, body.urra-ds .modal-footer { border-color: var(--border); }
body.urra-ds .modal-header .btn-close:focus { box-shadow: 0 0 0 0.2rem var(--accent-soft); }

/* ─── Fase 8: reskin global de componentes de Bootstrap sin mockup
   propio - cubre todas las paginas que aun no han sido migradas pieza a
   pieza, para que hereden los tokens del sistema con cero cambios de
   markup. ────────────────────────────────────────────────────────── */

/* Badges de contexto (badge bg-primary/success/etc) */
body.urra-ds .badge.bg-primary, body.urra-ds .badge.bg-dark, body.urra-ds .badge.bg-info { background-color: var(--accent-soft) !important; color: var(--accent-2) !important; }
body.urra-ds .badge.bg-success { background-color: var(--success-soft) !important; color: var(--success) !important; }
body.urra-ds .badge.bg-danger { background-color: var(--danger-soft) !important; color: var(--danger) !important; }
body.urra-ds .badge.bg-warning { background-color: var(--accent-soft) !important; color: var(--accent-2) !important; }
body.urra-ds .badge.bg-secondary { background-color: var(--fg-soft) !important; color: var(--muted) !important; }
body.urra-ds .badge { border-radius: 999px; font-weight: 600; }

/* Tablas de Bootstrap (.table) - variables propias de Bootstrap 5, mas
   simple que reescribir cada regla. */
body.urra-ds .table { --bs-table-color: var(--fg); --bs-table-bg: transparent; --bs-table-border-color: var(--border); --bs-table-striped-bg: var(--fg-soft); --bs-table-hover-bg: var(--fg-soft); }
body.urra-ds .table thead th { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); border-bottom-width: 1px; }

/* Tabs de Bootstrap (.nav-tabs/.nav-link dentro de modales/paneles) */
body.urra-ds .nav-tabs { border-color: var(--border); }
body.urra-ds .nav-tabs .nav-link { color: var(--muted); border: none; border-bottom: 2px solid transparent; border-radius: 0; }
body.urra-ds .nav-tabs .nav-link:hover { color: var(--fg); background: none; }
body.urra-ds .nav-tabs .nav-link.active { color: var(--accent-2); background: none; border-bottom-color: var(--accent); font-weight: 600; }

/* Listas de grupo (.list-group) */
body.urra-ds .list-group-item { border-color: var(--border); }
body.urra-ds .list-group-item.active { background: var(--accent); border-color: var(--accent); }

/* Paginacion */
body.urra-ds .page-link { color: var(--accent-2); border-color: var(--border); }
body.urra-ds .page-item.active .page-link { background: var(--accent); border-color: var(--accent); }

/* Progreso */
body.urra-ds .progress-bar { background-color: var(--accent); }

/* Encabezados de pagina genericos (h2 + subtitulo) - mismo aspecto en
   toda pagina que aun no tiene su propio .banner. */
body.urra-ds .content > h2:first-child, body.urra-ds .content > .d-flex:first-child h2 { font-family: var(--font-display); }

/* ─── tabs ──────────────────────────────────────────────────────── */
body.urra-ds .tabs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
body.urra-ds .tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted); font-size: 13.5px; font-weight: 600;
}
body.urra-ds .tab .count { font-family: var(--font-mono); font-size: 11px; background: var(--fg-soft); padding: 1px 7px; border-radius: 999px; }
body.urra-ds .tab.active { background: var(--accent); border-color: var(--accent); color: white; }
body.urra-ds .tab.active .count { background: color-mix(in oklch, white 25%, transparent); color: white; }
body.urra-ds .tab:hover:not(.active) { border-color: color-mix(in oklch, var(--fg) 25%, var(--border)); color: var(--fg); }

/* ─── tables (namespace .ds — no colisiona con .table de Bootstrap) ─ */
body.urra-ds .table-wrap { overflow-x: auto; }
body.urra-ds table.ds { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 720px; }
body.urra-ds table.ds th { text-align: left; padding: 11px 14px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
body.urra-ds table.ds td { padding: 14px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
body.urra-ds table.ds tbody tr:hover { background: var(--fg-soft); }
body.urra-ds table.ds tbody tr:last-child td { border-bottom: none; }
body.urra-ds .cell-id { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); background: var(--fg-soft); padding: 4px 8px; border-radius: 6px; }
body.urra-ds .cell-id button { border: none; background: none; padding: 0; display: grid; place-items: center; color: var(--muted); }
body.urra-ds .cell-id button svg { width: 12px; height: 12px; }
body.urra-ds .cell-id button i.bi { font-size: 11px; }
body.urra-ds .app-name-text { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
body.urra-ds .deploy-error-text { color: var(--danger); font-size: 12px; margin-top: 4px; }

/* Dropdown de dominios (tabla de instancias) - componente propio, sin
   equivalente en el mockup; se retematiza con los tokens del sistema. */
body.urra-ds .domains-dropdown { position: relative; display: inline-block; }
body.urra-ds .domains-btn { background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--accent-2); padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
body.urra-ds .domains-btn:hover { background: var(--accent); color: white; border-color: var(--accent); }
body.urra-ds .domains-content { display: none; position: absolute; background: var(--surface); border: 1px solid var(--border); min-width: 240px; box-shadow: 0 16px 40px -12px rgba(15,15,20,0.25); border-radius: var(--radius); z-index: 60; padding: 6px; margin-top: 6px; max-height: 280px; overflow-y: auto; }
body.urra-ds .domains-content.show { display: block; }
body.urra-ds .domain-item { padding: 8px 10px; border-radius: 8px; }
body.urra-ds .domain-item:hover { background: var(--fg-soft); }
body.urra-ds .domain-item a { color: var(--accent-2); text-decoration: none; word-break: break-all; font-size: 12.5px; font-weight: 600; }
body.urra-ds .domain-item a:hover { text-decoration: underline; }
body.urra-ds .cell-user { display: flex; align-items: center; gap: 10px; }
body.urra-ds .cell-user .avatar { width: 34px; height: 34px; font-size: 12px; background: var(--accent-soft); color: var(--accent-2); }
body.urra-ds .cell-user strong { display: block; font-size: 13.5px; }
body.urra-ds .cell-link { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-2); font-weight: 600; }
body.urra-ds .cell-link svg { width: 13px; height: 13px; }
body.urra-ds .row-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
body.urra-ds .icon-btn-sm { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; color: var(--muted); }
body.urra-ds .icon-btn-sm:hover { color: var(--fg); border-color: color-mix(in oklch, var(--fg) 30%, var(--border)); }
body.urra-ds .icon-btn-sm.danger:hover { color: var(--danger); border-color: color-mix(in oklch, var(--danger) 45%, var(--border)); background: var(--danger-soft); }
body.urra-ds .icon-btn-sm svg { width: 15px; height: 15px; }
body.urra-ds .icon-btn-sm i.bi { font-size: 13px; }
body.urra-ds .icon-btn-sm:disabled { opacity: 0.4; cursor: not-allowed; }

/* ─── service / plan / activity rows ───────────────────────────── */
body.urra-ds .service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
body.urra-ds .service-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; position: relative; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
body.urra-ds .service-card:hover { border-color: color-mix(in oklch, var(--accent) 45%, var(--border)); box-shadow: 0 8px 20px -14px rgba(20,21,26,0.35); }
body.urra-ds .service-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
body.urra-ds .service-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-2); display: grid; place-items: center; }
body.urra-ds .service-icon svg { width: 19px; height: 19px; }
body.urra-ds .service-name { font-weight: 700; font-size: 14px; margin: 0 0 3px; }
body.urra-ds .service-desc { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
body.urra-ds .service-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
body.urra-ds .service-date { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
body.urra-ds .service-date svg { width: 13px; height: 13px; }
body.urra-ds .dots-btn { border: none; background: none; color: var(--muted); padding: 2px; }
body.urra-ds .dots-btn svg { width: 17px; height: 17px; }

body.urra-ds .quick-link { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-radius: 10px; }
body.urra-ds .quick-link:hover { background: var(--fg-soft); }
body.urra-ds .quick-link .stat-icon { width: 34px; height: 34px; }
body.urra-ds .quick-link strong { display: block; font-size: 13.5px; }
body.urra-ds .quick-link span.desc { font-size: 12px; color: var(--muted); }
body.urra-ds .quick-link svg.arrow { margin-left: auto; width: 15px; height: 15px; color: var(--muted); }

body.urra-ds .due-item { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-top: 1px solid var(--border); }
body.urra-ds .due-item:first-of-type { border-top: none; padding-top: 4px; }
body.urra-ds .due-item strong { display: block; font-size: 13px; }
body.urra-ds .due-item span.date { font-size: 12px; color: var(--muted); }

body.urra-ds .activity-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--border); }
body.urra-ds .activity-row:first-of-type { border-top: none; padding-top: 4px; }
body.urra-ds .activity-row .ok { width: 30px; height: 30px; border-radius: 999px; background: var(--success-soft); color: var(--success); display: grid; place-items: center; flex-shrink: 0; }
body.urra-ds .activity-row .ok svg, body.urra-ds .activity-row .ok i.bi { width: 16px; height: 16px; font-size: 14px; }
body.urra-ds .activity-row .ok.error { background: var(--danger-soft); color: var(--danger); }
body.urra-ds .activity-row .ok.warning { background: var(--accent-soft); color: var(--accent-2); }
body.urra-ds .activity-row .ok.info { background: var(--fg-soft); color: var(--muted); }
body.urra-ds .activity-body strong { font-size: 13.5px; font-family: var(--font-mono); font-weight: 600; }
body.urra-ds .activity-body .payload,
body.urra-ds .activity-body .desc { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin: 2px 0 0; }
body.urra-ds .activity-body .when { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); margin-top: 2px; }
body.urra-ds .activity-body .when svg, body.urra-ds .activity-body .when i.bi { width: 12px; height: 12px; font-size: 11px; }

body.urra-ds .quick-link.disabled,
body.urra-ds .quick-link[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

body.urra-ds .plan-row { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
body.urra-ds .plan-row:first-of-type { border-top: none; padding-top: 4px; }
body.urra-ds .plan-icon { width: 44px; height: 44px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-2); display: grid; place-items: center; flex-shrink: 0; }
body.urra-ds .plan-icon svg { width: 21px; height: 21px; }
body.urra-ds .plan-info { min-width: 190px; }
body.urra-ds .plan-info strong { display: block; font-size: 14px; }
body.urra-ds .plan-info span { font-size: 12.5px; color: var(--muted); }
body.urra-ds .plan-dates { font-size: 12px; color: var(--muted); }
body.urra-ds .plan-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* ─── donut chart ───────────────────────────────────────────────── */
body.urra-ds .donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; }
body.urra-ds .donut { width: 132px; height: 132px; border-radius: 999px; display: grid; place-items: center; }
body.urra-ds .donut-hole { width: 96px; height: 96px; border-radius: 999px; background: var(--surface); display: grid; place-items: center; }
body.urra-ds .donut-hole strong { font-family: var(--font-display); font-size: 22px; font-weight: 700; }
body.urra-ds .legend { width: 100%; display: flex; flex-direction: column; gap: 8px; }
body.urra-ds .legend-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
body.urra-ds .legend-dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }
body.urra-ds .legend-row span.pct { margin-left: auto; font-family: var(--font-mono); color: var(--muted); }

/* ─── forms / toggles (namespace .field/.input — no colisiona con
   .form-control de Bootstrap) ───────────────────────────────────── */
body.urra-ds .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
body.urra-ds .field label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
body.urra-ds .field .val { font-size: 14.5px; font-weight: 500; }
body.urra-ds .input { width: 100%; padding: 10px 13px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); font: inherit; font-size: 14px; color: var(--fg); }
body.urra-ds .input:focus-visible { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
body.urra-ds .info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 24px; }

body.urra-ds .switch { position: relative; display: inline-block; width: 40px; height: 23px; flex-shrink: 0; }
body.urra-ds .switch input { opacity: 0; width: 0; height: 0; }
body.urra-ds .switch .slider { position: absolute; inset: 0; background: var(--border); border-radius: 999px; transition: background 0.15s ease; }
body.urra-ds .switch .slider::before { content: ''; position: absolute; width: 17px; height: 17px; left: 3px; top: 3px; background: white; border-radius: 999px; transition: transform 0.15s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
body.urra-ds .switch input:checked + .slider { background: var(--accent); }
body.urra-ds .switch input:checked + .slider::before { transform: translateX(17px); }
body.urra-ds .switch input:focus-visible + .slider { outline: 2px solid var(--accent); outline-offset: 2px; }
body.urra-ds .pref-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; }
body.urra-ds .checkbox-row { display: flex; align-items: center; gap: 9px; padding: 8px 0; font-size: 13.5px; }
body.urra-ds .checkbox-row input { width: 16px; height: 16px; accent-color: var(--accent); }

/* ─── cta strip ─────────────────────────────────────────────────── */
body.urra-ds .cta-strip {
  border-radius: var(--radius-lg); padding: 34px 36px; margin-top: 24px;
  background:
    radial-gradient(70% 140% at 90% 20%, color-mix(in oklch, var(--accent) 45%, transparent), transparent 65%),
    linear-gradient(120deg, #16151b, #0e0d11 75%);
  color: white; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
body.urra-ds .cta-strip h2 { font-family: var(--font-display); font-size: 22px; color: white; margin: 0 0 6px; }
body.urra-ds .cta-strip p { color: color-mix(in oklch, white 78%, transparent); font-size: 13.5px; max-width: 48ch; margin: 0; }

/* ─── footer ────────────────────────────────────────────────────── */
body.urra-ds .pagefoot { border-top: 1px solid var(--border); margin-top: 40px; padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 12.5px; }
body.urra-ds .pagefoot .foot-brand { display: flex; align-items: center; gap: 8px; color: var(--fg); font-weight: 700; font-family: var(--font-display); }
body.urra-ds .pagefoot .foot-brand .brand-mark { width: 24px; height: 24px; border-radius: 6px; }
body.urra-ds .pagefoot .foot-brand .brand-mark svg { width: 13px; height: 13px; }
body.urra-ds .pagefoot nav { display: flex; gap: 18px; flex-wrap: wrap; }
body.urra-ds .pagefoot nav a:hover { color: var(--fg); }

/* ─── modal propio (namespace .modal-card/.modal-head/.ds-modal-body —
   .modal-body colisionaba con el .modal-body real de Bootstrap y rompia
   el espaciado de todos los modales antiguos de la app) ─────────────── */
body.urra-ds .ds-modal-backdrop { display: none; }
body.urra-ds .ds-modal-backdrop.ds-open {
  position: fixed; inset: 0; background: color-mix(in oklch, black 55%, transparent);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 1200;
}
body.urra-ds .modal-card { background: var(--surface); border-radius: var(--radius-lg); padding: 26px; width: 100%; max-width: 420px; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.4); }
body.urra-ds .modal-card.modal-lg { max-width: 720px; }
body.urra-ds .modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
body.urra-ds .modal-head h3 { font-family: var(--font-display); font-size: 17px; margin: 0; }
body.urra-ds .modal-close { border: none; background: var(--fg-soft); width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); flex-shrink: 0; }
body.urra-ds .modal-close svg, body.urra-ds .modal-close i.bi { width: 15px; height: 15px; font-size: 14px; }
body.urra-ds .ds-modal-body { color: var(--fg); font-size: 14px; line-height: 1.5; max-height: 60vh; overflow-y: auto; white-space: pre-line; }
/* Markdown renderizado dentro del modal (ej. Novedades / CHANGELOG.md) -
   sin esto, h3/h4 heredan el tamaño enorme por defecto del navegador. */
body.urra-ds .ds-modal-body h3, body.urra-ds .ds-modal-body h4 {
  font-family: var(--font-display); font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--accent-2); margin: 18px 0 8px; white-space: normal;
}
body.urra-ds .ds-modal-body h3:first-child, body.urra-ds .ds-modal-body h4:first-child { margin-top: 0; }
body.urra-ds .ds-modal-body p { margin: 0 0 10px; white-space: normal; }
body.urra-ds .ds-modal-body ul, body.urra-ds .ds-modal-body ol { margin: 0 0 10px; padding-left: 20px; white-space: normal; }
body.urra-ds .ds-modal-body li { margin-bottom: 6px; }
body.urra-ds .ds-modal-body li > ul, body.urra-ds .ds-modal-body li > ol { margin-top: 6px; }
body.urra-ds .ds-modal-body code { font-family: var(--font-mono); font-size: 12.5px; background: var(--fg-soft); padding: 1px 5px; border-radius: 4px; }
body.urra-ds .ds-modal-body pre { background: var(--fg-soft); padding: 10px 12px; border-radius: var(--radius-sm); overflow-x: auto; }
body.urra-ds .ds-modal-body pre code { background: none; padding: 0; }
body.urra-ds .ds-modal-body a { color: var(--accent-2); text-decoration: underline; }
body.urra-ds .ds-modal-body strong { font-weight: 700; }
body.urra-ds .modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ─── section spacing helpers ───────────────────────────────────── */
body.urra-ds .grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }
body.urra-ds .stack { display: flex; flex-direction: column; gap: 20px; }
body.urra-ds .row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
body.urra-ds .mb-20 { margin-bottom: 20px; }

/* ─── auth / login screen ───────────────────────────────────────── */
body.urra-ds .auth-shell { min-height: 100vh; display: flex; background: var(--bg); position: relative; overflow: hidden; }
body.urra-ds .auth-shell::before, body.urra-ds .auth-shell::after {
  content: ''; position: absolute; width: 640px; height: 640px; border-radius: 999px; z-index: 0;
  background: radial-gradient(closest-side, color-mix(in oklch, var(--accent) 10%, transparent), transparent 70%);
}
body.urra-ds .auth-shell::before { top: -280px; right: 8%; }
body.urra-ds .auth-shell::after { bottom: -320px; left: -120px; }
body.urra-ds .auth-panel { position: relative; z-index: 1; width: 100%; max-width: 560px; display: flex; flex-direction: column; justify-content: center; padding: 56px clamp(28px, 6vw, 88px); }
body.urra-ds .auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 44px; }
body.urra-ds .auth-brand .brand-name { color: var(--fg); font-size: 19px; }
body.urra-ds .auth-heading h1 { font-family: var(--font-display); font-size: 30px; letter-spacing: -0.01em; margin: 0 0 8px; }
body.urra-ds .auth-heading p { color: var(--muted); font-size: 14.5px; max-width: 40ch; margin: 0 0 30px; }
body.urra-ds .input-icon-wrap { position: relative; display: flex; align-items: center; }
body.urra-ds .input-icon-wrap svg.field-ico,
body.urra-ds .input-icon-wrap i.field-ico { position: absolute; left: 13px; width: 17px; font-size: 16px; color: var(--muted); pointer-events: none; }
body.urra-ds .input-icon-wrap .input { padding-left: 40px; }
body.urra-ds .input-icon-wrap .input[type="password"], body.urra-ds .input-icon-wrap .input.has-toggle { padding-right: 42px; }
body.urra-ds .toggle-password { position: absolute; right: 6px; width: 30px; height: 30px; border: none; background: none; color: var(--muted); display: grid; place-items: center; border-radius: 6px; }
body.urra-ds .toggle-password:hover { color: var(--fg); }
body.urra-ds .toggle-password i.bi { font-size: 16px; }
body.urra-ds .auth-row-between { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 22px; flex-wrap: wrap; gap: 10px; }
body.urra-ds .check-remember { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--fg); }
body.urra-ds .check-remember input { width: 16px; height: 16px; accent-color: var(--accent); }
body.urra-ds .auth-forgot { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--accent-2); }
body.urra-ds .auth-forgot:hover { color: color-mix(in oklch, var(--accent-2) 80%, black); }
body.urra-ds .auth-divider { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 26px 0; }
body.urra-ds .auth-divider .line { flex: 1; height: 1px; background: var(--border); }
body.urra-ds .auth-divider .dot { width: 5px; height: 5px; border-radius: 999px; background: var(--border); }
body.urra-ds .auth-divider .dot.mid { width: 7px; height: 7px; background: color-mix(in oklch, var(--fg) 30%, var(--border)); }
body.urra-ds .auth-visual { position: relative; flex: 1; overflow: hidden; }
body.urra-ds .auth-visual img { width: 100%; height: 100%; object-fit: cover; }
body.urra-ds .auth-visual::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(10,9,10,0.88) 0%, rgba(10,9,10,0.55) 32%, rgba(10,9,10,0.15) 55%, transparent 72%),
    linear-gradient(0deg, rgba(8,7,8,0.55), transparent 40%),
    linear-gradient(200deg, color-mix(in oklch, var(--accent) 30%, transparent), transparent 55%);
}
body.urra-ds .auth-features { position: absolute; z-index: 2; left: 44px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 16px; width: min(360px, calc(100% - 88px)); }
body.urra-ds .auth-feature-card {
  background: color-mix(in oklch, black 62%, transparent); backdrop-filter: blur(6px);
  border: 1px solid color-mix(in oklch, white 14%, transparent); border-radius: var(--radius);
  padding: 16px 18px; display: flex; gap: 13px; align-items: flex-start;
}
body.urra-ds .auth-feature-card .fico { width: 34px; height: 34px; border-radius: 9px; background: color-mix(in oklch, var(--accent) 22%, transparent); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
body.urra-ds .auth-feature-card .fico i.bi { font-size: 16px; }
body.urra-ds .auth-feature-card strong { display: block; color: white; font-size: 14px; margin-bottom: 3px; }
body.urra-ds .auth-feature-card p { color: color-mix(in oklch, white 78%, transparent); font-size: 12.5px; line-height: 1.45; margin: 0; }

/* Reskin ligero de .alert de Bootstrap (usado por showAlert() en login) con
   los tokens del nuevo sistema, sin tocar el JS/markup que lo genera. */
body.urra-ds .alert { border-radius: var(--radius); border: 1px solid transparent; font-size: 13.5px; margin-bottom: 14px; }
body.urra-ds .alert-danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in oklch, var(--danger) 35%, var(--border)); }
body.urra-ds .alert-success { background: var(--success-soft); color: var(--success); border-color: color-mix(in oklch, var(--success) 35%, var(--border)); }
body.urra-ds .alert-info { background: var(--accent-soft); color: var(--accent-2); border-color: var(--accent-border); }
body.urra-ds .alert-warning { background: var(--accent-soft); color: var(--accent-2); border-color: var(--accent-border); }

/* ─── responsive ────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  body.urra-ds .stat-grid { grid-template-columns: repeat(2, 1fr); }
  body.urra-ds .service-grid { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  body.urra-ds .sidebar { transform: translateX(-100%); }
  body.urra-ds .sidebar.open { transform: translateX(0); }
  body.urra-ds .main { margin-left: 0; }
  body.urra-ds .icon-btn.menu-toggle { display: grid; }
  body.urra-ds .location-pill span.loc-text { display: none; }
  body.urra-ds .grid-2-1 { grid-template-columns: 1fr; }
  body.urra-ds .sidebar-backdrop.open { display: block; position: fixed; inset: 0; background: rgba(10,10,12,0.5); z-index: 39; }
  body.urra-ds .info-grid { grid-template-columns: 1fr; }
  body.urra-ds .auth-visual { display: none; }
  body.urra-ds .auth-panel { max-width: none; }
}
@media (max-width: 620px) {
  body.urra-ds .stat-grid, body.urra-ds .stat-grid.cols-3 { grid-template-columns: 1fr; }
  body.urra-ds .content { padding: 20px 16px 48px; }
  body.urra-ds .topbar-inner { padding: 14px 16px; }
  body.urra-ds .banner-light, body.urra-ds .banner-dark, body.urra-ds .cta-strip { padding: 24px 20px; }
  body.urra-ds .plan-row { flex-direction: column; align-items: flex-start; }
  body.urra-ds .plan-actions { margin-left: 0; }
  /* Encabezados de paginas sin migrar (titulo + botones con d-flex
     justify-content-between de Bootstrap) se apretaban uno junto al otro
     en vez de apilarse - se deja que el grupo de botones baje a su propia
     fila y ocupe todo el ancho. */
  body.urra-ds .d-flex.justify-content-between { flex-wrap: wrap; row-gap: 10px; }
  body.urra-ds .d-flex.justify-content-between > div:last-child:not(:only-child) { width: 100%; }
  body.urra-ds .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  body.urra-ds .tabs .tab { flex-shrink: 0; }
  body.urra-ds .nav-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  body.urra-ds .nav-tabs .nav-link { white-space: nowrap; }
}