/* *Raúl López Ricarte*/

/*!  ESTILOS BASE  */

* {
    margin: 0; /* Quito márgenes por defecto para tener control total del layout */
    padding: 0;
    box-sizing: border-box; /* Incluyo padding y borde dentro del tamaño del elemento */
}

body {
    font-family: 'Inter', 'Segoe UI', 'Roboto', sans-serif; /* Fuente limpia y moderna para toda la web */
    background-color: white;
    color: #111827;
    display: flex; /* Me permite empujar el footer al final de la pantalla */
    flex-direction: column;
    min-height: 100vh;
}

/*!  NAVEGACIÓN  */

.simple-navbar {
    background: white;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); /* Sombra suave para separar la navbar del contenido */
    border-bottom: 1px solid #e5e7eb;
    position: sticky; /* La navbar se queda fija arriba al hacer scroll */
    top: 0;
    z-index: 50; /* Me aseguro de que quede por encima del resto de elementos */
}

.simple-container {
    max-width: 1200px; /* Contenedor centrado con ancho máximo para no ocupar toda la pantalla gigante */
    margin: 0 auto;
    padding: 0 1rem;
}

.simple-navbar-content {
    display: flex;
    justify-content: space-between; /* Logo a la izquierda, navegación a la derecha */
    align-items: center;
    height: 4rem;
}

.simple-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit; /* Heredo el color del texto para evitar azules por defecto */
}

.simple-logo-icon {
    width: 2rem;
    height: 2rem;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); /* Bloque azul tipo “branding” */
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1.125rem;
}

.simple-logo-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
}

.simple-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.simple-nav-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem; /* Botón clicable cómodo en la navbar */
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    color: #374151;
}

.simple-nav-item:hover {
    background-color: #f3f4f6;
    color: #374151;
}

.simple-nav-item.active {
    background-color: #eff6ff; /* Estado activo destacado en azul suave */
    color: #2563eb;
}

.simple-auth {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* UD7 - Estilo para mostrar el usuario autenticado */
.simple-user-greeting {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    padding: 0.5rem 0.75rem;
    background-color: #f3f4f6;
    border-radius: 0.375rem;
    display: inline-flex;
    align-items: center;
}

.simple-btn {
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.simple-btn-ghost {
    background: transparent;
    color: #374151;
}

.simple-btn-ghost:hover {
    background-color: #f3f4f6;
    color: #374151;
}

.simple-btn-primary {
    background-color: #2563eb; /* Botón principal con azul corporativo */
    color: white;
}

.simple-btn-primary:hover {
    background-color: #1d4ed8;
    color: white;
}

/*!  CONTENIDO PRINCIPAL  */

.main-content {
    flex: 1; /* Ocupa todo el espacio disponible entre la navbar y el footer */
    padding: 2rem 1rem;
    background-color: #f9fafb; /* Gris muy suave de fondo */
    min-height: calc(100vh - 4rem);
}

.admin-dashboard {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    padding: 4rem 0;
}

.admin-dashboard h1 {
    font-size: 3rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 1rem 0;
}

.admin-dashboard p {
    font-size: 1.25rem;
    color: #6b7280;
    margin: 0;
}

/*!  PÁGINA DE INICIO  */

.homepage-main {
    padding: 0;
    background: none;
    min-height: auto;
}

.hero-section {
    position: relative;
    height: 100vh; /* Hero a pantalla completa */
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    display: flex;
    align-items: center;
    color: white;
    overflow: hidden; /* Oculto el exceso de la imagen de fondo */
}

.hero-bg-image {
    position: absolute;
    inset: 0;
    background-image: url('https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?w=1920&h=1080&fit=crop'); /* Imagen de fondo médica/salud */
    background-size: cover;
    background-position: center;
    opacity: 0.3; /* La bajo para que el texto se lea bien encima */
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(255,255,255,0.1) 0%, transparent 100%);
}

.hero-content {
    position: relative; /* Importante para que el texto quede por encima del fondo */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    width: 100%;
}

.hero-text {
    max-width: 48rem;
}

.hero-text h1 {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.hero-highlight {
    color: #93c5fd; /* Frase destacada en azul claro */
}

.hero-text p {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    color: #93c5fd;
    line-height: 1.4;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap; /* Si no cabe, que pase a otra línea */
}

.hero-btn {
    padding: 1.5rem 2rem;
    font-size: 1.125rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    display: inline-block;
}

.hero-btn-primary {
    background: white;
    color: #2563eb;
}

.hero-btn-primary:hover {
    background: #eff6ff;
    color: #2563eb;
}

.hero-btn-secondary {
    background: #1d4ed8;
    color: white;
    border: 2px solid white; /* Botón secundario con borde blanco para destacar */
}

.hero-btn-secondary:hover {
    background: #1e40af;
}

/*!  FORMULARIO DE CONTACTO  */

.contact-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.contact-header {
    text-align: center;
    margin-bottom: 3rem;
}

.contact-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 1rem 0;
}

.contact-header p {
    font-size: 1.125rem;
    color: #6b7280;
    margin: 0;
}

.contact-form-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
}

