/* ============================================================================
   MODAL DE PERFIL · hoja única del sistema
   ----------------------------------------------------------------------------
   Estas reglas vivían dentro de styles/styles.css y estaban además copiadas en
   otras seis hojas (cursos, cursos1, eventos, WPSC, RRHH, editar_evento). Cada
   copia se fue separando de las demás, así que el mismo modal se veía distinto
   según la página desde la que se abriera.

   Ahora hay una sola. La carga el propio templates/perfil/modal_perfil.php, de
   modo que cualquier página que incluya el modal recibe sus estilos sin tener
   que acordarse de enlazarlos.

   Salió tal cual de styles.css, que era la versión del index: esa es la que
   manda, y a la que se igualaron las demás.
   ============================================================================ */




/* ======================================================= */
/*              EDITOR DE FOTO DE PERFIL                   */
/* ======================================================= */

/* Overlay de cámara sobre el avatar — aparece en hover */
.pmodal-avatar-ring {
  cursor: pointer;
  position: relative;
}

.pmodal-avatar-edit-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-fast);
  color: var(--white);
  font-size: 1.4rem;
  pointer-events: none;
}

.pmodal-avatar-ring:hover .pmodal-avatar-edit-overlay {
  opacity: 1;
}

/* Panel editor */
.pmodal-photo-editor {
  padding: 0 var(--spacing-lg) var(--spacing-lg);
}

/* Tabs archivo / URL */
.photo-tabs {
  display: flex;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
  background: var(--gray-100);
  border-radius: var(--radius-md);
  padding: 4px;
}

/* ----------------------------------------------------------------------------
   Valores propios del modal
   ----------------------------------------------------------------------------
   Estos tokens vivian en styles/styles.css, que no todas las paginas cargan:
   cursos.php no carga ninguna hoja que los defina y eventos.php solo tiene
   --primary. Al compartir el modal, ahi salia practicamente sin estilos.

   Van declarados sobre .pmodal-overlay, no sobre :root, por dos razones: no
   pisan las variables de la pagina que lo hospeda, y garantizan que el modal
   se vea igual en las once vistas aunque cada una defina las suyas.
   ---------------------------------------------------------------------------- */
.pmodal-overlay {
  --danger: #dc3545;
  --dark: #111011;
  --dark-bg: #121212;
  --dark-primary: #649FBE;
  --dark-secondary: #9e9e9e;
  --dark-surface: #1e1e1e;
  --dark-text: #e0e0e0;
  --gray-100: #f6f7f8;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --primary: #19507F;
  --primary-accent: #649FBE;
  --primary-accent-rgb: 100, 159, 190;
  --primary-dark: #195C9A;
  --primary-dark-rgb: 25, 92, 154;
  --primary-light: #1C68A9;
  --primary-rgb: 25, 80, 127;
  --radius-full: 9999px;
  --radius-md: 0.5rem;
  --radius-sm: 0.25rem;
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --spacing-lg: 1.5rem;
  --spacing-md: 1rem;
  --spacing-sm: 0.5rem;
  --spacing-xl: 2rem;
  --spacing-xs: 0.25rem;
  --success: #28a745;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;
  --text-xxl: 1.5rem;
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --white: #ffffff;
}

/* Los bloques de tema oscuro llevan los DOS selectores a proposito.
   El index y cursos marcan el tema con body.dark-mode; el portal de RRHH lo
   marca con html[data-tema="oscuro"]. Al compartir una sola hoja, si solo se
   pusiera .dark-mode el modal saldria en claro dentro de RRHH aunque el resto
   de la pagina estuviera oscura, que es justo lo que pasaba. */
.dark-mode .photo-tabs,
html[data-tema="oscuro"] .photo-tabs {
  background: var(--gray-800);
}

.photo-tab {
  flex: 1;
  padding: 0.45rem 0.75rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gray-600);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
}

.dark-mode .photo-tab,
html[data-tema="oscuro"] .photo-tab {
  color: var(--gray-400);
}

