/* ======================================================
   PROYECTO EDUCA - HOJA DE ESTILOS RESPONSIVE
   Compatibilidad: Bootstrap 5 / ASP.NET WebForms
   Última actualización: 2025-10
   ====================================================== */

/* ======== ESTRUCTURA GENERAL ======== */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.95em;
    background-color: #C0C0C0;
    /*background-image: url(images/background_main.jpg);*/
    background-repeat: repeat-x;
    background-position: left top;
    color: #000;
}

/* ======== LINKS ======== */
a {
    color: #003399;
    text-decoration: none;
}

    a:hover, a:focus {
        color: #0056b3;
        text-decoration: underline;
    }

/* ======== CABECERA ======== */
header {
    background-color: #3366CC;
    color: white;
    padding: 10px 20px;
}

    header h1 {
        font-size: 1.4em;
        font-weight: bold;
        margin: 0;
    }

/* ======== LOGIN ======== */
#login {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 0.9em;
    text-align: right;
}

    #login a {
        color: #fff;
        text-decoration: underline;
    }

        #login a:hover {
            text-decoration: none;
        }

/* ======== BREADCRUMB ======== */
#breadcrumb {
    color: #FFFFFF;
    background: #919191;
    font-weight: bold;
    font-size: 0.8rem;
    padding: 5px 10px;
    border-bottom: 1px solid #666;
}

/* ======== CUERPO PRINCIPAL ======== */
#body {
    padding: 1rem;
    background-color: #E6EBEF;
    min-height: 70vh;
}

