/* =========================================================================
   Radsport ERP — interfaz (design system "Radsport ERP").
   Reemplaza a radsport_brand.css. Todo color/medida sale de los tokens --rs-*.
   Para cambiar el color de marca alcanza con editar --rs-brand y sus variantes.
   Temas: claro (por defecto) y oscuro, elegidos con html[data-theme]
   ("light" | "dark" | "auto" = según Windows/macOS). Ver el bloque OSCURO más abajo.
   ========================================================================= */

:root,
html[data-theme="light"],
html[data-theme="dark"],
html[data-theme="auto"] {
    color-scheme: light;

    /* --- Tokens del design system --- */
    --rs-surface-0: #f3f1ec;      /* fondo de página */
    --rs-surface-1: #ffffff;      /* tarjetas, tablas, inputs */
    --rs-surface-2: #ebe8e1;      /* encabezados de tabla, hover, zonas hundidas */
    --rs-border: #dfdbd2;
    --rs-border-strong: #8f8a80;  /* bordes de controles (3:1) */
    --rs-ink: #1b1c1e;
    --rs-ink-muted: #5c5d61;
    --rs-sidebar: #18191b;
    --rs-sidebar-active: #2a2c2f;
    --rs-sidebar-ink: #f1efea;
    --rs-sidebar-ink-muted: #a9a7a1;
    --rs-brand: #c0392b;          /* rojo Radsport (punto del logo) */
    --rs-brand-hover: #a5301f;
    --rs-on-brand: #ffffff;
    --rs-brand-ink: #a8332a;      /* rojo para texto/links sobre superficies claras */
    --rs-brand-soft: #fbeae8;     /* fila seleccionada, ítem actual */
    --rs-inverse: #1b1c1e;        /* encabezados oscuros de tablas propias */
    --rs-petrol: #24697a;
    --rs-focus: #1f5fbf;
    --rs-success: #1b7343;  --rs-success-soft: #dcefe2;
    --rs-warning: #8a5300;  --rs-warning-soft: #fbebc8;
    --rs-danger:  #8f1a2e;  --rs-danger-soft:  #f7dfe3;   /* bordó: se distingue del rojo de marca */
    --rs-info:    #1f5fbf;  --rs-info-soft:    #dde7f7;
    --rs-violet:  #6941c6;  --rs-violet-soft:  #ece6fa;   /* solo para identificar la sección Gestión */

    --rs-space-1: 4px; --rs-space-2: 8px; --rs-space-3: 12px;
    --rs-space-4: 16px; --rs-space-5: 24px; --rs-space-6: 32px;
    --rs-radius-sm: 4px; --rs-radius-md: 6px; --rs-radius-lg: 10px; --rs-radius-pill: 999px;
    --rs-control-height: 32px;
    --rs-row-height: 36px;
    --rs-sidebar-width: 232px;
    --rs-header-height: 52px;
    --rs-shadow-pop: 0 8px 24px rgba(27, 28, 30, 0.14);
    --rs-font-sans: Archivo, "Helvetica Neue", Arial, sans-serif;
    --rs-font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

    /* --- Variables propias del admin de Django, mapeadas a los tokens --- */
    --primary: var(--rs-brand);
    --secondary: var(--rs-ink);
    --accent: var(--rs-brand);
    --primary-fg: var(--rs-on-brand);
    --body-fg: var(--rs-ink);
    --body-bg: var(--rs-surface-0);
    --body-quiet-color: var(--rs-ink-muted);
    --body-medium-color: var(--rs-ink);
    --body-loud-color: var(--rs-ink);
    --header-color: var(--rs-ink);
    --header-branding-color: var(--rs-sidebar-ink);
    --header-bg: var(--rs-surface-2);
    --header-link-color: var(--rs-ink);
    --breadcrumbs-fg: var(--rs-ink);
    --breadcrumbs-link-fg: var(--rs-ink-muted);
    --breadcrumbs-bg: transparent;
    --link-fg: var(--rs-ink);
    --link-hover-color: var(--rs-brand-ink);
    --link-selected-fg: var(--rs-brand-ink);
    --hairline-color: var(--rs-border);
    --border-color: var(--rs-border-strong);
    --error-fg: var(--rs-danger);
    --message-success-bg: var(--rs-success-soft);
    --message-warning-bg: var(--rs-warning-soft);
    --message-error-bg: var(--rs-danger-soft);
    --message-info-bg: var(--rs-info-soft);
    --darkened-bg: var(--rs-surface-2);
    --selected-bg: var(--rs-brand-soft);
    --selected-row: var(--rs-brand-soft);
    --button-fg: var(--rs-ink);
    --button-bg: var(--rs-surface-1);
    --button-hover-bg: var(--rs-surface-2);
    --default-button-bg: var(--rs-brand);
    --default-button-hover-bg: var(--rs-brand-hover);
    --close-button-bg: var(--rs-surface-1);
    --close-button-hover-bg: var(--rs-surface-2);
    --delete-button-bg: var(--rs-danger);
    --delete-button-hover-bg: var(--rs-danger);
    --object-tools-fg: var(--rs-on-brand);
    --object-tools-bg: var(--rs-brand);
    --object-tools-hover-bg: var(--rs-brand-hover);
    --font-family-primary: var(--rs-font-sans);
    --font-family-monospace: var(--rs-font-mono);
}

/* ------------------------------------------------- Tema OSCURO
   Mismos nombres de tokens, otros valores. Gris grafito (no negro) para dar más contraste entre fondos. Texto ≥ 4.5:1. */
html[data-theme="dark"] {
    color-scheme: dark;
    --rs-surface-0: #1c1f23;
    --rs-surface-1: #262a30;
    --rs-surface-2: #30353c;
    --rs-border: #3d434b;
    --rs-border-strong: #80868f;
    --rs-ink: #f1f0ec;
    --rs-ink-muted: #b8b7b2;
    --rs-sidebar: #141619;
    --rs-sidebar-active: #2a2e34;
    --rs-sidebar-ink: #f1f0ec;
    --rs-sidebar-ink-muted: #a9a7a1;
    --rs-brand: #c0392b;
    --rs-brand-hover: #a93224;
    --rs-on-brand: #ffffff;
    --rs-brand-ink: #ff8f84;
    --rs-brand-soft: #43201c;
    --rs-inverse: #3a3f47;
    --rs-petrol: #5fb6c8;
    --rs-focus: #7aa7ff;
    --rs-success: #5ccf90;  --rs-success-soft: #1b3a27;
    --rs-warning: #f2bb52;  --rs-warning-soft: #40311a;
    --rs-danger:  #ff9cac;  --rs-danger-soft:  #47202a;
    --rs-info:    #8ab3ff;  --rs-info-soft:    #1d2b45;
    --rs-violet:  #b9a3f7;  --rs-violet-soft:  #2f2747;
    --rs-shadow-pop: 0 10px 28px rgba(0, 0, 0, 0.55);
}
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] {
        color-scheme: dark;
        --rs-surface-0: #1c1f23; --rs-surface-1: #262a30; --rs-surface-2: #30353c;
        --rs-border: #3d434b; --rs-border-strong: #80868f;
        --rs-ink: #f1f0ec; --rs-ink-muted: #b8b7b2;
        --rs-sidebar: #141619; --rs-sidebar-active: #2a2e34; --rs-sidebar-ink: #f1f0ec; --rs-sidebar-ink-muted: #a9a7a1;
        --rs-brand: #c0392b; --rs-brand-hover: #a93224; --rs-on-brand: #ffffff;
        --rs-brand-ink: #ff8f84; --rs-brand-soft: #43201c; --rs-inverse: #3a3f47;
        --rs-petrol: #5fb6c8; --rs-focus: #7aa7ff;
        --rs-success: #5ccf90; --rs-success-soft: #1b3a27;
        --rs-warning: #f2bb52; --rs-warning-soft: #40311a;
        --rs-danger: #ff9cac; --rs-danger-soft: #47202a;
        --rs-info: #8ab3ff; --rs-info-soft: #1d2b45;
        --rs-violet: #b9a3f7; --rs-violet-soft: #2f2747;
        --rs-shadow-pop: 0 10px 28px rgba(0, 0, 0, 0.55);
    }
}
/* Íconos de Django (lápiz, cruz, lupa) y selects nativos en oscuro */
html[data-theme="dark"] img[src*="/admin/img/"] { filter: brightness(1.6); }
html[data-theme="dark"] select option { background: var(--rs-surface-1); color: var(--rs-ink); }

