/* La familia Roboto viaja con el componente: así la marca se ve igual
   en cualquier pantalla, sin depender de la fuente del body que la
   hospede. Es la misma que ya carga el shell del CRM, así que en la
   práctica llega de la caché. Debe ir antes que cualquier otra regla. */
@import url('google-roboto-300-700.css');

/* ============================================================
   CRM Terrenos — Sistema de marca
   ------------------------------------------------------------
   Piezas: isotipo (cuadro + círculo), nombre y slogan.
   Se combinan desde el partial:
       application/views/template/brand/brand.php

   Uso mínimo en una vista:
       <link href="<?= base_url() ?>dist/css/brand.css" rel="stylesheet" />
       <?php $this->load->view('template/brand/brand', [
           'variante' => 'completo',   // completo | marca | nombre | slogan | nombre-slogan
           'color'    => 'blanco',     // blanco | azul | dorado
       ]); ?>

   Todo el color pasa por custom properties, así que una instancia se
   recolorea sin tocar el markup ni duplicar SVGs.
   ============================================================ */

:root {
    /* Colores de marca del sistema */
    --brand-white:     #ffffff;
    --brand-navy:      #143860;
    --brand-navy-soft: #5a7391;
    --brand-gold:      #96843D;
    --brand-gold-soft: #aea16e;

    /* Tipografía de la marca: la misma Roboto del resto del CRM.
       Ojo: Roboto solo trae 300/400/500/700. Pedir 600 u 800 haría que
       el navegador cayera al corte de arriba (700), no al que esperas. */
    --brand-font: 'Roboto', 'Segoe UI', system-ui, sans-serif;

    /* Medidas por defecto (sobrescribibles por instancia) */
    --brand-mark-size:   46px;  /* ancho del isotipo */
    --brand-gap:         16px;  /* separación isotipo <-> texto */
    --brand-name-size:   22px;
    --brand-slogan-size: 10px;
}

/* ---------- Contenedor ---------- */
.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--brand-gap);
    color: var(--brand-fg, var(--brand-white));
    font-family: var(--brand-font);  /* no hereda: la marca lleva su tipografía */
}

/* Sin isotipo no hace falta el hueco del gap */
.brand--sin-marca { gap: 0; }

/* ---------- Temas de color (monocromático) ----------
   --brand-fg      -> isotipo + nombre
   --brand-fg-soft -> slogan
   --brand-accent  -> solo el círculo; si no se define, hereda --brand-fg */
.brand--blanco { --brand-fg: var(--brand-white); --brand-fg-soft: #d7dee6; }
.brand--azul   { --brand-fg: var(--brand-navy);  --brand-fg-soft: var(--brand-navy-soft); }
.brand--dorado { --brand-fg: var(--brand-gold);  --brand-fg-soft: var(--brand-gold-soft); }

/* ---------- Modificadores bicolor (opcionales) ----------
   Ej. mockup original: class="brand brand--azul brand--acento-dorado brand--slogan-dorado" */
.brand--acento-blanco { --brand-accent: var(--brand-white); }
.brand--acento-azul   { --brand-accent: var(--brand-navy); }
.brand--acento-dorado { --brand-accent: var(--brand-gold); }

.brand--slogan-blanco { --brand-fg-soft: var(--brand-white); }
.brand--slogan-azul   { --brand-fg-soft: var(--brand-navy); }
.brand--slogan-dorado { --brand-fg-soft: var(--brand-gold); }

/* ---------- Isotipo ----------
   El color se aplica por CSS (no por atributos) para que var() funcione
   de forma fiable en todos los navegadores. */
.brand-mark {
    display: block;
    flex: 0 0 auto;
    width: var(--brand-mark-size);
    height: auto;
}

.brand-mark__frame { fill: none; stroke: currentColor; }
.brand-mark__dot   { fill: var(--brand-accent, currentColor); }

/* ---------- Texto ---------- */
.brand-text { line-height: 1.05; }

.brand-name {
    margin: 0;
    font-size: var(--brand-name-size);
    font-weight: 700;  /* el corte más pesado que tiene Roboto */
    letter-spacing: 0.06em;
    text-transform: uppercase;  /* quitar esta línea para el "CRM Terrenos" mixto del mockup */
    color: var(--brand-fg);
}

.brand-slogan {
    margin: 2px 0 0;
    font-size: var(--brand-slogan-size);
    font-weight: 500;  /* 600 no existe en Roboto: caería en 700 y saldría en negrita */
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brand-fg-soft, var(--brand-fg));
}

/* Slogan suelto: sin nombre arriba, no necesita separación */
.brand--solo-slogan .brand-slogan { margin-top: 0; }

/* ============================================================
   Presets de contexto — tamaños listos por ubicación.
   Se pasan por el parámetro 'clase' del partial.
   ============================================================ */

/* Sidebar Material Dashboard (260px de ancho, fondo blanco) */
.brand--sidebar {
    --brand-mark-size:   34px;
    --brand-name-size:   16px;
    --brand-slogan-size: 8px;
    --brand-gap:         10px;
    /* margen lateral: la marca no abarca todo el ancho de la sidebar */
    padding: 14px 18px 10px;
}

/* Blindaje contra material-dashboard.css: su regla `.sidebar .logo p`
   (float:left, font-size:20px, margin:10px, color:#fff) pisa al
   componente porque .brand-name/.brand-slogan son <p> y pierden por
   especificidad. Estas reglas la superan y devuelven el control a las
   variables del componente (nombre azul, slogan dorado, tamaños). */
.sidebar .logo .brand p,
.off-canvas-sidebar .logo .brand p {
    float: none;
    margin: 0;
    line-height: 1.05;
}

.sidebar .logo .brand .brand-name,
.off-canvas-sidebar .logo .brand .brand-name {
    font-size: var(--brand-name-size);
    color: var(--brand-fg);
}

.sidebar .logo .brand .brand-slogan,
.off-canvas-sidebar .logo .brand .brand-slogan {
    margin-top: 2px;
    font-size: var(--brand-slogan-size);
    color: var(--brand-fg-soft, var(--brand-fg));
}

/* Sidebar colapsada (~80px): solo isotipo */
.brand--sidebar-mini {
    --brand-mark-size: 34px;
    padding: 8px 0;
}

/* Icono en cajas de 38×38 (App Launcher / navbar móvil salesforce) */
.brand--icon { --brand-mark-size: 30px; }

/* Icono pequeño en submenús / card headers (contextos de 15–20px) */
.brand--icon-sm { --brand-mark-size: 18px; }

/* Páginas standalone oscuras (404 / unauthorized / maintenance) */
.brand--hero {
    --brand-mark-size:   84px;
    --brand-name-size:   40px;
    --brand-slogan-size: 16px;
    --brand-gap:         24px;
}

@media (max-width: 576px) {
    .brand--hero {
        --brand-mark-size:   56px;
        --brand-name-size:   26px;
        --brand-slogan-size: 11px;
        --brand-gap:         16px;
    }
}