/* Variables CSS */
:root {
    --primary-color: #0D47A1;
    --primary-dark: #0A3D8F;
    --secondary-color: #0D1B2A;
    --accent-color: #E74C3C;
    --success-color: #27AE60;
    --warning-color: #F39C12;
    --text-primary: #2C3E50;
    --text-secondary: #7F8C8D;
    --background-light: #FFFFFF;
    --background-gray: #F8F9FA;
    --border-color: #E9ECEF;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    --border-radius: 12px;
    --transition: all 0.3s ease;
}

/* Estilos base para html y body */
html {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--primary-color);
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--primary-color);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

/* Estilos para notification-badge */
.notification-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    max-width: 16px;
    max-height: 16px;
    background-color: #FF0000;
    color: white;
    border-radius: 50%;
    display: none; /* Oculto por defecto */
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: normal;
    line-height: 1;
    text-align: center;
    padding: 0;
    margin: 0;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.notification-btn {
    position: relative;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
}

/* Estilos para chat-badge - usando los mismos estilos que notification-badge */
/* Botón de chat con posición relativa para el badge */
.cita-action-btn[onclick*="openChat"],
.cita-action-btn[onclick*="abrirChat"] {
    position: relative;
}
/* Estilos para chat-badge - ajustado para diferentes tipos de botones */
.chat-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    max-width: 16px;
    max-height: 16px;
    background-color: #FF0000;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: normal;
    line-height: 1;
    text-align: center;
    padding: 0;
    margin: 0;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Badge para botones de chat del cliente - un poco más adentro */
.cita-action-btn .chat-badge {
    top: 2px;
    right: 2px;
}

/* Badge para botones de chat del técnico - completamente dentro del botón */
#technician-appointments .cita-action-btn .chat-badge,
#solicitudes-recibidas-list .cita-action-btn .chat-badge,
#citas-hoy-list .cita-action-btn .chat-badge {
    top: 5px;
    right: 5px;
}

/* Badge para botones de chat en calendario */
button[onclick*="openChat"] .chat-badge {
    top: 2px;
    right: 2px;
}

/* Estilos específicos para el badge de notificaciones del técnico */
#btn-notificaciones-tecnico .notification-badge {
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    background-color: #FF0000 !important;
    color: white !important;
    border-radius: 50% !important;
    display: none; /* Oculto por defecto, sin !important para permitir override */
    align-items: center !important;
    justify-content: center !important;
    font-size: 9px !important;
    font-weight: normal !important;
    line-height: 1 !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 10 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* Estilos adicionales más específicos para forzar el tamaño */
#btn-notificaciones-tecnico .notification-badge,
#btn-notificaciones-tecnico .notification-badge * {
    font-size: 9px !important;
    font-size: 9px !important;
    font-size: 9px !important;
}

/* Reset y estilos base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Pantallas */
.pantalla {
    display: none;
    min-height: 100vh;
    background-color: var(--background-light);
    padding-bottom: 100px; /* Espacio para la navegación inferior */
}

.pantalla.activa {
    display: block;
}

/* Quitar el fondo azul y volver al blanco */
.pantalla#pantalla-registro {
  background: #fff !important;
}
.registro-container {
  background: #fff !important;
  color: #333 !important;
}

/* Login */
.login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
}

.logo-container {
    text-align: center;
    margin-bottom: 40px;
}

.logo-icon {
    font-size: 4rem;
    color: var(--background-light);
    margin-bottom: 10px;
}

/* Estilos para el logo de imagen */
.logo-img {
    height: 80px;
    width: auto;
    max-width: 200px;
    /* Imagen ya viene sin fondo desde Canva */
    background: transparent;
    /* Hacer el logo blanco visible en fondo azul */
    filter: brightness(0) invert(1);
    /* Asegurar que se vea bien en cualquier fondo */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    /* Transición suave */
    transition: transform 0.3s ease;
}

.logo-img:hover {
    transform: scale(1.05);
}

/* Estilos para el logo pequeño en perfil */
.logo-img-small {
    height: 60px;
    width: auto;
    max-width: 120px;
    /* Imagen ya viene sin fondo desde Canva */
    background: transparent;
    /* Hacer el logo blanco visible en fondo azul */
    filter: brightness(0) invert(1);
    /* Asegurar que se vea bien en cualquier fondo */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    /* Transición suave */
    transition: transform 0.3s ease;
}

.logo-img-small:hover {
    transform: scale(1.05);
}

.app-title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--background-light);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.login-form {
    background: var(--background-light);
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    width: 100%;
    max-width: 400px;
}

.input-group {
    position: relative;
    margin-bottom: 20px;
}

.input-group i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    z-index: 1;
}

.input-group input,
.input-group select {
    width: 100%;
    padding: 15px 15px 15px 45px;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 16px;
    transition: var(--transition);
    background-color: var(--background-light);
}

.input-group input:focus,
.input-group select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(27, 152, 224, 0.1);
}

.btn-primary {
    width: 100%;
    padding: 15px;
    background: var(--primary-color);
    color: var(--background-light);
    border: none;
    border-radius: var(--border-radius);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    margin-bottom: 20px;
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(27, 152, 224, 0.3);
}

.login-links {
    text-align: center;
}

.login-links a {
    color: var(--primary-color);
    text-decoration: none;
    margin: 0 10px;
    font-weight: 500;
    transition: var(--transition);
    display: block;
    margin-bottom: 0.5rem;
}

.login-links a:hover {
    color: var(--primary-dark);
}

/* Estilos para checkbox personalizado */
.checkbox-group {
    margin: 1rem 0;
}

.checkbox-container {
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    font-size: 14px;
    user-select: none;
    color: var(--text-primary);
}

.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    transition: all 0.3s ease;
}

.checkbox-container:hover input ~ .checkmark {
    border-color: var(--primary-color);
}

.checkbox-container input:checked ~ .checkmark {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

.checkbox-container .checkmark:after {
    left: 6px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Estilos para radio buttons personalizados */
.radio-group {
    margin: 1rem 0;
}

.radio-label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.radio-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.radio-container {
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    font-size: 14px;
    user-select: none;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.radio-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.radio-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.radio-container:hover input ~ .radio-checkmark {
    border-color: var(--primary-color);
}

.radio-container input:checked ~ .radio-checkmark {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.radio-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.radio-container input:checked ~ .radio-checkmark:after {
    display: block;
}

.radio-container .radio-checkmark:after {
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

/* Estilos para sección de certificación */
.certification-section {
    background: var(--background-gray);
    padding: 1.5rem;
    border-radius: 8px;
    margin: 1rem 0;
    border: 1px solid var(--border-color);
}

.file-upload {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.file-preview {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #dee2e6;
    display: none;
}

.file-preview.show {
    display: block;
}

.file-preview img {
    max-width: 100px;
    max-height: 100px;
    object-fit: cover;
    border-radius: 4px;
}

.file-preview .file-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.file-preview .file-name {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 500;
}

.file-preview .file-size {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Registro */
.registro-container {
    padding: 20px;
    max-width: 600px;
    margin: 0 auto;
    background: var(--background-light);
    min-height: 100vh;
}

.header {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border-color);
}

.btn-back {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    margin-right: 15px;
    transition: var(--transition);
}

.btn-back:hover {
    color: var(--primary-color);
}

.header h2 {
    color: var(--text-primary);
    font-size: 1.8rem;
}

.registro-form {
    background: var(--background-light);
}

.tipo-usuario {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.radio-option {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 15px;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
    background: var(--background-light);
}

.radio-option:hover {
    border-color: var(--primary-color);
}

.radio-option input[type="radio"] {
    display: none;
}

.radio-option input[type="radio"]:checked + .radio-custom {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.radio-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    margin-right: 10px;
    position: relative;
    transition: var(--transition);
}

.radio-option input[type="radio"]:checked + .radio-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
}

.radio-option i {
    margin-right: 8px;
    color: var(--primary-color);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.btn-map {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    cursor: pointer;
    transition: var(--transition);
}

.btn-map:hover {
    background: var(--primary-dark);
}

.foto-upload {
    margin: 20px 0;
}

.upload-label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
    background: var(--background-gray);
}

.upload-label:hover {
    border-color: var(--primary-color);
    background: rgba(27, 152, 224, 0.05);
}

.upload-label i {
    margin-right: 10px;
    color: var(--primary-color);
}

.foto-preview {
    margin-top: 15px;
    text-align: center;
}

.foto-preview img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--primary-color);
}

/* Header de la aplicación */
.header-app {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: var(--background-light);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-app h2 {
    color: var(--primary-color);
    font-size: 1.5rem;
    font-weight: 700;
}

.btn-notifications {
    position: relative;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}

.btn-notifications:hover {
    color: var(--primary-color);
}

/* Badge de notificaciones - estilos eliminados para usar JavaScript */

/* Estilos para notificaciones */
.notificacion-item {
    transition: background-color 0.2s ease;
}

.notificacion-item:hover {
    background-color: #f5f5f5;
}

.notificacion-no-leida {
    background-color: #f0f8ff;
    border-left: 3px solid #1976D2;
}

.notificacion-leida {
    background-color: #fff;
    border-left: 3px solid #ddd;
}

/* Búsqueda */
.search-section {
    padding: 20px;
    background: var(--background-light);
    border-bottom: 1px solid var(--border-color);
}

/* Servicios */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    padding: 20px;
}

.service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background: var(--background-light);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.service-card i {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.service-card span {
    font-weight: 600;
    color: var(--text-primary);
}

.add-service-card {
    border: 2px dashed var(--primary-color);
    background: rgba(13, 71, 161, 0.05);
}

.add-service-card:hover {
    background: rgba(13, 71, 161, 0.1);
    border-color: var(--primary-dark);
}

.add-service-card i {
    color: var(--primary-color);
    font-size: 2rem;
}

.nuevo-servicio-form {
    padding: 20px;
}

.nuevo-servicio-form .input-group {
    margin-bottom: 20px;
}

.nuevo-servicio-form textarea {
    width: 100%;
    padding: 15px 15px 15px 45px;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 16px;
    transition: var(--transition);
    background-color: var(--background-light);
    resize: vertical;
    font-family: inherit;
}

.nuevo-servicio-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(13, 71, 161, 0.1);
}

.tecnicos-modal-list {
    max-height: 400px;
    overflow-y: auto;
    padding: 20px;
}

.tecnicos-modal-list .technician-card {
    margin-bottom: 15px;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.tecnicos-modal-list .technician-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 10px rgba(13, 71, 161, 0.1);
}

.tecnicos-modal-list .technician-card button {
    margin-left: auto;
    padding: 8px 15px;
    font-size: 0.9rem;
}

.map-button {
    text-align: center;
    margin-top: 20px;
    padding: 0 20px;
}

.map-button button {
    width: 100%;
    max-width: 300px;
}

.map-popup {
    text-align: center;
    min-width: 200px;
}

.map-popup h4 {
    margin: 0 0 10px 0;
    color: var(--primary-color);
    font-size: 1.1rem;
}

.map-popup p {
    margin: 5px 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.map-popup button {
    margin-top: 10px;
    padding: 8px 15px;
    font-size: 0.9rem;
}

/* Dashboard de técnico */
.tecnico-dashboard {
    padding: 20px;
}

.dashboard-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}

.btn-dashboard {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: var(--background-light);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
    text-align: left;
    position: relative;
}

.btn-dashboard:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 15px rgba(13, 71, 161, 0.1);
}

.btn-dashboard i {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-right: 15px;
}

.btn-dashboard span {
    font-weight: 600;
    color: var(--text-primary);
}

.btn-dashboard .badge {
    background: var(--accent-color);
    color: white;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
}

.tecnico-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.stat-card {
    display: flex;
    align-items: center;
    padding: 20px;
    background: var(--background-light);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.stat-card i {
    font-size: 2rem;
    color: var(--primary-color);
    margin-right: 15px;
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Trabajos realizados */
.trabajos-container {
    padding: 20px;
}

.upload-section {
    margin-bottom: 30px;
    text-align: center;
}

.btn-upload {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 25px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
    font-weight: 600;
}

.btn-upload:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

.trabajos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}

.trabajo-item {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: var(--transition);
}

.trabajo-item:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.trabajo-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.trabajo-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: white;
    padding: 10px;
    font-size: 0.8rem;
}

/* Modal de trabajos realizados */
.trabajos-modal {
    max-height: 80vh;
    overflow-y: auto;
}

.trabajos-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
}

/* Error toast */
.toast.error {
    background: var(--accent-color);
}

.toast.error i {
    color: white;
}

/* Geolocalización en citas */
.cita-location {
    margin-top: 10px;
    padding: 10px;
    background: var(--background-gray);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary-color);
}

.cita-location i {
    color: var(--primary-color);
    margin-right: 8px;
}

/* Botón de trabajos realizados en perfil técnico */
.btn-trabajos-perfil {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
    font-weight: 600;
    margin-top: 20px;
}

.btn-trabajos-perfil:hover {
    background: var(--primary-dark);
}

/* Reseñas */
.reseñas-modal {
    max-height: 80vh;
    overflow-y: auto;
}

.resenas-container {
    padding: 20px;
}

.resenas-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.rating-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.rating-big {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-color);
}

.rating-stars {
    display: flex;
    gap: 5px;
}

.rating-stars i {
    color: var(--warning-color);
    font-size: 1.2rem;
}

