@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

:root {
    --primary-blue: #1976D2;
    --secondary-blue: #4593E3;
    --soft-blue: #A3C4F3;
    --pastel-blue: #D6E6FF;
    --primary-green: #61A60E;
    --secondary-green: #83C44A;
    --soft-green: #B8E2A6;
    --pastel-green: #DFF2D8;
    --alert-orange: #D48135;
    --soft-orange: #F3C6A3;
    --pastel-orange: #fef3ec;
    --dark-gray: #333333;
    --soft-gray: #D9D9D9;
    --white: #FFFFFF;
    /* Variaciones de color en tonos del llogo de Artricenter */
    --blue-100: #E3F2FD;
    --blue-200: #BBDEFB;
    --blue-300: #90CAF9;
    --blue-400: #64B5F6;
    --blue-500: #42A5F5;
    --blue-600: #2196F3;
    --blue-700: #1E88E5;
    --blue-800: #1976D2;
    --blue-900: #1565C0;
    --green-100: #E7F6D5;
    --green-200: #C5E1A5;
    --green-300: #A5D6A7;
    --green-400: #81C784;
    --green-500: #66BB6A;
    --green-600: #4CAF50;
    --green-700: #43A047;
    --green-800: #388E3C;
    --green-900: #2E7D32;
    --orange-100: #FFE0B2;
    --orange-200: #FFCC80;
    --orange-300: #FFB74D;
    --orange-400: #FFA726;
    --orange-500: #FF9800;
    --orange-600: #FB8C00;
    --orange-700: #F57C00;
    --orange-800: #EF6C00;
    --orange-900: #E65100;
}

*,
::after,
::before {
    box-sizing: border-box;
}
.material-symbols-outlined {
    vertical-align: middle !important;
}

body {
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    opacity: 1;
    overflow-y: scroll;
    margin: 0;
}

a {
    cursor: pointer;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
}

li {
    list-style: none;
}

h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.275rem;
    color: var(--bs-emphasis-color);
}

/* Layout for admin dashboard skeleton */

.wrapper {
    align-items: stretch;
    display: flex;
    width: 100%;
}

#sidebar {
    max-width: 264px;
    min-width: 264px;
    background: #e9ecef;
    transition: all 0.35s ease-in-out;
}

.main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
    overflow: hidden;
    transition: all 0.35s ease-in-out;
    width: 100%;
    background: var(--bs-light-bg-subtle);
}

/* Sidebar Elements Style */

.sidebar-logo {
    padding: 1.15rem;
}

    .sidebar-logo a {
        color: #e9ecef;
        font-size: 1.15rem;
        font-weight: 600;
    }

.sidebar-nav {
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
    margin-left: 0;
}

.sidebar-header {
    font-weight: bold;
    text-transform: uppercase;
    color: #000;
    font-size: .75rem;
    padding: 1.5rem 1.5rem .375rem;
    border-bottom: 1px solid #dee2e6;
}

a.sidebar-link {
    padding: .625rem 1.625rem;
    color: #000;
    position: relative;
    display: block;
    font-size: 1.2rem;
}

.sidebar-link[data-bs-toggle="collapse"]::after {
    border: solid;
    border-width: 0 .075rem .075rem 0;
    content: "";
    display: inline-block;
    padding: 2px;
    position: absolute;
    right: 1.5rem;
    top: 1.4rem;
    transform: rotate(-135deg);
    transition: all .2s ease-out;
}

.sidebar-link[data-bs-toggle="collapse"].collapsed::after {
    transform: rotate(45deg);
    transition: all .2s ease-out;
}

.avatar {
    height: 40px;
    width: 40px;
}

.navbar-expand .navbar-nav {
    margin-left: auto;
}

.content {
    flex: 1;
    max-width: 100vw;
    width: 100vw;
}

@media (min-width:768px) {
    .content {
        max-width: auto;
        width: auto;
    }
}

.card {
    box-shadow: 0 0 .875rem 0 rgba(34, 46, 60, .05);
    margin-bottom: 24px;
}

.card-blue {
    background-color: var(--pastel-blue) !important;
    color: var(--bs-emphasis-color);
}

.card-orange {
    background-color: var(--pastel-orange) !important;
    color: var(--bs-emphasis-color);
}

.illustration {
    background-color: var(--bs-gray-300) !important;
    color: var(--bs-emphasis-color);
}

.illustration-img {
    max-width: 150px;
    width: 100%;
}

/* Sidebar Toggle */

#sidebar.collapsed {
    margin-left: -264px;
}

/* Footer and Nav */

@media (max-width:767.98px) {

    .js-sidebar {
        margin-left: -264px;
    }

    #sidebar.collapsed {
        margin-left: 0;
    }

    .navbar,
    footer {
        width: 100vw;
    }
}

/* Theme Toggler */

