/* --- Variables de Color (Valores por defecto si no se sobrescriben dinámicamente desde PHP) --- */
:root {
    --mcr-surface-bg: rgba(255, 255, 255, 1);
    --mcr-input-bg-color: rgba(255, 255, 255, 1);
    --mcr-primary-accent: #007aff;
    --mcr-text-primary: #333333;

    --mcr-bg-main: #f4f7f9;
    --mcr-primary-accent-hover: #005ecb;
    --mcr-primary-accent-light: #e6f2ff;
    --mcr-text-secondary: #5f6368;
    --mcr-text-on-accent: #ffffff;
    --mcr-border-light: #e0e6ed;
    --mcr-border-strong: #cdd7e1;
    --mcr-disabled-bg: #e9ecef;
    --mcr-disabled-text: #adb5bd;
    --mcr-success-bg: #d4edda;
    --mcr-success-text: #155724;
    --mcr-success-border: #c3e6cb;
    --mcr-error-bg: #f8d7da;
    --mcr-error-text: #721c24;
    --mcr-error-border: #f5c6cb;
    --mcr-shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08);
    --mcr-shadow-interactive: 0 2px 6px rgba(0, 0, 0, 0.1);
}

#mcr-booking-calendar-shortcode-wrapper,
.mcr-my-bookings-wrapper, /* Aplicar fondo y fuente también a Mis Reservas */
#mcr-change-password-wrapper, /* Y al wrapper de cambio de contraseña */
#mcr_client_loginform_wrapper /* Si decides wrappear el login form */ {
    background-color: var(--mcr-bg-main);
    padding: 20px;
    border-radius: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    margin-bottom: 30px; /* Espacio después de cada componente del plugin */
}
/* Si el login form no tiene wrapper, aplicar directamente al form */
#mcr_client_loginform { 
    background-color: var(--mcr-surface-bg); 
    padding: 25px; 
    border-radius: 12px;
    box-shadow: var(--mcr-shadow-soft);
    max-width: 400px; /* Centrar el formulario de login */
    margin: 20px auto;
}


#mcr-service-selector-container { margin-bottom: 25px; }
#mcr-service-selector-container label { display: block; font-weight: 600; color: var(--mcr-text-secondary); margin-bottom: 8px; font-size: 0.95em; }
#mcr-service-dropdown {
    width: 100%; padding: 12px 40px 12px 15px; border: 1px solid var(--mcr-border-strong); border-radius: 8px;
    background-color: var(--mcr-input-bg-color); font-size: 1em; color: var(--mcr-text-primary);
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%235F6368' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 15px center; background-size: 16px; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s;
}
#mcr-service-dropdown:focus { outline: none; border-color: var(--mcr-primary-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mcr-primary-accent) 20%, transparent); }

#mcr-booking-calendar-wrapper { background-color: var(--mcr-surface-bg); border-radius: 12px; margin-bottom: 25px; overflow: hidden; box-shadow: var(--mcr-shadow-soft); }
#mcr-calendar-nav { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background-color: color-mix(in srgb, var(--mcr-primary-accent) 10%, var(--mcr-surface-bg) 90% ); }
#mcr-calendar-nav button { background-color: transparent; border: none; color: var(--mcr-primary-accent); font-weight: 600; padding: 8px 12px; border-radius: 6px; cursor: pointer; transition: background-color 0.2s; }
#mcr-calendar-nav button:hover { background-color: color-mix(in srgb, var(--mcr-primary-accent) 20%, transparent); }
#mcr-current-month-year { font-weight: 600; font-size: 1.2em; color: var(--mcr-text-primary); }

