/* Estilos generales */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #f1f3f4;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.main-container {
  width: 100%; /* O 90% como tenías */
  max-width: 100%; /* Asegura que no se pase del ancho de pantalla */
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


.login-card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 0px 25px rgba(0, 0, 0, 0.15); /* Sombra un poco más suave */
    overflow: hidden;
    margin-bottom: 15px; /* Reducido */
    width: 100%;
    max-width: 480px; /* Ancho mantenido */
}

.login-card-header {
    /* Reducir MÁS AÚN el padding vertical */
    padding: 8px 20px; /* Antes era 10px 20px */
    text-align: center;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* Reducir tamaño del círculo de la foto */
#usuario-perfil {
    width: 80px;  /* Antes era 90px */
    height: 80px; /* Antes era 90px */
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ccc; /* Borde más sutil */
    box-shadow: 0 0px 5px rgba(0, 0, 0, 0.15);
    margin-bottom: 5px; /* Antes era 8px */
}

h1 {
    color: #4285f4;
    margin: 0;
    font-weight: 500;
    text-shadow: none; /* Quitar sombra */
    margin-bottom: 5px;
    font-size: 1.6em; /* Título un poco más pequeño */
}

.login-card-body {
     /* Reducir MÁS AÚN el padding vertical */
    padding: 8px 20px 15px 20px; /* Reducido arriba y abajo */
    width: 100%;
}


/* Formularios */
.form-group {
    /* Reducir MÁS AÚN el margen inferior */
    margin-bottom: 10px; /* Antes era 12px */
}

label {
    display: block;
    margin-bottom: 3px; /* Menos espacio */
    color: #5f6368;
    font-weight: 500;
    font-size: 0.9em; /* Label un poco más pequeño */
}

.form-control {
    width: 100%;
    /* Reducir más padding vertical del input */
    padding: 6px 10px; /* Antes era 8px 12px */
    border: 1px solid #ced4da;
    border-radius: 6px; /* Menos redondeado */
    box-sizing: border-box;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    font-size: 0.95em; /* Fuente del input un poco más pequeña */
}


/* Botones */
.btn-primary {
    background-color: #4285f4;
    color: white;
     /* Reducir más padding vertical del botón */
    padding: 8px 18px; /* Antes era 10px 20px */
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    font-weight: 500;
    margin-top: 10px;
    font-size: 0.95em; /* Texto del botón un poco más pequeño */
}


/* Enlaces */
.enlaces-inferiores {
    margin-top: 8px;
    text-align: center;
    font-size: 0.85em; /* Más pequeño */
    margin-bottom: 8px;
}


/* --- Estilos para botones sociales --- */
.social-login-container {
    text-align: center;
    margin-top: 10px; /* Antes era 12px */
    padding-top: 10px; /* Antes era 12px */
    border-top: 1px solid #eee;
}
.social-login-container p {
    margin-bottom: 5px; /* Antes era 8px */
    color: #5f6368;
    font-weight: 500;
    font-size: 0.85em; /* Más pequeño */
}
.social-login-buttons button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 3px; /* Menos margen */
    padding: 5px 8px; /* Más pequeños */
    border-radius: 5px;
    border: 1px solid #ced4da;
    background-color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    font-weight: 500;
    color: #333;
    font-size: 0.85em; /* Texto del botón más pequeño */
}
.social-login-buttons button:hover {
    background-color: #f8f9fa;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.social-login-buttons button img {
    width: 14px; /* Iconos más pequeños */
    height: 14px;
    margin-right: 5px; /* Menos espacio */
}

/* Footer de la tarjeta */
.login-card-footer {
    padding: 10px 20px; /* Añadir un poco de padding al footer */
    background-color: #f8f9fa; /* Fondo ligero para separar */
    border-top: 1px solid #eee;
}
.enlace-registro-container {
     text-align: center;
     margin: 0; /* Quitar margen si lo tenía */
     font-size: 0.9em;
}