/* ======== FIELDSETS Y FORMULARIOS ======== */
fieldset {
    border: 1px solid #A8A8A8;
    padding: 15px;
    border-radius: 6px;
    background-color: #F9FAFB;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

legend {
    color: #000000;
    font-weight: bold;
    font-size: 1.1rem;
    text-transform: uppercase;
}

/* ======== LABELS Y ENTRADAS ======== */
label, .form-label {
    font-weight: bold;
    color: #333;
}

input, select, textarea {
    width: 100%;
    max-width: 100%;
    padding: 6px 8px;
    margin-bottom: 8px;
    font-size: 0.95em;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

    input:focus, select:focus, textarea:focus {
        border-color: #3366CC;
        outline: none;
        box-shadow: 0 0 4px rgba(51,102,204,0.4);
    }

    /* ======== BOTONES ======== */
    .submit, .btn-primary, input[type="submit"], input[type="button"], button {
        background-color: #3366CC;
        color: white;
        border: none;
        border-radius: 4px;
        padding: 8px 14px;
        cursor: pointer;
        font-weight: bold;
        transition: background-color 0.2s ease-in-out;
    }

        .submit:hover, .btn-primary:hover, button:hover {
            background-color: #204d99;
        }

/* ======== IMPORTANTE / ALERTAS ======== */
.Importante {
    color: red;
    font-weight: bold;
    font-size: 1rem;
}

.text-muted {
    color: #666 !important;
}

/* ======== TABLAS ======== */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

th, td {
    padding: 8px 10px;
    text-align: left;
    border: 1px solid #ddd;
}

 /*PINTA LOS ENCABEZADOS DEL GRIDVIEW DE AZUL*/
th {
    background-color: #00509d; /*#3366CC*/
    color: white;
    font-weight: bold;
}

tr:nth-child(even) {
    background-color: #eaeaea; /*Pinta de Cebra el Gridview*/
}

tr:hover {
    background-color: #caf0f8; /* #e8f0ff */
    /*background-color: greenyellow;*/
}



th a {
    color: white; /* Asegura que los enlaces en los encabezados no tengan color azul */
    /*text-decoration: none;*/ /* Evita el subrayado */
    text-decoration: underline; /* Activa el subrayado */
}

th a:hover {
    color: greenyellow; /* Cambia el color a verde lechuga al hacer hover */
    text-decoration: underline; /* Mantiene el subrayado */
}


/* ======== GRIDVIEW (ASP.NET) ======== */
.grid-container {
    overflow-x: auto;
}

.table {
    margin-bottom: 1rem;
}

.table-hover tbody tr:hover {
    background-color: #dce6f7;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f9fbff;
}

/* ======== LAYOUT DE BLOQUES ======== */
#addhours, #addhours2, #timesheet, #projectadministration, #adminedit {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    background-color: #FFF;
    border-radius: 6px;
    margin-bottom: 15px;
}

/* ======== TARJETAS (Bootstrap) ======== */
.card {
    border-radius: 8px;
    border: 1px solid #ddd;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

    .card legend {
        font-size: 1.1rem;
    }

/* ======== FOOTER ======== */
footer {
    background-color: #666;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    font-size: 0.9em;
}

/* ======== RESPONSIVE ======== */
@media (max-width: 992px) {
    header h1 {
        font-size: 1.1em;
    }

    #login {
        text-align: left;
        margin-top: 10px;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 0.85em;
    }

    header {
        text-align: center;
    }

    fieldset {
        padding: 10px;
    }

    legend {
        font-size: 1em;
    }

    input, select, textarea {
        font-size: 0.9em;
    }

    .submit, button {
        width: 100%;
        font-size: 0.95em;
    }

    .table-responsive {
        overflow-x: auto;
    }

    .card {
        margin: 0;
    }
}

@media (max-width: 480px) {
    header h1 {
        font-size: 0.95em;
    }

    footer {
        font-size: 0.8em;
        padding: 8px;
    }
}


/* ==== ESTILOS EXTRA PARA TABLAS MODERNAS ==== */

/* Botones dentro de tablas */
.table .btn {
    border-radius: 20px;
    font-size: 0.85em;
    padding: 4px 10px;
    transition: all 0.2s ease-in-out;
}

    .table .btn i {
        margin-right: 4px;
    }

/* Íconos Bootstrap */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css");

/* Compactar tabla en móviles */
@media (max-width: 768px) {
    .table td {
        font-size: 0.85em;
        white-space: nowrap;
    }

    .table th {
        font-size: 0.85em;
    }
}



/* ======== LOGIN FORM MODERNO ======== */

#adminedit {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh; /* centra verticalmente */
    background: transparent;
}

    #adminedit fieldset {
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 4px 18px rgba(0,0,0,0.1);
        padding: 40px 35px;
        width: 100%;
        max-width: 420px;
        border: none;
    }

    #adminedit legend {
        text-align: center;
        font-size: 1.3rem;
        font-weight: 600;
        color: #333;
        margin-bottom: 1rem;
    }

    #adminedit h2.none {
        display: none; /* ocultamos el título duplicado */
    }

    #adminedit table {
        width: 100%;
    }

    #adminedit td {
        padding: 6px 0;
    }

    /* Campos de texto */
    #adminedit input[type="text"],
    #adminedit input[type="password"] {
        width: 100%;
        border: 1px solid #ccc;
        border-radius: 8px;
        padding: 10px 12px;
        font-size: 1rem;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

        #adminedit input[type="text"]:focus,
        #adminedit input[type="password"]:focus {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37,99,235,0.2);
            outline: none;
        }

    /* Botón Entrar */
    #adminedit .submit {
        background-color: #2563eb;
        color: #fff !important;
        border: none;
        border-radius: 8px;
        padding: 10px 0;
        width: 100%;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.3s;
    }

        #adminedit .submit:hover {
            background-color: #1e40af;
        }

    /* Mensajes de error */
    #adminedit .failureText {
        color: #d9534f;
        font-weight: 500;
        text-align: center;
        margin-top: 10px;
    }

/* Adaptable a pantallas pequeñas */
@media (max-width: 480px) {
    #adminedit fieldset {
        margin: 20px;
        padding: 30px 20px;
    }
}







/* === Menú de acciones moderno === */
.table .dropdown-toggle {
    border-radius: 6px;
    padding: 4px 8px;
}