/* Botón de tema en la barra superior */
.rs-theme-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid transparent; border-radius: var(--rs-radius-md); background: transparent; color: var(--rs-ink-muted); cursor: pointer; }
.rs-theme-btn:hover { background: var(--rs-surface-2); color: var(--rs-ink); }
.rs-theme-btn .rs-ic-sun { display: none; }
html[data-theme="dark"] .rs-theme-btn .rs-ic-sun { display: block; }
html[data-theme="dark"] .rs-theme-btn .rs-ic-moon { display: none; }
.rs-theme-opts { display: flex; gap: 4px; padding: 8px 14px 10px; border-top: 1px solid var(--rs-border); }
.rs-theme-opts button { flex: 1; height: 28px; border: 1px solid var(--rs-border-strong); border-radius: var(--rs-radius-md); background: var(--rs-surface-1); color: var(--rs-ink); font: 600 12px/1 var(--rs-font-sans); cursor: pointer; }
.rs-theme-opts button[aria-pressed="true"] { background: var(--rs-ink); color: var(--rs-surface-1); border-color: var(--rs-ink); }
.rs-theme-lbl { padding: 10px 14px 0; font: 600 11px/16px var(--rs-font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--rs-ink-muted); border-top: 1px solid var(--rs-border); }
.rs-theme-lbl + .rs-theme-opts { border-top: 0; }

/* ---------------------------------------------------------------- Base */
html, body { background: var(--rs-surface-0); }
body {
    font-family: var(--rs-font-sans);
    font-size: 14px;
    line-height: 20px;
    color: var(--rs-ink);
    -webkit-font-smoothing: antialiased;
}
a:link, a:visited { color: var(--rs-ink); }
/* En tablas, menús y filtros los links van sin subrayado (densidad); el subrayado queda para el texto corrido. */
#result_list a, .rs-mod-list a, .breadcrumbs a, #changelist-filter a, .paginator a, .toplinks a,
.module table a, .inline-group a, .rs-pop a, a.rs-notif-item, .object-tools a, .submit-row a, #rs-side a, a.rs-brand { text-decoration: none !important; }
#result_list a:hover, .rs-mod-list a:hover, .module table a:hover { text-decoration: underline !important; }
a:focus, a:hover { color: var(--rs-brand-ink); }
:focus-visible { outline: 2px solid var(--rs-focus); outline-offset: 2px; }
svg.rs-i {
    width: 16px; height: 16px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
}
code, kbd, pre, samp, tt { font-family: var(--rs-font-mono); }

/* ------------------------------------------------- Layout con barra lateral */
#container { position: relative; min-width: 0; width: 100%; box-sizing: border-box; }
body:has(#rs-side) #container { padding-left: var(--rs-sidebar-width); }
#container > .main, #container > .main.shifted { display: block; }
.main > .content { padding: 0; }
.main > #nav-sidebar + .content, .main.shifted > #nav-sidebar + .content { max-width: none; }
#toggle-nav-sidebar, #nav-sidebar { display: none !important; }

/* Barra lateral */
#rs-side {
    position: fixed; z-index: 30;
    top: 0; left: 0; bottom: 0;
    width: var(--rs-sidebar-width);
    background: var(--rs-sidebar);
    color: var(--rs-sidebar-ink-muted);
    display: flex; flex-direction: column;
    padding: 64px 10px 10px; box-sizing: border-box;
}
.rs-side-filter {
    display: flex; align-items: center; gap: 8px;
    height: 32px; margin: 0 0 8px; padding: 0 10px;
    border-radius: var(--rs-radius-md);
    background: var(--rs-sidebar-active);
    color: var(--rs-sidebar-ink-muted);
}
.rs-side-filter input,
.rs-side-filter input[type="search"] {
    flex: 1; min-width: 0; height: 30px; padding: 0;
    border: 0; background: transparent; box-shadow: none;
    color: var(--rs-sidebar-ink); font: 400 13px/1 var(--rs-font-sans);
}
.rs-side-filter input::placeholder { color: var(--rs-sidebar-ink-muted); }
.rs-side-filter input:focus { outline: none; }
.rs-side-filter:focus-within { outline: 2px solid var(--rs-focus); outline-offset: 1px; }
.rs-side-scroll { overflow-y: auto; flex: 1; margin: 0 -6px; padding: 0 6px 12px; scrollbar-width: thin; scrollbar-color: var(--rs-sidebar-active) transparent; }
#rs-side a.rs-nav-i:link, #rs-side a.rs-nav-i:visited {
    display: flex; align-items: center; gap: 10px;
    min-height: 32px; padding: 6px 10px;
    border-radius: var(--rs-radius-md);
    color: var(--rs-sidebar-ink-muted);
    font: 500 13.5px/18px var(--rs-font-sans);
    text-decoration: none;
}
#rs-side a.rs-nav-i:hover { background: var(--rs-sidebar-active); color: var(--rs-sidebar-ink); }
#rs-side a.rs-nav-i.on { background: var(--rs-sidebar-active); color: var(--rs-sidebar-ink); }
#rs-side a.rs-nav-home.on svg { color: var(--rs-brand); }
#rs-side a.rs-nav-sub:link, #rs-side a.rs-nav-sub:visited { padding-left: 36px; font-size: 13px; font-weight: 400; min-height: 30px; }
#rs-side a.rs-nav-sub.on { font-weight: 600; box-shadow: inset 2px 0 0 var(--rs-brand); }
.rs-nav-group { margin-top: 2px; }
.rs-nav-g {
    display: flex; align-items: center; gap: 10px; width: 100%;
    min-height: 34px; padding: 6px 10px; margin: 0;
    border: 0; border-radius: var(--rs-radius-md);
    background: transparent; color: var(--rs-sidebar-ink-muted);
    font: 500 13.5px/18px var(--rs-font-sans); text-align: left; cursor: pointer;
}
.rs-nav-g:hover { background: var(--rs-sidebar-active); color: var(--rs-sidebar-ink); }
.rs-nav-group.has-active > .rs-nav-g { color: var(--rs-sidebar-ink); }
.rs-nav-group.has-active > .rs-nav-g > svg:first-child { color: var(--rs-brand); }
.rs-nav-gname { flex: 1; }
.rs-chev { width: 14px; height: 14px; transition: transform .15s ease; }
.rs-nav-group.open .rs-chev { transform: rotate(90deg); }
.rs-nav-items { display: none; padding: 2px 0 6px; }
.rs-nav-group.open .rs-nav-items, #rs-side.filtering .rs-nav-items { display: block; }
.rs-beta { font: 600 10px/1 var(--rs-font-sans); letter-spacing: .04em; text-transform: uppercase; padding: 3px 5px; border-radius: var(--rs-radius-sm); background: var(--rs-sidebar-active); color: var(--rs-sidebar-ink-muted); }