.total-resenas {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.resenas-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.reseña-item {
    background: var(--background-light);
    border-radius: var(--border-radius);
    padding: 20px;
    box-shadow: var(--shadow);
}

.reseña-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.reseña-cliente {
    font-weight: 600;
    color: var(--text-primary);
}

.reseña-rating {
    display: flex;
    gap: 2px;
}

.reseña-rating i {
    font-size: 0.9rem;
    color: #ddd;
}

.reseña-rating i.filled {
    color: var(--warning-color);
}

.reseña-fecha {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-bottom: 10px;
}

.reseña-comentario {
    color: var(--text-primary);
    line-height: 1.5;
}

/* Mejorar estilos de popup del mapa */
.map-popup {
    text-align: center;
    min-width: 250px;
}

.map-popup h4 {
    margin: 0 0 10px 0;
    color: var(--primary-color);
    font-size: 1.1rem;
}

.map-popup p {
    margin: 5px 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.map-popup button {
    margin: 5px;
    padding: 8px 12px;
    font-size: 0.8rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.map-popup .btn-primary {
    background: var(--primary-color);
    color: white;
}

.map-popup .btn-secondary {
    background: var(--background-gray);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.map-popup .btn-primary:hover {
    background: var(--primary-dark);
}

.map-popup .btn-secondary:hover {
    background: var(--border-color);
}

/* Técnicos destacados */
.top-technicians {
    padding: 20px;
}

.top-technicians h3 {
    margin-bottom: 15px;
    color: var(--text-primary);
    font-size: 1.3rem;
}

.technicians-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.technician-card {
    display: flex;
    align-items: center;
    padding: 15px;
    background: var(--background-light);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.technician-card:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.technician-photo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    border: 3px solid var(--primary-color);
}

.technician-info {
    flex: 1;
}

.technician-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 5px;
}

.technician-service {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.technician-rating {
    display: flex;
    align-items: center;
    gap: 5px;
}

.technician-rating i {
    color: var(--warning-color);
}

.technician-rating span {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.technician-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.technician-actions button {
    flex: 1;
    padding: 8px 12px;
    font-size: 0.8rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.technician-actions .btn-primary {
    background: var(--primary-color);
    color: white;
}

.technician-actions .btn-secondary {
    background: var(--background-gray);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.technician-actions .btn-primary:hover {
    background: var(--primary-dark);
}

.technician-actions .btn-secondary:hover {
    background: var(--border-color);
}

/* Navegación inferior */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--background-light);
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    padding: 10px;
    border-radius: var(--border-radius);
}

.nav-item i {
    font-size: 1.5rem;
    margin-bottom: 5px;
    color: var(--primary-color);
}

.nav-item span {
    font-size: 0.8rem;
    color: var(--primary-color);
}

.nav-item.active i,
.nav-item.active span {
    color: var(--primary-color);
}

.nav-item:hover {
    background: rgba(27, 152, 224, 0.1);
}

/* Tabs */
.tabs {
    display: flex;
    background: var(--background-light);
    border-bottom: 1px solid var(--border-color);
    padding: 0 20px;
}

.tab-btn {
    flex: 1;
    padding: 15px;
    background: none;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-secondary);
    font-weight: 500;
    border-bottom: 3px solid transparent;
}

.tab-btn.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.tab-content {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 80px; /* Espacio para navegación inferior */
}

.tab-pane {
    display: none;
    padding: 20px;
}

.tab-pane.active {
    display: block;
}

/* Listas de citas y solicitudes */
.citas-list,
.solicitudes-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.cita-card,
.solicitud-card {
    background: var(--background-light);
    border-radius: var(--border-radius);
    padding: 20px;
    box-shadow: var(--shadow);
    transition: var(--transition);
    cursor: pointer;
}

.cita-card:hover,
.solicitud-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.cita-header,
.solicitud-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.cita-status,
.solicitud-status {
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.status-pendiente {
    background: rgba(243, 156, 18, 0.1);
    color: var(--warning-color);
}

.status-confirmada {
    background: rgba(39, 174, 96, 0.1);
    color: var(--success-color);
}

.status-cancelada {
    background: rgba(231, 76, 60, 0.1);
    color: var(--accent-color);
}

.cita-info,
.solicitud-info {
    margin-bottom: 10px;
}

.cita-date,
.solicitud-date {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 5px;
}

.cita-service,
.solicitud-service {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.cita-actions,
.solicitud-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.btn-secondary {
    padding: 8px 15px;
    background: var(--background-gray);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.9rem;
}

.btn-secondary:hover {
    background: var(--border-color);
}

/* Perfil */
.profile-container {
    padding: 20px;
    text-align: center;
}

.profile-photo {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
}

.profile-photo img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--primary-color);
}

.btn-edit-photo {
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    cursor: pointer;
    transition: var(--transition);
}

.btn-edit-photo:hover {
    background: var(--primary-dark);
}

.profile-container h3 {
    color: var(--text-primary);
    margin-bottom: 10px;
    font-size: 1.5rem;
}

.rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-bottom: 30px;
}

.rating i {
    color: var(--warning-color);
}

.rating span {
    color: var(--text-secondary);
}

.profile-data {
    text-align: left;
    max-width: 400px;
    margin: 0 auto;
}

.data-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
}

.data-item:last-child {
    border-bottom: none;
}

.data-item .label {
    font-weight: 600;
    color: var(--text-primary);
    min-width: 100px;
}

.data-item .value {
    flex: 1;
    color: var(--text-secondary);
    margin: 0 15px;
}

.btn-edit {
    background: none;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    transition: var(--transition);
    padding: 5px;
}

.btn-edit:hover {
    color: var(--primary-dark);
}

.btn-logout {
    width: 100%;
    padding: 15px;
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    margin-top: 30px;
}

.btn-logout:hover {
    background: #c0392b;
}

/* Modales */
.modal {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(255, 255, 255, 0.95) !important;
    z-index: 1000 !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Modal de reserva de servicio con fondo blanco */
#modal-reserva-servicio {
    background: rgba(255, 255, 255, 0.95) !important;
    z-index: 999999 !important;
}

#modal-reserva-servicio .modal-content {
    background: white !important;
    border-radius: 22px !important;
    box-shadow: 0 8px 32px 0 rgba(13,71,161,0.18) !important;
    max-width: 500px !important;
    width: 95% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
}

#modal-reserva-servicio #reserva-mapa-container {
    width: 100% !important;
    height: 400px !important;
    min-height: 400px !important;
    border: 2px solid #1976D2 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    position: relative !important;
    background: #f8f9fa !important;
}

#modal-reserva-servicio #reserva-mapa {
    width: 100% !important;
    height: 100% !important;
    min-height: 400px !important;
    background: #e3f2fd !important;
    border-radius: 8px !important;
}

.modal.active {
    display: flex !important;
}

#modal-tipo-usuario {
    display: none !important;
    background: rgba(255, 255, 255, 0.95) !important;
}

/* Modal de recuperar contraseña con fondo blanco */
#modal-recuperar-password {
    background: rgba(255, 255, 255, 0.95) !important;
}

#modal-recuperar-password .modal-content {
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    padding: 2rem !important;
    margin: 1rem !important;
}

#modal-tipo-usuario.active {
    display: flex !important;
    background: rgba(255, 255, 255, 0.95) !important;
}

#modal-tipo-usuario[style*="flex"] {
    display: flex !important;
    background: rgba(255, 255, 255, 0.95) !important;
}

/* Modal de feedback con fondo blanco */
#modal-feedback-app {
    background: rgba(255, 255, 255, 0.95) !important;
}

#modal-feedback-app[style*="flex"] {
    display: flex !important;
    background: rgba(255, 255, 255, 0.95) !important;
}

#modal-feedback-app .modal-content {
    background: white !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important;
}

/* Modal de comentarios con fondo blanco */
#modal-comentarios {
    background: rgba(255, 255, 255, 0.95) !important;
}

#modal-comentarios[style*="flex"] {
    display: flex !important;
    background: rgba(255, 255, 255, 0.95) !important;
}

#modal-comentarios .modal-content {
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    padding: 2rem !important;
}

/* Estilos para el scroll del modal de comentarios */
#modal-comentarios .modal-content::-webkit-scrollbar {
    width: 8px !important;
}

#modal-comentarios .modal-content::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 4px !important;
}

#modal-comentarios .modal-content::-webkit-scrollbar-thumb {
    background: #1976D2 !important;
    border-radius: 4px !important;
}

#modal-comentarios .modal-content::-webkit-scrollbar-thumb:hover {
    background: #1565C0 !important;
}

/* Asegurar que los botones del modal de comentarios sean visibles */
#modal-comentarios button {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1000 !important;
}

#modal-comentarios #btn-enviar-comentarios {
    background: #1976D2 !important;
    color: white !important;
    border: none !important;
    padding: 1rem 2rem !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-weight: bold !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
}

#modal-comentarios #btn-enviar-comentarios:hover {
    background: #1565C0 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3) !important;
}

#modal-comentarios #btn-enviar-comentarios:disabled {
    background: #ccc !important;
    cursor: not-allowed !important;
    opacity: 0.5 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ===== ESTILOS FORZADOS PARA MODALES DE CHAT ===== */

/* Modal de chat para comentarios - FORZAR VISIBILIDAD */
#modal-chat-comentarios {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(255,255,255,0.95) !important;
    z-index: 999999 !important;
    justify-content: center !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Modal de chat con técnico desde soporte - FORZAR VISIBILIDAD */
#modal-chat-tecnico-soporte {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(255,255,255,0.95) !important;
    z-index: 999999 !important;
    justify-content: center !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Contenido de los modales - FORZAR VISIBILIDAD */
#modal-chat-comentarios .modal-content,
#modal-chat-tecnico-soporte .modal-content {
    background: white !important;
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1000000 !important;
}

/* Clase para forzar visibilidad de modales */
.modal-forzado {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(255,255,255,0.95) !important;
    z-index: 999999 !important;
    justify-content: center !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Estados cerrados de los modales */
#modal-chat-comentarios[style*="none"],
#modal-chat-tecnico-soporte[style*="none"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* ===== ESTILOS PARA CARDS DE CHAT ===== */

/* Cards de chat con soporte */
.chat-card {
    background: white !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
}

.chat-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

/* Indicador de tipo de chat */
.chat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #1976D2;
    z-index: 1;
}

/* Tipos de chat específicos */
.chat-card[data-tipo="comentarios"]::before {
    background: #FF9800 !important;
}

.chat-card[data-tipo="soporte_tecnico"]::before {
    background: #4CAF50 !important;
}

.chat-card[data-tipo="consulta_general"]::before {
    background: #1976D2 !important;
}

.chat-card[data-tipo="problema_cliente"]::before {
    background: #E91E63 !important;
}

.chat-card[data-tipo="problema_tecnico"]::before {
    background: #FF9800 !important;
}

/* Botones de acción en las cards */
.chat-card button {
    transition: all 0.3s ease !important;
    font-weight: bold !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}

.chat-card button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

/* Botón principal de nuevo chat */
.btn-nuevo-chat {
    background: linear-gradient(135deg, #4CAF50, #45a049) !important;
    color: white !important;
    border: none !important;
    padding: 1.2rem 2.5rem !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    font-size: 1.1rem !important;
    font-weight: bold !important;
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4) !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.btn-nuevo-chat:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(76, 175, 80, 0.5) !important;
}

/* Botón de nuevo chat para técnicos */
.btn-nuevo-chat-tecnico {
    background: linear-gradient(135deg, #1976D2, #1565C0) !important;
    box-shadow: 0 6px 20px rgba(25, 118, 210, 0.4) !important;
}

.btn-nuevo-chat-tecnico:hover {
    box-shadow: 0 8px 25px rgba(25, 118, 210, 0.5) !important;
}

/* ===== ANIMACIONES PARA MENSAJES DE CHAT ===== */

/* Animación de entrada para mensajes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Estilos para mensajes de chat */
.mensaje-chat {
    animation: fadeInUp 0.3s ease forwards;
    opacity: 0;
}

/* Estilos para el contenedor de mensajes */
#support-chat-messages,
#support-chat-messages-tecnico {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1rem;
    max-height: 60vh;
    overflow-y: auto;
    scroll-behavior: smooth;
}

/* Scrollbar personalizado para el chat */
#support-chat-messages::-webkit-scrollbar,
#support-chat-messages-tecnico::-webkit-scrollbar {
    width: 8px;
}

#support-chat-messages::-webkit-scrollbar-track,
#support-chat-messages-tecnico::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

#support-chat-messages::-webkit-scrollbar-thumb,
#support-chat-messages-tecnico::-webkit-scrollbar-thumb {
    background: #1976D2;
    border-radius: 4px;
}

#support-chat-messages::-webkit-scrollbar-thumb:hover,
#support-chat-messages-tecnico::-webkit-scrollbar-thumb:hover {
    background: #1565C0;
}

/* Estilos para el input de mensaje */
.input-mensaje-soporte {
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 1rem;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.input-mensaje-soporte:focus {
    outline: none;
    border-color: #1976D2;
    box-shadow: 0 4px 16px rgba(25, 118, 210, 0.2);
}

/* Botón de enviar mensaje */
.btn-enviar-mensaje-soporte {
    background: linear-gradient(135deg, #1976D2, #1565C0);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
}

.btn-enviar-mensaje-soporte:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(25, 118, 210, 0.4);
}

.btn-enviar-mensaje-soporte:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Todos los modales con fondo blanco por defecto */
.modal[style*="flex"] {
    background: rgba(255, 255, 255, 0.95) !important;
}

.modal.active {
    background: rgba(255, 255, 255, 0.95) !important;
}

/* Modales específicos adicionales con fondo blanco */
#modal-new-service,
#modal-reprogramar-cita,
#modal-urgencia,
#modal-nuevo-trabajo,
#modal-seleccion-ubicacion,
#modal-seleccion-ubicacion-trabajo,
#modal-ubicacion-trabajo,
#modal-trabajos-tecnico,
#modal-editar-perfil-cliente,
#modal-editar-perfil-tecnico,
#modal-cancelar-cita,
#modal-nueva-fecha {
    background: rgba(255, 255, 255, 0.95) !important;
}

/* Asegurar que todos los modales tengan fondo blanco cuando están activos */
.modal[style*="display: flex"],
.modal[style*="display:flex"],
.modal[style*="display: block"],
.modal[style*="display:block"] {
    background: rgba(255, 255, 255, 0.95) !important;
}

/* Selector universal para todos los modales - fondo blanco por defecto */
.modal {
    background: rgba(255, 255, 255, 0.95) !important;
}

/* Asegurar que el contenido del modal también sea blanco */
.modal .modal-content {
    background: white !important;
}

#modal-tipo-usuario .modal-content {
    background: white !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Botón de ubicación actual */
.btn-ubicacion-actual {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 1000 !important;
    background: white !important;
    border: 1px solid #ccc !important;
    border-radius: 2px !important;
    width: 28px !important;
    height: 28px !important;
    cursor: pointer !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
    display: flex !important;
    align-items: center !important;

/* ===== ESTILOS PARA CHATS CON SOPORTE MEJORADOS ===== */

/* Cards de chat */
.chat-card {
    background: white !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    cursor: pointer !important;
}

.chat-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
}

/* Contenedor de chats */
#lista-chats-cliente,
#lista-chats-tecnico {
    display: grid !important;
    gap: 1rem !important;
    max-height: 400px !important;
    overflow-y: auto !important;
}

/* Estado de chat */
.chat-card .estado-activo {
    background: #4CAF50 !important;
    color: white !important;
    padding: 0.3rem 0.8rem !important;
    border-radius: 20px !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
}

.chat-card .estado-espera {
    background: #FF9800 !important;
    color: white !important;
    padding: 0.3rem 0.8rem !important;
    border-radius: 20px !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
}

/* Botones de chat */
.chat-card button {
    background: #1976D2 !important;
    color: white !important;
    border: none !important;
    padding: 0.5rem 1rem !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    transition: background 0.2s ease !important;
}

.chat-card button:hover {
    background: #1565C0 !important;
}

/* Estado vacío de chats */
.chat-card .empty-state {
    text-align: center !important;
    padding: 3rem !important;
    color: #666 !important;
    background: #f8f9fa !important;
    border-radius: 12px !important;
    border: 2px dashed #dee2e6 !important;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .chat-card {
        padding: 1rem !important;
    }
    
    #lista-chats-cliente,
    #lista-chats-tecnico {
        gap: 0.8rem !important;
    }
}
    justify-content: center !important;
    font-size: 14px !important;
    color: #666 !important;
    transition: all 0.2s ease !important;
    font-family: 'Roboto', Arial, sans-serif !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

.btn-ubicacion-actual:hover {
    background: #f8f9fa !important;
    border-color: #999 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}

.btn-ubicacion-actual:active {
    background: #e9ecef !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

.btn-ubicacion-actual:focus {
    outline: none !important;
    border-color: #007bff !important;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.25) !important;
}

/* Mejorar contenedor del mapa */
.map-container {
    position: relative !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

#map, #map-tecnico {
    width: 100% !important;
    height: 200px !important;
    border-radius: 8px !important;
}

.modal-content {
    background: var(--background-light);
    border-radius: var(--border-radius);
    max-width: 90%;
    max-height: 90%;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    color: var(--text-primary);
    font-size: 1.3rem;
}

.btn-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}

.btn-close:hover {
    color: var(--accent-color);
}

.map-container {
    width: 100%;
    height: 400px;
}

.modal-footer {
    display: flex;
    gap: 10px;
    padding: 20px;
    border-top: 1px solid var(--border-color);
}

.modal-footer button {
    flex: 1;
    padding: 12px;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
    font-weight: 600;
}

/* Toast */
.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--success-color);
    color: white;
    padding: 15px 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    display: none;
    align-items: center;
    gap: 10px;
    z-index: 1001;
    max-width: 300px;
}

