/* ======== ESTILO GENERAL ======== */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #f8f9fa;
    color: #333;
    margin: 0;
    padding: 0;
}

/* ======== BLOQUE CENTRADO ======== */
.main-container {
    max-width: 1200px;   /* ancho máximo */
    margin: 0 auto;      /* centra horizontalmente */
    padding: 20px;       /* espacio interno */
    border: 1px solid #ddd; /* borde suave */
    border-radius: 8px;  /* esquinas redondeadas */
    background-color: #fff;
}

/* ======== ENCABEZADO ======== */
/* Barra superior */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #ffc107, #ff9800); /* amarillo corporativo */
    padding: 10px 20px;
    color: #fff;
    font-weight: bold;
}

/* Icono menú (hamburger) */
.menu-icon {
    font-size: 24px;
    cursor: pointer;
}

/* Menú desplegable oculto */
.nav-menu {
    display: none;
    position: absolute;
    top: 50px;
    right: 20px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    z-index: 1000;
}

.nav-menu a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
}

.nav-menu a:hover {
    background: #f8f9fa;
}

#menuToggle {
    font-size: 28px;   /* tamaño grande del ícono */
    cursor: pointer;   /* cambia el cursor a mano */
    padding: 8px 12px; /* espacio alrededor */
    display: inline-block;
    color: #c5ccc5;       /* color del ícono */
}


/* Mostrar menú cuando está activo */
.nav-menu.active {
    display: block;
}

header h2 {
    color: #1a2a4f;
    font-weight: 700;
}

/* ======== BOTONES ======== */
button, .btn {
    background-color: #ffc107;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

button:hover, .btn:hover {
    background-color: #e0a800;
}

/* Contenedor de acciones para alinear botones */
.acciones {
    display: flex;          /* activa flexbox */
    gap: 8px;               /* espacio entre botones */
    justify-content: center; /* opcional: centrado en la celda */
    align-items: center;     /* alinear verticalmente */
}

/* Botón de ejecutar */
.btn-ejecutar {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    background-color: #ffc107; /* amarillo corporativo */
    color: #000;
    font-size: 18px;
    font-weight: bold;
    border-radius: 50%;        /* redondo */
    text-decoration: none;
    transition: background-color 0.3s;
}
.btn-ejecutar:hover {
    background-color: #e0a800;
    color: #fff;
}

/* Botón de no asiste */
.btn-noasiste {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    background-color: #dc3545; /* rojo corporativo */
    color: #fff;
    font-size: 18px;
    border-radius: 50%;        /* redondo */
    text-decoration: none;
    transition: background-color 0.3s;
}
.btn-noasiste:hover {
    background-color: #a71d2a; /* rojo más oscuro */
}

/* Iconos fijos */
.check-fixed {
    font-size: 18px;
    color: #28a745; /* verde fijo */
    font-weight: bold;
}
.noasiste-fixed {
    font-size: 18px;
    color: #dc3545; /* rojo fijo */
    font-weight: bold;
}

/* Menu Iconos */
.menu-icon {
    width: 22px;
    height: 22px;
    vertical-align: middle;
}

.nav-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #1a2a4f;
    font-weight: bold;
    padding: 8px 12px;
    border-radius: 5px;
    transition: background 0.3s;
}

.nav-menu a:hover {
    background-color: #ffe680;
}


/* Fila sombreada cuando está ejecutada */
tr.ejecutada {
    background-color: #d4edda; /* verde claro */
    color: #155724;
    font-weight: bold;
}

/* Fila sombreada para no asiste */
tr.no_asiste {
    background-color: #f8d7da; /* rojo claro */
    color: #721c24;
    font-weight: bold;
}
tr.cancelado {
    background-color: #f8d7da; /* rojo claro */
    color: #721c24;
    font-weight: bold;
}
tr.programar {
    background-color: #d4edda; /* verde claro */
    color: #155724;            /* texto verde oscuro */
    font-weight: bold;
}

/* ======== TABLAS ======== */
table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    margin-bottom: 30px;
    font-size: 13px;
}

table th, table td {
    border: 1px solid #ddd;   /* borde uniforme */
    padding: 10px;
    text-align: center;
    font-size: 13px;
}

