/* =========================================================
   site.css – Trazia
   Índice:
   01) Tokens/Variables
   02) Reset/Base tipográfica
   03) Layout global (navbar, footer, contenedores)
   04) Utilidades (helpers)
   05) Componentes globales pequeños
   ========================================================= */

/* 01) Tokens / Variables -------------------------------- */
:root{
    --brand-bg: #eff2f6;
    --brand-fg: #66b2f0;
    --radius: 12px;
    --space-1: .25rem;
    --space-2: .5rem;
    --app-body-bg: #eff2f6;   /* gris claro */
    --app-body-fg: #1f2937;   /* texto gris muy oscuro */
}

/* 02) Base ---------------------------------------------- */
html { scroll-behavior: smooth; }
body {
    text-rendering: optimizeLegibility;
    color: var(--app-body-fg);
}

/* Fondo tipo Trazia (degradado violeta-azul) */
.trazia-gradient-bg {
    background: radial-gradient(
        circle at center,
        #8586ec 0%,
        #585be3 40%,
        #2b31c8 75%,
        #171a7b 100%
    );
}


/* Si quieres que tome toda la pantalla */
.trazia-gradient-full {
    min-height: 100vh;
}

/* 03) Layout global ------------------------------------- */
/* Aseguramos que el contenedor header no tenga fondo */
header {
    background: transparent !important;
}

.navbar-custom{
    /* Hacemos el fondo transparente */
    background: transparent !important;
    /* Quitamos cualquier color de fondo heredado de Bootstrap (bg-light, bg-white, etc) */
    background-color: transparent !important;

    /* Ajustamos los colores del texto a blanco (o casi blanco) */
    --bs-navbar-color: rgba(255, 255, 255, 0.9);
    --bs-navbar-hover-color: #fff;

    /* Eliminamos cualquier borde o sombra si existiera */
    box-shadow: none;
    border: none;
}


/* Hacer que el dropdown del usuario sea overlay y no empuje el layout */
.navbar .dropdown-menu.usermenu{
    position: absolute;     /* anula la regla de Bootstrap en navbars */
    right: 0;
    left: auto;
    top: 100%;              /* justo bajo el toggle */
    margin-top: .4rem;
    z-index: 1055;          /* sobre la navbar */
}

/* 04) Utilidades ---------------------------------------- */
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-muted    { opacity: .8; }

.label-required::after {
    content: " *";
    color: var(--bs-danger);
}

/* 05) Componentes globales pequeños --------------------- */



/* ==== Feature Cards =================================================== */
.c-feature {
    border-radius: .8rem;
    border: 1px solid #e5e7eb;
    background: #fff;
    box-shadow: 0 6px 18px rgba(16,24,40,.06);
    padding: 1rem 1rem 1.25rem;
}

.c-feature--accent {
    border-color: #86efac;              /* borde verde claro */
    box-shadow: 0 8px 24px rgba(16,185,129,.15);
}

.c-feature__icon {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: .6rem; background: #ecfdf5; color: #10b981;
    margin-right: .5rem;
}

.c-feature__title {
    font-size: 1.125rem; font-weight: 700; margin: .25rem 0 .125rem;
}

.c-feature__subtitle {
    color: #6b7280; font-size: .9rem; margin: 0;
}

.c-feature__btn {
    display: inline-flex; align-items: center; justify-content: space-between;
    width: 220px; gap: .5rem;
    background: #d1fae5; color: #065f46;
    border: 0; border-radius: .6rem; padding: .6rem .9rem; font-weight: 600;
}
.c-feature__btn:hover { background: #a7f3d0; color:#065f46; }

/* Variante gris para el segundo card */
.c-feature--muted .c-feature__btn {
    background: #e5e7eb; color: #111827;
}
.c-feature--muted .c-feature__btn:hover {
    background: #d1d5db;
}

/* ==== Panel con formulario =========================================== */
.c-panel {
    border-radius: .8rem; background:#fff; border:1px solid #dbe0e6;
    box-shadow: 0 6px 18px rgba(16,24,40,.06);
}
.c-panel--outline { border-color:#60a5fa; box-shadow: 0 8px 24px rgba(37,99,235,.12); }
.c-panel__body { padding: 1.25rem 1.25rem; }
.c-panel__title { font-size: 1.1rem; font-weight: 700; margin: 0 0 .25rem; }
.c-panel__subtitle { color:#6b7280; margin:0 0 1rem; font-size:.95rem; }