.toast.active {
    display: flex;
}

.toast-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.toast i {
    font-size: 1.2rem;
}

.btn-close-toast {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 10px;
        padding: 15px;
    }
    
    .service-card {
        padding: 15px;
    }
    
    .service-card i {
        font-size: 2rem;
    }
    
    .modal-content {
        max-width: 95%;
        margin: 20px;
    }
    
    .map-container {
        height: 300px;
    }
    
    /* Ajustes para badges en móviles */
    .notification-badge {
        top: -2px;
        right: -2px;
        width: 16px;
        height: 16px;
        min-width: 16px;
        min-height: 16px;
        max-width: 16px;
        max-height: 16px;
        font-size: 10px;
    }
    
    .chat-badge {
        top: 1px;
        right: 1px;
        width: 16px;
        height: 16px;
        min-width: 16px;
        min-height: 16px;
        max-width: 16px;
        max-height: 16px;
        font-size: 10px;
    }
    
    /* Badge del técnico en móviles - más adentro */
    #technician-appointments .cita-action-btn .chat-badge,
    #solicitudes-recibidas-list .cita-action-btn .chat-badge,
    #citas-hoy-list .cita-action-btn .chat-badge {
        top: 3px;
        right: 3px;
    }
    
    /* Badge de notificaciones del técnico en móviles */
    #btn-notificaciones-tecnico .notification-badge {
        top: -2px !important;
        right: -2px !important;
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
        max-width: 16px !important;
        max-height: 16px !important;
        font-size: 7px !important;
        display: none !important; /* Oculto por defecto */
    }
    
    /* Forzar tamaño de fuente en móviles */
    #btn-notificaciones-tecnico .notification-badge,
    #btn-notificaciones-tecnico .notification-badge * {
        font-size: 7px !important;
        font-size: 7px !important;
        font-size: 7px !important;
    }
}

@media (max-width: 480px) {
    .login-form {
        padding: 30px 20px;
    }
    
    .app-title {
        font-size: 2.5rem;
    }
    
    .logo-icon {
        font-size: 3rem;
    }
    
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .tipo-usuario {
        flex-direction: column;
    }
    
    /* Ajustes adicionales para badges en pantallas muy pequeñas */
    .notification-badge {
        top: -1px;
        right: -1px;
        width: 14px;
        height: 14px;
        min-width: 14px;
        min-height: 14px;
        max-width: 14px;
        max-height: 14px;
        font-size: 8px;
    }
    
    .chat-badge {
        top: 0px;
        right: 0px;
    }
    
    #btn-notificaciones-tecnico .notification-badge {
        top: -1px !important;
        right: -1px !important;
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
        min-height: 14px !important;
        max-width: 14px !important;
        max-height: 14px !important;
        font-size: 5px !important;
        display: none !important; /* Oculto por defecto */
    }
    
    /* Forzar tamaño de fuente en pantallas muy pequeñas */
    #btn-notificaciones-tecnico .notification-badge,
    #btn-notificaciones-tecnico .notification-badge * {
        font-size: 5px !important;
        font-size: 5px !important;
        font-size: 5px !important;
    }
    
    /* Badge del técnico en pantallas muy pequeñas - más adentro */
    #technician-appointments .cita-action-btn .chat-badge,
    #solicitudes-recibidas-list .cita-action-btn .chat-badge,
    #citas-hoy-list .cita-action-btn .chat-badge {
        top: 2px;
        right: 2px;
    }
}

/* Animaciones */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pantalla.activa {
    animation: fadeIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.tab-pane.active {
    animation: slideIn 0.3s ease;
}

/* Estados de carga */
.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

.loading::after {
    content: '';
    width: 30px;
    height: 30px;
    border: 3px solid var(--border-color);
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Estados vacíos */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 15px;
    opacity: 0.5;
}

.empty-state h3 {
    margin-bottom: 10px;
    color: var(--text-primary);
}

.empty-state p {
    font-size: 0.9rem;
}

/* Estilos para Chat */
.chat-modal-content {
    max-width: 500px;
    height: 80vh;
    display: flex;
    flex-direction: column;
}

.chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background-color: var(--background-gray);
    border-radius: var(--border-radius);
    margin-bottom: 15px;
    max-height: 400px;
}

.message {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}

.own-message {
    align-items: flex-end;
}

.other-message {
    align-items: flex-start;
}

.message-content {
    max-width: 70%;
    padding: 12px 16px;
    border-radius: 18px;
    position: relative;
}

.own-message .message-content {
    background-color: var(--primary-color);
    color: white;
    border-bottom-right-radius: 4px;
}

.other-message .message-content {
    background-color: white;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-bottom-left-radius: 4px;
}

.message-content p {
    margin: 0;
    word-wrap: break-word;
}

.message-content small {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-top: 5px;
    display: block;
}

.chat-input-container {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 15px;
    background-color: white;
    border-top: 1px solid var(--border-color);
}

.chat-input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: 25px;
    font-size: 14px;
    transition: var(--transition);
}

.chat-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.btn-send {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-send:hover {
    background-color: var(--primary-dark);
    transform: scale(1.05);
}

/* Estilos para formulario de servicio */
.service-form {
    padding: 20px 0;
}

.service-form .input-group {
    margin-bottom: 20px;
}

.service-form textarea {
    resize: vertical;
    min-height: 80px;
}

/* Estilos del botón de ubicación movidos a la sección de mapas */

/* Estilos para servicios */
.service-card {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.service-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.service-card h3 {
    color: var(--primary-color);
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.service-card p {
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.status-pending {
    color: var(--warning-color);
    font-weight: 600;
}

.status-confirmed {
    color: var(--success-color);
    font-weight: 600;
}

.status-active {
    color: var(--primary-color);
    font-weight: 600;
}

.status-completed {
    color: var(--success-color);
    font-weight: 600;
}

.status-cancelled {
    color: var(--accent-color);
    font-weight: 600;
}

.service-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.service-actions button {
    flex: 1;
    padding: 8px 16px;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 14px;
    transition: var(--transition);
}

.btn-success {
    background-color: var(--success-color);
    color: white;
}

.btn-success:hover {
    background-color: #229954;
}

/* Estilos específicos para botones de éxito en modales */
.btn.btn-success {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

.btn.btn-success:hover {
    background: #45a049;
}

/* Estilos para el botón de ubicación actual */
.input-group button[onclick*="seleccionarUbicacionActual"] {
    background: #4CAF50 !important;
    color: white !important;
    border: none !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    margin-left: 8px !important;
    font-size: 12px !important;
    transition: background-color 0.2s ease !important;
}

.input-group button[onclick*="seleccionarUbicacionActual"]:hover {
    background: #45a049 !important;
}

/* Estilos para el modal de selección de ubicación */
#modal-seleccion-ubicacion .modal-content {
    max-width: 600px !important;
    width: 95vw !important;
    height: 80vh !important;
}

/* Estilos para el modal de nueva fecha */
#modal-nueva-fecha .modal-content {
    max-width: 400px !important;
    width: 95vw !important;
}

#modal-nueva-fecha input,
#modal-nueva-fecha textarea {
    width: 100% !important;
    padding: 10px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    outline: none !important;
}

#modal-nueva-fecha input:focus,
#modal-nueva-fecha textarea:focus {
    border-color: #1976D2 !important;
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2) !important;
}

#modal-nueva-fecha textarea {
    min-height: 80px !important;
    resize: vertical !important;
}

#mapa-seleccion-ubicacion {
    width: 100% !important;
    height: 400px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    margin-bottom: 1rem !important;
}

#buscar-direccion-input {
    width: 100% !important;
    padding: 10px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    outline: none !important;
}

#buscar-direccion-input:focus {
    border-color: #1976D2 !important;
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2) !important;
}

.btn-danger {
    background-color: var(--accent-color);
    color: white;
}

.btn-danger:hover {
    background-color: #c0392b;
}

.no-services {
    text-align: center;
    color: var(--text-secondary);
    padding: 40px 20px;
    font-style: italic;
}

/* Estilos para geolocalización */
.location-indicator {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background-color: var(--background-gray);
    border-radius: 15px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.location-indicator i {
    color: var(--primary-color);
}

/* Estilos para notificaciones push */
.notification-permission {
    background-color: var(--warning-color);
    color: white;
    padding: 15px;
    border-radius: var(--border-radius);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.notification-permission button {
    background-color: white;
    color: var(--warning-color);
    border: none;
    padding: 8px 16px;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: 600;
}

/* Estilos para estados de carga */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--border-color);
    border-radius: 50%;
    border-top-color: var(--primary-color);
    animation: spin 1s ease-in-out infinite;
}

/* Estilos para errores */
.error-message {
    background-color: #fee;
    color: var(--accent-color);
    padding: 10px;
    border-radius: var(--border-radius);
    border: 1px solid #fcc;
    margin-bottom: 15px;
}

.success-message {
    background-color: #efe;
    color: var(--success-color);
    padding: 10px;
    border-radius: var(--border-radius);
    border: 1px solid #cfc;
    margin-bottom: 15px;
}

/* Responsive para chat */
@media (max-width: 768px) {
    .chat-modal-content {
        height: 90vh;
        margin: 20px;
    }
    
    .chat-messages {
        max-height: 300px;
    }
    
    .message-content {
        max-width: 85%;
    }
}

/* Modal de selección de tipo de usuario */
.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-content {
  background: #fff;
  padding: 2rem 1.5rem;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  text-align: center;
  min-width: 280px;
}
.modal-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin: 1.5rem 0;
}
.btn-close-modal {
  background: #eee;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 1rem;
}

/* El modal de nuevo servicio ya usa las clases .modal y .modal-content, así que no se requieren estilos adicionales. Si se quiere, se puede agregar un pequeño margen a los campos: */
#modal-nuevo-servicio .input-group {
  margin-bottom: 1rem;
}
#modal-nuevo-servicio textarea {
  width: 100%;
  resize: vertical;
  min-height: 60px;
}

/* Estilos para mapa integrado */
.map-input-container {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    position: relative !important;
    margin-bottom: 10px !important;
}

.map-input-container input {
    flex: 1 !important;
    padding: 12px 15px !important;
    padding-right: 60px !important; /* Espacio para el botón */
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    position: relative !important;
    z-index: 1 !important;
    background: white !important;
}