.contact-form {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* Tarjeta con sombra ligera */
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas para inputs en la misma fila */
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    font-size: 1rem;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #2563eb; /* Azul al hacer foco */
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.submit-btn {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); /* Botón principal del formulario */
    color: white;
    padding: 1rem 2rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    text-align: center;
}

.submit-btn:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    transform: translateY(-2px); /* Pequeño efecto de elevación al pasar el ratón */
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

/*!  PÁGINA DE LOGIN  */

.login-main {
    min-height: 100vh;
    background: linear-gradient(135deg, #dbeafe 0%, #c7d2fe 100%); /* Fondo suave con tonos azules */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.login-container {
    max-width: 28rem;
    width: 100%;
}

.back-button {
    display: inline-flex;
    align-items: center;
    color: #2563eb;
    text-decoration: none;
    margin-bottom: 1.5rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.back-button:hover {
    color: #1d4ed8;
}

.login-card {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* Sombra marcada para resaltar la tarjeta de login */
    padding: 2rem;
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-header h1 {
    font-size: 1.875rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
}

.login-header p {
    color: #6b7280;
    margin: 0;
}

.success-message {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #047857;
    font-size: 0.875rem;
}

.error-message {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0.5rem;
    color: #dc2626;
    font-size: 0.875rem;
}

.login-form {
    margin-bottom: 1.5rem;
}

.input-group {
    position: relative;
}

.input-group input {
    width: 100%;
    padding: 0.625rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.input-group input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.875rem;
    color: #6b7280;
}

.checkbox-label input {
    margin-right: 0.5rem;
    width: 1rem;
    height: 1rem;
}

.forgot-link {
    font-size: 0.875rem;
    color: #2563eb;
    text-decoration: none;
}

.forgot-link:hover {
    color: #1d4ed8;
}

/* Botón de login principal */
.login-button {
    width: 100%;
    background: #2563eb; /* Login normal en azul */
    color: white;
    padding: 0.75rem;
    font-size: 1rem;
    font-weight: 500;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-bottom: 1rem; /* Espacio entre botones */
}

.login-button:hover {
    background: #1d4ed8;
}

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

/* Botón específico para acceso de administrador */
.admin-login-button {
    width: 100%;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); /* Rojo para distinguir el login de admin */
    color: white;
    padding: 0.75rem;
    font-size: 1rem;
    font-weight: 600; /* Un poco más bold para resaltar */
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 0.5rem; /* Espacio superior adicional */
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2); /* Sombra roja sutil */
}

.admin-login-button:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
    transform: translateY(-1px); /* Pequeño efecto de elevación */
    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
}

.admin-login-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.divider {
    position: relative;
    margin: 1.5rem 0;
    text-align: center;
}

.divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e5e7eb;
}

.divider span {
    background: white;
    color: #6b7280;
    padding: 0 1rem;
    font-size: 0.875rem;
    position: relative;
}

.login-footer {
    text-align: center;
    margin-top: 1.5rem;
}

.login-footer p {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
}

.register-link {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}

.register-link:hover {
    color: #1d4ed8;
}

.field-error {
    color: #dc2626;
    font-size: 0.75rem;
    margin-top: 0.25rem;
    display: block;
}

.btn-secondary-link {
    display: block;
    text-align: center;
    padding: 0.75rem;
    margin-top: 0.75rem;
    color: #6b7280;
    text-decoration: none;
    font-size: 0.875rem;
}

.btn-secondary-link:hover {
    color: #374151;
}

.badge-verified {
    color: #059669;
    margin-left: 0.5rem;
}

.badge-primary {
    background: #2563eb;
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    margin-left: 0.5rem;
}

/*!  PÁGINA DE ERROR  */

.error-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center; /* Centro el contenido de error en pantalla */
    min-height: calc(100vh - 4rem);
}

.error-container {
    text-align: center;
    padding: 2rem;
}