.theme-toggle {
    /* position: fixed;
    top: 50%;
    transform: translateY(-65%);*/
    text-align: center;
    z-index: 10;
    right: 0;
    left: auto;
    border: none;
    background-color: var(--bs-body-color) !important;
}

html[data-bs-theme="dark"] .theme-toggle .fa-sun,
html[data-bs-theme="light"] .theme-toggle .fa-moon {
    cursor: pointer;
    padding: 10px;
    display: block;
    font-size: 1.25rem;
    color: #FFF;
}

html[data-bs-theme="dark"] .theme-toggle .fa-moon {
    display: none;
}

html[data-bs-theme="light"] .theme-toggle .fa-sun {
    display: none;
}


/* Botones en tonos azul */
.btn-blue {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--blue-700);
    --bs-btn-border-color: var(--blue-800);
    --bs-btn-hover-bg: var(--primary-blue);
    --bs-btn-hover-border-color: var(--secondary-blue);
}

/* Botones en tonos verde */
.btn-green {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--green-700);
    --bs-btn-border-color: var(--green-800);
    --bs-btn-hover-bg: var(--primary-green);
    --bs-btn-hover-border-color: var(--secondary-green);
}

/* Botones en tonos naranja */
.btn-orange {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--orange-700);
    --bs-btn-border-color: var(--orange-800);
    --bs-btn-hover-bg: var(--alert-orange);
    --bs-btn-hover-border-color: var(--soft-orange);
}

/* Botones en tonos pastel */
.btn-pastel-blue {
    --bs-btn-color: #333;
    --bs-btn-bg: var(--soft-blue);
    --bs-btn-border-color: var(--secondary-blue);
    --bs-btn-hover-bg: var(--pastel-blue);
    --bs-btn-hover-border-color: var(--blue-100);
}

.btn-pastel-green {
    --bs-btn-color: #333;
    --bs-btn-bg: var(--soft-green);
    --bs-btn-border-color: var(--secondary-green);
    --bs-btn-hover-bg: var(--pastel-green);
    --bs-btn-hover-border-color: var(--green-100);
}

.btn-pastel-orange {
    --bs-btn-color: #333;
    --bs-btn-bg: var(--soft-orange);
    --bs-btn-border-color: var(--alert-orange);
    --bs-btn-hover-bg: var(--pastel-orange);
    --bs-btn-hover-border-color: var(--orange-100);
}

/*Titulo con linea*/
.title-line {
    display: flex;
    align-items: center;
    text-align: center;
    font-weight: bold;
    color: var(--dark-gray);
    margin: 1rem 0;
}

    .title-line::before,
    .title-line::after {
        content: "";
        flex: 1;
        border-bottom: 2px solid var(--blue-700);
        margin: 0 10px;
    }


span[class^="estatus-"] {
    display: inline-block !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 0.9em !important;
    text-align: center !important;
    white-space: nowrap !important;
}


.estatus-agendada {
    background-color: #e0f7fa !important;
    color: #00796b !important;
}

.estatus-confirmado {
    background-color: #d0f0c0 !important;
    color: #33691e !important;
}

.estatus-cancelada {
    background-color: #ffebee !important;
    color: #c62828 !important;
}

.estatus-reagendada {
    background-color: #fce4ec !important;
    color: #ad1457 !important;
}

.estatus-asistio {
    background-color: #e8f5e9 !important;
    color: #2e7d32 !important;
}

.estatus-inasistente {
    background-color: #fff3e0 !important;
    color: #ef6c00 !important;
}

.estatus-atendido {
    background-color: #ede7f6 !important;
    color: #512da8 !important;
}

.estatus-noatendido {
    background-color: #f5f5f5 !important;
    color: #9e9e9e !important;
}

.estatus-espera {
    background-color: #fff8e1 !important;
    color: #ff6f00 !important;
}

.estatus-sinservicio {
    background-color: #fbe9e7 !important;
    color: #bf360c !important;
}

.estatus-nuevo {
    background-color: #e3f2fd !important;
    color: #0277bd !important;
}

.estatus-recuperacion {
    background-color: #fffde7 !important;
    color: #f9a825 !important;
}

.estatus-recuperado {
    background-color: #dcedc8 !important;
    color: #558b2f !important;
}

.estatus-sinrecuperar {
    background-color: #efebe9 !important;
    color: #3e2723 !important;
}

.estatus-desconocido {
    background-color: #eceff1 !important;
    color: #546e7a !important;
}
.btn-disabled-custom {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed !important;
    filter: grayscale(0.5);
    background-color: #ccc !important;
    border-color: #ccc !important;
    color: #666 !important;
}

/*Estilos para agenda de citas*/
.cita-mini {
    background-color: #f1f1f1;
    border-left: 4px solid #6c757d;
    padding: 4px 8px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 2px;
    transition: background-color 0.2s ease-in-out;
}