/* Texto de términos y privacidad */
.terminos-privacidad {
    text-align: center;
    font-size: 0.7rem; /* Aún más pequeño */
    color: #888; /* Más claro */
    margin-top: 8px; /* Menos espacio */
}

/* Ajustes específicos para el texto pequeño debajo de los inputs */
.form-text.text-muted {
    font-size: 0.7em; /* Hacer más pequeño el texto de ayuda */
    margin-top: 2px; /* Acercarlo al input */
}
.password-strength {
     margin-top: 4px; /* Espacio para la barra de fortaleza */
}
#password-match-indicator {
     margin-top: 4px; /* Espacio para el mensaje de coincidencia */
     min-height: 1em; /* Evitar que salte el layout */
}


/* --- FIN Estilos Sociales --- */


/* Botones */
.btn-primary {
    background-color: #4285f4;
    color: white;
    padding: 13px 22px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    font-weight: 500;
}

.btn-primary:hover {
    background-color: #3b76e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-primary:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.25);
}

.btn-block {
    display: block;
    width: 100%;
}

.btn-google {
    background-color: transparent;
    border: 1px solid #4285f4;
    color: #4285f4;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    font-weight: 500;
}

.btn-google:hover {
    background-color: rgba(66, 133, 244, 0.05);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Enlaces */
.enlaces-inferiores {
    margin-top: 15px;
    text-align: center;
    font-size: 0.9em;
    margin-bottom: 15px;
}

.enlace-olvidar,
.enlace-registro {
    color: #4285f4;
    text-decoration: none;
    transition: text-decoration 0.2s ease;
}

.enlace-olvidar:hover,
.enlace-registro:hover {
    text-decoration: underline;
}

/* Seguridad */
.password-container {
    position: relative;
}

.toggle-password {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: #5f6368;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
}

.toggle-password:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Términos y privacidad */
.terminos-privacidad {
    text-align: center;
    font-size: 0.75rem;
    color: #777777;
    margin-top: 10px;
}

.terminos-privacidad a {
    color: #777777;
    text-decoration: none;
    font-weight: bold;
}

.terminos-privacidad a:hover {
    text-decoration: underline;
}

/* Nueva foto de usuario */
#usuario-perfil {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #333;
    box-shadow: 0 0px 8px rgba(0, 0, 0, 0.3);
    margin-bottom: 10px; /* Espacio debajo de la foto */
}

#usuario-perfil img {
    width: 100%;
    height: auto;
    display: block;
}

.acceso-titulo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-direction: column; /* Colocar los elementos en columna */
}

.acceso-titulo h1 {
    width: 100%;
    text-align: center;
    margin-right: 0;  /* Elimina el margen a la derecha */
}

.login-card-body {
    padding: 20px;
    width: 100%;
}

.enlace-registro-container {
    text-align: center;
}

/* --- Estilos Específicos para Página Datos Personales (Movidos desde HTML) --- */

/* Contenedor principal de la página de perfil */
.profile-page-container {
    width: 100%;
    max-width: 800px; /* Ancho para el perfil, puedes ajustarlo */
    margin: 30px auto; /* Centrar y dar margen */
    padding: 0 15px;
    box-sizing: border-box;
}

/* Sobrescribir tarjeta solo en esta página */
.profile-page-container .login-card {
    max-width: 100%;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

.profile-page-container .login-card-body {
     padding: 25px 30px; /* Padding interno */
}

/* Estilos para los iconos en los labels */
.profile-page-container .form-group label {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    font-weight: 500;
    color: #333;
}

.profile-page-container .form-group label .material-icons {
    font-size: 18px;
    margin-right: 8px;
    color: #4285f4; /* Iconos en azul */
    vertical-align: text-bottom;
}

/* Estilo para la preview de la foto */
#currentProfilePic img {
    max-width: 120px;
    height: auto;
    border-radius: 50%;
    border: 3px solid #f0f0f0;
    display: block;
    margin: 10px auto 15px auto;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
#currentProfilePic p { /* Estilo para el texto "Cargando foto..." */
    font-size: 0.9em;
    color: #777;
    margin-bottom: 15px;
    text-align: center;
}