.mcr-calendar { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mcr-calendar th { padding: 12px 5px; text-align: center; font-weight: 500; font-size: 0.9em; color: var(--mcr-text-secondary); border-bottom: 1px solid var(--mcr-border-light); }
.mcr-calendar td { text-align: center; height: 65px; padding: 4px; border: none; position: relative; vertical-align: top; }
.mcr-calendar td:not(:empty) { border-right: 1px solid var(--mcr-border-light); border-bottom: 1px solid var(--mcr-border-light); }
.mcr-calendar tr td:last-child { border-right: none; } .mcr-calendar tbody tr:last-child td { border-bottom: none; }
.mcr-day-number { font-size: 0.85em; color: var(--mcr-text-secondary); padding: 6px; display: inline-block; border-radius: 50%; width: 28px; height: 28px; box-sizing: border-box; text-align: center; line-height: 16px; margin-top: 4px; transition: background-color 0.2s, color 0.2s; }
.mcr-day-unavailable .mcr-day-number { color: var(--mcr-disabled-text); }
.mcr-day-unavailable { background-color: var(--mcr-disabled-bg); cursor: not-allowed; }
.mcr-day-out-of-window .mcr-day-number, .mcr-day-blocked .mcr-day-number { opacity: 0.6; } .mcr-day-blocked { text-decoration: line-through; text-decoration-color: var(--mcr-disabled-text); }
.mcr-day-potentially-available { cursor: pointer; } .mcr-day-potentially-available .mcr-day-number { color: var(--mcr-text-primary); }
.mcr-day-potentially-available:hover .mcr-day-number, .mcr-day-selected .mcr-day-number { background-color: var(--mcr-primary-accent); color: var(--mcr-text-on-accent); font-weight: 600; }
.mcr-day-selected { background-color: var(--mcr-primary-accent-light); }
.mcr-today .mcr-day-number { font-weight: 700; color: var(--mcr-primary-accent); border: 1.5px solid var(--mcr-primary-accent); }

#mcr-time-slots-container { margin-top: 25px; padding: 20px; background-color: var(--mcr-bg-main); border-radius: 8px; }
#mcr-time-slots-container h3 { margin-top: 0; margin-bottom: 15px; font-size: 1.1em; font-weight: 600; color: var(--mcr-text-primary); }
#mcr-time-slots-list { display: flex; flex-wrap: wrap; gap: 10px; }
#mcr-time-slots-list.mcr-loading, #mcr-calendar-grid-container .mcr-loading { color: var(--mcr-text-secondary); font-style: italic; text-align: center; padding: 20px; width: 100%; }
.mcr-time-slot {
    background-color: var(--mcr-surface-bg); color: var(--mcr-primary-accent); border: 1.5px solid var(--mcr-primary-accent);
    padding: 10px 18px; border-radius: 20px; cursor: pointer; font-size: 0.95em; font-weight: 500; transition: all 0.2s ease-in-out; box-shadow: var(--mcr-shadow-interactive);
}
.mcr-time-slot:hover { background-color: var(--mcr-primary-accent); color: var(--mcr-text-on-accent); border-color: var(--mcr-primary-accent); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.12); }
.mcr-time-slot.mcr-selected-slot { background-color: var(--mcr-primary-accent-hover); color: var(--mcr-text-on-accent); border-color: var(--mcr-primary-accent-hover); font-weight: 600; box-shadow: none; }

#mcr-booking-form-container { margin-top: 25px; padding: 25px; background-color: var(--mcr-surface-bg); border-radius: 12px; box-shadow: var(--mcr-shadow-soft); }
#mcr-booking-form-container h3 { margin-top: 0; margin-bottom: 20px; font-size: 1.25em; font-weight: 600; color: var(--mcr-text-primary); text-align: center; }
#mcr-booking-form label { display: block; margin-bottom: 6px; font-weight: 500; font-size: 0.9em; color: var(--mcr-text-secondary); }
#mcr-booking-form input[type="text"], #mcr-booking-form input[type="email"], #mcr-booking-form input[type="tel"], #mcr-booking-form textarea {
    width: 100%; padding: 12px 15px; margin-bottom: 18px; border: 1px solid var(--mcr-border-strong); border-radius: 8px; box-sizing: border-box; font-size: 1em;
    color: var(--mcr-text-primary); background-color: var(--mcr-input-bg-color); transition: border-color 0.2s, box-shadow 0.2s;
}
#mcr-booking-form input:focus, #mcr-booking-form textarea:focus { outline: none; border-color: var(--mcr-primary-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mcr-primary-accent) 20%, transparent); }
#mcr-booking-form textarea { min-height: 100px; resize: vertical; }
#mcr-booking-form .button-primary {
    background-color: var(--mcr-primary-accent); border-color: var(--mcr-primary-accent); color: var(--mcr-text-on-accent);
    font-size: 1.05em; font-weight: 600; padding: 12px 25px; border-radius: 8px; width: 100%; transition: background-color 0.2s, border-color 0.2s; box-shadow: var(--mcr-shadow-interactive); cursor: pointer;
}
#mcr-booking-form .button-primary:hover { background-color: var(--mcr-primary-accent-hover); border-color: var(--mcr-primary-accent-hover); box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
#mcr-booking-form .button-primary:disabled { background-color: var(--mcr-disabled-bg); border-color: var(--mcr-disabled-bg); color: var(--mcr-disabled-text); cursor: not-allowed; box-shadow: none; }