.btn-location {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: #007bff;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    min-width: 40px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-location:hover {
    background: #0056b3;
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

.btn-location i {
    font-size: 18px !important;
    color: white !important;
    font-weight: bold !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Asegurar que el botón sea visible en todos los navegadores */
.btn-location {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: #007bff !important;
    color: white !important;
    border: 2px solid #0056b3 !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    z-index: 100 !important;
    min-width: 44px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.btn-location:hover {
    background: #0056b3 !important;
    transform: translateY(-50%) scale(1.05) !important;
    box-shadow: 0 6px 16px rgba(0, 123, 255, 0.5) !important;
    border-color: #004085 !important;
}

.btn-location:hover i {
    transform: scale(1.1) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

.btn-location:active {
    transform: translateY(-50%) scale(0.95) !important;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.4) !important;
    background: #004085 !important;
}

.btn-location:active i {
    transform: scale(0.95) !important;
}

/* Estilos específicos para dispositivos móviles */
@media (max-width: 768px) {
    .btn-location {
        min-width: 48px !important;
        height: 44px !important;
        right: 6px !important;
    }
    
    .map-input-container input {
        padding-right: 65px !important;
    }
    
    .btn-location i {
        font-size: 20px !important;
    }
}

/* Estado de enfoque para accesibilidad */
.btn-location:focus {
    outline: 3px solid #ffc107 !important;
    outline-offset: 2px !important;
    background: #0056b3 !important;
}

.btn-location:focus i {
    transform: scale(1.05) !important;
}

/* Estados para dispositivos táctiles */
@media (hover: none) and (pointer: coarse) {
    .btn-location:hover {
        background: #007bff !important;
        transform: translateY(-50%) !important;
        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4) !important;
    }
    
    .btn-location:active {
        background: #004085 !important;
        transform: translateY(-50%) scale(0.98) !important;
    }
}

.map-container {
    width: 100%;
    height: 200px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-top: 10px;
    overflow: hidden;
}

#map, #map-tecnico {
    position: relative;
}

.btn-location-map {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: white;
    cursor: pointer;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.btn-location-map:hover {
    background: #f8f9fa;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transform: translateY(-1px);
}

.btn-location-map i {
    color: var(--primary-color);
    font-size: 16px;
}

#map, #map-tecnico {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.btn-location-native {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 44px;
  height: 44px;
  background: #4285F4;
  color: #fff;
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(60,64,67,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s;
}
.btn-location-native:hover {
  background: #3367d6;
}
.btn-location-native i {
  font-size: 1.5rem;
}

/* Selector de servicios */
.servicios-selector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 0 1rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.servicio-selector-card {
  background: #2196F3 !important;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(33,150,243,0.3);
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 100px;
  border: none;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.servicio-selector-card:hover, .servicio-selector-card:focus {
  background: #1565C0 !important;
  box-shadow: 0 8px 25px rgba(33,150,243,0.4);
  transform: translateY(-2px);
}
.servicio-icono {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
  line-height: 1;
}

/* Rodillo de pintura personalizado */
.rodillo-pintura {
  width: 40px;
  height: 40px;
  position: relative;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rodillo-pintura::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 35px;
  background: linear-gradient(90deg, #8B4513, #A0522D);
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.rodillo-pintura::after {
  content: '';
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 10px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F0F0F0 50%, #E0E0E0 100%);
  border: 2px solid #2196F3;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Icono de limpieza personalizado */
.limpieza-icono {
  width: 40px;
  height: 40px;
  position: relative;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: #FFFFFF;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Nuevos iconos personalizados para servicios */
.gasista-icono,
.plomero-icono,
.electricista-icono,
.tecnico-general-icono,
.aire-acondicionado-icono,
.carpintero-icono,
.jardinero-icono,
.durlero-icono,
.mecanico-icono,
.albañil-icono,
.automatizacion-icono,
.herrero-icono {
  width: 40px;
  height: 40px;
  position: relative;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: #FFFFFF;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.pintor-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 auto;
}

/* Icono personalizado para Durlero - Cubo geométrico */
.durlero-cubo {
  width: 40px;
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFD700;
  border-radius: 8px;
}

/* Cara superior del cubo */
.durlero-cubo .cubo-superior {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 20px;
  height: 20px;
  background: #000000;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* Cara lateral izquierda */
.durlero-cubo .cubo-lateral-izq {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg) skewY(-15deg);
  width: 20px;
  height: 15px;
  background: #333333;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* Cara lateral derecha */
.durlero-cubo .cubo-lateral-der {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg) skewY(15deg);
  width: 20px;
  height: 15px;
  background: #666666;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* Icono personalizado para Técnico General - 2 llaves cruzadas en X */
.tecnico-general-icono {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
}

.tecnico-general-icono::before {
  content: '🔧';
  position: absolute;
  transform: rotate(0deg);
  color: #FFFFFF;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.tecnico-general-icono::after {
  content: '🔧';
  position: absolute;
  transform: rotate(90deg);
  color: #FFFFFF;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Icono personalizado para Automatización de portones - Portón liso de 3 cuerpos */
.porton-liso {
  width: 40px;
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Cuerpo 1 del portón */
.porton-liso .porton-cuerpo-1 {
  position: absolute;
  top: 50%;
  left: 35%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 25px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F0F0F0 50%, #E0E0E0 100%);
  border: 1px solid #2196F3;
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Cuerpo 2 del portón */
.porton-liso .porton-cuerpo-2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 25px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F0F0F0 50%, #E0E0E0 100%);
  border: 1px solid #2196F3;
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Cuerpo 3 del portón */
.porton-liso .porton-cuerpo-3 {
  position: absolute;
  top: 50%;
  left: 65%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 25px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F0F0F0 50%, #E0E0E0 100%);
  border: 1px solid #2196F3;
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Motor del portón liso */
.porton-liso .motor-porton-liso {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 10px;
  background: linear-gradient(180deg, #E74C3C 0%, #C0392B 100%);
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.servicio-nombre {
  color: #FFFFFF;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.01em;
  width: 100%;
  max-width: 100%;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  line-height: 1.2;
  word-wrap: break-word;
}

/* Técnicos destacados */
.tecnicos-destacados-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.tecnico-destacado-card {
  background: white;
  border-radius: 12px;
  padding: 1.2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #e0e0e0;
}

.tecnico-destacado-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  border-color: #1976D2;
}

.tecnico-avatar {
  text-align: center;
  margin-bottom: 1rem;
}

.tecnico-info {
  text-align: center;
  margin-bottom: 1rem;
}

.tecnico-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  margin-top: 0.8rem;
  width: 100%;
  align-items: start;
  justify-items: stretch;
}

.tecnico-actions button {
  transition: all 0.2s ease;
}

.tecnico-actions button:hover {
  transform: scale(1.05);
}

/* Estilos para el mapa de servicios */
#mapa-google {
  width: 100%;
  height: 400px;
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

#mapa-servicios {
  position: relative;
  min-height: 400px;
  background: #f5f5f5;
  border-radius: 18px;
  padding: 1rem;
}

#btn-volver-selector {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 10;
  background: #1976D2;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 2px 8px 0 rgba(13,71,161,0.13);
  cursor: pointer;
  transition: background 0.18s;
}

#btn-volver-selector:hover {
  background: #0D47A1;
}

#btn-ubicacion-actual {
  position: absolute;
  bottom: 18px;
  right: 18px;
  z-index: 10;
  background: #fff;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px 0 rgba(13,71,161,0.13);
  cursor: pointer;
  transition: background 0.18s;
}

#btn-ubicacion-actual:hover {
  background: #f0f0f0;
}

.destacados-lista {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  align-items: stretch;
}
.tecnico-destacado-card {
  background: rgba(255,255,255,0.93);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(13,71,161,0.08);
  padding: 0.9rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  max-width: 100%;
}
.tecnico-avatar {
  font-size: 2rem;
  background: #e3eafc;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tecnico-info {
  flex: 1;
  min-width: 0;
}
.tecnico-nombre {
  font-size: 1.04rem;
  font-weight: 600;
  color: #0D47A1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tecnico-servicio {
  font-size: 0.97rem;
  color: #1976D2;
}
.tecnico-calificacion {
  font-size: 0.97rem;
  color: #27ae60;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.tecnico-destacado-card .btn {
  font-size: 0.93rem;
  padding: 0.35rem 0.8rem;
  margin-left: 0.5rem;
  border-radius: 7px;
}

/* Estrellas de calificación */
.stars {
  color: #FFD600;
  font-size: 1.1rem;
  margin-right: 0.2rem;
  letter-spacing: -1px;
  display: inline-block;
}

body, .pantalla#client-main, #client-main .main-container, #client-main .main-content {
  background: #f7f9fb !important;
  min-height: 100vh;
}

#client-main .main-container {
  background: transparent !important;
  box-shadow: none !important;
}

#client-home {
  background: transparent !important;
  box-shadow: none !important;
}

/* Mejorar cards del selector de servicios sobre fondo azul */
.servicio-selector-card {
  background: rgba(255,255,255,0.18);
  border: 1.5px solid #e3eafc;
  color: #fff;
  box-shadow: 0 4px 18px rgba(13,71,161,0.13);
}
.servicio-selector-card:hover {
  background: rgba(255,255,255,0.28);
  box-shadow: 0 8px 24px rgba(13,71,161,0.18);
}
.servicio-nombre {
  color: #fff;
  text-shadow: 0 1px 4px rgba(13,71,161,0.13);
}

/* Barra de navegación inferior mejorada */
.bottom-nav {
  background: #fff;
  box-shadow: 0 -2px 16px rgba(13,71,161,0.10);
  border-radius: 18px 18px 0 0;
  padding: 0.7rem 0.7rem 0.5rem 0.7rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}
.bottom-nav .nav-btn {
  background: none;
  border: none;
  outline: none;
  color: #b0b8c1;
  font-size: 1.55rem;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.45rem 0.8rem 0.3rem 0.8rem;
  border-radius: 12px;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  cursor: pointer;
}
.bottom-nav .nav-btn.active, .bottom-nav .nav-btn:focus {
  background: #e3eafc;
  color: #1976D2;
  box-shadow: 0 2px 8px rgba(13,71,161,0.10);
}
.bottom-nav .nav-btn span {
  font-size: 1.01rem;
  font-weight: 500;
  margin-top: 0.1rem;
}

.content-section { 
    display: none; 
    padding-bottom: 100px; /* Espacio para la navegación inferior */
}
.content-section.active { display: block; }

#header-TIVOR {
  background: #0056b3 !important;
}
#btn-notificaciones i {
  color: #fff;
  transition: color 0.18s;
}
#btn-notificaciones:hover i, #btn-notificaciones:focus i {
  color: #1976D2;
}

.services-grid {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 20px;
}
.service-card {
  max-width: 340px;
  width: 100%;
  margin: 0 auto;
}
@media (max-width: 600px) {
  .services-grid {
    padding: 10px;
    gap: 10px;
  }
  .service-card {
    max-width: 98vw;
    min-width: 0;
  }
}

/* Inputs de edición de perfil */
#form-editar-perfil input[type="text"],
#form-editar-perfil input[type="tel"] {
  border: 1.5px solid #b6c6e3;
  border-radius: 12px;
  background: #fff;
  padding: 0.7rem 1rem;
  font-size: 1.08rem;
  box-shadow: 0 2px 8px 0 rgba(13,71,161,0.04);
  margin-bottom: 0.2rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#form-editar-perfil input[type="text"]:focus,
#form-editar-perfil input[type="tel"]:focus {
  border-color: #1976D2;
  box-shadow: 0 0 0 2px #1976d23a;
}

/* Botón secundario moderno */
#form-editar-perfil .btn.btn-secondary {
  background: #e3eafc;
  color: #1976D2;
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 8px 0 rgba(13,71,161,0.04);
  font-weight: 500;
  transition: background 0.2s, color 0.2s;
}
#form-editar-perfil .btn.btn-secondary:hover {
  background: #d0dbf7;
  color: #0D47A1;
}

/* Tabs de citas */
.appointments-tabs .tab-btn {
  background: #e3eafc;
  color: #1976D2;
  border: none;
  border-radius: 16px 16px 0 0;
  padding: 0.7rem 1.3rem;
  font-size: 1.08rem;
  font-weight: 600;
  box-shadow: 0 2px 8px 0 rgba(13,71,161,0.04);
  transition: background 0.2s, color 0.2s;
  outline: none;
}
.appointments-tabs .tab-btn.active {
  background: #1976D2;
  color: #fff;
}
.appointments-tabs .tab-btn:not(.active):hover {
  background: #d0dbf7;
  color: #0D47A1;
}

/* Lista de citas */
.citas-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  align-items: center;
}
.cita-card {
  background: #fff !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 12px 0 rgba(13,71,161,0.07) !important;
  padding: 1.1rem 1.2rem 0.8rem 1.2rem !important;
  width: 100% !important;
  max-width: 370px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  position: relative !important;
  border: 1px solid #e0e0e0 !important;
}
.cita-card .cita-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.2rem;
}
.cita-card .cita-servicio {
  color: #1976D2;
  font-weight: 700;
  font-size: 1.08rem;
}
.cita-card .cita-estado {
  font-size: 0.98rem;
  font-weight: 500;
  border-radius: 8px;
  padding: 0.18rem 0.7rem;
  background: #e3eafc;
  color: #1976D2;
}
.cita-card .cita-estado.finalizada {
  background: #e0f7fa;
  color: #0097a7;
}
.cita-card .cita-estado.pendiente {
  background: #fff3e0;
  color: #f57c00;
}
.cita-card .cita-estado.cancelada {
  background: #ffebee;
  color: #c62828;
}
.cita-card .cita-info {
  font-size: 0.99rem;
  color: #333;
}
.cita-card .cita-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 15px;
}
.cita-card .cita-action-btn {
  min-width: 100px;
  max-width: 100%;
  width: 100%;
  white-space: normal;
  background: #1976D2;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0.5rem 1.7rem 0.5rem 0.7rem;
  font-size: 0.98rem;
  font-weight: 500;
  box-shadow: 0 2px 8px 0 rgba(13,71,161,0.04);
  transition: background 0.2s, color 0.2s;
  position: relative;
  overflow: hidden;
  text-align: center;
  word-break: normal;
}
.cita-card .cita-action-btn.secondary {
  background: #e3eafc;
  color: #1976D2;
}
.cita-card .cita-action-btn.secondary:hover {
  background: #d0dbf7;
  color: #0D47A1;
}
.cita-card .cita-action-btn:hover {
  background: #0D47A1;
  color: #fff;
}

.servicios-solicitados-list {
  margin: 0.2rem 0 0.2rem 1.1rem;
  padding: 0;
  list-style: disc inside;
  color: #1976D2;
  font-size: 0.98rem;
}
.servicios-solicitados-list li {
  margin-bottom: 0.1rem;
}

/* Checkboxes de servicios adicionales en el modal de reserva */
#servicios-adicionales-container label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 1.04rem;
  color: #1976D2;
  background: #f7f9fb;
  border-radius: 8px;
  padding: 0.45rem 0.8rem;
  margin-bottom: 0.18rem;
  cursor: pointer;
  transition: background 0.18s;
}
#servicios-adicionales-container label:hover {
  background: #e3eafc;
}
#servicios-adicionales-container input[type="checkbox"] {
  width: 1.15em;
  height: 1.15em;
  accent-color: #1976D2;
  border-radius: 4px;
  margin-right: 0.2em;
}
#servicios-adicionales-container label:last-child {
  margin-bottom: 0;
}
#servicios-adicionales-container > label > span {
  font-weight: 500;
  color: #0D47A1;
}

/* Tabs y listas de citas del técnico usan el mismo estilo que el cliente */
#technician-appointments .appointments-tabs .tab-btn {
  background: #e3eafc;
  color: #1976D2;
  border: none;
  border-radius: 16px 16px 0 0;
  padding: 0.7rem 1.3rem;
  font-size: 1.08rem;
  font-weight: 600;
  box-shadow: 0 2px 8px 0 rgba(13,71,161,0.04);
  transition: background 0.2s, color 0.2s;
  outline: none;
}
#technician-appointments .appointments-tabs .tab-btn.active {
  background: #1976D2;
  color: #fff;
}
#technician-appointments .appointments-tabs .tab-btn:not(.active):hover {
  background: #d0dbf7;
  color: #0D47A1;
}
#technician-appointments .citas-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  align-items: center;
}
#technician-appointments .cita-card {
  background: #fff !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 12px 0 rgba(13,71,161,0.07) !important;
  padding: 1.1rem 1.2rem 0.8rem 1.2rem !important;
  width: 100% !important;
  max-width: 370px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  position: relative !important;
  border: 1px solid #e0e0e0 !important;
}
#technician-appointments .cita-card .cita-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.2rem;
}
#technician-appointments .cita-card .cita-servicio {
  color: #1976D2;
  font-weight: 700;
  font-size: 1.08rem;
}
#technician-appointments .cita-card .cita-estado {
  font-size: 0.98rem;
  font-weight: 500;
  border-radius: 8px;
  padding: 0.18rem 0.7rem;
  background: #e3eafc;
  color: #1976D2;
}
#technician-appointments .cita-card .cita-estado.finalizada {
  background: #e0f7fa;
  color: #0097a7;
}
#technician-appointments .cita-card .cita-estado.pendiente {
  background: #fff3e0;
  color: #f57c00;
}
#technician-appointments .cita-card .cita-estado.cancelada {
  background: #ffebee;
  color: #c62828;
}

#technician-appointments .cita-card .cita-estado.rechazada {
  background: #f5f5f5;
  color: #9E9E9E;
  border: 1px solid #E0E0E0;
}
#technician-appointments .cita-card .cita-info {
  font-size: 0.99rem;
  color: #333;
}
#technician-appointments .cita-card .cita-actions {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  width: 100%;
}
.cita-card .cita-action-btn {
  flex: 1 1 0;
  min-width: 80px;
  max-width: 100%;
  width: auto;
  white-space: normal;
  background: #1976D2;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0.5rem 1.7rem 0.5rem 0.7rem;
  font-size: 0.98rem;
  font-weight: 500;
  box-shadow: 0 2px 8px 0 rgba(13,71,161,0.04);
  transition: background 0.2s, color 0.2s;
  position: relative;
  overflow: hidden;
  text-align: center;
  word-break: break-word;
}
#technician-appointments .cita-card .cita-action-btn.secondary {
  background: #e3eafc;
  color: #1976D2;
}
#technician-appointments .cita-card .cita-action-btn.secondary:hover {
  background: #d0dbf7;
  color: #0D47A1;
}
#technician-appointments .cita-card .cita-action-btn:hover {
  background: #0D47A1;
  color: #fff;
}

/* Mejor alineación y espaciado en el perfil del cliente */
#client-profile .profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.2rem;
}
#client-profile #datos-perfil,
#client-profile #form-editar-perfil {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}
#client-profile .data-item {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 1.04rem;
  background: #f7f9fb;
  border-radius: 8px;
  padding: 0.45rem 1rem;
  color: #1976D2;
}
#client-profile .data-item .label {
  font-weight: 500;
  color: #0D47A1;
}
#client-profile .data-item .value {
  color: #1976D2;
}
#client-profile .btn {
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}

/* Modales modernos */
.modal-content {
  box-shadow: 0 8px 32px 0 rgba(13,71,161,0.18) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg,#e3eafc 60%,#fff 100%) !important;
}
.modal-content textarea {
  background: #f7f9fb !important;
  border-radius: 12px !important;
  border: 1.5px solid #b6c6e3 !important;
  padding: 0.9rem 1.1rem !important;
  font-size: 1.09rem !important;
  color: #0D47A1 !important;
}
#logout-container {
  display: flex;
  justify-content: center;
  margin-top: 2.2rem;
}
#btn-logout {
  background: #c62828 !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 1.09rem;
  border: none;
  border-radius: 12px;
  padding: 0.9rem 2.2rem;
  box-shadow: 0 2px 8px 0 rgba(198,40,40,0.13);
  margin: 0 auto;
  transition: background 0.18s;
}
#btn-logout:hover {
  background: #b71c1c !important;
}

