/* nails.css - Tema Rosa Pastel para Bootstrap 5 */

:root {
    --pastel-pink: #fce4ec;
    --deep-pink: #f06292;
    --soft-pink: #f8bbd0;
    --accent-pink: #ec407a;
    --pastel-white: #fffcfd;
    --soft-gray: #fdfdfd;
    --dark-pink: #880e4f;
    --text-color: #4a4a4a;
}

body {
    background-color: var(--pastel-white);
    color: var(--text-color);
    font-family: 'Segoe UI', Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Colores de marca y fondos */
.bg-pastel-pink {
    background-color: var(--pastel-pink) !important;
}

.bg-soft-pink {
    background-color: var(--soft-pink) !important;
}

/* Sobrescribir colores primarios de Bootstrap para que coincidan con el tema */
.btn-primary {
    background-color: var(--deep-pink);
    border-color: var(--deep-pink);
    color: white;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--accent-pink);
    border-color: var(--accent-pink);
    box-shadow: 0 0 0 0.25rem rgba(236, 64, 122, 0.25);
}

.btn-outline-primary {
    color: var(--deep-pink);
    border-color: var(--deep-pink);
}

.btn-outline-primary:hover {
    background-color: var(--deep-pink);
    color: white;
}

/* Enlaces */
a {
    color: var(--deep-pink);
    text-decoration: none;
}

a:hover {
    color: var(--accent-pink);
}

/* Tarjetas (Cards) */
.card {
    border: none;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(240, 98, 146, 0.1);
    background-color: white;
}

.card-header {
    background-color: var(--pastel-pink);
    border-bottom: 1px solid var(--soft-pink);
    border-radius: 15px 15px 0 0 !important;
    font-weight: bold;
    color: var(--dark-pink);
}

/* Barra de navegación */
.navbar {
    background-color: white !important;
    border-bottom: 2px solid var(--pastel-pink);
}

.navbar-brand {
    font-weight: 700;
    color: var(--deep-pink) !important;
}

.nav-link {
    color: var(--text-color) !important;
}

.nav-link:hover {
    color: var(--deep-pink) !important;
}

/* Tablas */
.table-pink {
    --bs-table-bg: white;
    --bs-table-striped-bg: #fff5f8;
    color: var(--dark-pink);
}

.table-header-pink {
    background-color: var(--soft-pink) !important;
    color: var(--dark-pink) !important;
    font-weight: bold;
}

/* DataTables Pink Theme */
.dataTables_wrapper .dataTables_paginate .paginate_button.current, 
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dt-paging-button.current,
.dt-paging-button.current:hover {
    background: var(--deep-pink) !important;
    border-color: var(--deep-pink) !important;
    color: white !important;
    border-radius: 5px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.dt-paging-button {
    border-radius: 5px;
    border: none !important;
    background: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dt-paging-button:hover {
    background: var(--soft-pink) !important;
    border-color: var(--soft-pink) !important;
    color: var(--dark-pink) !important;
}

.dataTables_wrapper .dataTables_filter input, 
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--soft-pink);
    border-radius: 5px;
    padding: 3px 10px;
    background-color: white;
    display: inline-block;
    width: auto;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    outline: none;
    border-color: var(--deep-pink);
    box-shadow: 0 0 0 0.2rem rgba(240, 98, 146, 0.25);
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    color: var(--dark-pink) !important;
    margin-bottom: 15px;
}

/* Formularios */
.form-control:focus {
    border-color: var(--soft-pink);
    box-shadow: 0 0 0 0.25rem rgba(240, 98, 146, 0.25);
}

.form-label {
    color: var(--dark-pink);
    font-weight: 500;
}

/* Alertas */
.alert-pink {
    background-color: var(--pastel-pink);
    border-color: var(--soft-pink);
    color: var(--dark-pink);
}

/* Detalles decorativos */
.soft-shadow {
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.text-pink-deep {
    color: var(--deep-pink) !important;
}

.rounded-lg {
    border-radius: 20px !important;
}

/* Botón flotante */
.floating-btn {
    position: fixed;
    bottom: 80px;
    right: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--deep-pink);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    text-decoration: none;
    transition: background-color 0.3s ease;
}
.floating-btn:hover {
    background-color: var(--accent-pink);
    color: white;
}

/* iOS Settings Style */
.container-settings {
    max-width: 600px;
    margin: 20px auto;
    padding: 0 15px;
}
.ios-settings-group {
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
}
.ios-settings-group.form-group {
    padding: 15px;
    overflow: visible;
}
.ios-settings-header {
    font-size: 13px;
    color: #6d6d72;
    text-transform: uppercase;
    margin-left: 15px;
    margin-bottom: 5px;
}
.ios-settings-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #e0e0e0;
    text-decoration: none;
    color: #000;
    transition: background-color 0.2s;
}
.ios-settings-item:last-child {
    border-bottom: none;
}
.ios-settings-item:hover {
    background-color: #f2f2f2;
    text-decoration: none;
    color: #000;
}
.ios-settings-text {
    flex-grow: 1;
    font-size: 17px;
}
.ios-settings-arrow {
    color: #c7c7cc;
    font-size: 17px;
}
.back-btn {
    margin-bottom: 20px;
    display: inline-block;
}
.add-btn {
    margin-bottom: 20px;
}


/* Estilos para FullCalendar */
#calendar {
    min-height: 600px;
}
.fc-event {
    cursor: pointer;
}
.fc-toolbar-title {
    font-size: 1.5rem !important;
    color: var(--dark-pink);
}
.fc-button-primary {
    background-color: var(--deep-pink) !important;
    border-color: var(--deep-pink) !important;
}
.fc-button-primary:hover {
    background-color: var(--accent-pink) !important;
    border-color: var(--accent-pink) !important;
}
.fc-button-active {
    background-color: var(--dark-pink) !important;
    border-color: var(--dark-pink) !important;
}
@media (max-width: 768px) {
    .fc-toolbar {
        flex-direction: column;
    }
    .fc-toolbar-chunk {
        margin-bottom: 0.5rem;
    }
}