/* css/usuarios_perfil.css */

.usuarios-perfil-page {
  color: #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.usuarios-perfil-page .up-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.usuarios-perfil-page .up-kicker {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  color: #9ca3af;
}

.usuarios-perfil-page .up-title {
  margin: 2px 0;
  color: #f59e0b;
  font-size: 26px;
}

.usuarios-perfil-page .up-subtitle {
  margin: 0;
  color: #cbd5e1;
}

.usuarios-perfil-page .up-session {
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 10px;
  padding: 8px 12px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.usuarios-perfil-page .up-session-label {
  color: #9ca3af;
}

.usuarios-perfil-page .up-session-value {
  font-weight: 700;
}

.usuarios-perfil-page .up-layout {
  display: grid;
  grid-template-columns: 2fr minmax(260px, 1.0fr);
  gap: 16px;
}

.usuarios-perfil-page .up-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.usuarios-perfil-page .up-card {
  background: linear-gradient(135deg, #253458 0%, #648bdf 40%, #1d3779 100%); /* Fondo degradado oscuro para dar profundidad */
  border: 1px solid #1f2937; /* Delimita el card con un borde sutil */
  border-radius: 14px; /* Esquinas redondeadas para suavizar el contenedor */
  padding: 14px 16px; /* Espacio interno para separar el contenido de los bordes */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35); /* Sombra pronunciada para efecto de flotación */
}

.usuarios-perfil-page .up-card-perfil {
  min-height: 600px;
}

.usuarios-perfil-page .up-card-head h3 {
  margin: 0 0 4px;
  color: #f9fafb;
}

.usuarios-perfil-page .up-head-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.usuarios-perfil-page .up-card-head p {
  margin: 0;
  color: #9ca3af;
}

.usuarios-perfil-page .up-profile-select {
  min-width: 260px;
  max-width: 320px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.usuarios-perfil-page .up-card-body {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.usuarios-perfil-page .up-profile {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  align-items: center;
}

.usuarios-perfil-page .up-profile-photo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.usuarios-perfil-page .up-profile-photo img {
  width: 190px;
  height: 190px;
  border-radius: 16px;
  object-fit: cover;
  background: #0b1224;
  border: 1px solid #1f2937;
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
}

.usuarios-perfil-page .up-name-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.usuarios-perfil-page .up-name-line {
  font-size: 38px;
  font-weight: 800;
  color: #daab28;
  line-height: 1.2;
}

.usuarios-perfil-page .up-rut-line {
  font-size: 28px;
  color: #ddcbe1;
  letter-spacing: 0.3px;
}

.usuarios-perfil-page .up-muted {
  color: #9ca3af;
  font-size: 12px;
}

.usuarios-perfil-page .up-profile-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 14px;
  margin-top: 12px;
}

@media (max-width: 900px) {
  .usuarios-perfil-page .up-profile-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .usuarios-perfil-page .up-profile-info {
    grid-template-columns: 1fr;
  }
}

.usuarios-perfil-page .up-field {
  background: #1e3151;
  border: 1px solid #1f2937;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.usuarios-perfil-page .up-label {
  color: #9ca3af;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.usuarios-perfil-page .up-value {
  font-weight: 700;
  color: #f9fafb;
}

.usuarios-perfil-page select,
.usuarios-perfil-page textarea {
  width: 100%;
  background: #0b1224;
  color: #e5e7eb;
  border: 1px solid #1f2937;
  border-radius: 10px;
  padding: 10px 12px;
  box-sizing: border-box;
}

.usuarios-perfil-page textarea {
  resize: vertical;
  min-height: 120px;
}

.usuarios-perfil-page .up-hint {
  margin: 0;
  color: #9ca3af;
  font-size: 12px;
}

/* Popup Nueva Anotación (estilo detallado) */
#up-modal .ss-modal__panel {               /* Contenedor principal del popup */
  max-width: 700px;                        /* Ancho máximo para que no ocupe toda la pantalla */
  width: min(700px, 92vw);                 /* Ancho fluido, pero acotado en pantallas pequeñas */
  background: #2f415f;                     /* Fondo oscuro para contraste */
  border: 1px solid #1f2937;               /* Borde sutil que define el contorno */
  border-radius: 14px;                     /* Esquinas redondeadas */
  box-shadow: 0 20px 40px rgba(0,0,0,0.45);/* Sombra profunda para efecto flotante */
}

#up-modal .ss-modal__body {                /* Cuerpo interior del popup */
  padding: 16px;                           /* Espaciado interno cómodo */
}

.up-modal-form {                           /* Formulario dentro del popup */
  display: flex;                           /* Coloca los hijos en flujo flex */
  flex-direction: column;                  /* Campos apilados verticalmente */
  gap: 14px;                               /* Separación uniforme entre filas */
}

.up-form-grid {                            /* Grid para organizar campos en columnas */
  display: grid;                           /* Activa rejilla */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Columnas adaptables mínimo 220px */
  gap: 12px 14px;                          /* Espaciado entre columnas y filas */
}

.up-form-field {                           /* Cada campo con su etiqueta */
  display: flex;                           /* Flex para apilar label/control */
  flex-direction: column;                  /* Label encima del control */
  gap: 6px;                                /* Separación label-control */
  color: #cbd5e1;                          /* Texto claro */
}

.up-form-field span {                      /* Etiquetas de los campos */
  font-size: 12px;                         /* Tamaño pequeño */
  color: #9ca3af;                          /* Color gris suave */
}

.up-form-field select,
.up-form-field textarea {                  /* Controles del formulario */
  width: 95%;                             /* Ocupan todo el ancho del contenedor */
  padding: 10px;                           /* Relleno interno cómodo */
  background: #4d658c;                     /* Fondo oscuro */
  color: #e5e7eb;                          /* Texto claro */
  border: 1px solid #1f2937;               /* Borde discreto */
  border-radius: 10px;                     /* Esquinas redondeadas */
}