/* Textarea moderno y limpio para modales TIVOR */
#modal-reserva-servicio textarea,
#modal-coordinar-cita textarea,
#modal-responder-propuesta textarea {
  background: #fff !important;
  border-radius: 14px !important;
  border: 1.5px solid #b6c6e3 !important;
  padding: 1.1rem 1.2rem !important;
  font-size: 1.11rem !important;
  color: #0D47A1 !important;
  box-shadow: 0 2px 12px 0 rgba(13,71,161,0.07);
  margin-bottom: 0.2rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  resize: vertical;
}
#modal-reserva-servicio textarea:focus,
#modal-coordinar-cita textarea:focus,
#modal-responder-propuesta textarea:focus {
  border-color: #1976D2 !important;
  box-shadow: 0 0 0 2px #1976d23a !important;
}
#modal-reserva-servicio textarea::placeholder,
#modal-coordinar-cita textarea::placeholder,
#modal-responder-propuesta textarea::placeholder {
  color: #b0b8c1 !important;
  opacity: 1;
}

#toast-container {
  position: fixed !important;
  top: 24px !important;
  right: 24px !important;
  z-index: 99999 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  pointer-events: none;
}

/* Estilos unificados para chat-badge - usando los mismos estilos que notification-badge */

/* Estilos para propuestas de coordinación */
.propuesta-coordinacion {
  background: #e3f2fd;
  border: 1px solid #1976D2;
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
  animation: fadeIn 0.3s ease-in;
}

.propuesta-coordinacion:hover {
  background: #bbdefb;
  transition: background-color 0.2s ease;
}

/* Estilos para el modal de notificaciones */
#modal-notificaciones {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

/* Estilos específicos para forzar visibilidad de la campana */
#btn-notificaciones,
#btn-notificaciones-tecnico,
#btn-notificaciones-soporte {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  top: 50% !important;
  right: 24px !important;
  transform: translateY(-50%) !important;
  background: none !important;
  border: none !important;
  outline: none !important;
  cursor: pointer !important;
  z-index: 1000 !important;
}

#btn-notificaciones i,
#btn-notificaciones-tecnico i {
  color: #fff !important;
  font-size: 1.6rem !important;
  display: block !important;
  visibility: visible !important;
}

#btn-notificaciones:hover i,
#btn-notificaciones-tecnico:hover i {
  color: #e3f2fd !important;
  transform: scale(1.1) !important;
  transition: all 0.3s ease !important;
}

#modal-notificaciones.active {
  display: flex;
}

/* Estilos para el calendario */
.calendario-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.5rem;
  background: #f8f9fa;
  border-radius: 8px;
}

.calendario-dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  margin-bottom: 0.5rem;
}

.dia-header {
  text-align: center;
  font-weight: bold;
  color: #666;
  padding: 0.5rem;
  font-size: 0.9rem;
}

.calendario-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.dia-calendario {
  background: #fff;
  min-height: 80px;
  padding: 0.5rem;
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s;
}

.dia-calendario:hover {
  background: #f5f5f5;
}

.dia-calendario.otro-mes {
  background: #f8f9fa;
  color: #ccc;
}

.dia-calendario.hoy {
  background: #e3f2fd;
  font-weight: bold;
}

.dia-calendario.con-cita {
  background: #e8f5e8;
  border-left: 3px solid #4caf50;
}

.numero-dia {
  font-size: 0.9rem;
  font-weight: bold;
  margin-bottom: 0.3rem;
}

.cita-calendario {
  background: #1976D2;
  color: white;
  font-size: 0.7rem;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  margin-bottom: 0.2rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 3px solid #1565C0;
  transition: all 0.2s ease;
}

.cita-calendario:hover {
  background: #1565C0;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Estados de citas en calendario */
.cita-calendario.pendiente {
  background: #FF9800;
  border-left-color: #F57C00;
}

.cita-calendario.pendiente:hover {
  background: #F57C00;
}

.cita-calendario.confirmada {
  background: #4CAF50;
  border-left-color: #388E3C;
}

.cita-calendario.confirmada:hover {
  background: #388E3C;
}

.cita-calendario.pasada {
  background: #FF5722;
  border-left-color: #D84315;
}

.cita-calendario.pasada:hover {
  background: #D84315;
}

.cita-calendario.finalizada {
  background: #9E9E9E;
  border-left-color: #757575;
}

.cita-calendario.finalizada:hover {
  background: #757575;
}

.cita-calendario.cancelada {
  background: #F44336;
  border-left-color: #D32F2F;
}

.cita-calendario.cancelada:hover {
  background: #D32F2F;
}

.cita-calendario.rechazada {
  background: #9E9E9E;
  border-left-color: #757575;
}

.cita-calendario.rechazada:hover {
  background: #757575;
}

/* Estilos específicos para modales del técnico */
#modal-cita-detalle-tecnico {
  display: flex !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.8) !important;
  z-index: 9999 !important;
  align-items: center !important;
  justify-content: center !important;
}

#modal-citas-dia-tecnico {
  display: flex !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.8) !important;
  z-index: 9999 !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Modales con fondo blanco */
#modal-editar-perfil-cliente,
#modal-cancelar-cita,
.modal-overlay {
  background-color: rgba(255, 255, 255, 0.95) !important;
}

#modal-editar-perfil-cliente .modal-content,
#modal-cancelar-cita .modal-content,
.modal-overlay .modal-content {
  background: white !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
}

/* Estilos para respuestas automáticas */
.response-categories {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.category-btn {
  padding: 8px 16px;
  border: 2px solid #e0e0e0;
  background: white;
  color: #666;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.category-btn:hover {
  border-color: #1976D2;
  color: #1976D2;
}

.category-btn.active {
  background: #1976D2;
  border-color: #1976D2;
  color: white;
}

.auto-responses-container {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 12px;
}

.responses-list {
  max-height: 600px;
  overflow-y: auto;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Estilos para la billetera del técnico */
.wallet-header {
    text-align: center;
    margin-bottom: 2rem;
}

.wallet-header h3 {
    color: var(--primary-color);
    font-size: 1.5rem;
    font-weight: 600;
}

.wallet-balance {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

.balance-card {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: white;
    padding: 1.5rem;
    border-radius: var(--border-radius);
    text-align: center;
    box-shadow: var(--shadow);
}

.balance-card.debt {
    background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
}

.balance-title {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-bottom: 0.5rem;
}

.balance-amount {
    font-size: 1.8rem;
    font-weight: 700;
}

.wallet-actions {
    margin-bottom: 2rem;
}

.wallet-info {
    background: var(--background-gray);
    padding: 1rem;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary-color);
}

.wallet-info .info-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.wallet-info .info-item:last-child {
    margin-bottom: 0;
}

.wallet-info .info-item i {
    color: var(--primary-color);
    width: 16px;
}

/* Estilos mejorados para el perfil del técnico */
#technician-profile .profile-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 2rem 1.5rem;
    border-radius: var(--border-radius);
    margin-bottom: 2rem;
    text-align: center;
}

#technician-profile .profile-avatar {
    font-size: 4rem;
    margin-bottom: 1rem;
}

#technician-profile .profile-details h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

#technician-profile .profile-details p {
    opacity: 0.9;
    margin-bottom: 1rem;
}

#technician-profile .profile-info {
    padding: 0 1rem;
}

#technician-profile .info-section {
    background: white;
    padding: 1.5rem;
    border-radius: var(--border-radius);
    margin-bottom: 2rem;
    box-shadow: var(--shadow);
}

#technician-profile .info-section h4 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

#technician-profile .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--border-color);
}

#technician-profile .info-item:last-child {
    border-bottom: none;
}

#technician-profile .info-label {
    font-weight: 600;
    color: var(--text-primary);
}

#technician-profile .info-item span:last-child {
    color: var(--text-secondary);
}

#technician-profile .profile-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#technician-profile .profile-actions .btn {
    padding: 1rem;
    font-size: 1rem;
    border-radius: var(--border-radius);
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

/* Estilos para los botones de citas del técnico (mismo formato que cliente) */
#technician-appointments .cita-card .cita-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

#technician-appointments .cita-action-btn {
    position: relative;
    padding: 0.6rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--primary-color);
    color: white;
    min-width: 80px;
    width: auto;
    white-space: normal;
    word-break: normal;
    text-align: center;
    overflow: hidden;
}

#technician-appointments .cita-action-btn.secondary {
    background: var(--text-secondary);
}

#technician-appointments .cita-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Estilos para el modal de deuda pendiente */
.debt-warning-modal {
    background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
    color: white;
    padding: 2rem;
    border-radius: var(--border-radius);
    text-align: center;
    margin: 2rem 1rem;
}

.debt-warning-modal h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.debt-warning-modal p {
    opacity: 0.9;
    margin-bottom: 1.5rem;
}

.debt-warning-modal .btn {
    background: white;
    color: #f44336;
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

/* Estilos para el modal de tickets pendientes */
.pending-tickets-modal {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    color: white;
    padding: 2rem;
    border-radius: var(--border-radius);
    text-align: center;
    margin: 2rem 1rem;
}

.pending-tickets-modal h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.pending-tickets-modal p {
    opacity: 0.9;
    margin-bottom: 1.5rem;
}

.pending-tickets-modal .btn {
    background: white;
    color: #ff9800;
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

/* Responsive para la billetera */
@media (max-width: 768px) {
    .wallet-balance {
        grid-template-columns: 1fr;
    }
    
    .balance-amount {
        font-size: 1.5rem;
    }
    
    #technician-profile .info-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
    }
}

/* Responsive design mejorado */
@media (max-width: 768px) {
  /* Header responsive */
  #header-TIVOR {
    padding: 0.8rem 0 0.5rem 0 !important;
    margin-bottom: 1rem !important;
  }
  
  #header-TIVOR span {
    font-size: 1.8rem !important;
  }
  
  /* Navegación inferior */
  .bottom-nav {
    padding: 0.5rem 1rem !important;
  }
  
  .nav-btn {
    padding: 0.5rem 0.3rem !important;
    font-size: 0.8rem !important;
  }
  
  .nav-btn span {
    font-size: 0.75rem !important;
  }
  
  /* Contenido principal */
  .main-content {
    padding: 0 1rem !important;
  }
  
  /* Cards de estadísticas */
  .stats-grid {
    grid-template-columns: 1fr !important;
    gap: 0.8rem !important;
  }
  
  .stat-card {
    padding: 1rem !important;
  }
  
  .stat-number {
    font-size: 1.5rem !important;
  }
  
  /* Cards de citas */
  .cita-card {
    padding: 1rem !important;
    margin-bottom: 1rem !important;
  }
  
  .cita-actions {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  
  .cita-action-btn {
    width: 100% !important;
    padding: 0.8rem !important;
  }
  
  /* Perfil */
  .profile-header {
    padding: 1.5rem 1rem !important;
  }
  
  .profile-avatar {
    font-size: 3rem !important;
  }
  
  .info-section {
    padding: 1rem !important;
  }
  
  .profile-actions {
    gap: 0.8rem !important;
  }
  
  .profile-actions .btn {
    padding: 0.8rem !important;
  }
  
  /* Billetera */
  .wallet-balance {
    grid-template-columns: 1fr !important;
  }
  
  .balance-card {
    padding: 1rem !important;
  }
  
  .balance-amount {
    font-size: 1.5rem !important;
  }
  
  /* Tabs */
  .appointments-tabs {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  
  .tab-btn {
    width: 100% !important;
    padding: 0.8rem !important;
  }
  
  /* Modales */
  .modal-content {
    margin: 1rem !important;
    padding: 1.5rem 1rem !important;
    max-width: 90vw !important;
  }
  
  /* Toast notifications */
  #toast-container {
    top: 10px !important;
    right: 10px !important;
    left: 10px !important;
  }
  
  .toast {
    max-width: none !important;
    margin-bottom: 0.5rem !important;
  }
}

@media (max-width: 480px) {
  /* Header más pequeño */
  #header-TIVOR {
    padding: 0.6rem 0 0.4rem 0 !important;
  }
  
  #header-TIVOR span {
    font-size: 1.6rem !important;
  }
  
  /* Navegación más compacta */
  .bottom-nav {
    padding: 0.4rem 0.5rem !important;
  }
  
  .nav-btn {
    padding: 0.4rem 0.2rem !important;
    font-size: 0.7rem !important;
  }
  
  .nav-btn span {
    font-size: 0.7rem !important;
  }
  
  /* Contenido más compacto */
  .main-content {
    padding: 0 0.5rem !important;
  }
  
  /* Cards más compactas */
  .cita-card {
    padding: 0.8rem !important;
  }
  
  .stat-card {
    padding: 0.8rem !important;
  }
  
  /* Perfil más compacto */
  .profile-header {
    padding: 1rem 0.8rem !important;
  }
  
  .info-section {
    padding: 0.8rem !important;
  }
  
  /* Billetera más compacta */
  .balance-card {
    padding: 0.8rem !important;
  }
  
  /* Modales más compactos */
  .modal-content {
    margin: 0.5rem !important;
    padding: 1rem 0.8rem !important;
  }
}

/* Estilos para tablets */
@media (min-width: 769px) and (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  
  .cita-actions {
    flex-wrap: wrap !important;
  }
  
  .cita-action-btn {
    flex: 1 !important;
    min-width: 120px !important;
  }
}

/* Estilos para pantallas grandes */
@media (min-width: 1025px) {
  .main-content {
    max-width: 1200px !important;
    margin: 0 auto !important;
  }
  
  .stats-grid {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
  
  .cita-actions {
    justify-content: flex-start !important;
  }
  
  .cita-action-btn {
    min-width: 140px !important;
  }
}

/* Mejoras generales de accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none !important;
  }
  
  .cita-action-btn:hover {
    transform: none !important;
  }
}

/* Soporte para modo oscuro */
@media (prefers-color-scheme: dark) {
  .cita-card {
    background: #2d3748 !important;
    color: #e2e8f0 !important;
  }
  
  .info-section {
    background: #2d3748 !important;
    color: #e2e8f0 !important;
  }
  
  .modal-content {
    background: #2d3748 !important;
    color: #e2e8f0 !important;
  }
}

/* Estilos para el menú del técnico */
.profile-menu {
  padding: 0 1rem;
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  margin-bottom: 0.5rem;
  background: white;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: var(--transition);
  border: 1px solid var(--border-color);
}

.menu-item:hover {
  background: #f8f9fa;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.menu-item span {
  font-weight: 500;
  color: var(--text-primary);
}

.menu-item:last-child {
  margin-bottom: 0;
}

/* Estilos para el perfil del cliente (mismo estilo que técnico) */
#client-profile .profile-header {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  color: white;
  padding: 2rem 1.5rem;
  border-radius: var(--border-radius);
  margin-bottom: 2rem;
  text-align: center;
}

#client-profile .profile-avatar {
  font-size: 4rem;
  margin-bottom: 1rem;
}

#client-profile .profile-details h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

#client-profile .profile-details p {
  opacity: 0.9;
  margin-bottom: 1rem;
}

#client-profile .profile-info {
  padding: 0 1rem;
}

#client-profile .info-section {
  background: white;
  padding: 1.5rem;
  border-radius: var(--border-radius);
  margin-bottom: 2rem;
  box-shadow: var(--shadow);
}

#client-profile .info-section h4 {
  color: var(--primary-color);
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

