.hv-page { /* contenedor general de la hoja de vida */
  display: grid; /* usa grid para organizar bloques */
  gap: 16px; /* separacion uniforme de 16px entre secciones */
}

.hv-usuario-seleccion { /* nombre/usuario seleccionado */
  font-weight: 600; /* seminegrita para resaltar */
  color: #fff; /* texto blanco */
}

.hv-form-wrapper { /* contenedor del formulario */
  display: none; /* oculto por defecto */
}
.hv-form-wrapper.activa { /* cuando se activa */
  display: block; /* se muestra en bloque */
}

.hv-grid { /* layout del formulario */
  display: grid; /* usa grid */
  grid-template-columns: 2fr 1fr; /* columna izquierda mas ancha (2x) que la derecha */
  gap: 12px; /* espacio entre columnas */
}

.hv-form .hv-field { /* cada campo del formulario */
  display: flex; /* usa flex para apilar */
  flex-direction: column; /* acomoda etiqueta y control en columna */
  margin-bottom: 10px; /* separacion inferior entre campos */
}
.hv-form .hv-field label { /* etiquetas de campos */
  color: #dfe6f0; /* color claro */
  font-weight: 600; /* seminegrita */
  margin-bottom: 4px; /* espacio bajo la etiqueta */
}

.hv-select,
.hv-form input,
.hv-form select,
.hv-form textarea { /* controles de entrada */
  background: #faf8f8; /* fondo oscuro */
  color: #090909; /* texto claro */
  border: 1px solid #4a4e57; /* borde gris oscuro */
  border-radius: 6px; /* esquinas redondeadas */
  padding: 10px; /* relleno interno */
  width: 100%; /* ocupa todo el ancho disponible */
  box-sizing: border-box; /* incluye borde y padding en el ancho total */
}

.hv-form textarea { /* textareas */
  resize: vertical; /* solo permiten redimensionar verticalmente */
  min-height: 200px; /* altura minima de 80px */
}

.hv-Tipo textarea { /* textareas */
  resize: vertical; /* solo permiten redimensionar verticalmente */
  min-height: 40px; /* altura minima select Tipo */
}

.hv-switches { /* contenedor de switches/checks */
  display: flex; /* en fila por defecto */
  gap: 16px; /* espacio entre elementos */
  flex-wrap: wrap; /* permite que bajen a otra linea */
  margin: 10px 0; /* margen vertical */
}
.switch-inline { /* switch alineado con texto */
  display: inline-flex; /* elementos en linea con flex */
  gap: 8px; /* espacio entre checkbox y texto */
  align-items: center; /* centra verticalmente */
}

.hv-btn-full { /* boton de ancho completo */
  width: 100%; /* ocupa todo el ancho */
  display: block; /* se comporta como bloque */
  text-align: center; /* centra el texto */
}

.hv-tabla-filtro { /* contenedor del filtro en la planilla */
  display: flex; /* apila etiqueta y select */
  flex-direction: column; /* posicion vertical */
  gap: 4px; /* separacion entre elementos */
  min-width: 400px; /* ancho minimo para el tomselect */
}

.hv-form .acciones button,
.hv-btn-guardar { /* botones principales/guardar */
  background: #1c1fe1; /* fondo azul primario */
  color: #fff; /* texto blanco */
  border: none; /* sin borde extra */
  padding: 10px 16px; /* relleno horizontal/vertical */
  border-radius: 8px; /* esquinas redondeadas */
  cursor: pointer; /* cursor de mano */
  font-weight: 600; /* seminegrita */
}
.hv-form .acciones button:hover,
.hv-btn-guardar:hover { /* hover de botones */
  background: #2456b7; /* azul mas oscuro al pasar el mouse */
}

.hv-tabla { /* tabla de hoja de vida */
  table-layout: auto; /* permite ajustar por contenido */
}

.hv-tabla th:nth-child(1),
.hv-tabla td:nth-child(1) { /* Fecha */
  width: 1%;
  white-space: nowrap;
}

.hv-tabla th:nth-child(2),
.hv-tabla td:nth-child(2) { /* Tipo */
  width: 1%;
  white-space: nowrap;
}

.hv-tabla th:nth-child(3),
.hv-tabla td:nth-child(3) { /* Autor */
  width: 1%;
  white-space: nowrap;
}

.hv-tabla th:nth-child(4),
.hv-tabla td:nth-child(4) { /* Visibilidad */
  width: 1%;
  white-space: nowrap;
}

.hv-tabla th:nth-child(5),
.hv-tabla td:nth-child(5) { /* Notificar */
  width: 1%;
  white-space: nowrap;
}

.hv-tabla th:nth-child(7),
.hv-tabla td:nth-child(7) { /* Acciones */
  width: 1%;
  white-space: nowrap;
}