/* ------------------------------------------------- Header superior */
#header {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; justify-content: flex-end; gap: var(--rs-space-3);
    height: var(--rs-header-height); flex: none; padding: 0 var(--rs-space-5);
    background: var(--rs-surface-1); color: var(--rs-ink);
    border-bottom: 1px solid var(--rs-border);
    box-shadow: none; overflow: visible; flex-wrap: nowrap;
}
#header a:link, #header a:visited { color: var(--rs-ink); }
#branding { position: fixed; z-index: 31; top: 0; left: 0; width: var(--rs-sidebar-width); height: 60px; display: flex; align-items: center; padding: 0 18px; margin: 0; }
body:not(:has(#rs-side)) #container #branding { position: static; width: auto; padding: 0; }
#branding a.rs-brand:link, #branding a.rs-brand:visited {
    display: flex; align-items: center; gap: 10px;
    color: var(--rs-sidebar-ink); text-decoration: none;
    font: 700 15px/1.1 var(--rs-font-sans); letter-spacing: -.01em;
}
body:not(:has(#rs-side)) #container #branding a.rs-brand { color: var(--rs-ink); }
.rs-brand-mark { width: 24px; height: 24px; border-radius: var(--rs-radius-sm); background: var(--rs-brand); color: var(--rs-on-brand); display: grid; place-items: center; font: 700 13px/1 var(--rs-font-mono); }
.rs-brand-txt small { display: block; margin-top: 3px; font: 500 11px/14px var(--rs-font-sans); color: var(--rs-sidebar-ink-muted); letter-spacing: 0; }
body:not(:has(#rs-side)) #container .rs-brand-txt small { color: var(--rs-ink-muted); }

/* Logo Radi (wordmark). Dos variantes: --dark = letras blancas (fondo oscuro,
   el caso normal porque el branding va fijo sobre la columna del sidebar, que
   siempre es oscura); --light = letras negras (login / sin sidebar en tema claro). */
.rs-brand-logo { display: block; height: 30px; width: auto; }
.rs-brand-logo--light { display: none; }
body:not(:has(#rs-side)) .rs-brand-logo--dark { display: none; }
body:not(:has(#rs-side)) .rs-brand-logo--light { display: block; }
/* ...pero si el tema es oscuro, esa superficie clara pasa a oscura -> letras blancas */
html[data-theme="dark"] body:not(:has(#rs-side)) .rs-brand-logo--dark { display: block; }
html[data-theme="dark"] body:not(:has(#rs-side)) .rs-brand-logo--light { display: none; }
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body:not(:has(#rs-side)) .rs-brand-logo--dark { display: block; }
  html[data-theme="auto"] body:not(:has(#rs-side)) .rs-brand-logo--light { display: none; }
}

#user-tools { order: 3; display: flex; align-items: center; gap: var(--rs-space-2); padding: 0; margin: 0; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--rs-ink-muted); }
.rs-notif { order: 2; }

.rs-user { position: relative; }
.rs-user-btn, .rs-notif-btn, .rs-menu-btn {
    display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px;
    border: 1px solid transparent; border-radius: var(--rs-radius-md);
    background: transparent; color: var(--rs-ink-muted); cursor: pointer;
    font: 600 13px/1 var(--rs-font-sans);
}
.rs-user-btn:hover, .rs-notif-btn:hover, .rs-menu-btn:hover { background: var(--rs-surface-2); color: var(--rs-ink); }
#header .rs-menu-btn { display: none; }
.rs-user-name { color: var(--rs-ink); }
.rs-av { width: 28px; height: 28px; border-radius: 50%; background: var(--rs-brand-soft); color: var(--rs-brand-ink); display: grid; place-items: center; font: 700 11px/1 var(--rs-font-sans); text-transform: uppercase; }
.rs-notif { position: relative; }
.rs-notif-btn { position: relative; width: 34px; justify-content: center; padding: 0; }
.rs-notif-badge { position: absolute; top: 2px; right: 0; min-width: 15px; height: 15px; padding: 0 4px; line-height: 15px !important; border-radius: var(--rs-radius-pill); background: var(--rs-brand); color: var(--rs-on-brand); font: 600 10px/16px var(--rs-font-mono); text-align: center; }
.rs-pop {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 2000;
    min-width: 220px; overflow: hidden;
    background: var(--rs-surface-1); color: var(--rs-ink);
    border: 1px solid var(--rs-border); border-radius: var(--rs-radius-lg);
    box-shadow: var(--rs-shadow-pop);
}
.rs-pop[hidden] { display: none; }
.rs-pop-head { padding: 12px 14px; border-bottom: 1px solid var(--rs-border); font: 600 13px/18px var(--rs-font-sans); display: flex; flex-direction: column; }
.rs-pop-head small { font: 400 12px/16px var(--rs-font-sans); color: var(--rs-ink-muted); }
.rs-user-panel a:link, .rs-user-panel a:visited, .rs-user-panel button {
    display: block; width: 100%; padding: 10px 14px; margin: 0;
    border: 0; background: transparent; text-align: left; cursor: pointer;
    font: 500 13px/18px var(--rs-font-sans); color: var(--rs-ink); text-transform: none; letter-spacing: 0;
}
.rs-user-panel a:hover, .rs-user-panel button:hover { background: var(--rs-surface-2); color: var(--rs-ink); }
#header #logout-form { display: block; margin: 0; border-top: 1px solid var(--rs-border); }
#header #logout-form button { display: block; width: 100%; padding: 10px 14px; text-align: left; font: 600 13px/18px var(--rs-font-sans); text-transform: none; letter-spacing: 0; color: var(--rs-danger); background: transparent; border: 0; }
#header #logout-form button:hover { background: var(--rs-danger-soft); text-decoration: none; }
.rs-pop { text-align: left; }
.rs-notif-panel { width: 360px; max-width: 90vw; }
.rs-notif-head { flex-direction: row; justify-content: space-between; align-items: center; }
.rs-notif-count { font: 600 11.5px/1 var(--rs-font-sans); color: var(--rs-brand-ink); }
.rs-notif-list { max-height: 340px; overflow-y: auto; }
a.rs-notif-item:link, a.rs-notif-item:visited { display: grid; grid-template-columns: 8px 1fr; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--rs-border); color: var(--rs-ink); text-decoration: none; }
a.rs-notif-item:hover { background: var(--rs-surface-2); }
.rs-notif-dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: transparent; }
.rs-unread .rs-notif-dot { background: var(--rs-brand); }
.rs-unread .rs-notif-msg { font-weight: 600; }
.rs-notif-txt { display: flex; flex-direction: column; }
.rs-notif-msg { font-size: 13px; line-height: 18px; }
.rs-notif-time { font-size: 12px; color: var(--rs-ink-muted); margin-top: 2px; }
.rs-notif-empty { padding: 22px 14px; text-align: center; color: var(--rs-ink-muted); font-size: 13px; }
a.rs-notif-foot:link, a.rs-notif-foot:visited { display: block; text-align: center; padding: 10px; font: 600 12.5px/1 var(--rs-font-sans); color: var(--rs-brand-ink); text-decoration: none; }
a.rs-notif-foot:hover { background: var(--rs-surface-2); }

/* Migas de pan: dentro de la barra superior, a la izquierda */
#container > nav[aria-label] , div.breadcrumbs { background: transparent; }
body:has(#rs-side) #container > nav:has(> .breadcrumbs) {
    position: absolute; z-index: 41; top: 0; left: calc(var(--rs-sidebar-width) + var(--rs-space-5));
    height: var(--rs-header-height); display: flex; align-items: center;
    max-width: calc(100% - var(--rs-sidebar-width) - 260px); overflow: hidden;
}
ol.breadcrumbs, div.breadcrumbs {
    display: flex; align-items: center; flex-wrap: nowrap; gap: 0;
    margin: 0; padding: 0; background: transparent; border: 0;
    font: 400 13px/18px var(--rs-font-sans); color: var(--rs-ink); white-space: nowrap;
}
ol.breadcrumbs li { display: inline; color: var(--rs-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
ol.breadcrumbs li:not([aria-current="page"]) { font-weight: 400; }
ol.breadcrumbs li:not([aria-current="page"])::after { content: "›"; margin: 0 8px; color: var(--rs-ink-muted); }
ol.breadcrumbs li:last-child::after { content: none !important; }
ol.breadcrumbs a:link, ol.breadcrumbs a:visited, div.breadcrumbs a:link, div.breadcrumbs a:visited { color: var(--rs-ink-muted); text-decoration: none; }
ol.breadcrumbs a:hover, div.breadcrumbs a:hover { color: var(--rs-brand-ink); }
/* Páginas propias que dejan las migas fuera del header */
.content div.breadcrumbs { padding: 0 0 var(--rs-space-3); }

/* ------------------------------------------------- Contenido */
#content { padding: var(--rs-space-5); max-width: none; box-sizing: border-box; }
#main, .main > .content { min-width: 0; }
.titles-and-tools { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--rs-space-4); margin-bottom: var(--rs-space-4); flex-wrap: wrap; }
#content h1, .rs-ph h1 { margin: 0; font: 700 22px/28px var(--rs-font-sans); letter-spacing: -.015em; color: var(--rs-ink); }
#content > h2, .titles h2 { margin: 2px 0 0; font: 400 13px/18px var(--rs-font-sans); color: var(--rs-ink-muted); }
.rs-ph p { margin: 2px 0 0; color: var(--rs-ink-muted); font-size: 13px; }
#content h2, #content h3 { font-family: var(--rs-font-sans); }
.help, p.help, form p.help, div.help, form div.help, .helptext, .help-tooltip { color: var(--rs-ink-muted); font-size: 12px; line-height: 16px; }
.quiet, a.quiet:link, a.quiet:visited { color: var(--rs-ink-muted); }

/* Herramientas del objeto ("Agregar venta", "Historial") = botones */
.object-tools { margin: 0; padding: 0; display: flex; gap: var(--rs-space-2); flex-wrap: wrap; float: none; }
.object-tools li { height: auto; margin: 0; }
.object-tools a:link, .object-tools a:visited {
    display: inline-flex; align-items: center; gap: 6px;
    height: var(--rs-control-height); padding: 0 12px;
    border-radius: var(--rs-radius-md); border: 1px solid var(--rs-border-strong);
    background: var(--rs-surface-1); color: var(--rs-ink);
    font: 600 13px/1 var(--rs-font-sans); text-transform: none; letter-spacing: 0;
}
.object-tools a:hover, .object-tools a:focus { background: var(--rs-surface-2); color: var(--rs-ink); }
.object-tools a.addlink:link, .object-tools a.addlink:visited { background: var(--rs-brand); border-color: var(--rs-brand); color: var(--rs-on-brand); padding-left: 12px; }
.object-tools a.addlink:hover { background: var(--rs-brand-hover); border-color: var(--rs-brand-hover); }
.object-tools a.addlink { background-image: none; }
.object-tools a.addlink::before { content: "+"; font-size: 16px; font-weight: 500; margin-right: 2px; }

/* ------------------------------------------------- Botones */
.button, input[type=submit], input[type=button], .submit-row input, a.button, button.button {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: var(--rs-control-height); padding: 0 12px; margin: 0;
    border: 1px solid var(--rs-border-strong); border-radius: var(--rs-radius-md);
    background: var(--rs-surface-1); color: var(--rs-ink);
    font: 600 13px/1 var(--rs-font-sans); text-transform: none; letter-spacing: 0;
    cursor: pointer; white-space: nowrap; box-shadow: none;
}
.button:hover, input[type=submit]:hover, input[type=button]:hover, a.button:hover { background: var(--rs-surface-2); color: var(--rs-ink); }
.button.default, input[type=submit].default, .submit-row input.default {
    background: var(--rs-brand); border-color: var(--rs-brand); color: var(--rs-on-brand); font-weight: 600;
}
.button.default:hover, input[type=submit].default:hover, .submit-row input.default:hover { background: var(--rs-brand-hover); border-color: var(--rs-brand-hover); color: var(--rs-on-brand); }
.button:focus-visible, input[type=submit]:focus-visible, input[type=button]:focus-visible { outline: 2px solid var(--rs-focus); outline-offset: 2px; }
.button[disabled], input[type=submit][disabled], input[type=button][disabled] { opacity: .45; cursor: not-allowed; }
a.deletelink:link, a.deletelink:visited, .submit-row a.deletelink {
    display: inline-flex; align-items: center; height: var(--rs-control-height); padding: 0 12px;
    border-radius: var(--rs-radius-md); border: 1px solid transparent;
    background: transparent; color: var(--rs-danger); font: 600 13px/1 var(--rs-font-sans);
}
a.deletelink:hover { background: var(--rs-danger-soft); color: var(--rs-danger); }
a.closelink:link, a.closelink:visited, .submit-row a.closelink {
    display: inline-flex; align-items: center; height: var(--rs-control-height); padding: 0 12px;
    border-radius: var(--rs-radius-md); border: 1px solid var(--rs-border-strong);
    background: var(--rs-surface-1); color: var(--rs-ink); font: 600 13px/1 var(--rs-font-sans);
}
.submit-row {
    display: flex; align-items: center; justify-content: flex-end; gap: var(--rs-space-2); flex-wrap: wrap;
    margin: var(--rs-space-4) 0; padding: var(--rs-space-3) var(--rs-space-4);
    background: var(--rs-surface-1); border: 1px solid var(--rs-border); border-radius: var(--rs-radius-lg);
}
.submit-row a.deletelink { margin-right: auto; }
body.change-form .submit-row { position: sticky; bottom: 0; z-index: 5; box-shadow: 0 -6px 16px rgba(27, 28, 30, 0.06); }

/* ------------------------------------------------- Mensajes */
ul.messagelist { padding: var(--rs-space-4) var(--rs-space-5) 0; margin: 0; }
ul.messagelist li {
    margin: 0 0 var(--rs-space-2); padding: 10px 14px 10px 40px;
    border-radius: var(--rs-radius-md); border: 1px solid transparent;
    font-size: 13px; line-height: 18px; color: var(--rs-ink);
    background-position: 14px 11px; background-size: 16px;
}
ul.messagelist li.success { background-color: var(--rs-success-soft); border-color: var(--rs-border); }
ul.messagelist li.warning { background-color: var(--rs-warning-soft); border-color: var(--rs-border); }
ul.messagelist li.error { background-color: var(--rs-danger-soft); border-color: var(--rs-border); }
ul.messagelist li.info { background-color: var(--rs-info-soft); border-color: var(--rs-border); }
.errornote { margin: 0 0 var(--rs-space-4); padding: 10px 14px; border: 1px solid var(--rs-border); border-radius: var(--rs-radius-md); background: var(--rs-danger-soft); color: var(--rs-danger); font-size: 13px; font-weight: 600; }
ul.errorlist { margin: 0 0 6px; padding: 0; color: var(--rs-danger); background: transparent; font-size: 12px; font-weight: 600; }
ul.errorlist li { font-size: 12px; margin: 0; padding: 0; }
.errors input, .errors select, .errors textarea, td ul.errorlist + input, ul.errorlist + p input { border-color: var(--rs-danger) !important; box-shadow: 0 0 0 1px var(--rs-danger); }
.errors, .form-row.errors { background: transparent; }

/* ------------------------------------------------- Inputs */
input[type=text], input[type=password], input[type=email], input[type=url], input[type=number],
input[type=tel], input[type=date], input[type=datetime-local], input[type=time], input[type=search],
textarea, select, .vTextField {
    height: var(--rs-control-height); padding: 0 10px;
    border: 1px solid var(--rs-border-strong); border-radius: var(--rs-radius-md);
    background-color: var(--rs-surface-1); color: var(--rs-ink);
    font: 400 13px/1.2 var(--rs-font-sans);
    box-shadow: none; box-sizing: border-box;
}
textarea { height: auto; min-height: 72px; padding: 8px 10px; line-height: 20px; }
select { padding-right: 28px; }
select[multiple] { height: auto; padding: 4px; }
input[type=number], .vIntegerField, .vBigIntegerField, .vDecimalField { font-family: var(--rs-font-mono); font-variant-numeric: tabular-nums; }
input:focus, select:focus, textarea:focus { border-color: var(--rs-focus); outline: 2px solid var(--rs-focus); outline-offset: 0; }
input[type=checkbox], input[type=radio] { accent-color: var(--rs-brand); width: 15px; height: 15px; vertical-align: middle; }
input[readonly], select[disabled], input[disabled] { background-color: var(--rs-surface-2); color: var(--rs-ink-muted); }
.vDateField, .vTimeField { min-width: 120px; }
.datetimeshortcuts a:link, .datetimeshortcuts a:visited { color: var(--rs-brand-ink); font-size: 12px; }

/* Select2 (autocompletes) */
.select2-container--admin-autocomplete .select2-selection,
.select2-container--admin-autocomplete.select2-container--focus .select2-selection,
.select2-container--admin-autocomplete.select2-container--open .select2-selection {
    min-height: var(--rs-control-height); border: 1px solid var(--rs-border-strong) !important; border-radius: var(--rs-radius-md) !important; background: var(--rs-surface-1);
}
.select2-container--admin-autocomplete.select2-container--focus .select2-selection { outline: 2px solid var(--rs-focus); outline-offset: 0; }
.select2-container--admin-autocomplete .select2-selection--single .select2-selection__rendered { line-height: 30px; color: var(--rs-ink); font-size: 13px; padding-left: 10px; }
.select2-container--admin-autocomplete .select2-selection--single .select2-selection__arrow { height: 30px; }
.select2-container--admin-autocomplete .select2-results__option--highlighted[aria-selected] { background: var(--rs-brand-soft); color: var(--rs-ink); }
.select2-dropdown { border-color: var(--rs-border-strong); border-radius: var(--rs-radius-md); box-shadow: var(--rs-shadow-pop); }

/* ------------------------------------------------- Formularios (change form) */
fieldset.module, .module {
    background: var(--rs-surface-1); border: 1px solid var(--rs-border); border-radius: var(--rs-radius-lg);
    margin: 0 0 var(--rs-space-4); padding: 0; overflow: visible;
}
fieldset.module > h2, .module > h2, .module caption, .inline-group h2, fieldset.module > summary, .module > details > summary {
    margin: 0; padding: var(--rs-space-3) var(--rs-space-4);
    background: transparent; color: var(--rs-ink);
    border-bottom: 1px solid var(--rs-border); border-radius: var(--rs-radius-lg) var(--rs-radius-lg) 0 0;
    font: 600 14px/20px var(--rs-font-sans); text-transform: none; letter-spacing: 0; text-align: left;
}
fieldset.module h2 a, .module caption a { color: var(--rs-ink); }
fieldset.collapse summary, details > summary { cursor: pointer; }
.form-row { padding: var(--rs-space-3) var(--rs-space-4); border-bottom: 1px solid var(--rs-border); overflow: visible; }
.form-row:last-child { border-bottom: 0; }
.aligned label, .form-row label, fieldset .fieldBox label { font: 600 12.5px/16px var(--rs-font-sans); color: var(--rs-ink); padding-top: 8px; }
.aligned label + p, .aligned label + div.readonly, .aligned .readonly { font-size: 13px; padding-top: 6px; }
.required label, label.required { font-weight: 700; color: var(--rs-ink); }
.required label::after, label.required::after { content: " *"; color: var(--rs-brand-ink); }
form .aligned div.help, form .aligned p.help { margin-left: 0; padding-left: 0; }
.aligned .form-row input, .aligned .form-row select { max-width: 100%; }
.related-widget-wrapper { gap: 6px; }
.related-widget-wrapper-link { opacity: .7; }
.related-widget-wrapper-link:hover { opacity: 1; }

/* Inlines (ítems de venta, etc.) */
.inline-group { background: var(--rs-surface-1); border: 1px solid var(--rs-border); border-radius: var(--rs-radius-lg); margin: 0 0 var(--rs-space-4); overflow: visible; }
.inline-group .module { border: 0; margin: 0; border-radius: 0; }
.inline-group .tabular { overflow-x: auto; }
.inline-group .tabular table { width: 100%; }
.inline-group .tabular thead th, .inline-group .tabular tr th {
    padding: 8px 10px; background: var(--rs-surface-2); color: var(--rs-ink-muted);
    font: 600 11px/16px var(--rs-font-sans); letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--rs-border);
}
.inline-group .tabular td { padding: 8px 10px; border-bottom: 1px solid var(--rs-border); vertical-align: middle; }
.inline-group .tabular tr.has_original td { padding-top: 32px; }
.inline-group .tabular tr td.original, .inline-group .tabular th.original { padding: 2px 0 0; width: 0; vertical-align: top; }
.inline-group .tabular td.original p { margin-top: 6px; padding: 2px 10px; height: auto; font: 600 12px/16px var(--rs-font-mono); color: var(--rs-ink); }
.inline-group .tabular tr.add-row td, .inline-group div.add-row { padding: 10px 14px; background: transparent; border-bottom: 0; }
.inline-group .add-row a:link, .inline-group .add-row a:visited, a.addlink:link, a.addlink:visited { color: var(--rs-brand-ink); font-weight: 600; }
.inline-related h3 { background: var(--rs-surface-2); color: var(--rs-ink); font: 600 13px/18px var(--rs-font-sans); padding: 8px 14px; border: 0; }
tr.row-form-errors td { background: var(--rs-danger-soft); }

/* ------------------------------------------------- Listados (changelist) */
#changelist { display: block; background: transparent; border: 0; border-radius: 0; margin: 0; }
#changelist .changelist-form-container { display: flex; flex-direction: row; align-items: flex-start; gap: var(--rs-space-4); width: 100%; }
#changelist .changelist-form-container > div { order: 1; flex: 1 1 auto; min-width: 0; max-width: none !important; }
#changelist #toolbar {
    margin: 0 0 var(--rs-space-3); padding: 0; background: transparent; border: 0; color: var(--rs-ink-muted);
}
#changelist #toolbar form#changelist-search { display: flex; align-items: center; gap: var(--rs-space-2); flex-wrap: wrap; }
#changelist #toolbar form input[type=text], #changelist #searchbar {
    width: 320px; max-width: 100%; height: var(--rs-control-height); padding: 0 10px 0 32px;
    background: var(--rs-surface-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5d61' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l5 5'/%3E%3C/svg%3E") no-repeat 10px 50% / 15px;
}
#changelist #toolbar form input[type=submit] { height: var(--rs-control-height); }
#changelist-search img { display: none; }
#changelist .small.quiet { font-size: 12px; color: var(--rs-ink-muted); }

/* Panel de filtros a la derecha */
#changelist-filter {
    order: 2; flex: 0 0 240px; align-self: flex-start;
    background: var(--rs-surface-1); border: 1px solid var(--rs-border); border-radius: var(--rs-radius-lg);
    margin: 0; padding: 0 0 var(--rs-space-2); overflow: hidden;
}
#changelist-filter h2 { margin: 0; padding: var(--rs-space-3) var(--rs-space-4); background: transparent; color: var(--rs-ink); font: 600 14px/20px var(--rs-font-sans); text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--rs-border); }
#changelist-filter h3, #changelist-filter details summary { margin: var(--rs-space-3) 0 4px; padding: 0 var(--rs-space-4); font: 600 11px/16px var(--rs-font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--rs-ink-muted); }
#changelist-filter ul { margin: 0; padding: 0 var(--rs-space-2); border: 0; }
#changelist-filter li { margin: 0; padding: 0; list-style: none; }
#changelist-filter li a:link, #changelist-filter li a:visited { display: block; padding: 5px 8px; border-radius: var(--rs-radius-md); color: var(--rs-ink-muted); font-size: 13px; line-height: 18px; }
#changelist-filter li a:hover { background: var(--rs-surface-2); color: var(--rs-ink); }
#changelist-filter li.selected a:link, #changelist-filter li.selected a:visited { background: var(--rs-brand-soft); color: var(--rs-brand-ink); font-weight: 600; }
#changelist-filter #changelist-filter-extra-actions, #changelist-filter-clear { padding: var(--rs-space-2) var(--rs-space-4); font-size: 12.5px; }
#changelist-filter-clear a:link, #changelist-filter-clear a:visited { color: var(--rs-brand-ink); font-weight: 600; }

/* Jerarquía de fechas */
#changelist .xfull, .xfull { width: 100%; }
#changelist nav.toplinks, .toplinks { padding: 0 0 var(--rs-space-3); background: transparent; border: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.toplinks a:link, .toplinks a:visited { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border: 1px dashed var(--rs-border-strong); border-radius: var(--rs-radius-pill); color: var(--rs-ink-muted); font-size: 12.5px; }
.toplinks .date-back a { border-style: solid; color: var(--rs-ink); }

/* Barra de acciones masivas */
#changelist .actions {
    display: flex; align-items: center; gap: var(--rs-space-2); flex-wrap: wrap;
    margin: 0; padding: 8px var(--rs-space-3);
    background: var(--rs-surface-2); border: 1px solid var(--rs-border); border-bottom: 0;
    border-radius: var(--rs-radius-lg) var(--rs-radius-lg) 0 0; color: var(--rs-ink-muted); font-size: 13px;
}
#changelist .actions.selected { background: var(--rs-brand-soft); }
#changelist .actions label { font-size: 13px; color: var(--rs-ink); }
#changelist .actions select { height: 28px; font-size: 13px; }
#changelist .actions .button { height: 28px; font-size: 12.5px; }
#changelist .actions span.all, #changelist .actions span.action-counter, #changelist .actions span.clear, #changelist .actions span.question { font-size: 12.5px; }

/* Tabla de resultados */
#changelist .results {
    background: var(--rs-surface-1); border: 1px solid var(--rs-border); border-radius: var(--rs-radius-lg);
    overflow-x: auto;
}
#changelist .actions + .results { border-top-left-radius: 0; border-top-right-radius: 0; }
#changelist table#result_list, #result_list { width: 100%; border: 0; border-collapse: collapse; font-size: 13px; }
#result_list thead th {
    height: 34px; padding: 0; vertical-align: middle;
    background: var(--rs-surface-2); color: var(--rs-ink-muted); border: 0; border-bottom: 1px solid var(--rs-border);
    font: 600 11px/16px var(--rs-font-sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
#result_list thead th a:link, #result_list thead th a:visited { color: var(--rs-ink-muted); padding: 0; }
#result_list thead th.sorted { background: var(--rs-surface-2); }
#result_list thead th.sorted .text a { padding-right: 18px; }
#result_list thead th .text > a, #result_list thead th .text > span { display: block; padding: 9px 10px; }
#result_list thead th.action-checkbox-column { padding: 0 0 0 10px; }
#result_list tbody th, #result_list tbody td {
    height: var(--rs-row-height); padding: 6px 10px; vertical-align: middle;
    border-bottom: 1px solid var(--rs-border); border-left: 0; border-top: 0;
    font-size: 13px; line-height: 18px; color: var(--rs-ink);
}
#result_list tbody th a:link, #result_list tbody th a:visited { font-weight: 600; color: var(--rs-ink); }
#result_list tbody th { white-space: nowrap; }
#result_list tbody th a:hover { color: var(--rs-brand-ink); }
#result_list tbody tr:last-child th, #result_list tbody tr:last-child td { border-bottom: 0; }
#result_list tbody tr, #result_list tbody tr:nth-child(odd), #result_list tbody tr:nth-child(even) { background: var(--rs-surface-1); }
#result_list tbody tr:hover th, #result_list tbody tr:hover td { background: var(--rs-surface-2); }
#result_list tbody tr.selected th, #result_list tbody tr.selected td { background: var(--rs-brand-soft); }
#result_list td.action-checkbox, #result_list th.action-checkbox-column { width: 32px; padding-right: 0; text-align: center; }
#result_list td.field-total, #result_list td[class*="monto"], #result_list td[class*="precio"], #result_list td[class*="total"],
#result_list td[class*="cantidad"], #result_list td[class*="saldo"], #result_list td[class*="importe"], #result_list td[class*="stock"],
#result_list td[class*="numero"], #result_list th[class*="numero"], #result_list td[class*="codigo"] {
    font-family: var(--rs-font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums;
}
p.paginator, .paginator {
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    margin: 0; padding: var(--rs-space-3) 2px 0; border: 0; background: transparent;
    font-size: 12.5px; color: var(--rs-ink-muted);
}
.paginator a:link, .paginator a:visited, .paginator .this-page {
    display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px;
    border-radius: var(--rs-radius-md); color: var(--rs-ink); font-family: var(--rs-font-mono); font-size: 12px;
}
.paginator a:hover { background: var(--rs-surface-2); }
.paginator .this-page { background: var(--rs-ink); color: var(--rs-surface-1); }
.paginator a.showall:link, .paginator a.showall:visited { font-family: var(--rs-font-sans); color: var(--rs-brand-ink); }
.paginator input[type=submit] { margin-left: auto; }

/* Tablas genéricas dentro de módulos (pantallas propias) */
.module table, table { border-color: var(--rs-border); }
.module table caption { caption-side: top; }
thead th, tfoot td { color: var(--rs-ink-muted); }

/* ------------------------------------------------- Inicio */
.rs-home { display: block; }
.rs-mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--rs-space-4); align-items: start; }
.rs-mod { background: var(--rs-surface-1); border: 1px solid var(--rs-border); border-radius: var(--rs-radius-lg); overflow: hidden; }
.rs-mod-h { display: flex; align-items: center; gap: 10px; padding: var(--rs-space-3) var(--rs-space-4); border-bottom: 1px solid var(--rs-border); }
.rs-mod-h h2, .rs-mod-h h3 { margin: 0; flex: 1; font: 600 14px/20px var(--rs-font-sans) !important; color: var(--rs-ink); text-transform: none; letter-spacing: 0; }
.rs-mod-ic { width: 28px; height: 28px; border-radius: var(--rs-radius-md); display: grid; place-items: center; background: var(--rs-brand-soft); color: var(--rs-brand-ink); }
.rs-mod.rs-dev .rs-mod-ic { background: var(--rs-surface-2); color: var(--rs-ink-muted); }
.rs-mod-list { list-style: none; margin: 0; padding: 6px 0; }
.rs-mod-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 var(--rs-space-4); list-style: none; }
.rs-mod-list li > a:first-child:link, .rs-mod-list li > a:first-child:visited, .rs-mod-list li > span { flex: 1; padding: 7px 0; font-size: 13px; color: var(--rs-ink); }
.rs-mod-list li > a:first-child:hover { color: var(--rs-brand-ink); }
a.rs-mod-add:link, a.rs-mod-add:visited { flex: none; padding: 3px 8px; border-radius: var(--rs-radius-pill); font: 600 11.5px/16px var(--rs-font-sans); color: var(--rs-brand-ink); background: transparent; }
a.rs-mod-add:hover { background: var(--rs-brand-soft); }

/* Badges reutilizables (para pantallas propias) */
.rs-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--rs-radius-pill); font: 600 12px/1 var(--rs-font-sans); white-space: nowrap; }
.rs-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rs-b-ok { background: var(--rs-success-soft); color: var(--rs-success); }
.rs-b-warn { background: var(--rs-warning-soft); color: var(--rs-warning); }
.rs-b-bad { background: var(--rs-danger-soft); color: var(--rs-danger); }
.rs-b-info { background: var(--rs-info-soft); color: var(--rs-info); }
.rs-b-neutral { background: var(--rs-surface-2); color: var(--rs-ink-muted); }
.rs-b-brand { background: var(--rs-brand-soft); color: var(--rs-brand-ink); }
.rs-num { font-family: var(--rs-font-mono); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------- Login */
html:has(body.login), body.login { background: var(--rs-sidebar); min-height: 100%; }
body.login #container { height: auto; min-height: 0; }
body.login #container {
    width: 380px; max-width: calc(100vw - 32px); margin: 10vh auto 0; padding: 0; min-width: 0;
    background: var(--rs-surface-1); border: 0; border-radius: var(--rs-radius-lg); overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
body.login #header { position: static; height: auto; padding: var(--rs-space-5) var(--rs-space-5) 0; border: 0; justify-content: flex-start; background: var(--rs-surface-1); }
body.login #branding { position: static; width: auto; height: auto; padding: 0; }
body.login #branding a.rs-brand:link, body.login #branding a.rs-brand:visited { color: var(--rs-ink); font-size: 17px; }
body.login .rs-brand-txt small { color: var(--rs-ink-muted); }
body.login #content { padding: var(--rs-space-4) var(--rs-space-5) var(--rs-space-5); }
body.login .form-row { padding: 0 0 var(--rs-space-3); border: 0; }
body.login .form-row label { display: block; padding: 0 0 6px; }
body.login .form-row input { width: 100%; height: 38px; }
body.login .submit-row { padding: var(--rs-space-2) 0 0; margin: 0; border: 0; background: transparent; position: static; box-shadow: none; }
body.login .submit-row input { width: 100%; height: 38px; background: var(--rs-brand); border-color: var(--rs-brand); color: var(--rs-on-brand); }
body.login .submit-row input:hover { background: var(--rs-brand-hover); }
body.login .password-reset-link { text-align: center; font-size: 12.5px; }

/* ------------------------------------------------- Popups y páginas sin menú */
body.popup #container { padding-left: 0; }
body.popup #content { padding: var(--rs-space-4); }

/* Footer vacío */
#footer { padding: 0; }

/* ------------------------------------------------- Pantallas chicas */
@media (max-width: 1024px) {
    body:has(#rs-side) #container { padding-left: 0; }
    #rs-side { z-index: 50; padding-top: 12px; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--rs-shadow-pop); }
    body.rs-nav-open #rs-side { transform: none; }
    #header { flex-direction: row; align-items: center; justify-content: flex-start; height: var(--rs-header-height); padding: 0 var(--rs-space-3); gap: var(--rs-space-2); }
    #branding, body:not(:has(#rs-side)) #container #branding { position: static; order: 1; width: auto; height: auto; padding: 0; margin-right: auto; }
    #branding a.rs-brand:link, #branding a.rs-brand:visited { color: var(--rs-ink); }
    .rs-brand-txt small { display: none; }
    #user-tools { display: contents; }
    #header .rs-menu-btn { display: flex; order: 0; width: 34px; justify-content: center; padding: 0; }
    .rs-notif { order: 2; }
    .rs-user { order: 3; }
    .rs-user-name, .rs-user-btn > svg { display: none; }
    body:has(#rs-side) #container > nav:has(> .breadcrumbs) { display: none; }
    ol.breadcrumbs, div.breadcrumbs { flex-wrap: wrap; white-space: normal; font-size: 12.5px; }
    #content { padding: var(--rs-space-4); }
    #changelist .changelist-form-container { flex-direction: column; }
    #changelist-filter { flex-basis: auto; width: 100%; }
}
@media (max-width: 767px) {
    #changelist #toolbar form input[type=text], #changelist #searchbar { width: 100%; }
    .aligned .form-row, .aligned .form-row > div { display: block; }
}

/* ------------------------------------------------- Impresión */
@media print {
    #rs-side, #header, #container > nav, .submit-row, .object-tools { display: none !important; }
    body:has(#rs-side) #container { padding-left: 0; }
    html, body { background: #fff; }
}

/* El inicio de Django limita el ancho (dashboard.css): usamos todo el espacio. */
body.dashboard #content, body.dashboard #content-main { width: auto; max-width: none; float: none; margin-right: 0; }

/* ------------------------------------------------- Secciones (inicio y menú lateral)
   1 Análisis = rojo marca · 2 Operación = azul · 3 Gestión = violeta · 4 Sistema = gris */
.rs-sec-analisis  { --rs-sec: var(--rs-brand-ink); --rs-sec-soft: var(--rs-brand-soft); }
.rs-sec-operacion { --rs-sec: var(--rs-info);      --rs-sec-soft: var(--rs-info-soft); }
.rs-sec-gestion   { --rs-sec: var(--rs-violet);    --rs-sec-soft: var(--rs-violet-soft); }
.rs-sec-sistema   { --rs-sec: var(--rs-ink-muted); --rs-sec-soft: var(--rs-surface-2); }
.rs-sec { margin: 0 0 var(--rs-space-6); }
.rs-sec-title {
    display: flex; align-items: center; gap: 8px; margin: 0 0 var(--rs-space-3) !important;
    font: 600 11.5px/16px var(--rs-font-sans) !important; letter-spacing: .08em; text-transform: uppercase;
    color: var(--rs-sec) !important;
}
.rs-sec-title::after { content: ""; flex: 1; height: 1px; background: var(--rs-border); margin-left: 4px; }
.rs-sec-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--rs-sec); }
.rs-sec .rs-mod-ic { background: var(--rs-sec-soft); color: var(--rs-sec); }
.rs-sec .rs-mod { border-top: 3px solid var(--rs-sec); }
.rs-sec .rs-mod.rs-dev .rs-mod-ic { background: var(--rs-sec-soft); color: var(--rs-sec); }

.rs-nav-sec {
    display: flex; align-items: center; gap: 8px;
    padding: 22px 10px 5px; font: 600 10.5px/14px var(--rs-font-sans); letter-spacing: .08em; text-transform: uppercase;
    color: var(--rs-sidebar-ink-muted);
}
.rs-nav-sec::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--rs-sec-side); }
#rs-side .rs-sec-analisis  { --rs-sec-side: #e8675c; }
#rs-side .rs-sec-operacion { --rs-sec-side: #6f9dff; }
#rs-side .rs-sec-gestion   { --rs-sec-side: #a68cf2; }
#rs-side .rs-sec-sistema   { --rs-sec-side: #8f8d88; }
#rs-side .rs-nav-group > .rs-nav-g > svg:first-child { color: var(--rs-sec-side); opacity: .85; }
#rs-side .rs-nav-group.has-active > .rs-nav-g > svg:first-child { opacity: 1; }
#rs-side.filtering .rs-nav-sec { display: none; }

/* Menú lateral: grupos de un solo ítem van como link directo */
#rs-side .rs-nav-single { margin-top: 0; }
#rs-side .rs-nav-single svg { color: var(--rs-sec-side); opacity: .85; }
#rs-side .rs-nav-single a.on svg { opacity: 1; }

/* Inicio: Operación en una sola fila (5 tarjetas) en pantallas anchas */
.rs-grid-operacion { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* Franja "Seguimiento de ventas": abarca todo el ciclo de Operación */
a.rs-flow:link, a.rs-flow:visited {
    display: grid; grid-template-columns: 1fr auto; grid-template-areas: "head cta" "steps steps";
    align-items: center; gap: var(--rs-space-3) var(--rs-space-4);
    margin: 0 0 var(--rs-space-4); padding: var(--rs-space-4) var(--rs-space-5);
    background: var(--rs-surface-1); color: var(--rs-ink);
    border: 1px solid var(--rs-border); border-top: 3px solid var(--rs-sec); border-radius: var(--rs-radius-lg);
    text-decoration: none !important;
}
a.rs-flow:hover { border-color: var(--rs-sec); }
a.rs-flow:hover .rs-flow-cta { background: var(--rs-sec-soft); }
.rs-flow-head { grid-area: head; display: flex; align-items: center; gap: 12px; min-width: 0; }
.rs-flow-head .rs-mod-ic { width: 36px; height: 36px; }
.rs-flow-txt { display: flex; flex-direction: column; }
.rs-flow-txt strong { font: 600 15px/20px var(--rs-font-sans); }
.rs-flow-txt small { font: 400 12.5px/16px var(--rs-font-sans); color: var(--rs-ink-muted); }
.rs-flow-steps { grid-area: steps; display: flex; align-items: stretch; gap: 6px; min-width: 0; }
.rs-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; padding: 6px 10px; border-radius: var(--rs-radius-md); background: var(--rs-surface-2); }
.rs-step b { font: 600 12.5px/16px var(--rs-font-sans); color: var(--rs-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-step small { font: 500 11px/14px var(--rs-font-sans); color: var(--rs-ink-muted); }
.rs-step-arrow { align-self: center; color: var(--rs-ink-muted); font-size: 16px; }
.rs-flow-cta { grid-area: cta; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border-radius: var(--rs-radius-md); border: 1px solid var(--rs-border-strong); font: 600 13px/1 var(--rs-font-sans); color: var(--rs-ink); }
@media (max-width: 767px) { .rs-flow-steps { flex-wrap: wrap; } .rs-step { flex: 1 1 40%; } .rs-step-arrow { display: none; } }