:root {
    --primary-color: #2ecc71; /* Color verde para palmeras / éxito */
    --primary-hover: #27ae60;
    --border-color: #cccccc;
    --bg-light: #f9f9f9;
    --text-muted: #777777;
    --danger-color: #e74c3c;
}
/* CSS Document */
*{box-sizing:border-box !important;}
html{margin:0; padding:0; height:100%}
body{margin:0; height:100dvh; display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch;}

header{padding:10px; display:flex; flex-direction:row; justify-content:space-between; align-items:stretch;}
header #avatar{height:40px; width:40px;border-radius:100%; box-shadow:3px 3px 5px #3c3c3c99, -3px -3px 5px #dedede80; }
header #logo{height:40px; filter: drop-shadow(3px 3px 5px #3c3c3c99) drop-shadow(-3px -3px 5px #dedede80)}

main{display:flex; flex-direction:column; justify-content: flex-start; align-items:stretch; gap:10px;}
.main-frame{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:stretch;
    gap:10px;
    width:100%; 
    min-height:calc(100dvh - 126px);
    height:100%;
    overflow-y:auto;
}

.section-contenido{
    flex:1;
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
    align-items:stretch;
    flex-wrap: nowrap;
    gap:10px;
}
.section-contenido .panel-formulario{
    max-width:400px;
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:stretch;
    gap:10px;
    flex-shrink:0;
}
.section-contenido .panel-grid{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:10px;
    flex-shrink:1;
}
.grid-container{
    display:flex; flex-direction:row; justify-content:flex-start; gap:10px; align-items:center; min-height:500px; height:100%;
}
.toolbar-grid{
    display:flex; flex-direction:row; justify-content:flex-start; gap:10px; align-items:center;
}
.toolbar-grid input{
    width:500px;
    max-width:100%;
}

.bloque-titulo{
    border-radius:5px; padding:5px; font-size:1.2em; font-weight:bold; flex-shrink:0;
}
.avatar-usuario{width:40px; height:40px; border-radius:100%; box-shadow: 5px 5px 5px -5px;}
/*Formularios*/
.formulario_styled{display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch; gap:10px;flex-grow:1;overflow-y:auto;}
.form-group{display:flex; flex-direction:row; justify-content:flex-start; align-items:center; gap:10px; flex-wrap: nowrap;}
.form-group input{width:100%;}
.form-group .input-label{width:150px; color:#666666FF; white-space: nowrap;}
.form-grouping-label {display: flex; align-items: center; width: 100%; white-space: nowrap; gap: 10px; font-size:1.1em;}
.form-grouping-label::after {content: ""; flex-grow: 1; height: 2px;}
.panel-botones{flex-shrink:0; width:100%; display:flex; flex-direction:row; justify-content:flex-end; gap:10px;padding:10px; border-radius:5px;}
.form-button{flex:1;min-width:0;}
.form-selector-secciones{width:100%; height:250px;}
.fullscale-grid{width:100%; height:100%; border-collapse:separate;border-spacing:0;}
.thsvg{margin-top:3px;}
.fullscale-grid thead tr th:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px; /* Opcional: si quieres que toda la barra sea una píldora flotante */
}
.fullscale-grid tbody td:nth-child(1), .fullscale-grid tbody td:nth-child(3),.fullscale-grid tbody td:nth-child(4){
    text-align:center;
}

/* Celda superior derecha (Último TH de la fila) */
.fullscale-grid thead tr th:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px; /* Opcional: si quieres que toda la barra sea una píldora flotante */
}

@media (max-width: 1000px){
    .section-contenido{
        flex-direction:column;
        justify-content:flex-start;
        align-items: stretch;
    }
    .section-contenido .panel-formulario{
        max-width:100%;
        width:100%;
    }
    .section-contenido .panel-grid{
        min-height:500px;
        height:100%;
    }
}
.panel-bienvenida{text-align: left; padding:10px;}
.panel-dashboard{display:flex; flex-direction:row; justify-content:space-evenly;justify-content:flex-start; gap:10px;}
.dashboard-columna{display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch;width:100%; gap:10px;}
.dashboard-columna-izquierda,.dashboard-columna-derecha{width:25%;}
.dashboard-columna-central{width:50%;}