table th {
    background-color: #1a2a4f; /* encabezado corporativo */
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
}

table th:hover {
    background-color: #ffc107; /* hover amarillo */
    color: #fff;
}

table tr:nth-child(even) {
    background-color: #f2f2f2; /* filas alternas */
}

/* ======== CONTENEDOR DE TABLA ======== */
.table-container {
    max-width: 1200px;       /* ancho máximo */
    margin: 20px auto;       /* centrado */
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* ======== ESTADOS DE FILAS ======== */
tr.ejecutada {
    background-color: #d4edda; /* verde claro */
    color: #155724;
    font-weight: bold;
}

tr.no_asiste, tr.cancelado {
    background-color: #f8d7da; /* rojo claro */
    color: #721c24;
    font-weight: bold;
}

tr.programar {
    background-color: #d4edda; /* verde claro */
    color: #155724;
    font-weight: bold;
}



/* ======== TARJETAS ======== */
.card {
    background-color: #fff;
    border: 2px solid #ffc107;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

/* ======== ETIQUETAS DE ESTADO ======== */
.badge {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 4px;
    color: #fff;
    font-size: 0.9em;
    font-weight: 500;
}

.badge-disponible {
    background-color: #28a745;
}

.badge-bloqueada {
    background-color: #dc3545;
}

.badge-cancelada {
    background-color: #6c757d;
}

/* ======== PIE DE PÁGINA ======== */
footer {
    background-color: #1a2a4f;
    color: #fff;
    text-align: center;
    padding: 15px;
    margin-top: 40px;
    font-size: 0.9em;
}

/* ======== LOGIN ======== */
.login-container {
    width: 350px;
    background-color: #ffffff;
    border: 2px solid #ffc107;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
    margin: 0; /* asegúrate de no tener margin-top ni margin:auto */
}


.login-container h2 {
    margin-bottom: 20px;
    color: #1a2a4f;
    font-weight: 700;
}

.login-container label {
    display: block;
    text-align: left;
    margin-top: 10px;
    font-weight: 500;
    color: #333;
}

.login-container input {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.login-container button {
    width: 100%;
    background-color: #ffc107;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.login-container button:hover {
    background-color: #e0a800;
}
/* contenedor principal solo para el login */
.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* ocupa toda la pantalla */
}
/* ======== LOGO PIE PAGINA ======== */
footer {
    background-color: #1a2a4f;
    color: #fff;
    text-align: center;
    padding: 15px;
    margin-top: 40px;
    font-size: 0.9em;
}

.footer-content {
    display: flex;
    flex-direction: row;   /* logo y texto en la misma línea */
    align-items: center;   /* alinea verticalmente */
    justify-content: center; /* centra todo en el footer */
    gap: 10px;             /* espacio entre logo y texto */
}

.footer-logo {
    max-width: 40px;   /* tamaño pequeño */
    height: auto;
    display: inline-block;
}
/* ======== encabezados sean clicables ======== */

th {
    cursor: pointer;   /* cambia el cursor a mano */
}

th:hover {
    background-color: #ffc107;  /* resalta en amarillo al pasar el mouse */
    color: #fff;
}
.search-box {
    margin-top: 5px;
    text-align: center;
}

.search-box form {
    display: inline-flex;      
    gap: 5px;              /* espacio entre input y botón */
}

.search-box input[type="text"] {
    width: 150px;          /* ancho fijo para que no se desborde */
    padding: 4px 8px;
    border: 1px solid #ffc107;
    border-radius: 4px;
    font-size: 0.85em;
}

.search-box button {
    background-color: #07ff13;
    color: #fff;
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8em;   /* reduce el tamaño del texto del botón */
}

.search-box button:hover {
    background-color: #e0a800;
}
.toggle-icon {
    cursor: pointer;
    color: #ffc107;
    font-size: 1.2em;
    margin-top: 5px;     /* separa del título */
    text-align: center;  /* centra el ícono debajo */
}

.toggle-icon:hover {
    color: #e0a800;
}

.title-text {
    font-weight: bold;
    font-size: 14px;     /* tamaño más compacto */
    text-align: center;
}


/* ======== botones de busqueda ======== */


/* Contenedor de búsqueda dentro de las celdas */
.search-box {
    margin-top: 5px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.search-box form {
    display: flex;
    justify-content: center;
    gap: 5px;
    flex-wrap: nowrap;
}

.search-box input[type="text"],
.search-box select {
    flex: 1;
    min-width: 80px;
    max-width: 150px;
    padding: 4px 6px;
    border: 1px solid #ffc107;
    border-radius: 4px;
    font-size: 0.85em;
    box-sizing: border-box;
}

.search-box button {
    background-color: #07ff13;
    color: #fff;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8em;
    white-space: nowrap;
}

/* ======== Formulario General ======== */

.form-container {
    background: #fff;
    max-width: 700px;
    margin: 15px auto 30px auto; /* arriba 15px, abajo 30px */
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.form-container form {
    display: grid;
    grid-template-columns: 1fr 1fr; /* dos columnas */
    gap: 15px 20px;                /* espacio entre campos */
}
.form-container label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: #444;
}

.form-container input,
.form-container select {
    width: 100%;              /* ocupa el ancho de su columna */
    padding: 8px;             /* más compacto */
    margin-bottom: 3px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 0.9em;          /* texto más pequeño */
}

.form-container button {
    grid-column: 1 / -1;       /* ocupa toda la fila */
    justify-self: center;      /* se centra horizontalmente */
    width: auto;               /* ancho automático, no toda la fila */
    background: #ffcc00;
    color: #333;
    border: none;
    padding: 10px 25px;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: background 0.3s ease;
}

.form-container button:hover {
    background: #e6b800;
}

label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #444;
}

input, select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 0.95em;
}

button {
    background: #ff6600;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: background 0.3s ease;
}

button:hover {
    background: #e65c00;
}

/* ======== Mensaje Error======== */
.error {
    color: #d9534f;
    font-weight: bold;
    margin-bottom: 15px;
}

.success {
    color: #28a745;
    font-weight: bold;
    margin-bottom: 15px;
}

/* ======== filtros ======== */
.filtros-container {
   display: flex;
   align-items: flex-end;
   gap: 15px;
   margin: 15px 0;
}
.filtro {
display: flex;
flex-direction: column;
font-size: 0.9em;
}
.filtro label {
margin-bottom: 3px;
font-weight: 500;
}
.filtro select {
padding: 6px;
font-size: 0.9em;
border: 1px solid #ccc;
border-radius: 4px;
}
.btn-filtrar {
background: #ff6600;
color: white;
border: none;
padding: 8px 15px;
border-radius: 4px;
cursor: pointer;
font-size: 0.9em;
}
.btn-filtrar:hover {
background: #e65c00;
}

/* ======== configuracion iconos ======== */

.icono-accion {
    width: 24px;
    height: 24px;
    margin: 0 5px;
    vertical-align: middle;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.icono-accion:hover {
    transform: scale(1.2); /* efecto zoom al pasar el mouse */
}

/* ======== mensaje tabla ======== */
#toast {
    visibility: hidden;
    min-width: 250px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 12px;
    position: fixed;
    z-index: 9999;
    right: 20px;
    bottom: 20px;
    font-size: 0.9em;
}

/* Animación */
#toast.show {
    visibility: visible;
    animation: fadein 0.5s, fadeout 0.5s 3s;
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 20px; opacity: 1;}
}

@keyframes fadeout {
    from {bottom: 20px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}

/* Colores según tipo */
.success {
    background-color: #28a745; /* verde */
}
.error {
    background-color: #dc3545; /* rojo */
}


/* ======== RESPONSIVE ======== */
@media (max-width: 768px) {
    .login-container {
        width: 90%; /* ocupa casi todo el ancho en tablets */
        padding: 20px;
    }

    .login-container h2 {
        font-size: 1.3em;
    }

    .login-container button {
        padding: 12px;
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .login-container {
        width: 95%; /* ocupa casi todo el ancho en móviles */
        padding: 15px;
    }

    .login-container h2 {
        font-size: 1.1em;
    }

    .login-container label {
        font-size: 0.9em;
    }

    .login-container input {
        padding: 10px;
        font-size: 0.9em;
    }

    .login-container button {
        padding: 12px;
        font-size: 0.95em;
    }
}