#mcr-booking-response { margin-top: 20px; padding: 15px 20px; border-radius: 8px; font-size: 0.95em; text-align: center; }
#mcr-booking-response.success { background-color: var(--mcr-success-bg); border: 1px solid var(--mcr-success-border); color: var(--mcr-success-text); }
#mcr-booking-response.error { background-color: var(--mcr-error-bg); border: 1px solid var(--mcr-error-border); color: var(--mcr-error-text); }
.mcr-required { color: var(--mcr-error-text); margin-left: 3px; font-weight: normal; }
.mcr-input-error { border-color: var(--mcr-error-border) !important; background-color: color-mix(in srgb, var(--mcr-error-bg) 30%, transparent) !important; }

.mcr-my-bookings-wrapper { margin-top: 20px; color: var(--mcr-text-primary); }
.mcr-my-bookings-wrapper h2 { font-size: 1.8em; margin-bottom: 20px; color: var(--mcr-text-primary); border-bottom: 1px solid var(--mcr-border-light); padding-bottom: 10px; }
.mcr-login-required { padding: 15px; background-color: var(--mcr-primary-accent-light); border: 1px solid var(--mcr-primary-accent); color: var(--mcr-primary-accent); border-radius: 8px; text-align: center; }
.mcr-login-required a { color: var(--mcr-primary-accent); font-weight: bold; text-decoration: none; } .mcr-login-required a:hover { text-decoration: underline; }