#client-profile .info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--border-color);
}

#client-profile .info-item:last-child {
  border-bottom: none;
}

#client-profile .info-label {
  font-weight: 600;
  color: var(--text-primary);
}

#client-profile .info-item span:last-child {
  color: var(--text-secondary);
}

#client-profile .profile-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#client-profile .profile-actions .btn {
  padding: 1rem;
  font-size: 1rem;
  border-radius: var(--border-radius);
  border: none;
  cursor: pointer;
  transition: var(--transition);
}

/* Estilos para el header del técnico (más pequeño) */
#technician-main #header-TIVOR {
  padding: 0.8rem 0 0.5rem 0 !important;
  margin-bottom: 1rem !important;
}

#technician-main #header-TIVOR span {
  font-size: 1.8rem !important;
}

#technician-main .notification-btn i {
  font-size: 1.4rem !important;
}

/* Botón de cerrar sesión en rojo */
.menu-item[onclick*="logout"] {
  background: #c62828 !important;
  color: white !important;
}

.menu-item[onclick*="logout"]:hover {
  background: #b71c1c !important;
}

.menu-item[onclick*="logout"] span {
  color: white !important;
}

/* ===============================================
   🗓️ MODAL DE COORDINACIÓN DE FECHA Y HORA
   =============================================== */

.date-input-group, .time-input-group, .note-input-group {
  margin-bottom: 20px;
}

.date-input-group label, .time-input-group label, .note-input-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 14px;
}

.date-input, .time-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius);
  font-size: 16px;
  transition: var(--transition);
  background: var(--background-light);
}

.date-input:focus, .time-input:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 0 3px rgba(13, 71, 161, 0.1);
}

.note-input-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius);
  font-size: 14px;
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
  transition: var(--transition);
}

.note-input-group textarea:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 0 3px rgba(13, 71, 161, 0.1);
}

.note-input-group textarea::placeholder {
  color: var(--text-secondary);
}

.modal-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
  margin-top: 20px;
}

.btn-secondary {
  padding: 12px 24px;
  background: var(--background-gray);
  color: var(--text-primary);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

.btn-secondary:hover {
  background: var(--border-color);
  transform: translateY(-1px);
}

.btn-primary {
  padding: 12px 24px;
  background: var(--primary-color);
  color: white;
  border: 2px solid var(--primary-color);
  border-radius: var(--border-radius);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

.btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  transform: translateY(-1px);
}

/* ========================================
   🎯 SISTEMA PROFESIONAL DE ESTADOS DE CITAS
   ======================================== */

/* Timeline de estados de cita */
.cita-timeline {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 20px 0;
  padding: 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.timeline-step {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  position: relative;
  padding: 15px 0;
  transition: all 0.3s ease;
}

.timeline-step.actual {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 50%, #e3f2fd 100%);
  border-radius: 8px;
  padding: 20px 15px;
  border: 2px solid #2196F3;
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);
  animation: pulseBlue 2s infinite;
}

.timeline-step.completado {
  opacity: 0.8;
}

.timeline-step.pendiente {
  opacity: 0.5;
}

.timeline-step.no-aplica {
  opacity: 0.3;
  filter: grayscale(1);
}

.timeline-step.especial {
  background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 50%, #ffebee 100%);
  border-radius: 8px;
  padding: 20px 15px;
  border: 2px solid #f44336;
  margin-top: 20px;
}

.step-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
  font-weight: bold;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.step-content {
  flex: 1;
  padding-top: 5px;
}

.step-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.step-description {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
  line-height: 1.4;
}

.step-timestamp {
  font-size: 12px;
  color: #888;
  font-style: italic;
}

.step-connector {
  position: absolute;
  left: 24px;
  top: 65px;
  width: 2px;
  height: 40px;
  background: linear-gradient(to bottom, #ddd 0%, #bbb 100%);
  z-index: 1;
}

.timeline-step.actual .step-connector {
  background: linear-gradient(to bottom, #2196F3 0%, #1976D2 100%);
}

.timeline-step.completado .step-connector {
  background: linear-gradient(to bottom, #4CAF50 0%, #388E3C 100%);
}

/* Botones de acción para cambio de estado */
.cita-acciones {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  border-top: 3px solid #2196F3;
}

.btn-accion-estado {
  padding: 12px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}

.btn-accion-estado:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.btn-accion-estado.btn-primary {
  background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
  color: white;
}

.btn-accion-estado.btn-primary:hover {
  background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);
}

.btn-accion-estado.btn-secondary {
  background: linear-gradient(135deg, #757575 0%, #616161 100%);
  color: white;
}

.btn-accion-estado.btn-secondary:hover {
  background: linear-gradient(135deg, #616161 0%, #424242 100%);
}

/* Animaciones */
@keyframes pulseBlue {
  0% { box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2); }
  50% { box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4); }
  100% { box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2); }
}

/* Estados de citas en tarjetas principales (ACTUALIZADOS) */
.cita-card.solicitada {
  border-left-color: #2196F3 !important;
  background: linear-gradient(135deg, #fff 0%, #e3f2fd 100%) !important;
}

.cita-card.pendiente {
  border-left-color: #FF9800 !important;
  background: linear-gradient(135deg, #fff 0%, #FFF3E0 100%) !important;
}

.cita-card.aceptada {
  border-left-color: #4CAF50 !important;
  background: linear-gradient(135deg, #fff 0%, #e8f5e8 100%) !important;
}

.cita-card.en_camino {
  border-left-color: #9C27B0 !important;
  background: linear-gradient(135deg, #fff 0%, #f3e5f5 100%) !important;
}

.cita-card.en_progreso {
  border-left-color: #3F51B5 !important;
  background: linear-gradient(135deg, #fff 0%, #e8eaf6 100%) !important;
}

.cita-card.finalizada {
  border-left-color: #4CAF50 !important;
  background: linear-gradient(135deg, #fff 0%, #e8f5e8 100%) !important;
}

.cita-card.calificada {
  border-left-color: #4CAF50 !important;
  background: linear-gradient(135deg, #fff 0%, #e8f5e8 100%) !important;
}

.cita-card.cancelada {
  border-left-color: #F44336 !important;
  background: linear-gradient(135deg, #fff 0%, #ffebee 100%) !important;
}

.cita-card.problemática {
  border-left-color: #FF5722 !important;
  background: linear-gradient(135deg, #fff 0%, #fbe9e7 100%) !important;
}

.cita-card.reprogramada {
  border-left-color: #9C27B0 !important;
  background: linear-gradient(135deg, #fff 0%, #f3e5f5 100%) !important;
}

/* Estados legacy mantenidos para compatibilidad */
.cita-card.pendiente::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #FF9800, #FFB74D);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cita-card.pendiente:hover::before {
  opacity: 1;
}

.cita-card.confirmada {
  border-left-color: #4CAF50 !important;
  background: linear-gradient(135deg, #fff 0%, #E8F5E8 100%) !important;
}

.cita-card.confirmada::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #4CAF50, #81C784);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cita-card.confirmada:hover::before {
  opacity: 1;
}

.cita-card.pasada {
  border-left-color: #FF5722 !important;
  background: linear-gradient(135deg, #fff 0%, #FFEBEE 100%) !important;
}

.cita-card.pasada::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #FF5722, #FF8A65);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cita-card.pasada:hover::before {
  opacity: 1;
}

.cita-card.finalizada {
  border-left-color: #9E9E9E !important;
  background: linear-gradient(135deg, #fff 0%, #F5F5F5 100%) !important;
}

.cita-card.finalizada::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #9E9E9E, #BDBDBD);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cita-card.finalizada:hover::before {
  opacity: 1;
}

.cita-card.cancelada {
  border-left-color: #F44336 !important;
  background: linear-gradient(135deg, #fff 0%, #FFEBEE 100%) !important;
}

.cita-card.cancelada::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #F44336, #EF5350);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cita-card.cancelada:hover::before {
  opacity: 1;
}

/* Estilos para citas rechazadas */
.cita-card.rechazada {
  border-left-color: #9E9E9E !important;
  background: linear-gradient(135deg, #fff 0%, #FAFAFA 100%) !important;
  position: relative;
}

.cita-card.rechazada::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #9E9E9E, #BDBDBD);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cita-card.rechazada:hover::before {
  opacity: 1;
}

.cita-card.rechazada .cita-estado {
  color: #9E9E9E !important;
  background-color: #F5F5F5 !important;
  border: 1px solid #E0E0E0 !important;
}

.cita-card.rechazada .cita-info {
  color: #666 !important;
}

.cita-card.rechazada .cita-action-btn {
  opacity: 0.7;
  background-color: #F5F5F5 !important;
  color: #9E9E9E !important;
  border: 1px solid #E0E0E0 !important;
}

.cita-card.rechazada .cita-action-btn:hover {
  opacity: 0.9;
  background-color: #EEEEEE !important;
}

/* Responsive para servicios */
@media (max-width: 768px) {
  .servicios-selector-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
    max-width: 100%;
  }
  
  .servicio-selector-card {
    min-height: 80px;
    padding: 1rem 0.5rem;
  }
  
  .servicio-icono {
    font-size: 1.5rem;
  }
  
  .servicio-nombre {
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .servicios-selector-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
    padding: 0 0.5rem;
  }
  
  .servicio-selector-card {
    min-height: 70px;
    padding: 0.8rem 0.3rem;
  }
  
  .servicio-icono {
    font-size: 1.2rem;
  }
  
  .servicio-nombre {
    font-size: 0.6rem;
  }
}

/* Estilos para botones clickeables en la pantalla principal del técnico */
.stat-card.clickable {
  transition: all 0.3s ease;
  cursor: pointer;
}

.stat-card.clickable:hover {
  background: #1565C0;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.stat-card.clickable:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Estilos para la pantalla de Mis Trabajos */
.works-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 0 1rem;
}

.works-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 600;
}

.works-container {
    padding: 0 1rem;
}

.works-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.work-card {
    background: var(--background-light);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    transition: var(--transition);
    border: 1px solid var(--border-color);
}

.work-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.work-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.work-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.work-date {
    font-size: 0.9rem;
    color: var(--text-secondary);
    background: var(--background-gray);
    padding: 0.3rem 0.6rem;
    border-radius: 12px;
}

.work-description {
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.work-location {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.work-price {
    font-weight: 600;
    color: var(--success-color);
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.work-media {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.work-media-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1;
}

.work-media-item img,
.work-media-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.work-media-item .media-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.work-media-item:hover .media-overlay {
    opacity: 1;
}

.work-actions {
    display: flex;
    gap: 0.5rem;
}

.work-actions button {
    flex: 1;
    padding: 0.5rem;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition);
}

.work-actions .btn-edit {
    background: var(--primary-color);
    color: white;
}

.work-actions .btn-edit:hover {
    background: var(--primary-dark);
}

.work-actions .btn-delete {
    background: var(--accent-color);
    color: white;
}

.work-actions .btn-delete:hover {
    background: #c0392b;
}

/* Estilos para el modal de nuevo trabajo */
#modal-nuevo-trabajo {
    background: rgba(255, 255, 255, 0.95) !important;
}

#modal-nuevo-trabajo .modal-content {
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    background: white !important;
    border-radius: 22px !important;
    box-shadow: 0 8px 32px 0 rgba(13,71,161,0.18) !important;
}

.image-preview,
.video-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.preview-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1;
}

.preview-item img,
.preview-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-item .remove-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(255, 0, 0, 0.8);
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-item .remove-btn:hover {
    background: rgba(255, 0, 0, 1);
}

/* Estado vacío */
.works-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

.works-empty i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.works-empty h3 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
}

.works-empty p {
    margin: 0;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 768px) {
    .works-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .works-list {
        grid-template-columns: 1fr;
    }
    
    .work-media {
        grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    }
    
    .work-actions {
        flex-direction: column;
    }
}

/* Estilos para el mapa en el formulario de trabajos */
#trabajo-mapa-container {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-top: 0.5rem;
}

#trabajo-mapa {
    border-radius: var(--border-radius);
}

/* Estilos para el botón de selección de ubicación */
.input-group button[onclick*="abrirModalSeleccionUbicacionTrabajo"] {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 8px;
    font-size: 12px;
    transition: background 0.3s ease;
}

.input-group button[onclick*="abrirModalSeleccionUbicacionTrabajo"]:hover {
    background: #45a049;
}

/* Estilos para el modal de selección de ubicación de trabajos */
#modal-seleccion-ubicacion-trabajo .modal-content {
    max-width: 600px;
    width: 95vw;
    height: 80vh;
}

#mapa-seleccion-ubicacion-trabajo {
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 1rem;
}

#buscar-direccion-input-trabajo {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 1rem;
}

#buscar-direccion-input-trabajo:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(13, 71, 161, 0.1);
}

/* Estilos para el modal de trabajos del técnico */
#modal-trabajos-tecnico .modal-content {
    max-width: 600px;
    width: 95vw;
    max-height: 80vh;
}

#modal-trabajos-tecnico .trabajo-card {
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 1.2rem;
    margin-bottom: 1.2rem;
    background: #fafafa;
    transition: all 0.3s ease;
}

#modal-trabajos-tecnico .trabajo-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

#modal-trabajos-tecnico .trabajo-media {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}

#modal-trabajos-tecnico .trabajo-media-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1;
    cursor: pointer;
    transition: transform 0.3s ease;
}

#modal-trabajos-tecnico .trabajo-media-item:hover {
    transform: scale(1.05);
}

#modal-trabajos-tecnico .trabajo-media-item img,
#modal-trabajos-tecnico .trabajo-media-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#modal-trabajos-tecnico .trabajo-precio {
    font-weight: 600;
    color: #4CAF50;
    font-size: 1rem;
    margin-bottom: 0.8rem;
}

#modal-trabajos-tecnico .trabajo-ubicacion {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
}

#modal-trabajos-tecnico .btn-ver-mapa {
    background: #1976D2;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.3s ease;
}

#modal-trabajos-tecnico .btn-ver-mapa:hover {
    background: #1565C0;
}

/* Estilos para el modal de ubicación */
#modal-ubicacion-trabajo .modal-content {
    max-width: 500px;
    width: 95vw;
}

#mapa-ubicacion-trabajo {
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 1rem;
}

@media (max-width: 480px) {
    .works-header h3 {
        font-size: 1.3rem;
    }
    
    .work-card {
        padding: 1rem;
    }
    
    .work-title {
        font-size: 1.1rem;
    }
}

/* Estilos específicos para botones de asignar turno y llamar cliente */
.cita-action-btn[onclick*="asignarTurno"] {
    background: #1976D2 !important;
}

.cita-action-btn[onclick*="asignarTurno"]:hover {
    background: #1565C0 !important;
}

.cita-action-btn[onclick*="llamarCliente"] {
    background: #4CAF50 !important;
}

.cita-action-btn[onclick*="llamarCliente"]:hover {
    background: #45a049 !important;
}

/* Estilos para pantallas de soporte */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.section-header h3 {
    margin: 0;
    color: #333;
    font-size: 1.5rem;
}

.search-container {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.search-container input,
.search-container select {
    padding: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    min-width: 200px;
}

.search-container input:focus,
.search-container select:focus {
    outline: none;
    border-color: #1976D2;
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
}

.users-list {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.user-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
}

.user-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.user-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.user-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #1976D2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
}

.user-info h4 {
    margin: 0 0 0.5rem 0;
    color: #333;
    font-size: 1.2rem;
}