.hv-tabla th:nth-child(6),
.hv-tabla td:nth-child(6) { /* Detalle */
  width: auto;
}

.hv-tabla th:last-child,
.hv-tabla td:last-child { /* Acciones */
  width: 1%;
}

.hv-tabla td.detalle { /* columna detalle en tablas */
  white-space: normal; /* permite usar todo el ancho disponible */
  word-break: break-word;
}

.hv-acciones { /* contenedor de botones de accion */
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.hv-btn-accion { /* botones de accion */
  border: none;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  color: #fff;
}

.hv-btn-ver { background: #27ae60; }
.hv-btn-ver:hover { background: #1f8c4d; }
.hv-btn-editar { background: #2f6fed; }
.hv-btn-editar:hover { background: #2456b7; }
.hv-btn-borrar { background: #e74c3c; }
.hv-btn-borrar:hover { background: #c0392b; }

/* Modal editar hoja de vida (mismo estilo que usuarios_perfil) */
#hv-modal-edit .ss-modal__panel {
  max-width: 700px;
  width: min(700px, 92vw);
  background: #2f415f;
  border: 1px solid #1f2937;
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.45);
}

#hv-modal-edit .ss-modal__body { padding: 16px; }

#hv-modal-edit .up-modal-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#hv-modal-edit .up-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 14px;
}

#hv-modal-edit .up-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #cbd5e1;
}

#hv-modal-edit .up-form-field span {
  font-size: 12px;
  color: #9ca3af;
}

#hv-modal-edit .up-form-field select,
#hv-modal-edit .up-form-field textarea {
  width: 95%;
  padding: 10px;
  background: #4d658c;
  color: #e5e7eb;
  border: 1px solid #1f2937;
  border-radius: 10px;
}

#hv-modal-edit .up-form-field textarea {
  resize: vertical;
  min-height: 300px;
}

#hv-modal-edit .up-form-check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

#hv-modal-edit .up-form-full {
  grid-column: 1 / -1;
  padding: 0 4px;
}

#hv-modal-edit .up-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

#hv-modal-edit .up-modal-actions .up-btn {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #1d4ed8;
  background: #2563eb;
  color: #f9fafb;
  font-weight: 700;
  cursor: pointer;
}

#hv-modal-edit .up-modal-actions .up-btn.ghost {
  background: #0b1224;
  border: 1px solid #334155;
  color: #cbd5e1;
}

.hv-tipo { /* estilo base del tipo */
  font-weight: 700; /* resalta el tipo */
}
.hv-tipo-positiva { color: #16a34a; } /* verde */
.hv-tipo-neutra   { color: #ea580c; } /* naranjo */
.hv-tipo-negativa { color: #dc2626; } /* rojo */

/* Ajustes TomSelect */
.ts-wrapper.single .ts-control { /* control principal TomSelect */
  min-height: 42px; /* altura minima */
  height: 42px; /* altura fija */
  padding: 8px 12px; /* relleno interno */
  border-radius: 6px; /* esquinas redondeadas */
  border: 1px solid #555; /* borde gris */
  background: #cfcdcd; /* fondo oscuro */
  color: #fff; /* texto claro */
}
.ts-wrapper.single .ts-control .item { /* item seleccionado */
  color: #ffffff; /* texto blanco */
}
.ts-wrapper.single .ts-control .ts-placeholder { /* placeholder */
  color: #484545; /* gris claro */
}
.ts-wrapper.single .ts-control::after { /* flecha del control */
  border-top-color: #ccc; /* color de la flecha */
}
.ts-dropdown { /* menu desplegable */
  z-index: 9999 !important; /* prioridad sobre otros elementos */
  background: #edecec; /* fondo oscuro */
  color: #000000; /* texto claro */
  border: 1px solid #555; /* borde gris */
  max-height: 240px; /* altura maxima antes de scroll */
  overflow: auto; /* agrega scroll si excede altura */
}
.ts-dropdown .option { /* opciones del menu */
  padding: 8px 10px; /* relleno interno */
}
.ts-dropdown .option.active,
.ts-dropdown .option.selected { /* opcion activa/seleccionada */
  background: #3a3a3a; /* fondo resaltado */
}
.ts-wrapper { /* contenedor general TomSelect */
  width: 100%; /* ocupa todo el ancho */
}
.ts-control { /* control cuando se sobreescribe estilo base */
  background: #fff !important; /* fondo blanco forzado */
  color: #111 !important; /* texto oscuro forzado */
  min-height: 42px; /* altura minima */
  padding: 8px 10px; /* relleno interno */
  border-radius: 6px; /* esquinas redondeadas */
}
.ts-control .item,
.ts-item-visible { /* item visible/seleccionado en control */
  color: #111 !important; /* texto oscuro */
}
.ts-option-visible { /* opciones visibles en dropdown */
  color: #111 !important; /* texto oscuro */
}