.photo-tab.active {
  background: var(--white);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.dark-mode .photo-tab.active,
html[data-tema="oscuro"] .photo-tab.active {
  background: var(--gray-700);
  color: var(--dark-primary);
}

/* Label de archivo */
.photo-file-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 0.6rem var(--spacing-md);
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--gray-600);
  transition: border-color var(--transition-fast), color var(--transition-fast);
  width: 100%;
  box-sizing: border-box;
}

.photo-file-label:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.dark-mode .photo-file-label,
html[data-tema="oscuro"] .photo-file-label {
  border-color: var(--gray-600);
  color: var(--gray-400);
}

.dark-mode .photo-file-label:hover,
html[data-tema="oscuro"] .photo-file-label:hover {
  border-color: var(--dark-primary);
  color: var(--dark-primary);
}

/* Input URL */
.photo-tab-content[id="contentUrl"] {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
}

.photo-url-input {
  flex: 1;
  padding: 0.55rem 0.75rem;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-family: 'Montserrat', sans-serif;
  font-size: var(--text-xs);
  color: var(--dark);
  background: var(--white);
  outline: none;
  transition: border-color var(--transition-fast);
  min-width: 0;
}

.photo-url-input:focus {
  border-color: var(--primary);
}

.dark-mode .photo-url-input,
html[data-tema="oscuro"] .photo-url-input {
  background: var(--gray-800);
  border-color: var(--gray-600);
  color: var(--dark-text);
}

.photo-url-preview-btn {
  padding: 0.55rem 0.85rem;
  background: var(--primary);
  color: var(--white);
  border: none;
  border-radius: var(--radius-md);
  font-family: 'Montserrat', sans-serif;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
}

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

/* Vista previa */
.photo-preview-wrap {
  display: flex;
  justify-content: center;
  margin: var(--spacing-md) 0 var(--spacing-sm);
}

.photo-preview-wrap img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--primary-accent);
  box-shadow: var(--shadow-md);
}

/* Botones del editor */
.photo-editor-actions {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
  margin-top: var(--spacing-md);
}

/* Mensaje de estado */
.photo-status {
  text-align: center;
  font-size: var(--text-xs);
  font-family: 'Montserrat', sans-serif;
  margin-top: var(--spacing-sm);
  min-height: 1.2em;
  transition: color var(--transition-fast);
}

.photo-status.ok  { color: var(--success); }
.photo-status.err { color: var(--danger); }

/* ======================================================= */
/*                 MODAL DE PERFIL                         */
/* ======================================================= */

/* Overlay */
.pmodal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

.pmodal-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* Card del modal */
.pmodal-card {
  position: relative;
  background: var(--white);
  border-radius: 20px;
  width: 100%;
  max-width: 400px;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  transform: translateY(28px) scale(0.96);
  transition: transform 0.32s cubic-bezier(.22, 1, .36, 1);
}

.dark-mode .pmodal-card,
html[data-tema="oscuro"] .pmodal-card {
  background: var(--dark-surface);
}

.pmodal-overlay.active .pmodal-card {
  transform: translateY(0) scale(1);
}

/* Botón cerrar */
.pmodal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.28);
  border: none;
  color: var(--white);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}

.pmodal-close:hover {
  background: rgba(0, 0, 0, 0.55);
}

/* Banda superior */
.pmodal-banner {
  height: 100px;
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 55%, var(--primary-light) 100%);
  position: relative;
  overflow: hidden;
}

/* Logo decorativo en la banda */
.pmodal-banner-logo {
  position: absolute;
  right: 18px;
  bottom: 10px;
  width: 54px;
  height: 54px;
  object-fit: contain;
  opacity: 0.22;
  pointer-events: none;
  user-select: none;
  filter: brightness(0) invert(1);
}

/* Avatar del modal */
.pmodal-avatar-wrap {
  display: flex;
  justify-content: center;
  margin-top: -52px;
  position: relative;
  z-index: 2;
}

.pmodal-avatar-ring {
  width: 104px;
  height: 104px;
  border-radius: var(--radius-full);
  padding: 3px;
  background: linear-gradient(145deg, var(--primary-accent), var(--primary-dark));
  box-shadow: var(--shadow-lg);
  position: relative;
}

