/* Estilo general para los paneles */
.inline-label {
    display: inline; /* Para que se comporte como texto en línea */
    font-size: inherit; /* Para mantener el tamaño de fuente de h3 */
    margin-left: 10px; /* Espaciado entre el título y el label */
}

.panel-customPan {
    border: 1px solid #ccc;
    padding: 15px;
    border-radius: 8px;
    background-color: #f9f9f9;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

/* Cabecera de los paneles */
.panel-headerPan {
    background-color: #007bff;
    color: white;
    padding: 10px;
    border-radius: 8px 8px 0 0;
    margin: -15px -15px 10px;
}

/* Botón personalizado */
.btn-customPan {
    background-color: #28a745;
    color: white;
    border-radius: 5px;
    padding: 10px;
    border: none;
}

/* Añadir un pequeño margen entre los formularios */
.form-groupPan {
    margin-bottom: 15px;
}

/* Estilo para los campos de texto */
.form-controlPan {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

/* Espacio entre los cuadros principales */
.containerPan {
    margin-top: 20px;
}

    .panel-headerPan p {
        font-size: 0.9rem;
        color: #6c757d;
    }

    .email-panel {
        background-color: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 15px;
    }

    .form-select, .form-control {
        width: 100%;
        padding: 8px;
        border-radius: 4px;
        border: 1px solid #ced4da;
    }

.email-panel {
    width: 100%; /* Ocupa el 100% del ancho del contenedor padre */
    max-width: 800px; /* Ajusta este valor al ancho deseado máximo */
    margin: auto;
}

.email-content-box {
    width: 100% !important;
    box-sizing: border-box; /* Asegura que el padding no agregue ancho extra */
}

/* ===============================
   PANEL CUSTOM PAN – MODO COMPACTO
   =============================== */

/* Panel principal (controla tamaño general de letra) */
.panel-customPan {
    border: 1px solid #ccc;
    padding: 15px;
    border-radius: 8px;
    background-color: #f9f9f9;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    font-size: 12px; /* PRIORIDAD GENERAL */
}

    /* Cabecera del panel */
    .panel-customPan .panel-headerPan {
        background-color: #007bff;
        color: white;
        padding: 10px;
        border-radius: 8px 8px 0 0;
        margin: -15px -15px 10px;
        font-size: 13px; /* Ligeramente mayor */
    }

        /* Texto dentro de la cabecera */
        .panel-customPan .panel-headerPan p {
            font-size: 12px;
            color: #e9ecef;
            margin: 0;
        }

    /* Label inline junto a títulos */
    .panel-customPan .inline-label {
        display: inline;
        font-size: 11px;
        margin-left: 10px;
    }

    /* Botón personalizado */
    .panel-customPan .btn-customPan {
        background-color: #28a745;
        color: white;
        border-radius: 5px;
        padding: 8px 12px;
        border: none;
        font-size: 12px;
    }

    /* Grupos de formulario */
    .panel-customPan .form-groupPan {
        margin-bottom: 12px;
    }

    /* Inputs, selects y controles (PRIORIDAD ALTA) */
    .panel-customPan .form-controlPan,
    .panel-customPan .form-control,
    .panel-customPan .form-select {
        width: 100%;
        font-size: 12px;
        padding: 6px;
        border-radius: 4px;
        border: 1px solid #ced4da;
    }

    /* Panel de correo */
    .panel-customPan .email-panel {
        background-color: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 15px;
        width: 100%;
        max-width: 800px;
        margin: auto;
        font-size: 12px;
    }

    /* Contenido del correo */
    .panel-customPan .email-content-box {
        width: 100% !important;
        box-sizing: border-box;
    }

/* Contenedor general */
.containerPan {
    margin-top: 20px;
}