.cita-mini:hover {
    background-color: #e2e6ea;
}

.cita-estatus-1 {
    border-left-color: #00796b;
}
.cita-estatus-2 {
    border-left-color: #33691e;
}

/* Botón azul personalizado */
.btn-outline-azul {
    color: var(--blue-800);
    border: 1px solid var(--blue-800);
    background-color: var(--blue-800);
    transition: all 0.2s ease-in-out;
}

    .btn-outline-azul:hover,
    .btn-outline-azul:focus {
        background-color: var( --blue-200);
        color: var(--white);
    }

/* Botón verde personalizado */
.btn-outline-verde {
    color: var(--green-700);
    border: 1px solid var(--green-700);
    background-color: transparent;
    transition: all 0.2s ease-in-out;
}

    .btn-outline-verde:hover,
    .btn-outline-verde:focus {
        background-color: var(--green-700);
        color: var(--white);
    }

/* Botón naranja personalizado */
.btn-outline-naranja {
    color: var(--alert-orange);
    border: 1px solid var(--alert-orange);
    background-color: transparent;
    transition: all 0.2s ease-in-out;
}

    .btn-outline-naranja:hover,
    .btn-outline-naranja:focus {
        background-color: var(--alert-orange);
        color: var(--white);
    }

/* === BOTÓN AZUL === */
.btn-fill-azul {
    background-color: var(--blue-800);
    color: var(--white);
    border: 1px solid var(--blue-800);
    transition: all 0.2s ease-in-out;
}

    .btn-fill-azul:hover {
        background-color: var(--blue-900);
        border-color: var(--blue-900);
    }

.btn-soft-azul {
    background-color: var(--pastel-blue);
    color: var(--blue-800);
    border: 1px solid var(--blue-200);
    transition: all 0.2s ease-in-out;
}

    .btn-soft-azul:hover {
        background-color: var(--soft-blue);
        color: var(--blue-900);
    }


/* === BOTÓN VERDE === */
.btn-fill-verde {
    background-color: var(--green-700);
    color: var(--white);
    border: 1px solid var(--green-700);
    transition: all 0.2s ease-in-out;
}

    .btn-fill-verde:hover {
        background-color: var(--green-800);
        border-color: var(--green-800);
    }

.btn-soft-verde {
    background-color: var(--pastel-green);
    color: var(--green-700);
    border: 1px solid var(--green-200);
    transition: all 0.2s ease-in-out;
}

    .btn-soft-verde:hover {
        background-color: var(--soft-green);
        color: var(--green-900);
    }


/* === BOTÓN NARANJA === */
.btn-fill-naranja {
    background-color: var(--alert-orange);
    color: var(--white);
    border: 1px solid var(--alert-orange);
    transition: all 0.2s ease-in-out;
}

    .btn-fill-naranja:hover {
        background-color: var(--orange-800);
        border-color: var(--orange-800);
    }

.btn-soft-naranja {
    background-color: var(--pastel-orange);
    color: var(--alert-orange);
    border: 1px solid var(--orange-100);
    transition: all 0.2s ease-in-out;
}

    .btn-soft-naranja:hover {
        background-color: var(--soft-orange);
        color: var(--orange-800);
    }


/* Fondo suave para la tabla */
.tabla-horarios {
    width: 100%;
    border-collapse: collapse;
    background-color: #f9fbfd;
}

    /* Encabezados */
    .tabla-horarios thead th {
        background-color: #e3f2fd;
        text-align: center;
        font-size: 1rem;
        padding: 10px;
        border-bottom: 2px solid #90caf9;
        color: #333;
    }

    .tabla-horarios tr th {
        background-color: #f0f4f8;
        text-align: center;
        vertical-align: middle;
        font-weight: 600;
        padding: 8px;
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }

/* Celda de citas */
.celda-horario {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 8px;
    padding: 8px 12px;
    min-height: 60px;
    border-bottom: 1px solid #ddd;
    background-color: #fdfefe;
}

/* Tarjetas de citas */
.cita-horario-mini {
    background: #f5f5f5;
    border-left: 4px solid #00796b;
    padding: 10px 12px;
    border-radius: 10px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    width: 100%;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .cita-horario-mini:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(0,0,0,0.12);
    }

    .cita-horario-mini strong {
        font-size: 0.95rem;
        color: #333;
    }

    .cita-horario-mini small {
        color: #666;
        font-size: 0.8rem;
    }

/* Botón de agregar */
.btn-horario-agregar {
    background-color: #a8e6a3;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    align-self: flex-end;
    transition: background-color 0.3s, transform 0.2s;
}

    .btn-horario-agregar:hover {
        background-color: #81c784;
        transform: scale(1.05);
    }

    .btn-horario-agregar span {
        font-size: 24px;
        color: #fff;
    }