.pmodal-avatar-ring img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  object-fit: cover;
  display: block;
}

.pmodal-avatar-fallback {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  color: var(--gray-500);
}

/* Cuerpo del modal */
.pmodal-body {
  padding: var(--spacing-lg) 1.75rem var(--spacing-xl);
  text-align: center;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Loader spinner */
.pmodal-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg) 0;
}

.pmodal-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(var(--primary-rgb), 0.15);
  border-top-color: var(--primary);
  border-radius: var(--radius-full);
  animation: pmSpin 0.75s linear infinite;
}

@keyframes pmSpin {
  to { transform: rotate(360deg); }
}

/* Nombre del usuario */
.pmodal-name {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--text-xxl);
  font-weight: 700;
  color: var(--dark);
  margin-top: var(--spacing-sm);
  line-height: 1.2;
}

.dark-mode .pmodal-name,
html[data-tema="oscuro"] .pmodal-name {
  color: var(--dark-text);
}

/* Divisor decorativo */
.pmodal-divider {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0.9rem auto var(--spacing-md);
  width: 180px;
}

.pmodal-divider::before,
.pmodal-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray-300);
}

.dark-mode .pmodal-divider::before,
html[data-tema="oscuro"] .pmodal-divider::before,
.dark-mode .pmodal-divider::after,
html[data-tema="oscuro"] .pmodal-divider::after {
  background: var(--gray-700);
}

.pmodal-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--primary-accent);
  flex-shrink: 0;
}

/* Badge número de empleado */
.pmodal-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-full);
  padding: 0.45rem var(--spacing-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-600);
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.05em;
}

.dark-mode .pmodal-badge,
html[data-tema="oscuro"] .pmodal-badge {
  background: var(--gray-800);
  border-color: var(--gray-700);
  color: var(--gray-400);
}

.pmodal-badge i {
  color: var(--primary);
  font-size: var(--text-xs);
}

.pmodal-prefix {
  color: var(--primary-light);
  font-weight: 700;
}

/* Pill de rol */
.pmodal-role-pill {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.28rem 0.85rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
}

.pmodal-role-pill.admin {
  background: rgba(var(--primary-dark-rgb), 0.1);
  color: var(--primary-dark);
  border: 1px solid rgba(var(--primary-dark-rgb), 0.3);
}

.pmodal-role-pill.empleado {
  background: rgba(var(--primary-accent-rgb), 0.1);
  color: var(--primary);
  border: 1px solid rgba(var(--primary-accent-rgb), 0.3);
}

/* Botones de acción */
.pmodal-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: var(--spacing-lg);
  justify-content: center;
  flex-wrap: wrap;
}

.pmodal-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem var(--spacing-lg);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  text-decoration: none;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.pmodal-btn-primary {
  background: var(--primary);
  color: var(--white);
  border: 1px solid var(--primary);
}

.pmodal-btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--white);
}

.dark-mode .pmodal-btn-primary,
html[data-tema="oscuro"] .pmodal-btn-primary {
  background: var(--dark-primary);
  border-color: var(--dark-primary);
  color: var(--dark-bg);
}

.pmodal-btn-outline {
  background: transparent;
  color: var(--dark);
  border: 1px solid var(--gray-300);
}

.pmodal-btn-outline:hover {
  background: var(--gray-100);
  color: var(--dark);
}

.dark-mode .pmodal-btn-outline,
html[data-tema="oscuro"] .pmodal-btn-outline {
  color: var(--dark-text);
  border-color: var(--gray-600);
}

.dark-mode .pmodal-btn-outline:hover,
html[data-tema="oscuro"] .pmodal-btn-outline:hover {
  background: var(--gray-800);
}

/* Error */
.pmodal-error {
  color: var(--gray-600);
  font-family: 'Montserrat', sans-serif;
}

.dark-mode .pmodal-error,
html[data-tema="oscuro"] .pmodal-error {
  color: var(--dark-secondary);
}

.pmodal-error i {
  font-size: 2.5rem;
  color: var(--primary);
  display: block;
  margin-bottom: 0.75rem;
}

/* Data wrapper */
.pmodal-data {
  width: 100%;
}