.error-container h1 {
    font-size: 2rem;
    color: #dc2626; /* Rojo para indicar claramente que es un error */
    margin-bottom: 1rem;
}

.error-container p {
    font-size: 1rem;
    color: #6b7280;
}

/*!  PANEL DE ADMINISTRACIÓN  */

.admin-panel {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 0;
}

.admin-panel h1 {
    text-align: center;
    font-size: 2.5rem;
    color: #111827;
    margin-bottom: 3rem;
}

.admin-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Dos columnas de tarjetas en el panel admin */
    gap: 1.5rem;
}

.admin-card {
    background: white;
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.admin-card h3 {
    font-size: 1.25rem;
    color: #111827;
    margin-bottom: 0.5rem;
}

.admin-card p {
    color: #6b7280;
    margin-bottom: 1rem;
}

.admin-btn {
    background: #2563eb;
    color: white;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.875rem;
}

.admin-btn:hover {
    background: #1d4ed8;
}

/*!  FOOTER  */

.simple-footer {
    background-color: #111827; /* Footer oscuro para contraste con el contenido */
    color: #d1d5db;
    margin-top: auto; /* Lo empujo al final del viewport si hay poco contenido */
}

.simple-footer-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Footer dividido en cuatro columnas */
    gap: 2rem;
    padding: 3rem 0;
}

.simple-footer-section h3 {
    color: white;
    font-weight: 600;
    font-size: 1rem;
    margin: 0 0 1rem 0;
}

.simple-footer-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.simple-footer-logo .simple-logo-text {
    color: white;
}

.simple-footer-description {
    font-size: 0.875rem;
    color: #9ca3af;
    margin: 0;
    line-height: 1.5;
}

.simple-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.simple-footer-links li {
    margin-bottom: 0.5rem;
}

.simple-footer-links a {
    color: #d1d5db;
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s ease;
}

.simple-footer-links a:hover {
    color: white;
}

.simple-footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.simple-footer-contact li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.simple-social-links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.simple-social-link {
    background-color: #1f2937;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    color: #d1d5db;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.simple-social-link:hover {
    background-color: #2563eb; /* Al pasar el ratón, uso el azul principal de la marca */
    color: white;
}

.simple-footer-bottom {
    border-top: 1px solid #1f2937;
    margin-top: 2rem;
    padding-top: 2rem;
    text-align: center;
}

.simple-footer-bottom p {
    font-size: 0.875rem;
    color: #9ca3af;
    margin: 0;
}

/*!  ESTILOS MEJORADOS PARA PÁGINAS PÚBLICAS  */

/* Badge de página */
.page-badge {
    display: inline-block;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: white;
    padding: 0.375rem 1rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

/* Contenedor de página */
.page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Header de página */
.page-header {
    text-align: center;
    margin-bottom: 3rem;
}

.page-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 0.75rem 0;
}

.page-header p {
    font-size: 1.125rem;
    color: #6b7280;
    margin: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/*!  PÁGINA DE SERVICIOS  */

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.service-card {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -8px rgba(37, 99, 235, 0.2);
    border-color: #2563eb;
}

.service-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.service-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 0.75rem 0;
}

.service-card p {
    color: #6b7280;
    line-height: 1.6;
    margin: 0 0 1rem 0;
}

.service-duration {
    display: inline-block;
    font-size: 0.875rem;
    color: #2563eb;
    font-weight: 500;
}

/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-radius: 1rem;
    padding: 3rem;
    text-align: center;
    color: white;
}

.cta-section h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}

.cta-section p {
    font-size: 1rem;
    opacity: 0.9;
    margin: 0 0 1.5rem 0;
}

.cta-button {
    display: inline-block;
    background: white;
    color: #2563eb;
    padding: 0.875rem 2rem;
    border-radius: 0.5rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.cta-button:hover {
    background: #f3f4f6;
    transform: translateY(-2px);
}

/*!  PÁGINA DE CONTACTO  */

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
}

.contact-info-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.info-card {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e7eb;
}

.info-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

.info-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 0.5rem 0;
}

.info-card p {
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
}

.contact-form {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.contact-form h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 1.5rem 0;
}

/*!  PÁGINA SOBRE NOSOTROS  */

.about-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.about-card {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border-left: 4px solid #2563eb;
}

.about-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.about-card h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 1rem 0;
}

.about-card p {
    color: #6b7280;
    line-height: 1.7;
    margin: 0;
}

.values-section {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.values-section h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 1.5rem 0;
    text-align: center;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.value-item {
    text-align: center;
    padding: 1.5rem;
    border-radius: 0.75rem;
    background: #f9fafb;
}

.value-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.75rem;
}