.table .dropdown-menu {
    min-width: 150px;
    font-size: 0.9rem;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.table .dropdown-item i {
    margin-right: 6px;
}

.table .dropdown-item:hover {
    background-color: #f3f4f6;
}

/* Ajuste para móviles */
@media (max-width: 768px) {
    .table .dropdown-menu {
        min-width: 130px;
    }
}






/* === MENÚ PRINCIPAL AZUL DEGRADADO === */
.navbar-educa {
    background: linear-gradient(to bottom, #0077B6 0%, #1e4ea3 100%);
    border-bottom: 3px solid #113b7a;
    font-family: 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* AZUL FUERTE*/
/*.navbar-educa {
    background: linear-gradient(to bottom, #2f66da 0%, #1e4ea3 100%);
    border-bottom: 3px solid #113b7a;
    font-family: 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}*/



    /* Marca / Título */
    .navbar-educa .navbar-brand {
        color: #ffffff !important;
        font-weight: 600;
        font-size: 1.1rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }



/* === LOGO PRINCIPAL EN EL NAVBAR === */
.logo-educa {
    height: 58px; /* tamaño del logo */
    width: auto; /* mantiene proporciones */
    border-radius: 6px; /* opcional: bordes suaves */
    vertical-align: middle; /* centra con el texto */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

    .logo-educa:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
    }

/* Ajuste del texto junto al logo */
.navbar-educa .navbar-brand span {
    font-weight: 600;
    color: #fff;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}






/* === LOGO PRINCIPAL === */
.navbar-educa .navbar-brand img {
    height: 58px;          /* tamaño del logo (ajustable) */
    width: auto;            /* mantiene proporciones */
    margin-right: 12px;     /* separa del texto */
    vertical-align: middle; /* alinea con el texto */
    border-radius: 6px;     /* opcional, suaviza bordes */
    box-shadow: 0 2px 4px rgba(0,0,0,0.15); /* opcional: leve relieve */
    transition: transform 0.3s ease;
}

/* efecto visual al pasar el mouse */
.navbar-educa .navbar-brand img:hover {
    transform: scale(1.05);
}




    /* === BOTONES PRINCIPALES (con borde redondeado) === */
    .navbar-educa .nav-link {
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.08);
        margin: 0 3px;
        padding: 8px 16px;
        font-weight: 600;
        border-radius: 8px;
        transition: all 0.25s ease;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    }

        /* Hover y activo */
        .navbar-educa .nav-link:hover,
        .navbar-educa .nav-item.active .nav-link {
            background: #ffffff;
            color: #003c9e !important;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transform: translateY(-1px);
        }

    /* === SUBMENÚS === */
    .navbar-educa .dropdown-menu {
        background: #ffffff;
        border: 1px solid #cfd8f0;
        border-radius: 10px;
        box-shadow: 0 6px 16px rgba(0,0,0,0.15);
        margin-top: 6px;
        padding: 6px 0;
        min-width: 200px;
    }

    /* Ítems del submenú */
    .navbar-educa .dropdown-item {
        color: #003c9e;
        font-weight: 500;
        padding: 8px 18px;
        border-left: 3px solid transparent;
        transition: all 0.15s ease;
        border-radius: 0;
    }

        .navbar-educa .dropdown-item:hover {
            background: #e8f0ff;
            border-left: 3px solid #003c9e;
            color: #001f6b;
        }

    /* Indicador */
    .navbar-educa .dropdown-toggle::after {
        border-top: .4em solid #fff;
        border-right: .4em solid transparent;
        border-left: .4em solid transparent;
    }

/* Elimina marcador negro */
ul, li {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

.navbar-educa li::marker,
.navbar-educa .nav-item::before {
    content: none !important;
}

/* === RESPONSIVE === */
@media (max-width: 992px) {
    .navbar-educa .navbar-collapse {
        background: #ffffff;
        border-radius: 10px;
        margin-top: 8px;
        padding: 10px;
        box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    }

    .navbar-educa .nav-link {
        color: #003c9e !important;
        border-radius: 6px;
        background: #f6f8ff;
        margin: 4px 0;
    }

        .navbar-educa .nav-link:hover {
            background: #eaf2ff;
        }
}








/* === Login: fondo celeste, sin líneas ni cuadros === */
#adminedit fieldset table {
    background: #eaf2ff; /* celeste suave */
    border: 0 !important; /* sin borde externo */
    border-collapse: separate !important; /* evita que aparezcan líneas */
    border-spacing: 0 !important;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

#adminedit fieldset th,
#adminedit fieldset td {
    border: 0 !important; /* quita líneas de celdas */
    background: transparent;
    padding: .6rem .75rem;
}

/* Anula zebra/hover global de tablas dentro del login */
#adminedit fieldset tr:nth-child(even),
#adminedit fieldset tr:hover {
    background: transparent !important;
}

/* Botón ancho y alineado */
#adminedit .submit {
    width: 100%;
    margin-top: .5rem;
}







/* Estilos para DropDownList */
.form-select {
    background-color: #ffffff; /* Fondo blanco */
    border: 1px solid #355070; /* Azul oscuro en el borde */
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 1em;
    transition: all 0.3s ease;
}

    .form-select:focus {
        border-color: #1e4ea3; /* Azul más oscuro al hacer foco */
        box-shadow: 0 0 4px rgba(30, 78, 163, 0.3);
    }

    /* Hover en DropDownList */
    .form-select:hover {
        background-color: #ffffff; /* Fondo blanco al pasar el mouse */
        color: #0c0c0c; /* Color de texto en azul fuerte #003c9e; */
    }



/*--------------------------------------------------------------------------------------------------------------------------*/
/* CUANDO SE DESPLIEGAN LOS BOTONES DE ACCIONES*/
/* Sombras sutiles para los botones */
.dropdown-toggle {
    border: 2px solid #0077B6;
    background-color: #f9f9f9;
    color: #0077B6;
    border-radius: 8px; /* Bordes más redondeados */
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Agregar sombra sutil */
}

    .dropdown-toggle:hover {
        background-color: #0077B6;
        color: white;
        border-color: #00509d;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Sombra más profunda en hover */
    }

/* Sombra sutil para el menú */
.dropdown-menu {
    border: 1px solid #0077B6;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Agregar sombra al menú */
}

/* Efecto al pasar el ratón por encima de los items */
.dropdown-item:hover {
    background-color: #caf0f8;
    color: #0077B6;
    border-radius: 6px; /* Bordes redondeados al pasar el ratón */
    transition: all 0.3s ease;
}
















/*--------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------*/


/* Mejora visual del botón dropdown */
.dropdown-toggle {
    background-color: #f1f1f1;
    border-color: #0077B6; /* Bordes azules */
    color: #0077B6; /* Color del texto */
    padding: 8px 15px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

    .dropdown-toggle:hover {
        background-color: #0077B6;
        color: white;
        border-color: #00509d;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); /* Sombra al pasar el ratón */
    }

/* Mejorar la apariencia del menú desplegable */
.dropdown-menu {
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.dropdown-item {
    padding: 10px 15px;
    font-size: 0.95em;
}

    .dropdown-item:hover {
        background-color: #00509d;
        color: white;
        border-radius: 6px; /* Bordes redondeados al pasar el ratón */
        transition: all 0.3s ease;
    }

/*--------------------------------------------------------------------------------------------------------------------------*/
/* Mejorar el diseño de los encabezados */
/*th {
    background-color: #0077B6;
    color: white;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    border-radius: 6px;
}

    th:hover {
        background-color: #00509d;*/ /* Cambio de color al pasar el ratón */
        /*cursor: pointer;
    }*/




/*- ****************************************************************************************************************************** */
/* Estilo para el botón "Editar" */
.btn-edit {
    background-color: transparent;
    border: 2px solid #007bff; /* Bordes azul */
    color: #007bff; /* Texto azul */
    font-weight: bold;
    padding: 5px 12px;
    border-radius: 5px;
    text-align: center;
    display: inline-block;
    transition: all 0.3s ease;
}

    .btn-edit:hover {
        background-color: #007bff; /* Fondo azul */
        color: white; /* Texto blanco al pasar el mouse */
        border-color: #0056b3; /* Bordes más oscuros */
    }




/*- ****************************************************************************************************************************** */

/* === SOLUCION ALINEACION CHECKBOXES ASP.NET Y BOOTSTRAP === */
/* === AJUSTE PARA CheckBox INVERSO (Texto Izquierda/Check Derecha) === */

.form-check.d-flex .form-check-input {
    /* Anulamos la alineación predeterminada del input */
    vertical-align: top;
    /* Quitamos el margin-left que Bootstrap le añade por defecto para que el input
       no se separe del texto si el texto no es el label directo. */
    margin-left: 0;
}

/* El control de ASP.NET genera el label después del input.
   Usamos la pseudoclase :has() (si es compatible) o CSS complejo.
   La forma más segura es apuntar al contenedor: */
.form-check.d-flex {
    width: 100%; /* Asegura que ocupe el ancho completo de la celda */
    padding-right: 0.5rem; /* Pequeño espacio a la derecha */
}