/* Estilos para los títulos de sección */
.profile-page-container section h2 {
    font-size: 1.3em;
    color: #333;
    border-bottom: 2px solid #4285f4;
    padding-bottom: 8px;
    margin-bottom: 20px;
    margin-top: 25px;
}
.profile-page-container section:first-of-type h2 {
     margin-top: 0;
}

/* Estilos para los fieldsets (direcciones) */
.profile-page-container fieldset {
    border: 1px solid #e0e0e0;
    padding: 15px 20px;
    margin-bottom: 20px;
    border-radius: 8px;
}
.profile-page-container fieldset legend {
    padding: 0 10px;
    font-weight: 500;
    color: #4285f4;
}

/* Estilos para la sección de botones de acción */
.profile-actions {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end; /* Alinear a la derecha */
    gap: 15px;
}

/* Estilos generales para los botones dentro de .profile-actions */
.profile-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-size: 0.95em;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}
.profile-actions .btn .material-icons {
    font-size: 1.1em;
    margin-right: 6px;
}

/* Estilos específicos para cada botón */
.profile-actions .btn-primary { /* Actualizar */
    background-color: #4285f4;
    color: white;
}
.profile-actions .btn-primary:hover {
    background-color: #3b76e1;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.profile-actions .btn-secondary { /* Logout */
    background-color: #6c757d;
    color: white;
}
.profile-actions .btn-secondary:hover {
    background-color: #5a6268;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.profile-actions .btn-danger { /* Delete */
    background-color: #dc3545;
    color: white;
}
.profile-actions .btn-danger:hover {
    background-color: #c82333;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Mensaje de actualización */
#profileUpdateMessage {
    margin-top: 15px;
    text-align: center;
    font-weight: bold;
    padding: 10px;
    border-radius: 5px;
    min-height: 1.2em; /* Para evitar saltos */
}
/* Clases de color para el mensaje (ejemplo) */
#profileUpdateMessage.text-success { background-color: #d4edda; border: 1px solid #c3e6cb; color: #155724;}
#profileUpdateMessage.text-danger { background-color: #f8d7da; border: 1px solid #f5c6cb; color: #721c24;}
#profileUpdateMessage.text-info { background-color: #d1ecf1; border: 1px solid #bee5eb; color: #0c5460;}
#profileUpdateMessage.text-grey { background-color: #f8f9fa; border: 1px solid #e2e3e5; color: #383d41;}

/* --- FIN Estilos Específicos --- */



/* --- Estilos para Bloque Gestión Foto Perfil --- */

.photo-manager-card {
    margin-bottom: 30px; /* Espacio entre bloque de foto y formulario de datos */
    /* Hereda estilos de .login-card como max-width, background, shadow, etc. */
    /* Puedes añadir estilos específicos si quieres diferenciarlo más */
     border: 1px solid #e0e0e0;
}

.photo-manager-card h2 .material-icons {
     color: #4285f4; /* Color del icono del título */
}

#current-profile-photo-display {
    /* Estilos del contenedor de la imagen */
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    border: 1px dashed #ccc;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden; /* Para contener la imagen */
}

#current-profile-photo-display img {
    /* Estilos para la imagen mostrada */
    max-width: 150px; /* Tamaño máximo de la preview */
    max-height: 150px;
    height: auto;
    border-radius: 50%; /* Hacerla redonda */
    border: 3px solid #fff; /* Borde blanco */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#current-profile-photo-display p { /* Estilo para mensajes como "Cargando..." */
    color: #6c757d;
    font-style: italic;
}

/* Ocultar el input file real */
/* #new-photo-input { display: none; } */ /* Ya está inline en el HTML */

/* Estilo para el label que actúa como botón de carga */
label[for="new-photo-input"].btn {
    cursor: pointer;
    /* Hereda estilos de .btn y .btn-secondary */
}

