/*
 * Tema visual del admin de Django, basado en la paleta de
 * referencia (colores/tipografía) tomada de clanpyme.com.mx: acento verde
 * azulado (teal), fondos casi negros para cabecera/branding, tipografía
 * Open Sans. Sobrescribe las variables CSS que usa admin/css/base.css
 * (Django 4+), tanto para el tema claro por defecto como para la variante
 * oscura, así el panel se ve consistente sin importar el modo del sistema
 * o el selector de tema del propio admin.
 */

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");

html[data-theme="light"],
html[data-theme="dark"],
:root {
    --primary: #139490;
    --secondary: #111111;
    --accent: #17c9c6;
    --primary-fg: #fff;

    --body-fg: #262626;
    --body-bg: #fff;
    --body-quiet-color: #666;
    --body-medium-color: #444;
    --body-loud-color: #000;

    --header-color: #fff;
    --header-branding-color: #4dd0ce;
    --header-bg: #111111;
    --header-link-color: #fff;

    --breadcrumbs-fg: #bdeceb;
    --breadcrumbs-link-fg: #fff;
    --breadcrumbs-bg: #139490;

    --link-fg: #0f8f8c;
    --link-hover-color: #0b6f6d;
    --link-selected-fg: #139490;

    --hairline-color: #e8e8e8;
    --border-color: #d8d8d8;

    --error-fg: #ba2121;

    --message-success-bg: #dff5f0;
    --message-warning-bg: #fff8db;
    --message-error-bg: #ffefef;

    --darkened-bg: #f4f4f4;
    --selected-bg: #e6f7f6;
    --selected-row: #fff6d5;

    --button-fg: #fff;
    --button-bg: #139490;
    --button-hover-bg: #0f7d7a;
    --default-button-bg: #0d6a68;
    --default-button-hover-bg: #139490;
    --close-button-bg: #747474;
    --close-button-hover-bg: #333;
    --delete-button-bg: #ba2121;
    --delete-button-hover-bg: #a41515;

    --object-tools-fg: #fff;
    --object-tools-bg: #139490;
    --object-tools-hover-bg: #0f7d7a;

    --font-family-primary:
        "Open Sans",
        "Segoe UI",
        system-ui,
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif;

    color-scheme: light;
}

#branding a:link, #branding a:visited {
    font-weight: 700;
    letter-spacing: -0.01em;
}

.ch-header-logo-bg {
    display: inline-flex;
    align-items: center;
    background: #fff;
    padding: 4px 12px;
    border-radius: 6px;
    line-height: 0;
}

div.breadcrumbs {
    font-weight: 500;
}

.module h2, .module caption, .inline-group h2 {
    background: var(--secondary);
}

.button, input[type="submit"], input[type="button"], .submit-row input, a.button {
    border-radius: 6px;
}

.selector-chosen h2 {
    background: var(--primary) !important;
}