.user-info p {
    margin: 0;
    color: #666;
    font-size: 0.9rem;
}

.user-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.stat-item {
    text-align: center;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 6px;
}

.stat-label {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 0.2rem;
}

.stat-value {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
}

.user-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.user-actions button {
    flex: 1;
    min-width: 120px;
    padding: 0.8rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.user-actions .btn-call {
    background: #4CAF50;
    color: white;
}

.user-actions .btn-call:hover {
    background: #45a049;
}

.user-actions .btn-chat {
    background: #1976D2;
    color: white;
}

.user-actions .btn-chat:hover {
    background: #1565C0;
}

.user-actions .btn-view {
    background: #FF9800;
    color: white;
}

.user-actions .btn-view:hover {
    background: #F57C00;
}

.tickets-list,
.chats-list,
.services-list {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}

.ticket-card,
.chat-card,
.service-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
}

.ticket-card:hover,
.chat-card:hover,
.service-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.ticket-header,
.chat-header,
.service-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.ticket-title,
.chat-title,
.service-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.ticket-status,
.chat-status,
.service-status {
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
}

.ticket-status.pending,
.chat-status.unread,
.service-status.pending {
    background: #FFF3E0;
    color: #E65100;
}

.ticket-status.resolved,
.chat-status.read,
.service-status.completed {
    background: #E8F5E8;
    color: #2E7D32;
}

.ticket-info,
.chat-info,
.service-info {
    margin-bottom: 1rem;
}

.info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.info-label {
    font-weight: bold;
    color: #666;
}

.info-value {
    color: #333;
}

.ticket-actions,
.chat-actions,
.service-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ticket-actions button,
.chat-actions button,
.service-actions button {
    flex: 1;
    min-width: 100px;
    padding: 0.6rem;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Estilos específicos para botones de servicios */
.service-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.service-actions .btn-chat:last-child {
    grid-column: 1 / -1;
    width: 100%;
}

/* Estilos para badges de notificaciones de soporte */
#badge-tickets-soporte,
#badge-chats-soporte {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ff4444;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* Estilos para botones de gestión de deuda */
.debt-actions button {
    transition: all 0.3s ease;
}

.debt-actions button:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Estilos para botón de cerrar sesión */
.btn-logout {
    transition: all 0.3s ease;
}

.btn-logout:hover {
    background: #d32f2f !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 68, 68, 0.3);
}

.service-actions button {
    min-width: auto;
    font-size: 0.75rem;
    padding: 0.5rem;
}

.service-actions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Estilos específicos para el modal de editar perfil del técnico */
#modal-editar-perfil-tecnico {
    background: white !important;
    z-index: 999999 !important;
}

#modal-editar-perfil-tecnico .modal-content {
    background: white !important;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
}

/* ===== RESPONSIVE DESIGN COMPLETO ===== */

/* Variables responsive */
@media (max-width: 768px) {
  :root {
    --header-height: 60px;
    --bottom-nav-height: 70px;
    --content-padding: 1rem;
    --card-padding: 1rem;
    --modal-padding: 1rem;
  }
}

/* Base responsive - Pantallas pequeñas */
@media (max-width: 768px) {
  /* Ajustes generales */
  body {
    font-size: 14px;
    padding: 0;
    margin: 0;
  }

  /* Contenedores principales */
  .container, .app-container {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
  }

  /* Headers */
  .header {
    height: var(--header-height);
    padding: 0 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }

  .header h1 {
    font-size: 1.3rem;
    margin: 0;
  }

  /* Navegación inferior */
  .nav-bar, .bottom-nav {
    height: var(--bottom-nav-height);
    padding: 0.5rem 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: white;
    border-top: 1px solid #e9ecef;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
  }

  .nav-btn {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.25rem;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav-btn i {
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
  }

  /* Contenido principal */
  .main-content {
    padding: var(--content-padding);
    padding-bottom: calc(var(--bottom-nav-height) + 1rem);
    margin-top: var(--header-height);
    min-height: calc(100vh - var(--header-height) - var(--bottom-nav-height));
  }

  /* Cards y tarjetas */
  .card, .user-card, .service-card, .cita-card {
    margin: 0.5rem 0;
    padding: var(--card-padding);
    border-radius: 8px;
  }

  /* Formularios */
  .form-group {
    margin-bottom: 1rem;
  }

  .form-control, input, textarea, select {
    font-size: 16px; /* Evita zoom en iOS */
    padding: 0.75rem;
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
  }

  /* Botones */
  .btn {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
    touch-action: manipulation; /* Evita zoom al tocar */
  }

  .btn-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .btn-group .btn {
    width: 100%;
  }

  /* Modales */
  .modal {
    align-items: flex-end; /* Modales desde abajo en móvil */
  }

  .modal-content {
    width: 100%;
    max-width: 100%;
    max-height: 90vh;
    margin: 0;
    border-radius: 12px 12px 0 0;
    padding: var(--modal-padding);
    overflow-y: auto;
  }

  /* Grillas */
  .grid, .services-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    padding: 0.5rem;
  }

  /* Listas */
  .list-item {
    padding: 1rem;
    border-bottom: 1px solid #eee;
  }

  /* Mapas */
  .map-container {
    height: 250px;
    border-radius: 8px;
    margin: 1rem 0;
  }

  /* Chat */
  .chat-container {
    height: calc(100vh - var(--header-height) - var(--bottom-nav-height) - 100px);
  }

  .chat-messages {
    padding: 0.5rem;
    gap: 0.5rem;
  }

  .message {
    max-width: 85%;
    padding: 0.75rem;
    border-radius: 12px;
    font-size: 0.9rem;
  }

  /* Tablas */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 500px;
  }

  /* Notificaciones y toasts */
  .toast, .notification {
    left: 1rem;
    right: 1rem;
    transform: none;
    max-width: calc(100vw - 2rem);
  }

  /* Ajustes específicos para elementos que causan problemas */
  .overflow-hidden {
    overflow-x: hidden !important;
  }

  /* Stats y métricas */
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;
  }

  .stat-card {
    padding: 1rem;
    text-align: center;
  }

  /* Acciones de citas */
  .cita-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
  }

  .cita-actions .btn {
    width: 100%;
    padding: 0.5rem;
    font-size: 0.9rem;
  }

  /* Billetera */
  .wallet-cards {
    flex-direction: column;
    gap: 1rem;
  }

  .wallet-card {
    width: 100%;
    padding: 1.5rem;
  }
}

/* Extra pequeñas - 480px y menos */
@media (max-width: 480px) {
  :root {
    --header-height: 55px;
    --content-padding: 0.75rem;
    --card-padding: 0.75rem;
  }

  body {
    font-size: 13px;
  }

  .header h1 {
    font-size: 1.1rem;
  }

  .nav-btn {
    font-size: 0.7rem;
    padding: 0.4rem 0.1rem;
  }

  .nav-btn i {
    font-size: 1rem;
  }

  .grid, .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .btn {
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
  }

  .form-control, input, textarea, select {
    padding: 0.6rem;
    font-size: 15px;
  }

  .modal-content {
    padding: 0.75rem;
  }

  .message {
    font-size: 0.85rem;
    padding: 0.6rem;
  }
}

/* Landscape en móviles */
@media (max-width: 768px) and (orientation: landscape) {
  .main-content {
    padding-bottom: calc(var(--bottom-nav-height) + 0.5rem);
  }

  .chat-container {
    height: calc(100vh - var(--header-height) - var(--bottom-nav-height) - 60px);
  }
}

/* ===== MEJORAS TÁCTILES PARA MÓVILES ===== */
@media (max-width: 768px) {
  /* Mejorar área táctil */
  .btn, button, [role="button"], .clickable {
    min-height: 44px; /* Tamaño mínimo recomendado */
    min-width: 44px;
    position: relative;
    overflow: hidden;
  }

  /* Feedback táctil */
  .btn:active, button:active, [role="button"]:active, .clickable:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  /* Ripple effect */
  .btn::after, button::after, [role="button"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
    pointer-events: none;
  }

  .btn:active::after, button:active::after, [role="button"]:active::after {
    width: 100px;
    height: 100px;
  }

  /* Mejorar accesibilidad de los enlaces */
  a, .link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem;
  }

  /* Espaciado entre elementos clickeables */
  .btn + .btn, button + button {
    margin-top: 0.5rem;
  }

  /* Safe areas para dispositivos con notch */
  .header {
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  .nav-bar, .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* Evitar selección de texto accidental */
  .nav-btn, .btn, button, .card {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* Mejorar scroll */
  .main-content, .modal-content, .chat-messages {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Prevenir zoom accidental */
  input[type="text"], input[type="email"], input[type="password"], 
  input[type="number"], input[type="tel"], textarea, select {
    font-size: 16px !important; /* Evita zoom en iOS */
  }
}

/* ===== AJUSTES ESPECÍFICOS POR COMPONENTE ===== */
@media (max-width: 768px) {
  /* Login/Registro */
  .login-container, .register-container {
    padding: 1rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .login-form, .register-form {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
  }

  /* Header con navegación */
  .app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--primary-color);
    color: white;
    position: sticky;
    top: 0;
    z-index: 100;
  }

  /* Notificaciones móvil */
  .notification-btn {
    padding: 0.5rem;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Servicios grid móvil */
  .services-container {
    padding: 1rem;
  }

  .service-item {
    padding: 1rem;
    text-align: center;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
  }

  .service-item:active {
    transform: scale(0.98);
  }

  /* Chat móvil */
  .chat-header {
    padding: 1rem;
    background: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .chat-input-container {
    padding: 1rem;
    background: white;
    border-top: 1px solid #eee;
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
  }

  .chat-input {
    flex: 1;
    min-height: 40px;
    max-height: 120px;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 20px;
    resize: none;
    font-size: 16px;
  }

  .chat-send-btn {
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Citas móvil */
  .cita-item {
    padding: 1rem;
    margin: 0.5rem 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

  .cita-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
  }

  .cita-status {
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
  }

  /* Billetera móvil */
  .wallet-container {
    padding: 1rem;
  }

  .balance-card {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    padding: 2rem 1.5rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    text-align: center;
  }

  .balance-amount {
    font-size: 2.5rem;
    font-weight: bold;
    margin: 0.5rem 0;
  }

  /* Perfil móvil */
  .profile-container {
    padding: 1rem;
  }

  .profile-header {
    text-align: center;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    border-radius: 12px;
    margin-bottom: 1rem;
  }

  .profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 1rem;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
  }
}

/* Responsive para soporte */
@media (max-width: 768px) {
    .section-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .search-container {
        flex-direction: column;
    }
    
    .search-container input,
    .search-container select {
        min-width: auto;
    }
    
    .users-list {
        grid-template-columns: 1fr;
    }
    
    .tickets-list,
    .chats-list,
    .services-list {
        grid-template-columns: 1fr;
    }
    
    .user-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .user-actions {
        flex-direction: column;
    }
    
    .user-actions button {
        min-width: auto;
    }
}

/* === ESTILOS PARA DROPDOWN DE SERVICIOS EN REGISTRO === */

/* Dropdown de servicios */
.servicios-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
}

.servicios-dropdown.active {
  display: block;
}

.servicio-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-bottom: 1px solid #f0f0f0;
}

.servicio-item:last-child {
  border-bottom: none;
}

.servicio-item:hover {
  background-color: #f8f9fa;
}

.servicio-item .servicio-icono {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-right: 12px;
  flex-shrink: 0;
}

.servicio-item .servicio-nombre {
  font-size: 0.95rem;
  color: #333;
  font-weight: 500;
}

/* Chips de servicios seleccionados */
.chips-servicios {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  min-height: 40px;
}

.chip-servicio {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  color: white;
  cursor: default;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.chip-servicio:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Selector de colores */
.color-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.color-option {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid #e0e0e0;
}

.color-option:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Dropdown toggle */
.dropdown-toggle {
  width: 100%;
  padding: 12px 16px;
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.95rem;
  color: #333;
  transition: all 0.2s ease;
}

.dropdown-toggle:hover {
  border-color: #4CAF50;
  background-color: #f8f9fa;
}

.dropdown-arrow {
  font-size: 0.8rem;
  transition: transform 0.2s ease;
}

.servicios-dropdown.active + .dropdown-toggle .dropdown-arrow {
  transform: rotate(180deg);
}

/* Contenedor del dropdown */
.dropdown-container {
  position: relative;
  margin-bottom: 16px;
}

/* Botón de nuevo servicio */
.btn-nuevo-servicio {
  width: 100%;
  padding: 12px 16px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.2s ease;
  margin-top: 16px;
}

.btn-nuevo-servicio:hover {
  background: #45a049;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
}

/* Contador de servicios */
#contador-servicios {
  font-weight: bold;
  color: #4CAF50;
}

/* Responsive */
@media (max-width: 768px) {
  .servicios-dropdown {
    max-height: 250px;
  }
  
  .color-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  
  .servicio-item {
    padding: 10px 12px;
  }
  
  .servicio-item .servicio-icono {
    width: 35px;
    height: 35px;
    font-size: 1rem;
  }
}

/* Estilos específicos para el modal de nuevo servicio */
#modal-new-service {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px) !important;
}

#modal-new-service .modal-content {
    background: white !important;
    border: 2px solid #e0e0e0 !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
}

#modal-new-service .modal-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border-radius: 16px 16px 0 0 !important;
    margin: -2rem -2rem 1.5rem -2rem !important;
    padding: 1.5rem 2rem !important;
}

#modal-new-service .modal-header h3 {
    color: #2e7d32 !important;
    font-weight: 700 !important;
}

#modal-new-service .form-group label {
    color: #495057 !important;
    font-weight: 600 !important;
}

#modal-new-service input,
#modal-new-service textarea {
    border: 2px solid #dee2e6 !important;
    transition: all 0.3s ease !important;
}

#modal-new-service input:focus,
#modal-new-service textarea:focus {
    border-color: #4caf50 !important;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1) !important;
}

#modal-new-service .icon-option {
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

#modal-new-service .icon-option:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

#modal-new-service .color-option {
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

#modal-new-service .color-option:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

#modal-new-service button[type="submit"] {
    background: linear-gradient(135deg, #4caf50 0%, #45a049 100%) !important;
    border: none !important;
    color: white !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

#modal-new-service button[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(76, 175, 80, 0.3) !important;
}

#modal-new-service button[type="button"] {
    background: #f8f9fa !important;
    border: 2px solid #dee2e6 !important;
    color: #6c757d !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

#modal-new-service button[type="button"]:hover {
    background: #e9ecef !important;
    border-color: #adb5bd !important;
    color: #495057 !important;
}

/* ===== ESTILOS PARA EL MODAL DE REPROGRAMACIÓN ===== */

#modal-reprogramar-cita {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px) !important;
}

#modal-reprogramar-cita .modal-content {
    background: white !important;
    border: 2px solid #e0e0e0 !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
}

#modal-reprogramar-cita .modal-header {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%) !important;
    border-radius: 16px 16px 0 0 !important;
    margin: -2rem -2rem 1.5rem -2rem !important;
    padding: 1.5rem 2rem !important;
}

#modal-reprogramar-cita .modal-header h3 {
    color: #f57c00 !important;
    font-weight: 700 !important;
}

#modal-reprogramar-cita .form-group label {
    color: #495057 !important;
    font-weight: 600 !important;
}

#modal-reprogramar-cita .form-group label span {
    color: #f44336 !important;
    font-weight: 700 !important;
}