main{display:flex; flex-direction:column; justify-content: flex-start; align-items:center; padding:10px;}
main .panel-main{max-width:1000px; width:100%; margin:10px; padding:10px; border-radius:8px;border: 1px solid #CCCCCCFF;background:#FFFFFFFF; box-shadow: 0 0 10px -5px;}
.encabezado-landing{font-size:2em; font-weight:bold; max-width:1000px; color:#777777FF; margin:15px; text-shadow:0 0 5px #CCCCCCFF;}

/*Sombra de paneles para hacerlo material*/

.panel{box-shadow: 0 0 5px 0px #CCCCCCFF;}

.campo{display:flex; flex-direction:column; flex-wrap:nowrap; justify-content:flex-start; align-items:stretch;margin:5px;}
.campo-reminder{font-size:9px; color:#CCCCCCFF;}
input,textarea{font-family:'Play',sans-serif;}
.menu-bar{margin:0px; display:flex; justify-content:space-between; padding:5px !important; }
.bloque-menu{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding:10px;}
.menu-button{background:#EFEFEFFF;background-size:90px 90px; margin-top: 5px; margin-bottom:5px; padding: 10px; text-decoration: none;  border-radius: 5px; width: 100%; height: 120px; border: 1px solid #CCCCCCFF; overflow:hidden; position:relative;transition: all 0.3s ease;}
.menu-button:hover{Transform:scale(1.02);box-shadow: 0 0 10px -5px;}

.menu-button .menu-button-icon{opacity: 0.3;position: absolute;right: 5px;bottom: 5px;width: 45px;height: auto; transition: all 0.3s ease;}
.menu-button:hover .menu-button-icon{right: -10px;bottom: -10px;width: 100px;}
.menu-button .menu-button-content{position: relative;display: flex;justify-content: space-around; flex-direction: column; align-items: stretch;background:transparent;}

.contenido-dash-grid-full{display:flex; flex-wrap:wrap; flex-direction:row; justify-content:center; align-items:stretch; width:100%;}
.dashboard-card{width:200px; height:75px; margin:10px; padding:10px; display:flex; flex-direction:column; flex-wrap: column; justify-content: flex-start;align-items: stretch; box-shadow:0 0 5px #66666680}
.dashboard-card .titulo{font-size:1.5em; font-weight:bold;color:#f2f2f2d3; text-shadow:3px 3px 5px #3c3c3c99,-3px -3px 5px #dedede80;}
.dashboard-card .contador{font-size:2em; font-weight:bold; text-shadow:3px 3px 5px #3c3c3c99,-3px -3px 5px #dedede80;}

.loading-panel{display:flex; flex-direction:column; align-items:center; justify-content:center;}



/*ToolBloques*/
.ribbon-alerta{
    display:flex; flex-direction:row; justify-content:flex-start; align-items:center; padding:5px; padding-left:25px; border-radius:5px; box-shadow:0 0 10px -5px;}
.ribbon-alerta.warning{
    background:rgb(255, 221, 0);
    color:#764702;
    font-size:10px;
    background-image: url('../assets/img/Iconos/warning.svg');
    background-repeat: no-repeat;
    background-position: 5px center;
    background-size: 14px 14px;
    font-weight:bold;
}
.ribbon-alerta.error{
    background:rgb(255, 80, 80);
    color:#4a0101;
    font-size:10px;
    background-image: url('../assets/img/Iconos/error.svg');
    background-repeat: no-repeat;
    background-position: 5px center;
    background-size: 14px 14px;
    font-weight:bold;
}
.ribbon-alerta.info{
    background:rgb(63, 154, 250);
    color:#002a8c;
    font-size:10px;
    background-image: url('../assets/img/Iconos/info.svg');
    background-repeat: no-repeat;
    background-position: 5px center;
    background-size: 14px 14px;
    font-weight:bold;
}

/* Contenedor general de la sección multimedia */
.contenedor-multimedia {
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* Zona interactiva de Arrastrar y Soltar (Drop Zone) */
.zona-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    border: 2px dashed var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-light);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    padding: 20px;
    text-align: center;
}

/* Efecto cuando el usuario pasa el mouse encima o arrastra un archivo real sobre la zona */
.zona-drop:hover, .zona-drop.dragover {
    border-color: var(--primary-color);
    background-color: rgba(46, 204, 113, 0.05);
    color: var(--primary-hover);
}

.zona-drop p {
    margin: 10px 0 0 0;
    font-size: 15px;
    color: #555555;
    font-weight: 500;
}

.zona-drop::before {
    content: "📁"; /* Puedes cambiarlo por un icono de FontAwesome si usas alguno, ej: class o unicode */
    font-size: 36px;
    opacity: 0.7;
}

/* Grid donde se renderizan los previews de las fotos */
.grid-previews {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

/* Tarjeta individual de cada foto */
.tarjeta-foto {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: transform 0.2s;
}

.tarjeta-foto:hover {
    transform: translateY(-2px);
}

/* Ajuste de la imagen preview */
.tarjeta-foto img {
    width: 100%;
    height: 110px;
    object-fit: cover; /* Hace que la imagen llene el recuadro de forma proporcional sin deformarse */
    border-radius: 4px;
    background-color: #f0f0f0;
}

/* Etiqueta que diferencia la Portada de la Galería */
.etiqueta-rol {
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 8px;
    padding: 3px 8px;
    border-radius: 12px;
    background-color: #e0e0e0;
    color: #666666;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

/* Estilo destacado exclusivo para la foto principal */
.etiqueta-rol.principal {
    background-color: var(--primary-color);
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(46, 204, 113, 0.2);
}

/* Botón para remover fotos antes de subir */
.btn-eliminar-foto {
    margin-top: 8px;
    background: none;
    border: none;
    color: var(--danger-color);
    font-size: 12px;
    cursor: pointer;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s;
    width: 100%;
    text-align: center;
}

.btn-eliminar-foto:hover {
    background-color: rgba(231, 76, 60, 0.08);
}
.etiqueta-rol.btn-cambiar-rol {
    border: none;
    outline: none;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

/* Efecto hover cuando es una foto de galería normal */
.etiqueta-rol.btn-cambiar-rol:not(.principal):hover {
    background-color: #d0d0d0;
    color: #333333;
}

/* Pequeño feedback táctil al hacer click */
.etiqueta-rol.btn-cambiar-rol:active {
    transform: scale(0.96);
}

/*Vamos a generar los estilos para el badge que se coloca en los datagrids badge badge-info y generamos otros colores para otros estados posibles*/
.badge {
    display: inline-block;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 12px;
    color: #ffffff;
    background-color: #777777;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: background-color 0.2s;
}
.badge-info {
    background-color: #2e6bcc;
}
.badge-warning {
    background-color: rgb(255, 221, 0);
    color: #764702;
}
.badge-error {
    background-color: rgb(255, 80, 80);
    color: #4a0101;
}