/* Fondo general */
body {
    background-color: #c7e7fa;
    color: #1f2937;
    font-family: Arial, Helvetica, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}



/* Barra de navegación */
.navbar {
    background-color: #0d6efd !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.navbar-brand {
    font-weight: bold;
    font-size: 1.25rem;
}

.navbar .nav-link {
    color: white !important;
    font-weight: 500;
    margin-right: 8px;
}

    .navbar .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.15);
        border-radius: 6px;
    }



/* Contenedor principal */
.container {
    max-width: 1200px;
}



/* Títulos */
h1 {
    color: #0d47a1;
    font-weight: bold;
    margin-bottom: 25px;
}

h2,
h3,
h4 {
    color: #0d47a1;
}



/* Tarjetas */
.card {
    border: none;
    border-radius: 12px;
    background-color: white;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

.card-header {
    background-color: #0d6efd !important;
    color: white !important;
    border-radius: 12px 12px 0 0 !important;
}



/* Botones */
.btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

    .btn-primary:hover {
        background-color: #0b5ed7;
        border-color: #0b5ed7;
    }

.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}



/* Formularios */
.form-control {
    border: 1px solid #b8c7d9;
    border-radius: 7px;
    padding: 10px;
    color: #0d6efd !important;
}

    .form-control::placeholder {
        color: #0d6efd;
        opacity: 0.65;
    }

    .form-control:focus {
        color: #0d6efd !important;
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
    }

.form-label {
    color: #0d47a1;
    font-weight: bold;
}


/*tablas*/
.table {
    width: 100%;
    background-color: white;
    border-collapse: collapse !important;
    border: 2px solid #000000 !important;
}

    /* Líneas verticales y horizontales */
    .table > :not(caption) > * > * {
        border: 2px solid #000000 !important;
        background-color: white !important;
    }

    /* Encabezado */
    .table > thead > tr > th {
        background-color: #0d6efd !important;
        color: white !important;
        border: 2px solid #000000 !important;
        text-align: center;
        vertical-align: middle;
    }

    /* Celdas del cuerpo */
    .table > tbody > tr > td {
        background-color: white !important;
        color: #0d6efd !important;
        border: 2px solid #000000 !important;
        vertical-align: middle;
    }

    /* Cuando pasas el mouse */
    .table > tbody > tr:hover > td {
        background-color: #eaf6ff !important;
        color: #0d6efd !important;
    }



/* Mensajes */
.alert {
    border-radius: 8px;
}



/* Botones dentro de tablas */
.table .btn {
    margin: 2px;
}


/*footer*/
.footer {
    background-color: #0d6efd;
    color: white !important;
    padding: 15px 0;
    margin-top: 40px;
    text-align: center;
}

    .footer a {
        color: white;
    }



/* Enlaces */
a {
    color: #0d6efd;
}

    a:hover {
        color: #0b5ed7;
    }



/* Espaciado general */
main {
    flex: 1;
}



/* Acciones de la tabla de Citas Médicas */
.acciones {
    white-space: nowrap;
    text-align: center;
    min-width: 170px;
}

    .acciones .btn {
        display: inline-block;
        margin: 2px;
    }

.form-eliminar {
    display: inline-block;
    margin: 0;
}



/* Animación de los enlaces del menú */
.navbar .nav-link {
    position: relative;
    transition: all 0.3s ease;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

    /* Efecto al pasar el mouse */
    .navbar .nav-link:hover {
        transform: translateY(-2px);
        background-color: rgba(255, 255, 255, 0.12);
        border-radius: 6px;
    }

    /* Línea animada debajo del enlace */
    .navbar .nav-link::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 3px;
        width: 0;
        height: 2px;
        background-color: white;
        transition: all 0.3s ease;
        transform: translateX(-50%);
    }

    /* La línea aparece al pasar el mouse */
    .navbar .nav-link:hover::after {
        width: 70%;
    }

/* Animación del nombre de la clínica */
.navbar-brand {
    transition: all 0.3s ease;
}

    .navbar-brand:hover {
        transform: scale(1.05);
    }

/* Animación del botón del menú móvil */
.navbar-toggler {
    transition: all 0.3s ease;
}

    .navbar-toggler:hover {
        transform: scale(1.08);
    }