#modal-reprogramar-cita input,
#modal-reprogramar-cita textarea {
    border: 2px solid #dee2e6 !important;
    transition: all 0.3s ease !important;
}

#modal-reprogramar-cita input:focus,
#modal-reprogramar-cita textarea:focus {
    border-color: #ff9800 !important;
    box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.1) !important;
}

#modal-reprogramar-cita button[type="submit"] {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%) !important;
    border: none !important;
    color: white !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

#modal-reprogramar-cita button[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(255, 152, 0, 0.3) !important;
}

#modal-reprogramar-cita button[type="button"] {
    background: #f8f9fa !important;
    border: 2px solid #dee2e6 !important;
    color: #6c757d !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

#modal-reprogramar-cita button[type="button"]:hover {
    background: #e9ecef !important;
    border-color: #adb5bd !important;
    color: #495057 !important;
}

/* Estilos para campos específicos del técnico */
#modal-reprogramar-cita #campos-tecnico {
    background: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    margin: 1rem 0 !important;
}

#modal-reprogramar-cita #campos-tecnico .form-group:first-child {
    margin-top: 0 !important;
}

#modal-reprogramar-cita #campos-tecnico .form-group:last-child {
    margin-bottom: 0 !important;
}

/* Estilos para el botón de reprogramar en las citas */
.cita-action-btn[onclick*="abrirModalReprogramarCita"] {
    background: #ff9800 !important;
    color: white !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.cita-action-btn[onclick*="abrirModalReprogramarCita"]:hover {
    background: #f57c00 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3) !important;
}

/* Clase para modal visible */
.modal-visible {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 999999 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(255,255,255,0.98) !important;
    backdrop-filter: blur(10px) !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Responsive para el modal de reprogramación */
@media (max-width: 768px) {
    #modal-reprogramar-cita .modal-content {
        margin: 1rem !important;
        padding: 1.5rem !important;
        max-height: 85vh !important;
    }
    
    #modal-reprogramar-cita .form-actions {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    #modal-reprogramar-cita .form-actions button {
        width: 100% !important;
    }
}

/* ========================================
// ESTILOS PARA EL MODAL DE URGENCIAS
// ======================================== */

#modal-urgencia {
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 999999 !important;
}

#modal-urgencia .modal-content {
    background: white !important;
    border-radius: 22px !important;
    box-shadow: 0 8px 32px 0 rgba(13,71,161,0.18) !important;
}

#modal-urgencia .form-group {
    margin-bottom: 20px;
}

#modal-urgencia .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

#modal-urgencia label {
    display: block;
    margin-bottom: 8px;
}

#modal-urgencia input,
#modal-urgencia select,
#modal-urgencia textarea {
    transition: all 0.3s ease;
}

#modal-urgencia input:focus,
#modal-urgencia select:focus,
#modal-urgencia textarea:focus {
    border-color: #1976D2 !important;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1) !important;
    outline: none;
}

#modal-urgencia .form-actions {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    margin-top: 25px;
}

#modal-urgencia button[type="submit"] {
    transition: all 0.3s ease;
}

#modal-urgencia button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(244, 67, 54, 0.4) !important;
}

/* Estilos para el mapa de urgencias */
#mapa-urgencia-container {
    transition: all 0.3s ease;
}

#mapa-urgencia-container.show {
    display: block !important;
}

/* Estilos para el botón de urgencias en el header */
#btn-urgencias {
    transition: all 0.3s ease;
}

#btn-urgencias:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(244, 67, 54, 0.4) !important;
}

/* Responsive para el modal de urgencias */
@media (max-width: 768px) {
    #modal-urgencia .modal-content {
        max-width: 95vw;
        margin: 20px;
    }
    
    #modal-urgencia .form-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    #modal-urgencia .form-actions {
        flex-direction: column;
        gap: 10px;
    }
    
    #modal-urgencia .form-actions button {
        width: 100%;
    }
}

/* ========================================
   ESTILOS PARA BOTONES DE TÉCNICOS DESTACADOS
   ======================================== */

.btn-accion {
    border: none;
    padding: 8px 4px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-align: center;
    color: white;
    height: 32px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    line-height: 1;
    letter-spacing: 0.2px;
    box-sizing: border-box;
    margin: 0;
}

.btn-accion:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.btn-solicitar {
    background: #FF9800;
}

.btn-solicitar:hover {
    background: #f57c00;
}

.btn-chat {
    background: #1976D2;
}

.btn-chat:hover {
    background: #1565c0;
}

.btn-llamar {
    background: #4CAF50;
}

.btn-llamar:hover {
    background: #45a049;
}

.btn-trabajos {
    background: #9C27B0;
}

.btn-trabajos:hover {
    background: #8e24aa;
}

/* Responsive para pantallas pequeñas */
@media (max-width: 768px) {
    .tecnico-actions {
        grid-template-columns: 1fr;
        gap: 0.3rem;
    }
    
    .btn-accion {
        font-size: 11px;
        padding: 10px 8px;
        height: 36px;
    }
}

/* ===== ESTILOS PARA MENÚ PRINCIPAL DESPLEGABLE ===== */
.menu-principal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
}

.menu-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
}

.menu-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    max-width: 90vw;
    height: 100%;
    background: white;
    box-shadow: 5px 0 20px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.menu-principal[style*="block"] .menu-content,
.menu-principal:not([style*="none"]) .menu-content {
    transform: translateX(0);
}

.menu-header {
    background: linear-gradient(135deg, #1976D2, #0D47A1);
    color: white;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.menu-header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.menu-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.menu-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.navegacion-invitado {
    padding: 1rem;
    border-bottom: 1px solid #eee;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}

.btn-invitado {
    width: 100%;
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    border: none;
    padding: 1rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.btn-invitado:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(40, 167, 69, 0.4);
}

.servicios-categorias {
    flex: 1;
    padding: 1rem;
    border-bottom: 1px solid #eee;
}

.servicios-categorias h4 {
    color: #1976D2;
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    border-bottom: 2px solid #1976D2;
    padding-bottom: 0.5rem;
}

.categoria-servicios {
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #1976D2;
    transition: all 0.2s ease;
}

.categoria-servicios:hover {
    background: #e3f2fd;
    transform: translateX(5px);
}

.categoria-servicios h5 {
    margin: 0 0 0.5rem 0;
    color: #0D47A1;
    font-size: 1rem;
    font-weight: 600;
}

.categoria-servicios p {
    margin: 0;
    color: #666;
    font-size: 0.9rem;
    line-height: 1.4;
}

.menu-links {
    padding: 1rem;
    background: #f8f9fa;
}

.menu-links h4 {
    color: #1976D2;
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    border-bottom: 2px solid #1976D2;
    padding-bottom: 0.5rem;
}

.menu-links a {
    display: block;
    padding: 0.8rem;
    color: #333;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.menu-links a:hover {
    background: #1976D2;
    color: white;
    transform: translateX(5px);
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .menu-content {
        width: 100%;
        max-width: 100%;
    }
    
    .categoria-servicios {
        padding: 0.8rem;
    }
    
    .menu-header {
        padding: 1rem;
    }
    
    .menu-header h3 {
        font-size: 1.1rem;
    }
}

/* ===== VISTAS DEL MENÚ (NAVEGACIÓN INTERNA) ===== */
.menu-view {
    display: none;
    flex-direction: column;
    height: 100%;
}

.menu-view.active {
    display: flex;
}

.menu-back {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: background 0.2s ease;
    margin-right: 0.5rem;
}

.menu-back:hover {
    background: rgba(255, 255, 255, 0.2);
}

.menu-main-list {
    flex: 1;
    padding: 1rem;
}

.menu-item-link {
    display: block;
    padding: 1rem;
    color: #333;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    background: #f8f9fa;
    border-left: 4px solid transparent;
}

.menu-item-link:hover {
    background: #1976D2;
    color: white;
    transform: translateX(5px);
    border-left-color: #0D47A1;
}

.menu-content-section {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
}

.contacto-info h4,
.oportunidades-info h4,
.redes-info h4,
.objetivos-info h4,
.terminos-info h4,
.politicas-info h4 {
    color: #1976D2;
    margin: 1rem 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.contacto-info p,
.oportunidades-info p,
.redes-info p,
.objetivos-info p,
.terminos-info p,
.politicas-info p {
    color: #666;
    margin: 0.5rem 0;
    line-height: 1.5;
}

.oportunidades-info ul,
.objetivos-info ul {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.oportunidades-info li,
.objetivos-info li {
    color: #666;
    margin: 0.3rem 0;
    line-height: 1.4;
}

.redes-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
}

.redes-link {
    display: block;
    padding: 0.8rem;
    color: #1976D2;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease;
    background: #f8f9fa;
    border-left: 3px solid #1976D2;
}

.redes-link:hover {
    background: #1976D2;
    color: white;
    transform: translateX(5px);
}

.btn-ver-terminos,
.btn-ver-politicas {
    width: 100%;
    background: linear-gradient(135deg, #1976D2, #0D47A1);
    color: white;
    border: none;
    padding: 1rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3);
}

.btn-ver-terminos:hover,
.btn-ver-politicas:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(25, 118, 210, 0.4);
}

/* ===== BOTÓN DE MENÚ EN ESQUINA SUPERIOR IZQUIERDA ===== */
.menu-btn-top-left {
    position: fixed;
    top: 20px;
    left: 20px;
    background: linear-gradient(135deg, #1976D2, #0D47A1);
    border: none;
    color: white;
    font-size: 1.5rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    box-shadow: 0 4px 16px rgba(25, 118, 210, 0.3);
}

/* ===== BOTÓN DE INVITADO EN LOGIN ===== */
.invitado-section {
    text-align: center;
    margin: 1.5rem 0;
    padding: 1rem;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 12px;
    border: 2px solid #e9ecef;
}

.btn-invitado-login {
    width: 100%;
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    border: none;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
    margin-bottom: 0.5rem;
}

.btn-invitado-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(40, 167, 69, 0.4);
    background: linear-gradient(135deg, #20c997, #28a745);
}

.invitado-text {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
    font-style: italic;
}

/* ===== ENLACE DE WHATSAPP ===== */
.whatsapp-link {
    display: inline-block;
    color: #25D366;
    text-decoration: none;
    font-weight: 600;
    padding: 0.5rem 1rem;
    background: rgba(37, 211, 102, 0.1);
    border-radius: 6px;
    border: 2px solid #25D366;
    transition: all 0.3s ease;
}

.whatsapp-link:hover {
    background: #25D366;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

/* ===== ESTILOS PARA CONTENIDO DE INFORMACIÓN ===== */
.info-content h4 {
    color: #1976D2;
    margin: 1.5rem 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    border-bottom: 2px solid #1976D2;
    padding-bottom: 0.5rem;
}

.info-content p {
    color: #666;
    margin: 0.5rem 0;
    line-height: 1.6;
}

.info-content ul {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.info-content li {
    color: #666;
    margin: 0.3rem 0;
    line-height: 1.4;
}

/* ===== MODALES DE TÉRMINOS Y POLÍTICAS ===== */
.modal-terminos,
.modal-politicas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-terminos-content,
.modal-politicas-content {
    background: white;
    border-radius: 16px;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.modal-terminos-header,
.modal-politicas-header {
    background: linear-gradient(135deg, #1976D2, #0D47A1);
    color: white;
    padding: 1.5rem;
    border-radius: 16px 16px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-terminos-header h3,
.modal-politicas-header h3 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
}

.btn-close-terminos,
.btn-close-politicas {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.btn-close-terminos:hover,
.btn-close-politicas:hover {
    background: rgba(255, 255, 255, 0.2);
}

.modal-terminos-body,
.modal-politicas-body {
    padding: 2rem;
}

.modal-terminos-body h4,
.modal-politicas-body h4 {
    color: #1976D2;
    margin: 1.5rem 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    border-bottom: 2px solid #1976D2;
    padding-bottom: 0.5rem;
}

.modal-terminos-body ul,
.modal-politicas-body ul {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.modal-terminos-body li,
.modal-politicas-body li {
    color: #666;
    margin: 0.3rem 0;
    line-height: 1.4;
}

.modal-terminos-body p,
.modal-politicas-body p {
    color: #666;
    margin: 1rem 0;
    line-height: 1.6;
}

.menu-btn-top-left:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(25, 118, 210, 0.4);
}

.menu-btn-top-left:active {
    transform: scale(0.95);
}

/* ===== ESTILOS DEL BUSCADOR MEJORADO ===== */

.buscador-servicios-mejorado {
    display: flex;
    justify-content: center;
    margin: 2rem 0 3rem 0;
    padding: 0 1rem;
}

.search-container-mejorado {
    position: relative;
    width: 100%;
    max-width: 500px;
    background: white;
    border-radius: 25px;
    box-shadow: 0 8px 25px rgba(25, 118, 210, 0.15);
    border: 2px solid transparent;
    transition: all 0.3s ease;
    overflow: hidden;
}

.search-container-mejorado:focus-within {
    border-color: #1976D2;
    box-shadow: 0 12px 35px rgba(25, 118, 210, 0.25);
    transform: translateY(-2px);
}

.search-icon-container {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #1976D2;
    font-size: 1.2rem;
    z-index: 2;
}

.search-input-mejorado {
    width: 100%;
    padding: 18px 60px 18px 60px;
    border: none;
    outline: none;
    font-size: 1.1rem;
    color: #333;
    background: transparent;
    box-sizing: border-box;
}

.search-input-mejorado::placeholder {
    color: #999;
    font-weight: 500;
}

.btn-limpiar-busqueda-mejorado {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: #f0f0f0;
    border: none;
    color: #666;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    z-index: 2;
}

.btn-limpiar-busqueda-mejorado:hover {
    background: #e0e0e0;
    color: #333;
    transform: translateY(-50%) scale(1.1);
}

.btn-limpiar-busqueda-mejorado:active {
    transform: translateY(-50%) scale(0.95);
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .buscador-servicios-mejorado {
        margin: 1.5rem 0 2rem 0;
        padding: 0 0.5rem;
    }
    
    .search-container-mejorado {
        max-width: 100%;
        border-radius: 20px;
    }
    
    .search-input-mejorado {
        padding: 16px 55px 16px 55px;
        font-size: 1rem;
    }
    
    .search-icon-container {
        left: 18px;
        font-size: 1.1rem;
    }
    
    .btn-limpiar-busqueda-mejorado {
        right: 12px;
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }
}

/* Estilos para el autocompletado de Google Maps */
.pac-container {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid #e0e0e0;
  font-family: inherit;
  z-index: 9999;
}

.pac-item {
  padding: 8px 12px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.pac-item:hover {
  background-color: #f8f9fa;
}

.pac-item-selected {
  background-color: #e3f2fd;
}

.pac-item-query {
  font-weight: 600;
  color: #1976d2;
}

.pac-matched {
  font-weight: bold;
  color: #1976d2;
}

/* Estilos para botón de cerrar sesión empresarial */
.btn-logout {
  background: linear-gradient(135deg, #dc3545, #c82333);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  margin-right: 10px;
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

.btn-logout:hover {
  background: linear-gradient(135deg, #c82333, #a71e2a);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}

.btn-logout:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3);
}

/* Estilos para el header empresarial */
.enterprise-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-close {
  background: #6c757d;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.btn-close:hover {
  background: #5a6268;
  transform: scale(1.05);
}