.up-form-field textarea {                  /* Área de detalle */
  resize: vertical;                        /* Permite redimensionar verticalmente */
  min-height: 300px;                       /* Altura mínima para escribir cómodo */
}

.up-form-check {                           /* Checkbox + texto en una línea */
  flex-direction: row;                     /* Alinea checkbox y texto horizontal */
  align-items: center;                     /* Centra verticalmente */
  gap: 8px;                                /* Separación entre checkbox y texto */
}

.up-form-full {                            /* Campo que ocupa todo el ancho del grid */
  grid-column: 1 / -1;                     /* Se expande a todas las columnas */
  padding: 0 4px;                          /* Pequeño acolchado lateral para no tocar el borde */
}

.up-modal-actions {                        /* Pie de acciones del popup */
  display: flex;                           /* Botones en línea */
  justify-content: flex-end;               /* Alineados a la derecha */
  gap: 10px;                               /* Separación entre botones */
  margin-top: 4px;                         /* Espaciado superior */
}

.up-modal-actions .up-btn {                /* Botones del popup */
  padding: 10px 14px;                      /* Relleno cómodo */
  border-radius: 10px;                     /* Esquinas suaves */
  border: 1px solid #1d4ed8;               /* Borde azul para el primario */
  background: #2563eb;                     /* Fondo azul principal */
  color: #f9fafb;                          /* Texto claro */
  font-weight: 700;                        /* Texto destacado */
  cursor: pointer;                         /* Cursor de acción */
}

.up-modal-actions .up-btn.ghost {          /* Botón secundario (cancelar) */
  background: #0b1224;                     /* Fondo oscuro para menor énfasis */
  border: 1px solid #334155;               /* Borde gris azulado */
  color: #cbd5e1;                          /* Texto claro */
}

.usuarios-perfil-page .up-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 14px;
  align-items: center;
  margin-top: 12px;
}

.usuarios-perfil-page .up-form-grid textarea {
  grid-column: 1 / -1;
}

.usuarios-perfil-page .up-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #e5e7eb;
}

.usuarios-perfil-page .up-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
}

.usuarios-perfil-page .up-btn {
  border: 1px solid #334155;
  background: #1f2937;
  color: #e5e7eb;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease;
}

.usuarios-perfil-page .up-btn.primary {
  background: linear-gradient(120deg, #2563eb, #1d4ed8);
  border-color: #1d4ed8;
  color: #f9fafb;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
}

.usuarios-perfil-page .up-btn.ghost {
  background: #0b1224;
  color: #cbd5e1;
}

.usuarios-perfil-page .up-btn:hover {
  transform: translateY(-1px);
}

.usuarios-perfil-page .up-notes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.usuarios-perfil-page .up-note {
  background: #0b1224;
  border: 1px solid #1f2937;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

.usuarios-perfil-page .up-note-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.usuarios-perfil-page .up-note-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.usuarios-perfil-page .up-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.usuarios-perfil-page .up-badge.positivo { background: #14532d; color: #bbf7d0; }
.usuarios-perfil-page .up-badge.negativo { background: #7f1d1d; color: #fecaca; }
.usuarios-perfil-page .up-badge.neutro { background: #312e81; color: #c7d2fe; }

.usuarios-perfil-page .up-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #334155;
  color: #e2e8f0;
  font-size: 12px;
  background: #0f172a;
}

.usuarios-perfil-page .up-chip.soft {
  background: #111827;
  color: #cbd5e1;
}

.usuarios-perfil-page .up-chip.danger {
  border-color: #b91c1c;
  color: #fecdd3;
  background: #450a0a;
}

.usuarios-perfil-page .up-note-date {
  color: #9ca3af;
  font-size: 12px;
}

.usuarios-perfil-page .up-note-author {
  color: #cbd5e1;
  font-weight: 600;
  margin-bottom: 6px;
}

.usuarios-perfil-page .up-note-body {
  color: #e5e7eb;
  line-height: 1.5;
  white-space: pre-wrap;
}

.usuarios-perfil-page .up-empty {
  padding: 16px;
  text-align: center;
  color: #9ca3af;
  background: #0b1224;
  border: 1px dashed #1f2937;
  border-radius: 12px;
}

/* TomSelect ajustes locales */
.usuarios-perfil-page .ts-wrapper.single .ts-control {
  min-height: 46px;
  height: 46px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #1f2937;
  background: #0b1224;
  color: #e5e7eb;
}

.usuarios-perfil-page .ts-wrapper.single .ts-control .item { color: #f9fafb; }
.usuarios-perfil-page .ts-wrapper.single .ts-control .ts-placeholder { color: #6b7280; }
.usuarios-perfil-page .ts-dropdown { background: #0b1224; border: 1px solid #1f2937; color: #e5e7eb; }
.usuarios-perfil-page .ts-dropdown .option { padding: 8px 10px; }
.usuarios-perfil-page .ts-dropdown .option.active,
.usuarios-perfil-page .ts-dropdown .option.selected { background: #1f2937; }

@media (max-width: 1024px) {
  .usuarios-perfil-page .up-layout { grid-template-columns: 1fr; }
  .usuarios-perfil-page .up-profile { grid-template-columns: 1fr; }
  .usuarios-perfil-page .up-profile-photo { align-items: flex-start; }
.usuarios-perfil-page .up-head-flex { align-items: flex-start; }
.usuarios-perfil-page .up-profile-select { min-width: 100%; max-width: 100%; }
}

@media (max-width: 640px) {
  .usuarios-perfil-page .up-header { align-items: flex-start; }
  .usuarios-perfil-page .up-session { width: 100%; }
}