.mcr-my-bookings-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; box-shadow: var(--mcr-shadow-soft); border-radius: 8px; overflow: hidden; background-color: var(--mcr-surface-bg); }
.mcr-my-bookings-table th, .mcr-my-bookings-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--mcr-border-light); color: var(--mcr-text-primary); }
.mcr-my-bookings-table th { background-color: var(--mcr-bg-main); font-weight: 600; font-size: 0.95em; color: var(--mcr-text-secondary); }
.mcr-my-bookings-table tbody tr:last-child td { border-bottom: none; } .mcr-my-bookings-table tbody tr:hover { background-color: color-mix(in srgb, var(--mcr-primary-accent) 5%, var(--mcr-surface-bg) 95%); }
.mcr-status-badge { padding: 5px 10px; border-radius: 15px; font-size: 0.85em; font-weight: 600; text-transform: capitalize; display: inline-block; color: #fff; }
.mcr-status-pendiente { background-color: #ffc107; color: #212529; } .mcr-status-confirmada { background-color: #28a745; }
.mcr-status-cancelada { background-color: #dc3545; } .mcr-status-completada { background-color: #17a2b8; }
.mcr-status-unknown, .mcr-status- { background-color: #6c757d; }

.mcr-action-button { padding: 6px 12px; font-size: 0.9em; border-radius: 6px; cursor: pointer; margin-right: 8px; margin-bottom: 5px; border: 1px solid transparent; transition: all 0.2s; display: inline-block; line-height: 1.5; }
.mcr-action-button:hover { transform: translateY(-1px); }
.mcr-cancel-booking-btn { background-color: var(--mcr-error-bg); border-color: var(--mcr-error-border); color: var(--mcr-error-text); }
.mcr-cancel-booking-btn:hover { background-color: color-mix(in srgb, var(--mcr-error-text) 85%, #fff); color: #fff; border-color: var(--mcr-error-text); }
.mcr-reschedule-booking-btn { background-color: var(--mcr-primary-accent-light); border-color: var(--mcr-primary-accent); color: var(--mcr-primary-accent); }
.mcr-reschedule-booking-btn:hover { background-color: var(--mcr-primary-accent); color: var(--mcr-text-on-accent); }

.mcr-pagination { margin-top: 20px; text-align: center; }
.mcr-pagination .page-numbers { padding: 8px 12px; margin: 0 2px; border: 1px solid var(--mcr-border-strong); border-radius: 4px; text-decoration: none; color: var(--mcr-primary-accent); transition: background-color 0.2s, color 0.2s; }
.mcr-pagination .page-numbers:hover, .mcr-pagination .page-numbers.current { background-color: var(--mcr-primary-accent); color: var(--mcr-text-on-accent); border-color: var(--mcr-primary-accent); }
.mcr-pagination .page-numbers.current { font-weight: bold; }

#mcr-client-action-modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; z-index: 10000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s 0.3s; }
#mcr-client-action-modal.mcr-modal-is-visible { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
.mcr-modal-content { background-color: var(--mcr-surface-bg); padding: 25px 30px; border-radius: 8px; box-shadow: var(--mcr-shadow-soft); text-align: center; min-width: 320px; max-width: 450px; width: 90%; transform: scale(0.95); transition: transform 0.3s ease; position: relative; }
#mcr-client-action-modal.mcr-modal-is-visible .mcr-modal-content { transform: scale(1); }
.mcr-modal-content .mcr-modal-close { position: absolute; top: 10px; right: 15px; font-size: 1.8em; color: var(--mcr-text-secondary); text-decoration: none; cursor: pointer; line-height: 1; }
.mcr-modal-content .mcr-modal-close:hover { color: var(--mcr-text-primary); }
.mcr-modal-content p { margin-top: 0; margin-bottom: 25px; color: var(--mcr-text-primary); font-size: 1.1em; line-height: 1.5; }
.mcr-modal-content .mcr-modal-actions button { margin: 0 8px; padding: 10px 20px; font-size: 1em; border-radius: 6px; }
.mcr-modal-content .mcr-modal-actions .button-primary { background-color: var(--mcr-primary-accent); border-color: var(--mcr-primary-accent); color: var(--mcr-text-on-accent); }
.mcr-modal-content .mcr-modal-actions .button-primary:hover { background-color: var(--mcr-primary-accent-hover); border-color: var(--mcr-primary-accent-hover); }
.mcr-modal-content .mcr-modal-actions .button { background-color: var(--mcr-disabled-bg); border-color: var(--mcr-border-strong); color: var(--mcr-text-secondary); }
.mcr-modal-content .mcr-modal-actions .button:hover { background-color: var(--mcr-border-strong); color: var(--mcr-text-primary); }

#mcr_client_loginform { padding: 25px; background-color: var(--mcr-surface-bg); border-radius: 12px; box-shadow: var(--mcr-shadow-soft); max-width: 400px; margin: 20px auto; }
#mcr_client_loginform p { margin-bottom: 15px; }
#mcr_client_loginform label { display: block; font-weight: 500; margin-bottom: 5px; color: var(--mcr-text-secondary); }
#mcr_client_loginform input[type="text"], #mcr_client_loginform input[type="password"] { width: 100%; padding: 12px 15px; border: 1px solid var(--mcr-border-strong); border-radius: 8px; box-sizing: border-box; font-size: 1em; color: var(--mcr-text-primary); background-color: var(--mcr-input-bg-color); }
#mcr_client_loginform input[type="text"]:focus, #mcr_client_loginform input[type="password"]:focus { border-color: var(--mcr-primary-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mcr-primary-accent) 20%, transparent); outline: none; }
#mcr_client_loginform .login-remember label { font-weight: normal; font-size: 0.9em; color: var(--mcr-text-secondary); display: inline-flex; align-items: center;}
#mcr_client_loginform .login-remember input { margin-right: 5px; }
#mcr_client_loginform .login-submit input[type="submit"] { width: 100%; padding: 12px 20px; font-size: 1.05em; font-weight: 600; border-radius: 8px; background-color: var(--mcr-primary-accent); border: 1px solid var(--mcr-primary-accent); color: var(--mcr-text-on-accent); cursor: pointer; transition: background-color 0.2s; }
#mcr_client_loginform .login-submit input[type="submit"]:hover { background-color: var(--mcr-primary-accent-hover); border-color: var(--mcr-primary-accent-hover); }
.mcr-login-links { text-align: center; margin-top: 20px; font-size: 0.9em; }
.mcr-login-links a { color: var(--mcr-text-secondary); text-decoration: none; } .mcr-login-links a:hover { color: var(--mcr-primary-accent); text-decoration: underline; }

#mcr-change-password-wrapper { max-width: 500px; margin: 30px auto; padding: 25px; background-color: var(--mcr-surface-bg); border-radius: 12px; box-shadow: var(--mcr-shadow-soft); }
#mcr-change-password-wrapper h2 { font-size: 1.6em; margin-top: 0; margin-bottom: 25px; color: var(--mcr-text-primary); text-align: center; border-bottom: 1px solid var(--mcr-border-light); padding-bottom: 15px; }
#mcr-change-password-form p { margin-bottom: 20px; }
#mcr-change-password-form label { display: block; font-weight: 500; margin-bottom: 8px; color: var(--mcr-text-secondary); font-size: 0.95em; }
#mcr-change-password-form input[type="password"] { width: 100%; padding: 12px 15px; border: 1px solid var(--mcr-border-strong); border-radius: 8px; box-sizing: border-box; font-size: 1em; color: var(--mcr-text-primary); background-color: var(--mcr-input-bg-color); transition: border-color 0.2s, box-shadow 0.2s; }
#mcr-change-password-form input[type="password"]:focus { outline: none; border-color: var(--mcr-primary-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mcr-primary-accent) 20%, transparent); }
#mcr-change-password-form .button-primary { width: 100%; padding: 12px 20px; font-size: 1.05em; font-weight: 600; border-radius: 8px; background-color: var(--mcr-primary-accent); border: 1px solid var(--mcr-primary-accent); color: var(--mcr-text-on-accent); cursor: pointer; transition: background-color 0.2s; }
#mcr-change-password-form .button-primary:hover { background-color: var(--mcr-primary-accent-hover); border-color: var(--mcr-primary-accent-hover); }
#mcr-change-password-form .button-primary:disabled { background-color: var(--mcr-disabled-bg); border-color: var(--mcr-disabled-bg); color: var(--mcr-disabled-text); cursor: not-allowed; }
#mcr-change-password-response { margin-top: 20px; padding: 15px; border-radius: 8px; font-size: 0.95em; text-align: center; }
#mcr-change-password-response.success { background-color: var(--mcr-success-bg); border: 1px solid var(--mcr-success-border); color: var(--mcr-success-text); }
#mcr-change-password-response.error { background-color: var(--mcr-error-bg); border: 1px solid var(--mcr-error-border); color: var(--mcr-error-text); }
#mcr-change-password-form .mcr-input-error { border-color: var(--mcr-error-border) !important; background-color: color-mix(in srgb, var(--mcr-error-bg) 30%, transparent) !important; }


@media (max-width: 768px) {
    .mcr-my-bookings-table thead { display: none; }
    .mcr-my-bookings-table tr { display: block; margin-bottom: 15px; border: 1px solid var(--mcr-border-light); border-radius: 6px; }
    .mcr-my-bookings-table td { display: block; text-align: right !important; padding-left: 45% !important; position: relative; border-bottom: 1px solid var(--mcr-border-light); }
    .mcr-my-bookings-table td:last-child { border-bottom: none; }
    .mcr-my-bookings-table td::before { content: attr(data-label); position: absolute; left: 15px; font-weight: bold; color: var(--mcr-text-secondary); text-align: left; width: 40%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 600px) {
    #mcr-booking-calendar-shortcode-wrapper, #mcr-time-slots-container, #mcr-booking-form-container, .mcr-my-bookings-wrapper, #mcr-change-password-wrapper { padding: 15px; }
    #mcr-calendar-nav { flex-direction: column; gap: 10px; }
    .mcr-calendar th { font-size: 0.8em; padding: 8px 2px; } .mcr-calendar td { height: 55px; }
    .mcr-day-number { font-size: 0.8em; width: 24px; height: 24px; line-height: 15px; }
    #mcr-time-slots-list { justify-content: center; } .mcr-time-slot { padding: 8px 15px; font-size: 0.9em; }
}