/* Estos estilos son para las paginas publicas: home, signup,  olvide la clave, etc */

    /* --- Encabezado (top) de company --- */
    .custom-company-header {
        height: 78px;
        margin-bottom: 20px;
        padding: 0 1.5rem; /* Padding interno para que el texto no toque los bordes */
        border-radius: 0.375rem; /* Bordes redondeados para que coincida con los formularios */

        /* Los estilos de color y sombra se mantienen */
        background-color: var(--brand-header-bg);
        color: var(--brand-header-text);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Sombra ligeramente más suave */
    }

    /* Estilo específico para el nombre de la marca en el encabezado (Letra más grande) */
    .custom-company-header .brand-name {
        font-size: 1.8rem; /* Tamaño de fuente aumentado */
        font-weight: 600;
        color: inherit;
        text-decoration: none;
        transition: opacity 0.2s ease-in-out;
    }

    /* Efecto hover para el enlace del nombre de la marca */
    .custom-company-header .brand-name:hover {
        opacity: 0.85;
    }

    /* Estilo para el texto "Powered by" --- */
    .custom-company-header .powered-by {
        font-size: 0.9rem;
        font-weight: 400;
        opacity: 0.75; /* Menos prominente que el nombre de la marca */
        color: inherit;
    }

    /* --- Estilo para el enlace de IAToolkit --- */
    .custom-company-header .iatoolkit-link {
        color: inherit; /* Hereda el color del texto padre */
        text-decoration: none; /* ¡Elimina el subrayado! */
        font-weight: 600; /* Un poco más de peso para diferenciarlo */
        transition: opacity 0.2s ease-in-out;
    }

    .custom-company-header .form-container {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    /* titulo en home */
    .home-title {
        font-size: 3.2rem;
        font-weight: 800;
        line-height: 1.2;
        color: var(--brand-primary-color);
    }
    .list-example {
            display: block;              /* Coloca el ejemplo en su propia línea */
            font-size: 0.9rem;          /* Lo hace ligeramente más pequeño */
            color: #6c757d;             /* Color gris (muted) para texto secundario */
            font-style: italic;         /* Cursiva para diferenciarlo */
            padding-left: 1.75rem;      /* Lo indenta para alinearlo con el texto del tema */
            margin-top: 0.25rem;        /* Pequeño espacio superior */
        }

    .text-brand-primary {
        font-weight: 800;
        color: var(--brand-primary-color);
        }

/* contenedor de formularios: login, signup, forgot password, etc. */
    .branded-form-container {
        background-color: #ffffff;
        border: 1px solid #dee2e6;
        border-top: 4px solid #adb5bd;
        border-radius: 0.375rem;
        padding: 2rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    .branded-form-label {
        font-size: 0.85rem;
        font-weight: 600;
        color: #495057; /* Un gris oscuro profesional */
        text-transform: uppercase;
        letter-spacing: 0.05em; /* Un poco de espacio extra entre letras */
        margin-bottom: 0.3rem;
        display: block;
    }

    /* Efecto de foco brandeado para todos los form-control */
    .form-control:focus {
        border-color: var(--brand-primary-color);
        box-shadow: 0 0 0 0.25rem rgba(var(--brand-primary-color-rgb), 0.25); /* Usa la variable RGB para el shadow */
    }

    .branded-form-title {
        color: var(--brand-primary-color);
        font-size: 1.75rem; /* Un tamaño más prominente */
        font-weight: 700;   /* Equivalente a fw-bold de Bootstrap */
        text-align: center;
        margin-bottom: 1.5rem; /* Espacio consistente debajo del título */
    }