.value-item h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 0.5rem 0;
}

.value-item p {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
}

.stats-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-radius: 1rem;
    padding: 2rem;
}

.stat-item {
    text-align: center;
    color: white;
}

.stat-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
}

.stat-label {
    font-size: 0.875rem;
    opacity: 0.9;
}

/*!  PÁGINA DE PROFESIONALES  */

.professionals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.professional-card {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    text-align: center;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.professional-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -8px rgba(37, 99, 235, 0.2);
}

.professional-avatar {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto 1rem;
}

.professional-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 0.25rem 0;
}

.professional-role {
    display: inline-block;
    color: #2563eb;
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.professional-card p {
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0 0 1rem 0;
}

.professional-services {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.service-tag {
    background: #eff6ff;
    color: #2563eb;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
}

/*!  DASHBOARD DE ADMINISTRADOR  */

.admin-dashboard-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #e5e7eb;
}

.dashboard-welcome h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 0.25rem 0;
}

.dashboard-welcome p {
    color: #6b7280;
    margin: 0;
}

.dashboard-actions {
    display: flex;
    gap: 0.75rem;
}

.btn-dashboard {
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    font-weight: 500;
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.btn-django-admin {
    background: #059669;
    color: white;
}

.btn-django-admin:hover {
    background: #047857;
    color: white;
}

.btn-back {
    background: #f3f4f6;
    color: #374151;
}

.btn-back:hover {
    background: #e5e7eb;
    color: #374151;
}

/* Dashboard Stats */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e7eb;
}

.stat-card .stat-icon {
    font-size: 2rem;
}

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

.stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
}

.stat-card .stat-label {
    font-size: 0.875rem;
    color: #6b7280;
}

.stat-users { border-left: 4px solid #2563eb; }
.stat-services { border-left: 4px solid #059669; }
.stat-reservations { border-left: 4px solid #f59e0b; }
.stat-pending { border-left: 4px solid #dc2626; }

/* Dashboard Sections */
.dashboard-sections {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.dashboard-section {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.section-header h2 {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.section-link {
    font-size: 0.875rem;
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}

.section-link:hover {
    text-decoration: underline;
}

.section-content {
    padding: 0;
}

.dashboard-table {
    width: 100%;
    border-collapse: collapse;
}

.dashboard-table th,
.dashboard-table td {
    padding: 0.875rem 1rem;
    text-align: left;
    font-size: 0.875rem;
}

.dashboard-table th {
    background: #f9fafb;
    color: #6b7280;
    font-weight: 500;
    border-bottom: 1px solid #e5e7eb;
}

.dashboard-table td {
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
}

.dashboard-table tr:last-child td {
    border-bottom: none;
}

.role-badge, .status-badge {
    padding: 0.25rem 0.625rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.role-admin { background: #fef2f2; color: #dc2626; }
.role-pro { background: #eff6ff; color: #2563eb; }
.role-user { background: #f3f4f6; color: #6b7280; }

.status-active { background: #ecfdf5; color: #059669; }
.status-inactive { background: #fef2f2; color: #dc2626; }
.status-pendiente { background: #fffbeb; color: #d97706; }
.status-confirmada { background: #ecfdf5; color: #059669; }
.status-cancelada { background: #fef2f2; color: #dc2626; }
.status-completada { background: #eff6ff; color: #2563eb; }

.empty-message {
    text-align: center;
    color: #9ca3af;
    padding: 2rem !important;
}

/* Quick Access */
.dashboard-quick-access h2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 1rem 0;
}

.quick-access-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.quick-access-card {
    background: white;
    border-radius: 0.75rem;
    padding: 1.5rem;
    text-align: center;
    text-decoration: none;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

.quick-access-card:hover {
    border-color: #2563eb;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.qa-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.5rem;
}

.qa-text {
    color: #374151;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Botón Admin en navbar */
.simple-btn-admin {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
}

.simple-btn-admin:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
    color: white;
}

/*!  RESPONSIVE  */

@media (max-width: 1024px) {
    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dashboard-sections {
        grid-template-columns: 1fr;
    }
    
    .quick-access-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .contact-layout {
        grid-template-columns: 1fr;
    }
    
    .dashboard-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .dashboard-stats {
        grid-template-columns: 1fr;
    }
    
    .simple-footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .simple-navbar-content {
        flex-wrap: wrap;
        gap: 1rem;
        height: auto;
        padding: 1rem 0;
    }
    
    .simple-nav {
        order: 3;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
}