/* Contenedor de botones de acción */
.photo-manager-actions {
    display: flex;
    flex-wrap: wrap; /* Para móviles */
    justify-content: center; /* Centrar botones */
    gap: 10px; /* Espacio */
    margin-top: 15px;
}

/* Estilos para los botones de acción (reutiliza .btn y añade específicos) */
.photo-manager-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 15px; /* Tamaño botones */
    font-size: 0.9em;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    text-decoration: none; /* Para el enlace de descarga */
}
.photo-manager-actions .btn .material-icons {
    font-size: 1.1em;
    margin-right: 5px;
}

/* Estilos específicos para los botones */
.photo-manager-actions .btn-primary { background-color: #4285f4; color: white; }
.photo-manager-actions .btn-primary:hover { background-color: #3b76e1; }
.photo-manager-actions .btn-primary:disabled { background-color: #a0c2f7; cursor: not-allowed; }

.photo-manager-actions .btn-secondary { background-color: #6c757d; color: white; }
.photo-manager-actions .btn-secondary:hover { background-color: #5a6268; }
.photo-manager-actions .btn-secondary:disabled,
.photo-manager-actions a.btn-secondary[style*="display: none"] /* Ocultar enlace descarga si no hay foto */
 {
    background-color: #adb5bd; cursor: not-allowed; opacity: 0.65; pointer-events: none;
}


.photo-manager-actions .btn-danger { background-color: #dc3545; color: white; }
.photo-manager-actions .btn-danger:hover { background-color: #c82333; }
.photo-manager-actions .btn-danger:disabled { background-color: #f1aeb5; cursor: not-allowed; opacity: 0.65; }


/* Mensaje de estado */
#photo-manager-message {
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    font-weight: bold;
    min-height: 1.2em;
    padding: 5px;
    border-radius: 4px;
}
/* Clases de color para el mensaje (igual que las de perfil) */
#photo-manager-message.text-success { background-color: #d4edda; border: 1px solid #c3e6cb; color: #155724;}
#photo-manager-message.text-danger { background-color: #f8d7da; border: 1px solid #f5c6cb; color: #721c24;}
#photo-manager-message.text-info { background-color: #d1ecf1; border: 1px solid #bee5eb; color: #0c5460;}
#photo-manager-message.text-grey { background-color: #f8f9fa; border: 1px solid #e2e3e5; color: #383d41;}


/* --- FIN Estilos Bloque Foto --- */



/* --- SELLOS DE VERIFICACIÓN (PREMIUM UI) --- */

.pfc-status-card {
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    animation: slideDown 0.5s ease-out;
    border: 1px solid transparent;
}

/* ESTADO: VERIFICADO */
.pfc-status-card.verified {
    background: linear-gradient(to bottom, #f0fdf4, #ffffff);
    border-color: #bbf7d0;
    box-shadow: 0 4px 6px -1px rgba(22, 163, 74, 0.1);
}
.pfc-status-card.verified .material-icons {
    font-size: 48px;
    color: #16a34a; /* Verde Vibrante */
    background: #dcfce7;
    border-radius: 50%;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.1);
}
.pfc-status-card.verified h3 {
    color: #166534;
    margin: 5px 0;
    font-size: 1.2em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ESTADO: RECHAZADO */
.pfc-status-card.rejected {
    background: linear-gradient(to bottom, #fef2f2, #ffffff);
    border-color: #fecaca;
    box-shadow: 0 4px 6px -1px rgba(220, 38, 38, 0.1);
}
.pfc-status-card.rejected .material-icons {
    font-size: 48px;
    color: #dc2626; /* Rojo Alerta */
    background: #fee2e2;
    border-radius: 50%;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1);
}
.pfc-status-card.rejected h3 {
    color: #991b1b;
    margin: 5px 0;
    font-size: 1.2em;
    font-weight: 700;
    text-transform: uppercase;
}

/* TEXTO DEL MENSAJE */
.pfc-status-message {
    font-size: 0.95em;
    color: #4b5563;
    line-height: 1.5;
    margin-top: 5px;
}

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

/* ESTADO: PENDIENTE (Gold/Ámbar) */
.pfc-status-card.pending {
    background: linear-gradient(to bottom, #fffbeb, #ffffff);
    border-color: #fde68a;
    box-shadow: 0 4px 6px -1px rgba(245, 158, 11, 0.1);
}
.pfc-status-card.pending .material-icons {
    font-size: 48px;
    color: #d97706; /* Ámbar Oscuro */
    background: #fef3c7;
    border-radius: 50%;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15);
    animation: pulseIcon 2s infinite; /* Pequeña animación de "espera" */
}
.pfc-status-card.pending h3 {
    color: #92400e;
    margin: 5px 0;
    font-size: 1.2em;
    font-weight: 700;
    text-transform: uppercase;
}

@keyframes pulseIcon {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}



/* --- SISTEMA ANTI-PARPADEO (TELÓN DE SEGURIDAD PREMIUM) --- */

/* Estado Inicial: Oculto */
html.pfc-auth-checking body {
    opacity: 0;
    visibility: hidden;
}

/* Estado Final: Revelado con elegancia */
html.pfc-auth-verified body {
    opacity: 1;
    visibility: visible;
    /* 0.6s es un tiempo "lujoso", ni muy rápido ni muy lento */
    transition: opacity 0.6s ease-out; 
}



/* MEJORA TEXTAREA MOVIL, Descripción Personal / Bio */
textarea.form-control {
    min-height: 120px !important; /* Altura mínima cómoda */
    resize: vertical; /* Permitir estirar solo hacia abajo */
    font-family: inherit;
    line-height: 1.5;
    padding: 12px;
}

/* En móviles, aseguramos que ocupe todo y sea táctil, Descripción Personal / Bio */
@media (max-width: 600px) {
    textarea.form-control {
        font-size: 16px; /* Evita zoom automático en iPhone */
        min-height: 150px !important; /* Más alto en celular para escribir cómodo */
    }
}



/* --- SELLO DORADO BLOCKCHAIN (WEB3) --- */
.pfc-blockchain-seal {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #f59e0b;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.15);
    text-align: left;
    transition: all 0.5s ease-in-out; /* Transición suave de color */
    animation: fadeInSeal 0.6s ease-out;
}

/* ESTADO SEGURO (VERDE) DE LA BLOCKCHAIN */
.pfc-blockchain-seal.sealed {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: #10b981;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
}

.pfc-blockchain-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #fde68a;
    padding-bottom: 10px;
    transition: border-color 0.5s;
}

.pfc-blockchain-seal.sealed .pfc-blockchain-header {
    border-color: #86efac;
}

.pfc-blockchain-icon {
    background: #f59e0b;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(245, 158, 11, 0.4);
    transition: background 0.5s, box-shadow 0.5s;
}

.pfc-blockchain-seal.sealed .pfc-blockchain-icon {
    background: #10b981; /* Icono verde al confirmarse */
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.5);
}

.pfc-blockchain-title {
    margin: 0;
    color: #92400e;
    font-size: 1.1em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.5s;
}

.pfc-blockchain-seal.sealed .pfc-blockchain-title {
    color: #065f46;
}

.pfc-blockchain-text {
    font-size: 0.9em;
    color: #78350f;
    line-height: 1.6;
    margin: 0 0 10px 0;
    transition: color 0.5s;
}

.pfc-blockchain-seal.sealed .pfc-blockchain-text {
    color: #064e3b;
}

.pfc-blockchain-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #d97706;
    font-weight: bold;
    text-decoration: none;
    font-size: 0.85em;
    background: #fef3c7;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid #fcd34d;
    transition: all 0.3s;
}

.pfc-blockchain-seal.sealed .pfc-blockchain-link {
    color: #059669;
    background: #d1fae5;
    border-color: #6ee7b7;
}

.pfc-blockchain-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

@keyframes fadeInSeal {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}