/* Tornasol – estilos (colores tomados del CV original y del prototipo aprobado). */
:root {
  --acento: #C1E3B9;
  --oscuro: #2D2D2D;
  --medio: #555555;
  --suave: #6B6B6B;
  --borde: #E2E6E0;
  --borde-campo: #C9CFC6;
  --fondo: #F4F6F3;
  --fondo-claro: #FAFBF9;
  --peligro: #A12A1F;
  --ok: #1F5E23;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--oscuro); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.5; }
h1 { font-size: 28px; line-height: 1.2; margin: 0 0 20px; }
h2 { font-size: 20px; margin: 0 0 12px; }
a { color: var(--oscuro); }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--oscuro); outline-offset: 2px; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nota { color: var(--medio); font-size: 13px; font-weight: 400; }

/* Estructura */
.estructura { display: flex; flex-wrap: wrap; min-height: 100vh; }
.lateral { flex: 1 1 240px; max-width: 100%; background: #FFFFFF; border-right: 1px solid var(--borde); padding: 28px 18px; display: flex; flex-direction: column; gap: 28px; }
.contenido { flex: 999 1 560px; min-width: 0; padding: 32px 40px 64px; max-width: 1120px; }
.marca { display: flex; flex-direction: column; gap: 8px; font-size: 18px; font-weight: 700; text-decoration: none; padding: 0 12px; margin: 0 0 8px; }
.marca-barra { width: 32px; height: 6px; border-radius: 3px; background: var(--acento); }
.menu { display: flex; flex-direction: column; gap: 4px; }
.menu-pie { margin-top: auto; border-top: 1px solid var(--borde); padding-top: 16px; }
.menu-usuaria { padding: 0 12px 6px; font-size: 13px; color: var(--medio); }
.menu-item { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; border-radius: 8px; text-decoration: none; color: var(--medio); font-weight: 500; width: 100%; text-align: left; }
.menu-item.activo { background: var(--acento); color: var(--oscuro); font-weight: 700; }
.menu-item.deshabilitado { color: #8A8F87; cursor: not-allowed; }
.menu-item small { font-size: 11px; font-weight: 400; }
.boton-enlace { background: none; border: 0; cursor: pointer; padding: 0; text-decoration: underline; }
.menu .boton-enlace { text-decoration: none; padding: 0 12px; }

/* Botones */
.boton { min-height: 44px; padding: 0 18px; border: 0; border-radius: 8px; background: var(--oscuro); color: #FFFFFF; font-weight: 500; cursor: pointer; }
.boton-secundario { background: #FFFFFF; color: var(--oscuro); border: 1px solid var(--borde-campo); }
.boton-peligro { background: var(--peligro); }
.boton-ancho { width: 100%; margin-top: 18px; }
.icono { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--oscuro); cursor: pointer; flex: 0 0 auto; }
.icono:hover { background: var(--fondo); }

/* Avisos y carga */
.aviso { padding: 10px 14px; border-radius: 8px; margin: 0 0 16px; }
.aviso-ok { background: #EEF6EC; color: var(--ok); }
.aviso-error { background: #FBECEA; color: #8E2318; }
.cargando { position: fixed; inset: 0; background: rgba(255,255,255,0.55); display: flex; align-items: flex-start; justify-content: center; padding-top: 18vh; z-index: 100; }
.cargando[hidden] { display: none; }
.cargando span { background: var(--oscuro); color: #FFFFFF; padding: 12px 20px; border-radius: 10px; font-weight: 500; box-shadow: 0 6px 20px rgba(0,0,0,0.2); }

/* Tarjetas y formularios */
.tarjeta { background: #FFFFFF; border: 1px solid var(--borde); border-radius: 12px; padding: 24px; margin-bottom: 20px; }
.tarjeta-angosta { max-width: 440px; }
.fondo-acceso { display: flex; align-items: flex-start; justify-content: center; padding: 64px 16px; min-height: 100vh; }
.tarjeta-acceso { width: 100%; max-width: 400px; }
.tarjeta-acceso .marca { padding: 0; margin-bottom: 20px; }
label, .etiqueta-campo { display: block; font-weight: 500; margin: 14px 0 6px; }
input[type=text], input[type=password], input[type=email], input[type=tel] { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--borde-campo); border-radius: 8px; background: #FFFFFF; }
.invalido { border-color: var(--peligro) !important; }
label.casilla { display: flex; align-items: center; gap: 8px; font-weight: 400; margin-top: 16px; }
label.casilla input { width: 18px; height: 18px; margin: 0; accent-color: var(--oscuro); }
form .boton { margin-top: 18px; }
.fila-formulario { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.fila-formulario > div { flex: 1 1 220px; }
.fila-formulario .boton { margin-top: 0; }
.fila-formulario.compacta { flex-wrap: nowrap; }
.fila-formulario.compacta input { min-width: 140px; }
.tabla-envoltorio { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla th { font-size: 13px; color: var(--medio); }

/* Secciones del CV */
.rejilla-secciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.tarjeta-seccion { min-height: 96px; padding: 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; background: #FFFFFF; border: 1px solid var(--borde); border-radius: 12px; text-decoration: none; font-size: 16px; font-weight: 500; }
.tarjeta-seccion.deshabilitada { color: #8A8F87; background: var(--fondo-claro); cursor: not-allowed; flex-direction: column; align-items: flex-start; justify-content: space-between; }
.tarjeta-seccion small { font-size: 12px; font-weight: 400; }

/* Directorio */
.volver { display: inline-block; font-size: 14px; color: var(--medio); text-decoration: none; margin-bottom: 16px; }
.cabecera-seccion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.cabecera-seccion h1 { margin: 0; }
.barra-directorio { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 24px; margin-bottom: 20px; }
.grupo-vista { display: flex; flex-direction: column; gap: 4px; }
.selector-vista { display: flex; padding: 3px; gap: 2px; background: #FFFFFF; border: 1px solid var(--borde); border-radius: 10px; }
.selector-vista button { width: 44px; height: 38px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: transparent; cursor: pointer; }
.selector-vista button[aria-pressed="true"] { background: var(--oscuro); color: #FFFFFF; }
.grupo-filtro { min-width: 0; padding-top: 25px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-filtro { height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid var(--borde-campo); background: #FFFFFF; cursor: pointer; font-size: 14px; }
.chip-filtro.activo { background: var(--acento); border-color: var(--oscuro); }
.etiqueta { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 12px; background: var(--acento); font-size: 12px; font-weight: 500; }
.vacio { padding: 24px; background: #FFFFFF; border: 1px dashed var(--borde-campo); border-radius: 12px; color: var(--medio); }
.lista-directorio { background: #FFFFFF; border: 1px solid var(--borde); border-radius: 12px; overflow-x: auto; }
.fila-lista { display: grid; grid-template-columns: minmax(0, 1fr) 56px; align-items: center; border-bottom: 1px solid #EEF1EC; min-width: 760px; }
.fila-lista:last-child { border-bottom: 0; }
.cabecera-lista { background: var(--fondo-claro); font-size: 13px; font-weight: 700; color: var(--medio); }
.columnas-cabecera { display: grid; grid-template-columns: 1fr 1fr 2.4fr 1.1fr; gap: 16px; padding: 12px 16px; }
.fila-abrir { display: grid; grid-template-columns: 1fr 1fr 2.4fr 1.1fr; gap: 16px; align-items: center; padding: 14px 16px; border: 0; background: transparent; text-align: left; cursor: pointer; font-size: 14px; }
.fila-abrir:hover, .tarjeta-abrir:hover { background: var(--fondo-claro); }
.una-linea { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #444444; }
.rejilla-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.tarjeta-item { position: relative; background: #FFFFFF; border: 1px solid var(--borde); border-radius: 12px; }
.tarjeta-abrir { width: 100%; min-height: 140px; padding: 20px 64px 20px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; border: 0; border-radius: 12px; background: transparent; text-align: left; cursor: pointer; }
.tarjeta-abrir strong { font-size: 17px; }
.tarjeta-abrir .chips { margin-top: auto; }
.tarjeta-borrar { position: absolute; top: 10px; right: 10px; }

/* Modales */
.modal { width: min(640px, calc(100vw - 32px)); border: 0; border-radius: 14px; padding: 28px; color: var(--oscuro); }
.modal::backdrop { background: rgba(20,20,20,0.45); }
.modal-ancho { width: min(680px, calc(100vw - 32px)); }
.modal-angosto { width: min(460px, calc(100vw - 32px)); }
.modal h2 { margin: 0; }
.modal-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.iconos { display: flex; gap: 2px; }
.destacado { font-size: 16px; font-weight: 700; margin: 0 0 10px; }
.texto-justificado { text-align: justify; line-height: 1.6; margin: 0; font-size: 14px; }
.botonera { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.botonera .boton { margin-top: 0; }

/* Campo de etiquetas */
.combo { position: relative; }
.combo-caja { min-height: 44px; padding: 5px 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border: 1px solid var(--borde-campo); border-radius: 8px; background: #FFFFFF; }
.combo-caja input[type=text] { flex: 1 1 160px; min-width: 0; height: 32px; border: 0; padding: 0 4px; }
.combo-caja input:focus { outline: none; }
.combo-caja:focus-within { outline: 2px solid var(--oscuro); outline-offset: 1px; }
.etiqueta-quitable { gap: 2px; padding-right: 2px; font-size: 13px; }
.quitar { width: 24px; height: 24px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; font-size: 15px; line-height: 1; }
.combo-lista { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; margin: 4px 0 0; padding: 4px; list-style: none; background: #FFFFFF; border: 1px solid var(--borde-campo); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
.combo-lista[hidden] { display: none; }
.opcion { width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; text-align: left; cursor: pointer; }
.opcion:hover { background: var(--fondo); }
.opcion-crear { min-height: 40px; display: flex; align-items: center; padding: 0 10px; }

/* Editor de texto con negrita */
.editor { border: 1px solid var(--borde-campo); border-radius: 8px; overflow: hidden; }
.editor-barra { display: flex; gap: 4px; padding: 6px; border-bottom: 1px solid var(--borde); background: var(--fondo-claro); }
.editor-barra button { width: 36px; height: 36px; border: 1px solid var(--borde-campo); border-radius: 6px; background: #FFFFFF; cursor: pointer; }
.editor-area { min-height: 140px; padding: 12px; line-height: 1.55; font-size: 14px; }
.editor-area:focus { outline: none; }
.editor:focus-within { outline: 2px solid var(--oscuro); outline-offset: 1px; }
.editor-area:empty::before { content: attr(data-placeholder); color: var(--suave); }
.contador { display: block; text-align: right; margin-top: 6px; }
.contador.excedido { color: var(--peligro); font-weight: 700; }

/* Gestión de etiquetas */
.lista-etiquetas { list-style: none; margin: 12px 0 0; padding: 0; }
.fila-etiqueta { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--borde); padding: 4px 0; }

@media (max-width: 640px) {
  .contenido { padding: 24px 16px 48px; }
  .barra-directorio { grid-template-columns: 1fr; row-gap: 12px; }
  .grupo-filtro { padding-top: 0; }
}

/* Datos de contacto */
.lista-contactos .columnas-cabecera, .lista-contactos .fila-abrir { grid-template-columns: 1.1fr 1fr 1.1fr 1.4fr 1fr; }
.foto-detalle { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: block; margin: 4px 0 12px; border: 1px solid #E3E8E0; }
.campo-foto { display: flex; align-items: center; gap: 12px; margin: 4px 0 8px; }
.foto-vista { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 1px solid #E3E8E0; background: var(--fondo-claro); }
[hidden] { display: none !important; }
.campo-foto label.boton { margin: 0; display: inline-flex; align-items: center; font-weight: 500; }
.foto-vacia { width: 64px; height: 64px; border-radius: 50%; border: 1px dashed #C9D1C4; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #7A8577; }
.oculto-accesible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.datos-contacto p { margin: 2px 0; }
.datos-contacto a { word-break: break-all; }
.campo-foto:has(input[type=file]:focus-visible) label.boton { outline: 2px solid var(--oscuro); outline-offset: 2px; }
.campo-foto .boton { margin: 0; height: 40px; display: inline-flex; align-items: center; }

/* Experiencias */
.subtitulo { margin: 6px 0 0; color: var(--medio); }
.detalle-entidad { margin: -6px 0 20px; color: #444444; max-width: 760px; }
textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--borde-campo); border-radius: 8px; background: #FFFFFF; resize: vertical; }
select, input[type=number] { height: 44px; padding: 0 10px; border: 1px solid var(--borde-campo); border-radius: 8px; background: #FFFFFF; font: inherit; color: inherit; }
.selector { width: 100%; }
.arbol { background: #FFFFFF; border: 1px solid var(--borde); border-radius: 12px; overflow-x: auto; }
.fila-arbol { --sangria: 0px; display: grid; grid-template-columns: calc(64px + var(--sangria)) minmax(0, 1fr) 140px; align-items: center; column-gap: 4px; padding: 4px 8px; border-bottom: 1px solid #EEF1EC; min-width: 640px; }
.fila-arbol:last-child { border-bottom: 0; }
.fila-arbol.cabecera-lista .sin-cursor { cursor: default; min-height: 0; }
.fila-arbol.cabecera-lista .sin-cursor:hover { background: transparent; }
.fila-arbol-abrir { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 16px; align-items: center; min-height: 44px; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; text-decoration: none; color: inherit; font-size: 14px; }
.fila-arbol-abrir:hover { background: var(--fondo-claro); }
.nivel-experiencia .fila-arbol-abrir strong { font-size: 15px; color: var(--oscuro); }
.nivel-enfoque { --sangria: 28px; }
.nivel-puesto { --sangria: 56px; }
.fila-arbol > .plegar { justify-self: end; }
.plegar { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.plegar svg { transition: transform 0.15s; }
.plegar.abierta svg { transform: rotate(90deg); }
.acciones-arbol { display: flex; justify-content: flex-end; }
.hueco { width: 44px; height: 44px; }
.mas-abajo { font-weight: 700; font-size: 14px; }
.bloques-enfoque { display: flex; flex-direction: column; gap: 16px; }
.bloque-enfoque { background: #FFFFFF; border: 1px solid var(--borde); border-radius: 12px; padding: 8px; }
.bloque-enfoque-titulo { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 6px 12px; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 16px; }
.bloque-enfoque-titulo:hover, .fila-puesto:hover, .fila-puesto-tabla:hover, .linea-datos:hover, .tarjeta-puesto:hover { background: var(--fondo-claro); }
.fila-puesto { width: 100%; display: flex; justify-content: space-between; gap: 16px; min-height: 44px; align-items: center; padding: 6px 12px 6px 24px; border: 0; border-top: 1px solid #EEF1EC; background: transparent; text-align: left; cursor: pointer; font-size: 14px; }
.sin-puestos { margin: 4px 12px 8px 24px; }
.barra-vista { margin-bottom: 20px; align-items: flex-start; }
.tabla-puestos { overflow: hidden; }
.fila-puesto-tabla { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 16px; align-items: center; padding: 14px 16px; border: 0; border-bottom: 1px solid #EEF1EC; background: transparent; text-align: left; cursor: pointer; font-size: 14px; }
.fila-puesto-tabla:last-child { border-bottom: 0; }
.tabla-puestos .cabecera-lista { cursor: default; padding: 12px 16px; }
.tarjeta-puesto { min-height: 110px; padding: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; background: #FFFFFF; border: 1px solid var(--borde); border-radius: 12px; text-align: left; cursor: pointer; }
.tarjeta-puesto strong { font-size: 16px; }
.linea-tiempo { list-style: none; margin: 8px 0 0; padding: 0; position: relative; }
.linea-tiempo li { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 0 6px 28px; }
.linea-tiempo li::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: var(--borde); }
.linea-tiempo li:first-child::before { top: 50%; }
.linea-tiempo li:last-child::before { bottom: 50%; }
.linea-tiempo li:only-child::before { display: none; }
.linea-tiempo .punto { position: absolute; left: 2px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--acento); border: 2px solid var(--oscuro); }
.linea-datos { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; font-size: 14px; }
button.linea-datos { cursor: pointer; }
.linea-nombre { font-weight: 600; }
.comentarios { margin: 0 0 12px; padding: 10px 12px; background: var(--fondo-claro); border-radius: 8px; font-size: 14px; white-space: pre-line; }
.lista-bullets { margin: 4px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.55; }
.lista-bullets li { margin-bottom: 6px; }
.lista-bullets .sin-vineta { list-style: none; margin-left: -20px; }
.fechas { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-top: 4px; }
.fechas fieldset { border: 0; margin: 0; padding: 0; }
.fechas legend { font-weight: 500; padding: 0; margin: 14px 0 6px; }
.fila-fecha { display: flex; gap: 8px; }
.fila-fecha .mes { width: 150px; }
.fila-fecha input[type=number] { width: 100px; }
.fechas select:disabled, .fechas input:disabled { opacity: 0.45; }
.casilla-presente { margin: 0 0 10px !important; }
.cabecera-bullets { display: flex; align-items: baseline; justify-content: space-between; margin-top: 8px; }
.editor-bullets { list-style: none; margin: 0; padding: 0; border: 1px solid var(--borde); border-radius: 8px; min-height: 8px; }
.editor-bullets:empty { border-style: dashed; min-height: 44px; }
.fila-bullet { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; border-bottom: 1px solid #EEF1EC; }
.fila-bullet:last-child { border-bottom: 0; }
.fila-bullet.editando { display: block; padding: 8px; }
.texto-bullet { margin: 0; padding: 8px 4px; font-size: 14px; cursor: text; }
.linea-bullet { display: flex; align-items: center; gap: 6px; border: 1px solid var(--borde-campo); border-radius: 8px; padding: 4px; }
.linea-bullet:focus-within { outline: 2px solid var(--oscuro); outline-offset: 1px; }
.boton-negrita-bullet { width: 36px; height: 36px; border: 1px solid var(--borde-campo); border-radius: 6px; background: #FFFFFF; cursor: pointer; flex: 0 0 auto; }
.editor-linea { flex: 1; min-height: 36px; padding: 7px 6px; font-size: 14px; white-space: nowrap; overflow-x: auto; }
.editor-linea:focus { outline: none; }
.editor-linea:empty::before { content: attr(data-placeholder); color: var(--suave); }
.botonera-separada { justify-content: space-between; align-items: center; }
.botonera-separada > .boton { margin-top: 0; }
.botonera-derecha { display: flex; gap: 10px; margin-left: auto; }

/* Generador de PDF */
.boton-enlace-sin { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.modal-grande { width: min(880px, calc(100vw - 32px)); }
.rejilla-generador { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-bottom: 20px; }
.tarjeta-generador { min-height: 150px; padding: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; background: #FFFFFF; border: 1px solid var(--borde); border-radius: 12px; text-align: left; cursor: pointer; }
.tarjeta-generador strong { font-size: 17px; margin-top: auto; }
.tarjeta-generador:hover:not(:disabled) { background: var(--fondo-claro); }
.tarjeta-generador.lista { border-color: var(--oscuro); }
.tarjeta-generador:disabled { color: #8A8F87; background: var(--fondo-claro); cursor: not-allowed; }
.enlace-deshabilitado { color: #8A8F87; text-decoration: underline; cursor: not-allowed; font-size: 14px; }
.lista-secciones { list-style: none; margin: 0 0 20px; padding: 0; background: #FFFFFF; border: 1px solid var(--borde); border-radius: 12px; }
.fila-seccion { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid #EEF1EC; }
.fila-seccion:last-child { border-bottom: 0; }
.fila-seccion .boton { margin-left: auto; }
.fila-seccion .icono:disabled { color: #B5BBB2; cursor: not-allowed; background: transparent; }
.nombre-seccion { font-weight: 600; }
.nombre-seccion.apagada { color: #8A8F87; font-weight: 400; }
.marca-lista { display: inline-flex; width: 22px; color: var(--ok); }
.boton-chico { min-height: 38px; padding: 0 14px; font-size: 14px; }
.boton:disabled { opacity: 0.45; cursor: not-allowed; }
.pie-generador { display: flex; justify-content: flex-end; margin-top: 8px; }
.pie-generador .boton { display: inline-flex; align-items: center; gap: 8px; }
.grupo-estilo { background: #FFFFFF; border: 1px solid var(--borde); border-radius: 12px; padding: 18px 20px; margin-bottom: 14px; }
.titulo-grupo { font-size: 15px; margin: 0 0 10px; }
h3.titulo-grupo { margin-top: 18px; }
.selector-opciones { display: flex; flex-wrap: wrap; gap: 10px; }
.opcion-estilo { min-width: 150px; min-height: 52px; padding: 10px 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; border: 1px solid var(--borde-campo); border-radius: 10px; background: #FFFFFF; cursor: pointer; text-align: left; }
.opcion-estilo[aria-pressed="true"], .opcion-estilo[aria-checked="true"] { border: 2px solid var(--oscuro); background: var(--fondo-claro); padding: 9px 13px; }
.opcion-maqueta { flex-direction: row; align-items: center; gap: 12px; }
.paleta { display: flex; flex-wrap: wrap; gap: 10px; }
.muestra-color { width: 76px; height: 64px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; border: 1px solid rgba(0,0,0,0.08); border-radius: 10px; cursor: pointer; }
.muestra-color[aria-checked="true"] { outline: 3px solid var(--oscuro); outline-offset: 2px; }
.muestra-nombre { font-size: 12px; font-weight: 500; }
.vacio-chico { padding: 14px 16px; font-size: 14px; }
.lista-ordenable { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid var(--borde); border-radius: 10px; background: #FFFFFF; }
.fila-ordenable { display: flex; align-items: center; gap: 8px; padding: 2px 8px; border-bottom: 1px solid #EEF1EC; }
.fila-ordenable:last-child { border-bottom: 0; }
.fila-ordenable.arrastrando { opacity: 0.5; }
.asa { display: inline-flex; color: var(--suave); cursor: grab; padding: 0 4px; }
.posicion { width: 24px; height: 24px; border-radius: 12px; background: var(--acento); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.nombre-ordenable { flex: 1; }
.fila-ordenable .icono:disabled { color: #C5CAC2; cursor: default; background: transparent; }
.lista-seleccion { margin-bottom: 4px; }
.fila-seleccion { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; border-bottom: 1px solid #EEF1EC; min-width: 560px; }
.fila-seleccion.cabecera-lista { grid-template-columns: 48px 1fr 1fr 1fr; padding: 10px 0; }
.fila-seleccion.cabecera-lista span:not(:first-child) { padding: 0 8px; }
.fila-seleccion:last-child { border-bottom: 0; }
.fila-seleccion.elegida, .tarjeta-seleccion.elegida { background: #F1F8EF; }
.fila-seleccion-ver { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: center; padding: 12px 8px; border: 0; background: transparent; text-align: left; cursor: pointer; font-size: 14px; }
.casilla-seleccion { margin: 0; display: flex; align-items: center; justify-content: center; min-height: 44px; cursor: pointer; }
.casilla-seleccion input, .fila-exp input, .casilla-puesto input, .opcion-enfoque input { width: 18px; height: 18px; margin: 0; accent-color: var(--oscuro); }
.casilla-tarjeta { position: absolute; top: 8px; right: 8px; width: 44px; }
.tarjeta-seleccion .tarjeta-abrir { padding-right: 56px; min-height: 120px; }
.fila-exp { display: grid; grid-template-columns: 48px minmax(0, 1.4fr) 1fr 120px; align-items: center; min-height: 48px; margin: 0; padding: 4px 0; border-bottom: 1px solid #EEF1EC; font-weight: 400; cursor: pointer; min-width: 560px; }
.fila-exp:last-child { border-bottom: 0; }
.fila-exp input { justify-self: center; }
.fila-exp.cabecera-lista { cursor: default; }
.nombre-exp { display: inline-flex; align-items: center; gap: 6px; }
.campo-enfoques { border: 0; margin: 0; padding: 0; }
.campo-enfoques legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.opcion-enfoque { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 6px 0 0; padding: 4px 12px; border: 1px solid var(--borde); border-radius: 10px; font-weight: 400; cursor: pointer; }
.opcion-enfoque .nota { margin-left: auto; }
.lista-puestos-sel { list-style: none; margin: 4px 0 8px 28px; padding: 0; }
.lista-puestos-sel li { display: flex; align-items: center; border-bottom: 1px solid #EEF1EC; }
.casilla-puesto { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; font-weight: 400; cursor: pointer; }
.casilla-puesto .nota { margin-left: auto; padding-right: 8px; }
.ver-cuerpo p { margin: 0 0 8px; font-size: 14px; }
.fila-barra { margin-bottom: 12px; }
.fila-barra-cabecera { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 4px; }
.barra { display: block; height: 12px; border-radius: 6px; background: #E9ECE7; overflow: hidden; }
.barra-relleno { display: block; height: 100%; border-radius: 6px; background: #4E8F45; }
.barra-relleno.excede { background: var(--peligro); }
.texto-excede { color: var(--peligro); font-weight: 700; font-size: 14px; }
.grupo-ocupacion { margin: 10px 0 4px; font-weight: 600; }
.fila-porcentaje { display: grid; grid-template-columns: minmax(0, 1fr) 160px 56px; gap: 12px; align-items: center; font-size: 14px; padding: 3px 0; }
.fila-porcentaje .nota { text-align: right; }
.barra-chica { height: 8px; }
.barra-chica .barra-relleno { background: var(--oscuro); opacity: 0.55; }

/* Listas simples (Habilidades blandas, Herramientas, Idiomas) */
.filtro-solo { padding-top: 0; margin-bottom: 16px; }
.lista-simple { overflow: visible; }
.fila-simple { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) 96px; gap: 16px; align-items: center; padding: 4px 8px 4px 16px; border-bottom: 1px solid #EEF1EC; font-size: 14px; }
.lista-idiomas .fila-simple { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr) 96px; }
.fila-simple.cabecera-lista { padding: 12px 8px 12px 16px; }
.fila-simple:last-child { border-bottom: 0; }
.texto-elemento { font-weight: 500; }
.acciones-fila { display: flex; justify-content: flex-end; }
.fila-edicion { padding: 12px 16px; background: var(--fondo-claro); border-bottom: 1px solid #EEF1EC; }
.campos-linea { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.campo-linea { flex: 1 1 180px; display: flex; flex-direction: column; gap: 4px; }
.campo-linea.ancho { flex: 2 1 240px; }
.campo-linea label { margin: 0; font-size: 12px; color: var(--medio); }
.campo-linea input[type=text] { height: 40px; }
.campo-linea .contador { margin: 0; }
.combo-chico { min-height: 40px; padding: 3px 6px; }
.combo-chico input[type=text] { height: 30px; }
.sugerencias-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; }
.sugerencia { height: 30px; padding: 0 10px; border: 1px solid var(--borde-campo); border-radius: 15px; background: #FFFFFF; font-size: 13px; cursor: pointer; }
.acciones-linea { display: flex; gap: 4px; padding-top: 22px; }
.icono-oscuro { background: var(--oscuro); color: #FFFFFF; width: 40px; height: 40px; }
.icono-oscuro:hover { background: #000000; }
.icono-borde { border: 1px solid var(--borde-campo); width: 40px; height: 40px; background: #FFFFFF; }
.error-linea { margin: 8px 0 0; color: var(--peligro); font-size: 13px; }
.vacio-dentro { margin: 0; padding: 24px 16px; color: var(--medio); font-size: 14px; }
.nota-lista { margin-top: 12px; }

/* Secciones con fichas (Estudios, Cursos, Intereses) */
.lista-estudios .columnas-cabecera, .lista-estudios .fila-abrir { grid-template-columns: 1fr 1.3fr 1.3fr 0.7fr 0.7fr; }
.lista-cursos .columnas-cabecera, .lista-cursos .fila-abrir { grid-template-columns: 1fr 1.6fr 1.2fr 0.5fr 1fr; }
.lista-intereses .columnas-cabecera, .lista-intereses .fila-abrir { grid-template-columns: 1fr 3fr; }
.campo-form { display: flex; flex-direction: column; margin-bottom: 4px; }
.campo-form label { margin: 14px 0 6px; }
.campo-form .contador { margin-top: 4px; }
.campo-anio { width: 120px; }
.datos-ficha p { margin: 2px 0; }
.datos-ficha .chips { margin-top: 10px; }
.cursiva { font-style: italic; color: var(--medio); }
.nota-gris { color: var(--medio); }
.una-linea-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Generador: selección múltiple (versión 2) */
.lista-multiple { max-height: 320px; overflow-y: auto; margin-bottom: 4px; }
.fila-multiple { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid #EEF1EC; }
.fila-multiple:last-child { border-bottom: 0; }
.fila-multiple.elegida { background: #F1F8EF; }
.chips-derecha { margin-left: auto; }
.casilla-puesto .chips-derecha + .nota, .fila-multiple .nota { margin-left: 4px; }
.boton-b { width: 40px; height: 36px; flex: 0 0 auto; border: 1px solid var(--borde-campo); border-radius: 6px; background: #FFFFFF; font-weight: 700; cursor: pointer; }
.boton-b.activo { background: var(--oscuro); color: #FFFFFF; border-color: var(--oscuro); }
.boton-b:disabled { opacity: 0.35; cursor: not-allowed; }
.en-negrita { font-weight: 700; }
.aviso-seccion { display: inline-flex; align-items: center; }
.acciones-seccion { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.fila-seccion .acciones-seccion .boton { margin-left: 0; }

/* Configuraciones guardadas */
.banda-configuracion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; margin-bottom: 20px; background: #FFFFFF; border: 1px solid var(--oscuro); border-radius: 12px; }
.banda-textos { display: flex; flex-direction: column; gap: 2px; }
.banda-textos strong { font-size: 17px; }
.texto-cambios { font-size: 13px; color: #8A4B00; }
.banda-botones { display: flex; gap: 10px; }
.banda-botones .boton { margin-top: 0; }
.pie-inicio { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.enlace-configs { font-size: 15px; min-height: 44px; }
.lista-configs .columnas-cabecera, .lista-configs .fila-abrir { grid-template-columns: 1.2fr 1.6fr 0.8fr 1fr; }
.lista-configs .fila-lista { grid-template-columns: minmax(0, 1fr) 100px; }

/* Idiomas del CV (HU-80 a HU-83) */
.nota-idiomas { margin: -8px 0 20px; max-width: 720px; }
.fila-idioma-cv { display: grid; grid-template-columns: minmax(0, 1.4fr) 90px minmax(0, 1fr) 140px; gap: 16px; align-items: center; padding: 4px 8px 4px 16px; border-bottom: 1px solid #EEF1EC; font-size: 14px; min-width: 620px; }
.fila-idioma-cv:last-child { border-bottom: 0; }
.fila-idioma-cv.cabecera-lista { padding: 12px 8px 12px 16px; }
.codigo-idioma { font-weight: 700; letter-spacing: 0.04em; }
.texto-pendiente { color: #8A4B00; font-size: 13px; }
.titulo-archivados { font-size: 17px; margin: 28px 0 4px; }
.titulo-archivados + .nota { margin: 0 0 12px; }
.campos-idioma { display: flex; flex-wrap: wrap; gap: 0 16px; }
.campos-idioma .campo-form { flex: 1 1 260px; }
.campos-idioma .campo-codigo { flex: 0 0 120px; }
.campo-codigo input { text-transform: uppercase; }
.grupo-titulos { border: 1px solid var(--borde); border-radius: 12px; padding: 4px 18px 18px; margin: 16px 0 8px; }
.grupo-titulos legend { font-weight: 700; padding: 0 6px; }
.grupo-titulos > .nota { margin: 4px 0 8px; }
#f-titulos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.campo-traduccion { display: flex; flex-direction: column; }
.campo-traduccion label { margin: 14px 0 6px; }
.referencia-es { font-style: italic; color: #8A8F87; font-size: 14px; font-weight: 400; user-select: text; cursor: text; }
.marca-cv { font-style: normal; color: var(--oscuro); }
@media (max-width: 640px) { #f-titulos { grid-template-columns: minmax(0, 1fr); } }

/* Pestañas de idioma en los formularios (HU-84 a HU-86) */
.barra-idioma-caja:empty { display: none; }
.pestanas-idioma { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px; border-bottom: 1px solid var(--borde); margin: 4px 0 14px; }
.pestana { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; background: transparent; color: var(--medio); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; margin-bottom: -1px; }
.pestana.activa { background: #FFFFFF; border-color: var(--borde); color: var(--oscuro); font-weight: 700; }
.pestana:not(.activa):hover { color: var(--oscuro); }
.pestana-selector { padding-right: 8px; }
.pestana-texto { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.pestana-selector select { height: 32px; padding: 0 8px; border: 1px solid var(--borde-campo); border-radius: 6px; background: #FFFFFF; font: inherit; font-size: 14px; color: var(--oscuro); }
.panel-idioma { display: flex; flex-direction: column; }
.panel-idioma.campos-linea { flex-direction: row; }
.campo-traduccion-form { display: flex; flex-direction: column; margin-bottom: 6px; }
.campo-traduccion-form input[type=text], .campo-traduccion-form textarea { width: 100%; box-sizing: border-box; }
.cabeza-traduccion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 2px; }
.cabeza-traduccion label { margin: 0; }
.campo-traduccion-linea .cabeza-traduccion { margin: 0; }
.campo-traduccion-linea .cabeza-traduccion label { font-size: 12px; color: var(--medio); }
.panel-idioma .referencia-es { margin: 0 0 6px; overflow-wrap: anywhere; }
.campo-traduccion-linea .referencia-es { margin: 0; font-size: 13px; }
.marca-desactualizada { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 10px; background: #FFF4E5; border: 1px solid #F2C48D; color: #8A4B00; font-size: 12px; font-weight: 500; }
.etiqueta-traduccion { font-weight: 500; }
.editor-bullet .editor-area { min-height: 56px; }
.campo-bullet-traduccion + .campo-bullet-traduccion .cabeza-traduccion { margin-top: 10px; }

/* Generador: Seleccionar contenido en cuadros e idioma del CV (HU-87 a HU-92) */
.idioma-cv { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 18px; }
.idioma-cv-texto { font-weight: 500; }
.chip-idioma { min-height: 40px; padding: 0 16px; border-radius: 20px; font-size: 14px; }
.aviso-idioma { background: #FFF4E5; color: #6B3A00; border: 1px solid #F2C48D; }
.aviso-idioma a { color: #6B3A00; font-weight: 500; }
.cuadros-secciones { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cuadro-seccion { display: grid; grid-template-columns: 18px 32px minmax(0, 1fr) 40px; align-items: center; column-gap: 6px; height: 64px; box-sizing: border-box; padding: 0 16px; background: #FFFFFF; border: 1px solid var(--borde); border-radius: 10px; }
.cuadro-seccion:hover { background: #F1F8EF; }
.estado-seccion { display: flex; align-items: center; justify-content: center; width: 18px; height: 40px; color: var(--ok); }
.estado-seccion .aviso-seccion { cursor: help; }
.estado-seccion svg { width: 18px; height: 18px; }
.cuadro-seccion .ojo { width: 32px; height: 40px; padding: 0; color: var(--medio); }
.cuadro-seccion .nombre-seccion { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cuadro-seccion.oculta .nombre-seccion { color: #8A8F87; font-weight: 400; }
.boton-seccion { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--borde-campo); border-radius: 8px; background: #FFFFFF; color: var(--oscuro); cursor: pointer; }
.boton-seccion:hover:not(:disabled) { border-color: var(--oscuro); }
.boton-seccion:disabled { color: #B5BBB2; border-color: var(--borde); cursor: not-allowed; }
@media (max-width: 720px) { .cuadros-secciones { grid-template-columns: minmax(0, 1fr); } }
.aviso-ventana { display: grid; grid-template-columns: 20px 1fr; column-gap: 10px; align-items: start; margin: 12px 0 4px; padding: 12px 14px; background: #FFF4E5; border: 1px solid #F2C48D; border-radius: 10px; color: #6B3A00; font-size: 13px; }
.aviso-ventana strong { display: block; font-size: 14px; margin-bottom: 2px; }
.aviso-ventana-icono { display: flex; height: 20px; align-items: center; }
.marcas-traduccion { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; padding: 2px 16px 8px 46px; }
.marca-sin-traducir, .marca-desactualizada-gen { color: #8A4B00; }
.enlace-traducir { font-weight: 500; color: var(--oscuro); }
.fila-marcas-exp { border-bottom: 1px solid #EEF1EC; }
.lista-puestos-sel li .marcas-traduccion, .tarjeta-seleccion .marcas-traduccion { flex-basis: 100%; padding-left: 28px; }
#exp-cuerpo > .marcas-traduccion { padding: 0 0 10px; }
.fila-seleccion > .marcas-traduccion { grid-column: 1 / -1; padding-left: 48px; }
.fila-multiple { flex-wrap: wrap; }
.fila-multiple > .marcas-traduccion { flex-basis: 100%; padding: 0 0 8px 30px; }
.lista-puestos-sel li { flex-wrap: wrap; }

/* Paquete 18: todo lo que no sale en el CV va en violeta (rótulos, etiquetas, comentarios de enfoques) */
:root { --violeta: #D02F7E; --violeta-oscuro: #941F59; --lila: #FAD6E8; }   /* fucsia vivo: lo que no sale en el CV (paquete 26) */
.rotulo, .rotulo strong { color: var(--violeta); }
.campo-no-cv { color: var(--violeta); font-style: italic; }
.campo-no-cv .nota { font-style: italic; color: var(--violeta); opacity: .8; }
.texto-no-cv, .texto-no-cv::placeholder { color: var(--violeta); }
.texto-no-cv::placeholder { opacity: .55; }
.etiqueta { background: var(--lila); color: var(--violeta-oscuro); }
.chip-filtro { color: var(--violeta-oscuro); }
.chip-filtro.activo { background: var(--lila); border-color: var(--violeta-oscuro); }
.chip-idioma { color: var(--oscuro); }
.chip-idioma.activo { background: var(--acento); border-color: var(--oscuro); }
#te-comentarios { color: var(--violeta); }

/* Perfil: Rótulo y Rol profesional, editar y edición en la misma fila */
.lista-perfiles .columnas-cabecera, .lista-perfiles .fila-abrir { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
.lista-perfiles .fila-lista, .lista-contactos .fila-lista { grid-template-columns: minmax(0, 1fr) 100px; }
.lista-perfiles .fila-lista .acciones-fila, .lista-contactos .fila-lista .acciones-fila { padding-right: 8px; }
.fila-en-linea { grid-template-columns: minmax(0, 1fr) auto; background: var(--fondo-claro); }
.celdas-en-linea { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 16px; align-items: center; padding: 10px 16px; font-size: 14px; }
.celdas-en-linea input { height: 40px; }
.botones-en-linea { display: flex; gap: 8px; align-items: center; padding-right: 12px; }
.fila-en-linea .error-linea { grid-column: 1 / -1; margin: 0 16px 10px; }

/* Datos de contacto: sin columna País, Nombre para el CV y foto con etiquetas en la misma fila */
.lista-contactos .columnas-cabecera, .lista-contactos .fila-abrir { grid-template-columns: 1.1fr 1.4fr 1.5fr 1fr; }
.caja-nombre-cv { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px 16px; background: #FFFFFF; border: 1px solid var(--borde); border-radius: 12px; }
.caja-nombre-cv > label { margin: 0; flex-basis: 100%; }
.nombre-cv-texto { margin: 0; font-size: 15px; }
.nombre-cv-edicion { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1 1 100%; }
.nombre-cv-edicion input { flex: 1 1 280px; height: 40px; }
.caja-nombre-cv .error-linea { flex-basis: 100%; margin: 0; }
.fila-foto-etiquetas { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; }
.fila-foto-etiquetas .combo { margin-top: 0; }
.nota-sin-traduccion { margin: 0 0 4px; }
@media (max-width: 640px) { .fila-foto-etiquetas { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* Listas simples: sin columna de etiquetas */
.lista-simple:not(.lista-idiomas) .fila-simple { grid-template-columns: minmax(0, 1fr) 96px; }
.lista-perfiles .fila-lista.fila-en-linea { grid-template-columns: minmax(0, 1fr) auto; }
input:disabled { background: #F1F2EF; color: #8A8F87; cursor: not-allowed; }

/* Paquete 19: pestañas por idioma con triángulo y campos sin traducir en rojo */
.pestana .aviso-pestana { display: inline-flex; margin-left: 6px; }
.pestana .aviso-pestana[hidden] { display: none; }
.falta-traducir, .editor.falta-traducir { border-color: var(--peligro) !important; box-shadow: 0 0 0 1px var(--peligro); }

/* Paquete 19: filtro de etiquetas en una línea o como desplegable con casillas */
.grupo-filtro { flex-wrap: nowrap; }
.grupo-filtro > .nota, .grupo-filtro > .boton-enlace { flex: none; white-space: nowrap; }
.grupo-filtro > .chips { flex: 0 1 auto; min-width: 0; }
.chips.chips-una-linea { flex-wrap: nowrap; overflow: hidden; }
.chips.chips-ocultos { display: none; }
.desplegable-filtro { position: relative; flex: 0 1 auto; min-width: 0; }
.boton-desplegable { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-desplegable { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 220px; max-height: 320px; overflow-y: auto; padding: 6px; background: #FFFFFF; border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.opcion-desplegable { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 8px; border-radius: 6px; font-size: 14px; font-weight: 400; color: var(--violeta-oscuro); cursor: pointer; white-space: nowrap; }
.opcion-desplegable:hover { background: var(--fondo-claro); }
.opcion-desplegable input { width: 16px; height: 16px; margin: 0; accent-color: var(--violeta-oscuro); }
.opcion-todas { border-bottom: 1px solid var(--borde); border-radius: 6px 6px 0 0; margin-bottom: 4px; }

/* Paquete 19: bullets con asa, orden y botones a la derecha */
.editor-bullets:empty { display: none; }
.cabecera-bullets-derecha { display: inline-flex; align-items: baseline; gap: 14px; }
.fila-bullet { grid-template-columns: 24px minmax(0, 1fr) auto; }
.fila-bullet[draggable="true"] { cursor: default; }
.fila-bullet.arrastrando { opacity: .5; }
.asa-bullet { display: inline-flex; justify-content: center; color: #6B6B6B; cursor: grab; }
.acciones-bullet { display: inline-flex; align-items: center; }
.acciones-bullet .icono:disabled { color: #C5CAC2; cursor: default; background: transparent; }

/* Paquete 19: páginas de experiencia y de enfoque */
.nivel-enfoque .rotulo { font-weight: 700; }
.enfoque-con-copia { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.enfoque-con-copia > .bloque-enfoque { align-self: stretch; }
.bloque-enfoque-cabecera { display: flex; align-items: center; gap: 4px; }
.bloque-enfoque-cabecera .bloque-enfoque-titulo { flex: 1; justify-content: flex-start; gap: 4px; font-weight: 400; color: var(--oscuro); }
.bloque-enfoque-cabecera .bloque-enfoque-titulo strong { font-weight: 700; }
.bloque-enfoque-flecha { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 44px; color: var(--oscuro); border-radius: 8px; }
.bloque-enfoque-flecha:hover { background: var(--fondo-claro); }
.icono-suelto { width: 36px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--medio); cursor: pointer; border-radius: 6px; }
.icono-suelto:hover { color: var(--oscuro); background: #FFFFFF; }
.subtitulo strong { color: var(--oscuro); }
.fila-puesto-tabla { display: grid; grid-template-columns: minmax(0, 1fr) 100px; gap: 0; padding: 0; cursor: default; }
.fila-puesto-tabla.cabecera-lista { grid-template-columns: minmax(0, 1fr) 140px 140px 84px; gap: 16px; padding: 10px 16px; }
.fila-puesto-abrir { display: grid; grid-template-columns: minmax(0, 1fr) 140px 140px; gap: 16px; align-items: center; padding: 14px 16px; border: 0; background: transparent; text-align: left; cursor: pointer; font-size: 14px; }
.fila-puesto-abrir:hover { background: var(--fondo-claro); }
.fila-puesto-tabla .acciones-fila { padding-right: 8px; }
.encabezado-orden { justify-self: start; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: inherit; cursor: pointer; text-decoration: underline dotted; }
.tarjeta-puesto-caja { position: relative; }
.tarjeta-puesto-caja .tarjeta-puesto { width: 100%; padding-right: 96px; }
.acciones-tarjeta { position: absolute; top: 8px; right: 8px; }

/* Paquete 20: cargar los bullets como lista o como párrafo */
.modo-carga { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; }
.chip-modo { height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid var(--borde-campo); background: #FFFFFF; font-size: 14px; color: var(--oscuro); cursor: pointer; }
.chip-modo.activo { background: var(--acento); border-color: var(--oscuro); font-weight: 600; }
.parrafo-bullets .editor-area { min-height: 160px; white-space: pre-wrap; }
.parrafo-bullets .nota { margin: 6px 0 0; }
.texto-excede { color: var(--peligro) !important; }
.aviso-conteo { margin: 6px 0 0; }
.selector-formato { height: 32px; margin: 0 8px; padding: 0 8px; border: 1px solid var(--borde-campo); border-radius: 6px; background: #FFFFFF; font: inherit; font-size: 13px; }
.nota.texto-excede { font-weight: 500; font-size: 13px; }

/* Paquete 21: página del enfoque (experiencia arriba, "Enfoque: rótulo" debajo) */
.subtitulo .etiqueta-enfoque { color: var(--medio); font-style: italic; font-weight: 400; }
.subtitulo strong.rotulo { color: var(--violeta); font-weight: 700; }
.subtitulo:has(.etiqueta-enfoque) { font-size: 20px; margin-top: 2px; }

/* Paquete 22: rótulo de los puestos */
.puesto-con-rotulo { display: inline-flex; gap: 10px; align-items: baseline; min-width: 0; }
.puesto-con-rotulo .rotulo { font-weight: 600; flex: none; }
.tarjeta-puesto .rotulo { font-size: 13px; font-weight: 600; }
.casilla-puesto .rotulo { font-weight: 600; }

/* Paquete 23: experiencias macro, orden manual del directorio y encabezado del árbol */
.titulo-experiencia { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.titulo-experiencia .rotulo { font-weight: 700; }
.nivel-experiencia .fila-arbol-abrir .titulo-experiencia strong.rotulo { color: var(--violeta); }
.etiqueta-macro { flex: none; display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--lila); color: var(--violeta-oscuro); font-size: 11px; font-weight: 600; font-style: normal; letter-spacing: .02em; line-height: 18px; vertical-align: middle; margin-left: 8px; }
.titulo-experiencia .etiqueta-macro { margin-left: 0; }
h1 .titulo-experiencia { gap: 12px; }
h1 .etiqueta-macro { font-size: 13px; line-height: 22px; }
.nombre-exp .etiqueta-macro, .nombre-ordenable .etiqueta-macro { margin-left: 6px; }
.nombre-exp strong.rotulo { color: var(--violeta); }
.casilla-macro { margin-top: 0 !important; margin-bottom: 4px; }
.casilla-macro input { accent-color: var(--violeta) !important; }
.inicio-experiencia { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.asa-experiencia { width: 16px; }
.fila-arbol.nivel-experiencia[draggable="true"] { cursor: default; }
.fila-arbol.arrastrando { opacity: .5; }
.barra-ordenar { display: flex; justify-content: flex-end; margin: 0 0 8px; }
.titulos-arbol .titulo-nivel-experiencia { color: var(--oscuro); font-weight: 700; }
.titulos-arbol .titulo-nivel-enfoque { color: var(--violeta); font-weight: 700; }
.titulos-arbol .titulo-nivel-puesto { color: #444444; font-weight: 400; }   /* como la línea del puesto (paquete 24) */
.nivel-puesto .fila-arbol-abrir .rotulo, .fila-puesto .rotulo { font-weight: 600; }

/* Paquete 24: tabla del enfoque con Rótulo y Puesto en columnas separadas */
.tabla-puestos .fila-puesto-tabla.cabecera-lista { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 140px 140px 124px; }
.tabla-puestos .fila-puesto-abrir { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 140px 140px; }
.celda-rotulo { font-weight: 600; }

/* Paquete 24: X para cerrar en todos los modales */
.modal { position: fixed; }
.cerrar-x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--medio); cursor: pointer; z-index: 1; }
.cerrar-x:hover { background: var(--fondo-claro); color: var(--oscuro); }
.modal.con-cerrar-x > h2, .modal.con-cerrar-x > span.nota:first-of-type, .modal.con-cerrar-x .modal-cabecera { padding-right: 40px; }

/* Paquete 24: "Usar (campo) como rótulo" */
label.casilla.casilla-rotulo { margin: 6px 0 4px; font-size: 13px; }
label.casilla.casilla-rotulo input { width: 16px; height: 16px; accent-color: var(--violeta); }
input.rotulo-copiado:disabled { background: #FDF0F6; color: var(--violeta); cursor: not-allowed; opacity: 1; }

/* Paquete 24: "Cargar detalles del puesto como:" con selector segmentado y línea divisoria */
.modo-carga { flex-direction: column; align-items: flex-start; gap: 8px; margin: 16px 0 4px; }
.selector-segmentado { display: inline-flex; align-items: stretch; padding: 3px; background: #FFFFFF; border: 1px solid var(--borde-campo, var(--borde)); border-radius: 10px; }
.selector-segmentado button { height: 36px; padding: 0 16px; border: 0; border-radius: 7px; background: transparent; font: inherit; font-size: 14px; color: var(--oscuro); cursor: pointer; }
.selector-segmentado button + button { margin-left: 7px; position: relative; }
.selector-segmentado button + button::before { content: ""; position: absolute; left: -4px; top: 6px; bottom: 6px; width: 1px; background: var(--borde-campo, var(--borde)); }
.selector-segmentado button:hover { background: var(--fondo-claro); }
.selector-segmentado button.activo { background: var(--oscuro); color: #FFFFFF; }
.nota-parrafo { display: flex; align-items: center; gap: 6px; margin: 4px 0 6px; }
.info-ayuda { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 15px; color: var(--medio); cursor: help; border-radius: 50%; }
.info-ayuda:hover::after, .info-ayuda:focus::after { content: attr(data-ayuda); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); width: 260px; padding: 8px 10px; border-radius: 8px; background: var(--oscuro); color: #FFFFFF; font-size: 12px; line-height: 1.4; z-index: 5; white-space: normal; }
.info-ayuda:focus { outline: 2px solid var(--violeta); outline-offset: 1px; }

/* Paquete 24: página de la experiencia con Desde, Hasta y acciones a la vista */
.fila-exp-puesto { display: grid; grid-template-columns: minmax(0, 1fr) 184px; align-items: center; gap: 4px; }
.columnas-exp-puesto { display: grid; grid-template-columns: minmax(0, 1fr) 96px 96px; gap: 12px; align-items: center; min-width: 0; }
.bloque-enfoque-cabecera.fila-exp-puesto .bloque-enfoque-titulo { justify-content: flex-start; gap: 4px; font-weight: 400; color: var(--oscuro); }
.bloque-enfoque-cabecera .encabezado-orden { font-size: 13px; font-weight: 600; color: var(--medio); }
.fila-puesto.fila-exp-puesto { padding: 0; cursor: default; }
.fila-exp-abrir { min-height: 44px; padding: 6px 12px 6px 24px; border: 0; background: transparent; text-align: left; font: inherit; font-size: 14px; cursor: pointer; border-radius: 8px; }
.fila-exp-abrir:hover { background: var(--fondo-claro); }
.acciones-exp { display: flex; justify-content: flex-end; gap: 2px; }
.acciones-exp .icono { width: 44px; height: 40px; }

/* Paquete 24: copiar o mover un puesto */
.opciones-destino { border: 0; padding: 0; margin: 16px 0 0; }
.opciones-destino legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.opciones-destino label.casilla { margin-top: 6px; }
.opciones-destino label.casilla input { accent-color: var(--oscuro); }
.opciones-destino label.deshabilitada { color: #A3A7A1; cursor: not-allowed; }
.zona-destino { margin-top: 14px; }
.zona-destino label { display: block; font-weight: 600; margin-bottom: 6px; }
.zona-destino .selector { width: 100%; }
.zona-destino.inactiva { opacity: .45; }
#dlg-destino .nota:last-of-type { margin-top: 10px; }

/* Paquete 24: eliminar el último enfoque */
.botonera-tres { flex-wrap: wrap; }

/* Paquete 24: selección de puestos del Generador con Desde y Hasta */
.lista-puestos-sel li.fila-puesto-sel { display: grid; grid-template-columns: minmax(0, 1fr) 80px 80px 0 44px; align-items: center; column-gap: 8px; }
.lista-puestos-sel.con-formato li.fila-puesto-sel { grid-template-columns: minmax(0, 1fr) 80px 80px 160px 44px; }
.fila-puesto-sel > :nth-child(n+6) { grid-column: 1 / -1; }
.cabecera-puestos-sel { min-height: 36px; font-size: 13px; font-weight: 700; color: var(--medio); padding-left: 28px; }
.cabecera-puestos-sel .encabezado-orden { font-size: 13px; }
.fila-puesto-sel .casilla-puesto .nota { margin-left: 0; }
.hueco-formato { min-width: 0; overflow: hidden; }
.hueco-formato .selector-formato { width: 100%; }
.bloque-enfoque-cabecera .columnas-exp-puesto { padding-right: 12px; }

/* Paquete 25: tabla del enfoque con copiar, editar y eliminar */
.fila-puesto-tabla { grid-template-columns: minmax(0, 1fr) 140px; }

/* Paquete 25: botón "+↓" como cuadrado negro lleno */
.icono.mas-abajo { width: 34px; height: 34px; margin: 5px; border-radius: 8px; background: var(--oscuro); color: #FFFFFF; font-size: 13px; }
.icono.mas-abajo:hover { background: #000000; color: #FFFFFF; }

/* Paquete 25: directorio de Experiencias con fondo intercalado por experiencia */
.arbol .fila-arbol.grupo-impar { background: #F1F3F0; }
.arbol .fila-arbol.grupo-impar .fila-arbol-abrir:hover { background: #E6E9E4; }
.arbol .fila-arbol.grupo-par .fila-arbol-abrir:hover { background: #F4F5F3; }
.arbol .fila-arbol.grupo-impar + .fila-arbol.grupo-impar, .arbol .fila-arbol.grupo-par + .fila-arbol.grupo-par { border-top-color: transparent; }

.campo-busqueda { width: min(340px, 100%); height: 40px; padding: 0 12px; border: 1px solid var(--borde-campo, var(--borde)); border-radius: 8px; background: #FFFFFF; font: inherit; font-size: 14px; }

/* Paquete 25: la X de los modales queda a la vista aunque se desplace el contenido */
.modal.con-cerrar-x { overflow-y: auto; }
.modal.con-cerrar-x > .cerrar-x { position: sticky; top: 0; float: right; margin: -16px -16px 0 8px; background: #FFFFFF; }
.modal.con-cerrar-x > h2, .modal.con-cerrar-x > span.nota:first-of-type, .modal.con-cerrar-x .modal-cabecera { padding-right: 0; }

/* Paquete 25: Generador, elegir experiencias y orden en el CV */
.barra-busqueda { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 12px; }
.barra-busqueda .grupo-filtro { margin: 0; padding: 0; }
.lista-seleccion .cabecera-lista .encabezado-orden { font-size: 13px; color: inherit; }
.opciones-organizacion { border: 0; padding: 0; margin: 4px 0 12px; }
.opciones-organizacion legend { font-weight: 600; margin-bottom: 4px; padding: 0; }
.opciones-organizacion label.casilla { margin-top: 6px; }
.bloque-subtitulo { border: 1px solid var(--borde); border-radius: 10px; padding: 8px 10px; margin: 10px 0; background: #FFFFFF; }
.bloque-subtitulo.sin-asignar { border-style: dashed; }
.cabecera-subtitulo { display: flex; align-items: center; gap: 4px; }
.campo-subtitulo { flex: 1; height: 40px; padding: 0 10px; border: 1px solid var(--borde-campo, var(--borde)); border-radius: 8px; font: inherit; font-weight: 700; text-transform: uppercase; }
.lista-subtitulo { list-style: none; margin: 6px 0 0; padding: 0; }
.fila-exp-subtitulo { display: grid; grid-template-columns: minmax(0, 1fr) 200px 44px 44px; align-items: center; gap: 6px; padding: 2px 0 2px 12px; border-top: 1px solid #EEF1EC; }
.sin-asignar .fila-exp-subtitulo { grid-template-columns: minmax(0, 1fr) 200px; }
.selector-subtitulo { height: 36px; border: 1px solid var(--borde-campo, var(--borde)); border-radius: 6px; background: #FFFFFF; font: inherit; font-size: 13px; padding: 0 6px; }
.campo-con-sufijo { display: flex; align-items: center; gap: 6px; }
.campo-con-sufijo input { flex: 1; }

/* ===================== Paquete 26 ===================== */

/* La etiqueta "Macro" usa la letra de las etiquetas */
.etiqueta-macro { font-style: normal; letter-spacing: .02em; }

/* Paquete 27: "Enfoque:" en fucsia y sin negrita; en la página del enfoque, fucsia agrisado y en cursiva */
.palabra-enfoque { color: var(--violeta); font-weight: 400; }
.subtitulo .etiqueta-enfoque { color: #B06A8E; font-style: italic; font-weight: 400; }

/* Etiquetas: borde fucsia (no salen en el CV) y fondo de la paleta "Clara y vibrante" (lo pone comun.js) */
.etiqueta:not(.etiqueta-fija) { border: 1.5px solid var(--violeta); }

/* Menú de la izquierda fijo, con Mi cuenta, Administración y Cerrar sesión siempre a la vista */
@media (min-width: 820px) {
  .estructura { flex-wrap: nowrap; }
  .lateral { position: sticky; top: 0; height: 100vh; box-sizing: border-box; overflow-y: auto; flex: 0 0 240px; }
}

/* Encabezado fijo: título de la sección y línea de controles; debajo, los títulos de columna */
.encabezado-fijo { position: sticky; top: 0; z-index: 15; background: var(--fondo); margin: 0 -8px; padding: 12px 8px 0; }
.encabezado-fijo .cabecera-seccion { margin-bottom: 12px; }
.lista-directorio, .arbol { overflow: visible; }
.lista-directorio > .cabecera-lista, .arbol > .cabecera-lista { position: sticky; top: var(--alto-encabezado, 0px); z-index: 10; border-radius: 12px 12px 0 0; }

/* Línea de controles: Vista, filtro y "Gestionar etiquetas" juntos; el botón "+ (elemento)" a la derecha */
.barra-directorio.barra-controles { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; margin-bottom: 14px; }
.barra-controles .grupo-filtro { padding-top: 0; margin: 0; min-height: 46px; align-items: center; }
.barra-controles .grupo-vista + .grupo-filtro { min-height: 46px; }
.barra-controles .boton-nuevo-barra { margin-left: auto; align-self: flex-end; }
.barra-controles .campo-busqueda { align-self: center; }
.barra-controles > .boton-enlace { align-self: center; }

/* "+" cuadrado negro al pie del directorio (solo si la lista es más alta que la pantalla) */
.pie-directorio { display: flex; justify-content: flex-end; margin-top: 12px; }
.boton-mas-cuadrado { width: 44px; height: 44px; border: 0; border-radius: 10px; background: var(--oscuro); color: #FFFFFF; font-size: 24px; line-height: 1; cursor: pointer; }
.boton-mas-cuadrado:hover { background: #000000; }

/* Directorio de Experiencias: solo experiencias, con fila de títulos */
.arbol-plano .fila-arbol { grid-template-columns: 44px minmax(0, 1fr) 100px; }
.arbol-plano .inicio-experiencia { justify-content: center; }
.arbol-plano .cabecera-lista .encabezado-orden { font-size: 13px; color: inherit; }
.arbol-plano .cabecera-lista { background: var(--fondo-claro); }

/* Paquete 28: logo y nombre de la app */
.marca { flex-direction: row; align-items: center; gap: 10px; }
.marca-logo { width: 28px; height: 28px; flex: none; }

/* Paquete 28: Secciones del CV en botones cuadrados, de 3 en 3, con ícono */
.rejilla-secciones { grid-template-columns: repeat(3, minmax(0, 180px)); gap: 16px; }
.tarjeta-seccion { aspect-ratio: 1 / 1; min-height: 0; padding: 14px; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.tarjeta-seccion:hover { border-color: var(--violeta); background: #FFFFFF; box-shadow: 0 2px 10px rgba(0, 0, 0, .06); }
.tarjeta-seccion.deshabilitada { align-items: center; justify-content: center; }
.icono-seccion { width: 64px; height: 64px; }
@media (max-width: 560px) { .rejilla-secciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Paquete 28: enfoques opcionales */
.pregunta-enfoques { border: 1px solid transparent; border-radius: 8px; padding: 0; margin: 14px 0 0; }
.pregunta-enfoques legend { font-weight: 500; padding: 0; margin-bottom: 2px; }
.pregunta-enfoques label.casilla { display: inline-flex; margin: 6px 24px 0 0; }
.pregunta-enfoques.invalido { border-color: var(--peligro) !important; padding: 4px 8px 8px; }
.pregunta-enfoques label.deshabilitada { color: #A3A7A1; cursor: not-allowed; }
.bloque-sin-enfoques .titulo-columna { padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--medio); }
.enlace-organizar { display: inline-block; margin-top: 18px; color: #8A8F87; font-size: 13px; }
.enlace-organizar:hover { color: var(--oscuro); }

/* Paquete 28: ocultar bullets en el Generador */
.lista-puestos-sel li.fila-puesto-sel { grid-template-columns: minmax(0, 1fr) 80px 80px 0 88px; }
.lista-puestos-sel.con-formato li.fila-puesto-sel { grid-template-columns: minmax(0, 1fr) 80px 80px 160px 88px; }
.acciones-puesto-sel { display: flex; justify-content: flex-end; gap: 0; }
.nota-ocultos { margin-left: 8px; font-style: italic; }
.lista-ocultar { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid #EEF1EC; }
.fila-ocultar { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; border-bottom: 1px solid #EEF1EC; }
.fila-ocultar .icono { flex: none; }
.texto-ocultar { margin: 10px 0; line-height: 1.45; }
.fila-ocultar.oculto .texto-ocultar { color: #A3A7A1; text-decoration: line-through; }

/* Paquete 29: recorrido de bienvenida */
.modal-recorrido { width: min(480px, calc(100vw - 32px)); padding: 26px 28px 20px; }
.modal-recorrido.rc-celeste { background: #D9EEF0; }
.modal-recorrido.rc-rosa { background: #FAD6E8; }
.modal-recorrido.rc-lila { background: #E6E1F7; }
.modal-recorrido.rc-verde { background: #E3F2DD; }
.modal-recorrido.rc-ambar { background: #FAEEDA; }
.modal-recorrido.con-cerrar-x > h2 { padding-right: 0; }
.rc-grafico { min-height: 176px; border-radius: 12px; background: rgba(255, 255, 255, .65); display: flex; align-items: center; justify-content: center; gap: 22px; padding: 14px; margin: 18px 0 18px; color: var(--oscuro); font-size: 12px; }
.modal-recorrido h2 { font-size: 20px; margin: 0 0 8px; }
.rc-texto p { margin: 0 0 8px; font-size: 15px; line-height: 1.55; }
.rc-firma { font-family: Georgia, "Times New Roman", serif; font-size: 24px !important; color: var(--violeta-oscuro); }
.rc-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.rc-flecha { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--oscuro); color: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.rc-flecha:disabled { opacity: .25; cursor: default; }
.rc-flecha[hidden], .rc-empezar[hidden] { display: none; }
.rc-ico-flecha { width: 20px; height: 20px; }
.rc-empezar { margin: 0; border-radius: 21px; background: var(--violeta); border-color: var(--violeta); }
.rc-puntos { display: flex; gap: 6px; }
.rc-punto { width: 8px; height: 8px; border-radius: 50%; background: rgba(45, 45, 45, .25); }
.rc-punto.activo { background: var(--violeta); }
.rc-ico { width: 16px; height: 16px; flex: none; }
.rc-fucsia { color: var(--violeta); }
.rc-flecha-dibujo { width: 26px; height: 26px; }
.rc-logo { width: 110px; height: 110px; }
.rc-grilla { display: grid; grid-template-columns: repeat(3, 40px); gap: 6px; }
.rc-celda { width: 40px; height: 40px; border-radius: 8px; background: #FFFFFF; border: 1.5px solid var(--oscuro); display: flex; align-items: center; justify-content: center; }
.rc-celda img { width: 30px; height: 30px; }
.rc-arbol { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 13px; }
.rc-chip { display: inline-block; padding: 3px 10px; border-radius: 10px; background: #FFFFFF; border: 1px solid var(--oscuro); white-space: nowrap; }
.rc-chip-enfoque { border-color: var(--violeta); color: var(--violeta-oscuro); }
.rc-chip-macro { background: var(--lila); border-color: var(--violeta); color: var(--violeta-oscuro); font-weight: 600; }
.rc-sangria-1 { margin-left: 22px; } .rc-sangria-2 { margin-left: 44px; } .rc-sangria-3 { margin-left: 56px; }
.rc-nota { color: var(--medio); }
.rc-fila { display: flex; gap: 5px; align-items: center; }
.rc-columna { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rc-copiar { color: var(--violeta); display: flex; }
.rc-macro { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px; border: 1.5px dashed var(--violeta); border-radius: 10px; background: #FFFFFF; }
.rc-ficha-caja { width: 160px; }
.rc-pestanas { display: flex; gap: 2px; margin-left: 8px; }
.rc-pestana { padding: 2px 11px; border: 1.5px solid #B4B2A9; border-bottom: 0; border-radius: 6px 6px 0 0; background: #F1EFE8; color: #5F5E5A; }
.rc-pestana.activa { background: #FFFFFF; border-color: var(--oscuro); color: var(--oscuro); }
.rc-ficha { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px; background: #FFFFFF; border: 1.5px solid var(--oscuro); border-radius: 8px; }
.rc-alias { display: flex; align-items: center; gap: 5px; color: var(--violeta); font-weight: 600; }
.rc-etq { padding: 1px 8px; border-radius: 10px; border: 1px solid var(--violeta); font-size: 11px; }
.rc-etq-azul { background: #B5D4F4; } .rc-etq-ambar { background: #FAC775; }
.rc-linea { display: block; height: 5px; border-radius: 3px; background: #D3D1C7; }
.rc-linea.corta { width: 60%; }
.rc-linea.fucsia { background: var(--violeta); }
.rc-hoja { position: relative; display: flex; flex-direction: column; gap: 5px; width: 70px; height: 96px; padding: 9px 8px; background: #FFFFFF; border: 1.5px solid var(--oscuro); border-radius: 4px; overflow: hidden; }
.rc-hoja-a4 { height: 104px; }
.rc-hoja-larga { height: 146px; }
.rc-fin-hoja { position: absolute; left: 0; right: 0; top: 102px; border-top: 2px dashed #E24B4A; }
.rc-con-insignia { position: relative; display: inline-flex; }
.rc-insignia { position: absolute; right: -13px; bottom: -11px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--oscuro); display: flex; align-items: center; justify-content: center; color: #FFFFFF; }
.rc-insignia-ok { background: #639922; } .rc-insignia-mal { background: #E24B4A; }
.rc-insignia-blanca { background: #FFFFFF; }
.rc-ico-insignia { width: 18px; height: 18px; }
.rc-lista-sel { gap: 6px; min-width: 120px; }
.rc-sel { display: flex; align-items: center; gap: 6px; }
.rc-sel > .rc-ico:last-child { margin-left: auto; }
.rc-sel.apagada { color: #B4B2A9; }
.rc-sel.apagada > .rc-ico:last-child { color: var(--violeta); }
.rc-estilo { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.rc-hoja-cv { padding: 0; gap: 0; }
.rc-cv-cabeza { height: 15px; background: var(--lila); border-bottom: 1px solid var(--oscuro); }
.rc-cv-cuerpo { display: flex; gap: 5px; padding: 6px; }
.rc-cv-col { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.rc-cv-col.angosta { flex: none; width: 18px; }
.rc-color { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--oscuro); }
.rc-color.elegido { border-width: 2px; }
.rc-color.verde { background: #C1E3B9; } .rc-color.rosa { background: #FAD6E8; } .rc-color.azul { background: #B5D4F4; } .rc-color.ambar { background: #FAC775; }
.rc-formato { display: flex; gap: 2px; width: 20px; height: 14px; padding: 1px; border: 1px solid var(--oscuro); border-radius: 2px; background: #FFFFFF; }
.rc-formato.elegido { border-width: 1.5px; }
.rc-formato.dos span:first-child { width: 5px; background: var(--oscuro); } .rc-formato.dos span:last-child { flex: 1; background: var(--oscuro); }
.rc-foto { max-height: 150px; max-width: 200px; }
.rc-corazon { width: 40px; height: 40px; color: var(--violeta); fill: var(--violeta); }

/* Paquete 29: Generador, "Cambiar idioma del CV" y fila de configuraciones */
.enlace-cambiar-idioma { display: inline-block; margin-top: 16px; font-size: 15px; min-height: 32px; }
.pie-inicio { margin-top: 28px; }
.opciones-idioma { display: flex; flex-direction: column; margin: 8px 0 4px; }
.opciones-idioma label.casilla { margin-top: 12px; }
.opciones-idioma label.casilla input { accent-color: var(--violeta); }

/* Paquete 29: Secciones del CV a lo ancho y a la medida del alto de la ventana */
.cabecera-secciones { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.cabecera-secciones h1 { margin: 0; }
.boton-crear-idioma { position: relative; width: 52px; height: 52px; flex: none; display: flex; align-items: center; justify-content: center; background: #FFFFFF; border: 1px solid var(--borde); border-radius: 10px; text-decoration: none; }
.boton-crear-idioma:hover { border-color: var(--violeta); }
.boton-crear-idioma .mas { position: absolute; top: 1px; right: 5px; font-size: 18px; font-weight: 700; color: var(--violeta); line-height: 1; }
.rejilla-secciones { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: max(104px, calc((100vh - 200px) / 3)); }
.tarjeta-seccion { aspect-ratio: auto; height: 100%; gap: 8px; }
.icono-seccion { width: clamp(40px, 9vh, 64px); height: clamp(40px, 9vh, 64px); }
@media (max-width: 560px) { .rejilla-secciones { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 120px; } }
/* Paquete 29: el logo queda a la altura del título de la página */
.lateral { padding-top: 44px; }
.modal-recorrido.con-cerrar-x > .cerrar-x { position: absolute; float: none; top: 8px; right: 8px; margin: 0; background: transparent; color: var(--oscuro); }
.modal-recorrido.con-cerrar-x > .cerrar-x:hover { background: rgba(255, 255, 255, .6); }
.modal-recorrido .rc-grafico { margin-top: 22px; }

/* Paquete 30: la opción elegida de los selectores, en gris claro (no como un botón de acción) */
.selector-segmentado button.activo, .selector-vista button[aria-pressed="true"] { background: #E6E8E4; color: var(--oscuro); font-weight: 500; }

/* Paquete 30: formulario de puesto, más aire entre el selector y el texto; contador debajo */
#dlg-form-pue .modo-carga { margin-bottom: 22px; }
.parrafo-bullets .nota-parrafo { margin: 8px 0 0; }

/* Paquete 30: ventanas de selección múltiple. La lista baja dentro de su caja (los
   encabezados fijos del paquete 26 la habían dejado sin recorte) y el título queda fijo. */
.lista-directorio.lista-multiple { overflow-y: auto; max-height: min(320px, 45vh); }
#dlg-multi > h2, #dlg-sel > h2, #dlg-exp > h2 { position: sticky; top: -28px; z-index: 1; background: #FFFFFF; margin: 0 -28px; padding: 10px 68px 10px 28px; }
#dlg-multi > .cerrar-x, #dlg-sel > .cerrar-x, #dlg-exp > .cerrar-x { z-index: 3; }

/* Paquete 30: orden de la información, ahorrar espacio, agrupar y quitar */
.zona-formato { margin-top: 18px; padding-top: 4px; border-top: 1px solid #EEF1EC; }
.casilla-ahorrar, .casilla-agrupar { flex-wrap: wrap; }
.casilla-ahorrar .nota, .casilla-agrupar .nota { flex-basis: 100%; margin-left: 26px; }
.casilla-ahorrar input, .casilla-agrupar input { accent-color: var(--oscuro); }
.fila-exp { grid-template-columns: 48px minmax(0, 1.4fr) 1fr 120px 48px; }
.hueco-editar-exp { display: flex; justify-content: center; }
#dlg-exp .botonera .boton-quitar-exp { margin-right: auto; color: var(--peligro); border-color: var(--peligro); }

/* Paquete 30: Seleccionar contenido sin botones; el nombre abre la selección y el estado va a la derecha */
.cuadro-seccion { grid-template-columns: 32px minmax(0, 1fr) 24px; padding: 0 16px 0 10px; }
.abrir-seccion { height: 62px; padding: 0 8px; border: 0; background: transparent; font: inherit; font-size: 15px; text-align: left; color: var(--oscuro); cursor: pointer; }
.abrir-seccion:disabled { color: #8A8F87; cursor: not-allowed; }
.cuadro-seccion .estado-seccion { justify-self: end; }

/* Paquete 31: pestañas de las ventanas de selección */
.pestanas { display: flex; gap: 4px; margin: 4px 0 16px; border-bottom: 1px solid var(--borde); }
.pestanas[hidden] { display: none; }
.pestana { padding: 10px 16px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; font: inherit; font-size: 15px; color: var(--medio); cursor: pointer; }
.pestana:hover { color: var(--oscuro); }
.pestana.activa { color: var(--oscuro); font-weight: 600; border-bottom-color: var(--oscuro); }
.botonera .boton-vista-previa { margin-right: auto; }
#dlg-exp .botonera .boton-quitar-exp { margin-right: auto; color: var(--oscuro); border-color: var(--borde-campo); }

/* Paquete 31: Elegir experiencias con estado y cursor/lápiz por fila */
.fila-exp { grid-template-columns: 48px minmax(0, 1.4fr) 1fr 110px 28px 48px; }
.estado-exp { display: flex; justify-content: center; }
.estado-exp svg { width: 18px; height: 18px; }
.estado-exp .marca-lista { color: var(--ok); }
.hueco-editar-exp .boton-seccion { width: 36px; height: 36px; }

/* Paquete 31: puestos (el nombre abre la tarjeta; bullets con lista de tildes) */
.lista-puestos-sel li.fila-puesto-sel { grid-template-columns: minmax(0, 1fr) 80px 80px 0 96px; }
.lista-puestos-sel.con-formato li.fila-puesto-sel { grid-template-columns: minmax(0, 1fr) 80px 80px 160px 96px; }
.titulo-bullets { font-size: 11px; line-height: 1.2; text-align: center; color: var(--medio); }
.casilla-puesto { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nombre-puesto-ver { display: inline-flex; gap: 8px; align-items: baseline; padding: 4px 2px; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; color: var(--oscuro); }
.nombre-puesto-ver:hover span:last-child { text-decoration: underline; }
.acciones-puesto-sel { justify-content: center; }
.boton-bullets.con-ocultos { color: var(--violeta); }
#ver-bullets { margin-left: auto; }

/* Paquete 31: pestaña Apariencia */
.zona-apariencia > .nota { margin: 0 0 10px; }
.lista-apariencia { display: flex; flex-direction: column; }
.fila-apariencia { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 36px 36px; align-items: center; gap: 8px; padding: 6px 10px; background: #FFFFFF; border: 1px solid var(--borde); border-radius: 8px; }
.fila-apariencia .posicion { width: 24px; height: 24px; border-radius: 50%; background: #C1E3B9; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.letras { display: flex; gap: 4px; }
.boton-letra { width: 32px; height: 32px; border: 1px solid var(--borde-campo); border-radius: 6px; background: #FFFFFF; font: inherit; font-size: 13px; cursor: pointer; color: var(--oscuro); }
.boton-letra.letra-b { font-weight: 700; } .boton-letra.letra-i { font-style: italic; font-family: Georgia, serif; }
.boton-letra.activo { background: #E6E8E4; border-color: #8A8F87; }
.fila-misma-linea { padding: 4px 0 4px 44px; }
.boton-misma-linea { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border: 1px dashed #B4B2A9; border-radius: 14px; background: #FFFFFF; color: #8A8F87; font: inherit; font-size: 12px; cursor: pointer; }
.boton-misma-linea.activo { border: 1px solid var(--violeta); background: var(--lila); color: var(--violeta-oscuro); }
.vista-previa-cv { padding: 14px 16px; border: 1px dashed #B4B2A9; border-radius: 8px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.45; color: #6B6F68; }
.vista-previa-cv p { margin: 0; }
.vista-previa-cv .vp-titular { color: #2D2D2D; font-size: 14px; }
.vista-previa-cv .vp-bullet { color: #2D2D2D; margin-top: 2px; }
.vp-b { font-weight: 700; } .vp-i { font-style: italic; }

/* Paquete 31: inicio del Generador (disquete y menú ⋯ arriba a la derecha) */
.cabecera-generador { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cabecera-generador h1 { margin: 0; }
.acciones-cabecera, .banda-botones { display: flex; gap: 8px; align-items: center; }
.boton-cuadrado { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--borde-campo); border-radius: 10px; background: #FFFFFF; color: var(--oscuro); cursor: pointer; }
.boton-cuadrado:hover:not(:disabled) { border-color: var(--oscuro); }
.boton-cuadrado:disabled { color: #B5BBB2; cursor: not-allowed; }
.menu-tres-puntos { position: relative; }
.menu-opciones { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 230px; padding: 6px; background: #FFFFFF; border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); display: flex; flex-direction: column; }
.menu-opciones[hidden] { display: none; }
.menu-opcion { padding: 10px 12px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 14px; text-align: left; cursor: pointer; color: var(--oscuro); }
.menu-opcion:hover { background: var(--fondo-claro); }

/* ======================================================================
   Paquete 32
   ====================================================================== */
/* Modales: cabecera y botones fijos, solo se desplaza el medio; esquinas redondeadas */
dialog.modal.estructurado { padding: 0; overflow: hidden; max-height: calc(100vh - 48px); }
dialog.modal.estructurado[open] { display: flex; flex-direction: column; }
.estructurado > .modal-cabeza { flex: none; padding: 24px 60px 10px 28px; background: #FFFFFF; }
.estructurado > .modal-cabeza:empty { padding: 0; height: 22px; }
.estructurado > .modal-cabeza .modal-cabecera { margin-bottom: 0; padding-right: 0; }
.estructurado > .modal-cabeza .pestanas { margin-top: 12px; margin-bottom: 0; }
.estructurado > .modal-cabeza > span.nota { display: block; }
.estructurado .modal-estructura { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin: 0; }
.estructurado .modal-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 28px 6px; }
.estructurado .modal-pie { flex: none; margin: 0; padding: 14px 28px 22px; background: #FFFFFF; }
.estructurado > .cerrar-x { position: absolute; top: 14px; right: 14px; float: none; margin: 0; z-index: 3; }
dialog.modal.estructurado.con-cerrar-x { overflow: hidden; }
/* Notas y aclaraciones en cursiva; las instrucciones no */
.modal .nota, .nota-cursiva { font-style: italic; }
.modal .modal-cabeza > span.nota, .modal .instruccion, .modal .nota.instruccion { font-style: normal; }
/* Modales que se abren encima de otro: más angostos */
#dlg-ocultar, #dlg-ver, #dlg-vista, #dlg-puesto-cv { width: min(600px, calc(100vw - 64px)); }
.icono-seccion { flex: none; }
.icono-traducciones { width: 30px; height: 30px; flex: none; }
/* Traducciones del CV */
.barra-traducciones { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 0 0 14px; }
.barra-traducciones .nota { margin: 0; max-width: 760px; font-style: italic; line-height: 1.9; }
.barra-traducciones .boton { flex: none; margin-top: 0; }
.selector-base { display: inline-block; vertical-align: middle; font-style: normal; }
.nombre-con-bandera { display: inline-flex; align-items: center; gap: 8px; }
.bandera { display: inline-flex; flex: none; line-height: 0; }
.bandera svg { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
/* Desplegable con banderas */
.selector-banderas { position: relative; display: inline-block; }
.selector-boton { display: inline-flex; align-items: center; gap: 8px; min-width: 200px; min-height: 38px; padding: 6px 12px; background: #FFFFFF; border: 1px solid var(--borde-campo); border-radius: 8px; font: inherit; font-style: normal; color: var(--oscuro); cursor: pointer; text-align: left; }
.selector-boton:hover { border-color: var(--violeta); }
.selector-flecha { margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--medio); border-bottom: 2px solid var(--medio); transform: translateY(-2px) rotate(45deg); }
.selector-vacio { color: var(--medio); }
.selector-nota { color: var(--medio); font-size: 12px; font-style: italic; }
.selector-lista { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 100%; margin: 0; padding: 6px; list-style: none; background: #FFFFFF; border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); }
.selector-opcion { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; background: none; border: 0; border-radius: 6px; font: inherit; font-style: normal; color: var(--oscuro); text-align: left; cursor: pointer; white-space: nowrap; }
.selector-opcion:hover:not(:disabled), .selector-opcion:focus-visible { background: var(--fondo-claro); }
.selector-opcion:disabled { color: #A3A7A1; cursor: not-allowed; }
.selector-opcion:disabled .bandera { opacity: .5; }
.fila-foto-etiquetas.sin-foto { display: block; }
/* Idiomas: ventana con lista que se puede buscar */
.combo-idioma { position: relative; }
.combo-idioma input { width: 100%; }
.sugerencias-idioma { position: absolute; z-index: 25; top: calc(100% + 4px); left: 0; right: 0; max-height: 260px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: #FFFFFF; border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); }
.sugerencia-idioma { display: block; width: 100%; padding: 6px 10px; background: none; border: 0; border-radius: 6px; font: inherit; text-align: left; cursor: pointer; color: var(--oscuro); }
.sugerencia-idioma:hover:not(:disabled) { background: var(--fondo-claro); }
.sugerencia-idioma:disabled { color: #A3A7A1; cursor: not-allowed; }
.sugerencia-otro { border-top: 1px solid var(--borde); border-radius: 0 0 6px 6px; margin-top: 4px; padding-top: 8px; font-style: italic; }
#dlg-elemento .campo-form { margin-bottom: 14px; }
#dlg-elemento .campo-form label { display: block; margin-bottom: 4px; }
#dlg-elemento .campo-form input { width: 100%; box-sizing: border-box; }
.valor-automatico { padding: 8px 10px; background: var(--fondo-claro); border-radius: 8px; color: var(--oscuro); }
.etiqueta-automatica { display: block; font-size: 14px; margin-bottom: 4px; }
.rotulo-traduccion { align-self: center; margin-right: 6px; font-size: 13px; color: var(--medio); }
.pestanas-idioma .pestana .bandera { margin-right: 6px; vertical-align: -2px; }
.opcion-idioma .bandera { margin: 0 2px 0 4px; }
.enlace-traducciones { margin: 12px 0 0; font-size: 14px; }
/* Ventana de puestos: una sola grilla para toda la tabla */
.lista-puestos-sel.tabla-puestos { display: grid; grid-template-columns: 22px minmax(56px, max-content) minmax(0, 1fr) max-content max-content 0 max-content; column-gap: 14px; align-items: center; margin-left: 0; }
.lista-puestos-sel.tabla-puestos.con-formato { grid-template-columns: 22px minmax(56px, max-content) minmax(0, 1fr) max-content max-content 150px max-content; }
.lista-puestos-sel.tabla-puestos li.fila-puesto-sel { display: contents; }
.lista-puestos-sel.tabla-puestos li.fila-puesto-sel > * { min-height: 44px; display: flex; align-items: center; border-bottom: 1px solid #EEF1EC; }
.lista-puestos-sel.tabla-puestos li.fila-puesto-sel > .marcas-traduccion { grid-column: 1 / -1; min-height: 0; padding: 0 0 6px 36px; }
.lista-puestos-sel.tabla-puestos .fila-vacia { grid-column: 1 / -1; padding: 10px 0; }
.lista-puestos-sel.tabla-puestos .cabecera-puestos-sel { padding-left: 0; }
.lista-puestos-sel.tabla-puestos .cabecera-puestos-sel > * { min-height: 36px; font-size: 13px; font-weight: 700; color: var(--medio); }
.tabla-puestos .celda-alias, .tabla-puestos .celda-alias .rotulo { white-space: nowrap; }
.tabla-puestos .casilla-puesto { flex-wrap: nowrap; min-width: 0; overflow: hidden; gap: 8px; }
.tabla-puestos .celda-puesto { min-width: 0; max-width: 100%; overflow: hidden; }
.tabla-puestos .celda-puesto .una-linea { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--oscuro); }
.tabla-puestos .nota-ocultos { flex: none; white-space: nowrap; }
.tabla-puestos .celda-fecha { white-space: nowrap; }
.tabla-puestos .titulo-bullets { font-size: 13px; justify-content: center; }
.tabla-puestos .acciones-puesto-sel { justify-content: center; }
.cabecera-alias { color: var(--violeta) !important; }
/* Cabecera de la ventana de puestos */
.contexto-modal { font-size: 14px; color: var(--medio); font-style: normal; }
.modal .instruccion { margin: 4px 0 0; font-size: 13px; color: var(--medio); font-weight: 400; font-style: normal; }
.titulo-idioma { font-weight: 400; color: var(--medio); font-size: 16px; }
#exp-titulo, #oc-titulo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.enlace-secciones { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: var(--medio); }
.enlace-secciones:hover { color: var(--violeta); }
/* "Quitar de este CV": ícono cuadrado abajo a la izquierda */
.botonera .boton-quitar-exp { margin-right: auto; width: 40px; height: 40px; border: 1px solid var(--borde-campo); border-radius: 8px; background: #FFFFFF; color: var(--oscuro); }
.botonera .boton-quitar-exp:hover { border-color: var(--peligro); color: var(--peligro); }
/* Detalles del puesto (Apariencia de Experiencias) */
.zona-detalles-puesto { margin-top: 22px; }
.titulo-detalles { font-size: 15px; margin: 18px 0 8px; }
.vp-parrafo { margin: 4px 0 0; font-size: 13px; }
/* Ordenar: cajón "Títulos y subtítulos" */
.cajon-titulos { margin-top: 20px; border: 1px solid var(--borde); border-radius: 10px; padding: 10px 14px; background: #FFFFFF; }
.cajon-titulos summary { cursor: pointer; font-weight: 600; }
.esquemas-titulos { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.boton-esquema { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 132px; padding: 12px 10px; background: #FFFFFF; border: 1.5px solid var(--borde-campo); border-radius: 10px; cursor: pointer; font: inherit; color: var(--oscuro); }
.boton-esquema:hover { border-color: var(--violeta); }
.boton-esquema.activo { border-color: var(--oscuro); background: var(--fondo-claro); box-shadow: 0 0 0 1px var(--oscuro); }
.esquema { display: flex; flex-direction: column; gap: 4px; width: 84px; height: 84px; padding: 8px; border: 1px solid var(--borde); border-radius: 4px; background: #FFFFFF; }
.esquema-titulo { height: 10px; border-radius: 2px; }
.esquema-subtitulo { height: 7px; width: 70%; border-radius: 2px; }
.esquema-linea { height: 4px; border-radius: 2px; background: #D9DDD6; }
.texto-esquema { font-size: 13px; text-align: center; }
/* Encabezado */
.nombre-encabezado { margin-top: 10px; }
.nombre-encabezado-texto { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 15px; }
.nombre-encabezado label { display: block; font-size: 14px; margin-bottom: 4px; }
.nombre-edicion { display: flex; gap: 6px; align-items: center; }
.nombre-edicion input { flex: 1; max-width: 420px; }
.grupo-pestana { display: inline-flex; align-items: center; gap: 0; }
.ojo-pestana { margin-left: -4px; }
.parte-oculta { padding: 18px; margin: 8px 0; border: 1px dashed var(--borde-campo); border-radius: 10px; color: var(--medio); font-style: italic; }
.galeria-fotos { display: flex; flex-wrap: wrap; gap: 12px; }
.foto-celda { position: relative; }
.foto-opcion { display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; padding: 0; border: 2px solid var(--borde); border-radius: 50%; background: var(--fondo-claro); overflow: hidden; cursor: pointer; }
.foto-celda.elegida .foto-opcion { border-color: var(--violeta); box-shadow: 0 0 0 3px var(--lila); }
.foto-miniatura { width: 100%; height: 100%; object-fit: cover; }
.foto-sin { font-size: 12px; color: var(--medio); }
.foto-borrar { position: absolute; top: -4px; right: -4px; width: 24px; height: 24px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--borde); border-radius: 50%; background: #FFFFFF; cursor: pointer; color: var(--medio); }
.foto-borrar svg { width: 12px; height: 12px; }
.foto-borrar:hover { color: var(--peligro); border-color: var(--peligro); }
.foto-subir { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 84px; height: 84px; border: 2px dashed var(--borde-campo); border-radius: 50%; font-size: 12px; color: var(--medio); cursor: pointer; }
.foto-subir:hover { border-color: var(--violeta); color: var(--violeta); }
.foto-subir-mas { font-size: 22px; line-height: 1; font-weight: 700; }
.vp-encabezado { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.vp-encabezado-textos { min-width: 0; }
.vp-nombre { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: .5px; }
.vp-rol { margin: 2px 0 8px; color: #444444; }
.vp-foto { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: none; }
.lista-puestos-sel.tabla-puestos li.fila-puesto-sel > :nth-child(n+6) { grid-column: auto; }
.lista-puestos-sel.tabla-puestos li.fila-puesto-sel > .marcas-traduccion { grid-column: 1 / -1; }
.lista-puestos-sel.tabla-puestos li.fila-puesto-sel > .hueco-formato { overflow: hidden; }
dialog.modal.estructurado > .cerrar-x { position: absolute; top: 14px; right: 14px; left: auto; float: none; margin: 0; z-index: 3; }
.lista-puestos-sel.tabla-puestos { column-gap: 0; }
.lista-puestos-sel.tabla-puestos li.fila-puesto-sel > * { padding-right: 14px; }
.lista-puestos-sel.tabla-puestos li.fila-puesto-sel > :last-child { padding-right: 0; }
.estructurado > .modal-cabeza { padding-right: 28px; }
.estructurado > .modal-cabeza > h2, .estructurado > .modal-cabeza > span.nota, .estructurado > .modal-cabeza > .modal-cabecera { padding-right: 36px; }
.estructurado > .modal-cabeza > .modal-cabecera:has([data-cerrar]) { padding-right: 0; }

/* ======================================================================
   Paquete 33: Ordenar con subtítulos. Arriba, el orden agrupado; abajo, en el
   cajón "Títulos y subtítulos", la lista de subtítulos.
   ====================================================================== */
.orden-agrupado { border: 1px solid var(--borde); border-radius: 10px; background: #FFFFFF; overflow: hidden; }
.cabecera-grupo-subtitulo { padding: 8px 12px; background: var(--fondo-claro); border-top: 1px solid var(--borde); font-size: 13px; font-weight: 700; letter-spacing: .3px; color: var(--oscuro); }
.cabecera-grupo-subtitulo:first-child { border-top: 0; }
.cabecera-grupo-subtitulo.sin-subtitulo { font-weight: 400; font-style: italic; letter-spacing: 0; color: var(--medio); }
.orden-agrupado .lista-subtitulo { margin: 0; }
.orden-agrupado .fila-exp-subtitulo { grid-template-columns: 26px minmax(0, 1fr) 200px 40px 40px; padding: 4px 8px 4px 12px; border-top: 1px solid #EEF1EC; }
.orden-agrupado .fila-vacia-subtitulo { padding: 8px 12px; border-top: 1px solid #EEF1EC; }
.numero-orden { width: 22px; height: 22px; border-radius: 50%; background: var(--acento); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.editor-subtitulos { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borde); }
.editor-subtitulos .nota { margin: 0 0 8px; }
.editor-subtitulos .cabecera-subtitulo { margin-bottom: 8px; }
.editor-subtitulos .boton { margin-top: 4px; }

/* ======================================================================
   Paquete 34: barra lateral con submenús y plegable; ayudas "?"
   ====================================================================== */
.lateral { padding: 28px 12px 18px; gap: 18px; }
.barra-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.barra-cabeza .marca { padding: 0 6px; margin: 0; font-size: 17px; }
.boton-plegar { width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--medio); cursor: pointer; }
.boton-plegar:hover { background: var(--fondo); color: var(--oscuro); }
.boton-plegar .icono-desplegar { display: none; }
.lateral .menu { gap: 2px; }
.grupo-menu { position: relative; }
.fila-menu { display: flex; align-items: center; border-radius: 8px; }
.fila-menu .menu-item { flex: 1; min-width: 0; }
.fila-menu.activo .item-principal { background: var(--acento); color: var(--oscuro); font-weight: 700; }
.menu-item { min-height: 38px; justify-content: flex-start; gap: 10px; padding: 0 10px; border: 0; background: transparent; font: inherit; font-weight: 500; cursor: pointer; }
.menu-item:hover { background: var(--fondo); color: var(--oscuro); }
.icono-menu { width: 20px; height: 20px; flex: none; }
.icono-seccion-menu { width: 20px; height: 20px; }
.texto-menu { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flechita { width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--medio); cursor: pointer; }
.flechita:hover { background: var(--fondo); color: var(--oscuro); }
.icono-flechita { width: 16px; height: 16px; transition: transform .15s; }
.grupo-menu.abierto > .fila-menu .icono-flechita { transform: rotate(90deg); }
.submenu { display: none; list-style: none; margin: 2px 0 6px; padding: 0 0 0 14px; }
.grupo-menu.abierto > .submenu { display: block; }
.submenu .sub-item { min-height: 32px; font-size: 14px; font-weight: 400; }
.submenu .sub-item.activo { background: var(--acento); color: var(--oscuro); font-weight: 600; }
.submenu .sub-item.deshabilitado { color: #A3A7A1; cursor: not-allowed; }
.submenu .sub-item.deshabilitado:hover { background: transparent; color: #A3A7A1; }
.submenu form { margin: 0; }
.submenu .boton-enlace { padding: 0 10px; }
.encabezado-flotante, .solo-flotante { display: none; }
.menu-pie { border-top: 1px solid var(--borde); padding-top: 10px; }
.grupo-usuaria .submenu { padding-left: 14px; }
.interruptor { position: relative; flex: none; margin-left: auto; width: 30px; height: 17px; border-radius: 9px; background: #C9CFC6; transition: background .15s; }
.interruptor::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #FFFFFF; transition: left .15s; }
.interruptor-ayudas[aria-checked="true"] .interruptor { background: var(--oscuro); }
.interruptor-ayudas[aria-checked="true"] .interruptor::after { left: 15px; }
/* Plegada: solo los íconos; cada menú se abre como panel flotante */
.estructura.barra-plegada .lateral { flex: 0 0 64px; width: 64px; padding: 24px 8px 14px; overflow: visible; }
.barra-plegada .barra-cabeza { flex-direction: column; }
.barra-plegada .barra-cabeza .marca { padding: 0; }
.barra-plegada .boton-plegar .icono-plegar { display: none; }
.barra-plegada .boton-plegar .icono-desplegar { display: block; }
.barra-plegada .texto-menu, .barra-plegada .flechita { display: none; }
.barra-plegada .fila-menu { justify-content: center; }
.barra-plegada .item-principal { flex: none; width: 44px; justify-content: center; padding: 0; }
.barra-plegada .grupo-menu > .submenu, .barra-plegada .grupo-menu.abierto > .submenu { display: none; }
.barra-plegada .grupo-menu.flotante > .submenu { display: block; position: absolute; z-index: 60; left: 54px; top: 0; width: 230px; margin: 0; padding: 6px; background: #FFFFFF; border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); }
.barra-plegada .grupo-usuaria.flotante > .submenu { top: auto; bottom: 0; }
.barra-plegada .grupo-menu.flotante > .submenu .texto-menu { display: inline; }
.barra-plegada .grupo-menu.flotante > .fila-menu .item-principal { background: var(--fondo); }
.barra-plegada .flotante .encabezado-flotante { display: block; padding: 6px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--medio); }
.barra-plegada .flotante .solo-flotante { display: block; }
.barra-plegada .flotante .solo-flotante .sub-item { font-weight: 500; }
.barra-plegada .flotante .separador-flotante { height: 0; margin: 4px 6px; border-top: 1px solid var(--borde); }
/* Ayudas "?" */
.ayuda { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 6px; border: 1px solid var(--borde-campo); border-radius: 50%; font-size: 11px; font-weight: 700; font-style: normal; line-height: 1; color: var(--medio); background: #FFFFFF; vertical-align: 2px; cursor: help; text-transform: none; letter-spacing: 0; }
.ayuda:hover, .ayuda:focus-visible { border-color: var(--violeta); color: var(--violeta); }
h1 .ayuda { width: 20px; height: 20px; font-size: 13px; vertical-align: 5px; }
body.sin-ayudas .ayuda { display: none; }
.subtitulo-pagina { margin: -12px 0 18px; color: var(--medio); font-size: 15px; }
.lateral { position: sticky; top: 0; z-index: 40; }
.interruptor-ayudas { gap: 8px; }
.interruptor-ayudas .texto-menu { font-size: 13px; }

/* ======================================================================
   Paquete 36: "Mostrar etiquetas" en los directorios; favicon; placa nueva
   ====================================================================== */
.interruptor-etiquetas { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 4px 8px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 13px; color: var(--medio); cursor: pointer; white-space: nowrap; }
.interruptor-etiquetas:hover { background: #FFFFFF; color: var(--oscuro); }
[role="switch"][aria-checked="true"] .interruptor { background: var(--oscuro); }
[role="switch"][aria-checked="true"] .interruptor::after { left: 15px; }
.celda-con-etiquetas { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.celda-con-etiquetas > .una-linea, .celda-con-etiquetas > .rotulo { max-width: 100%; }
.chips-fila { display: flex; flex-wrap: wrap; gap: 4px; }
.chips-fila:empty { display: none; }
.chips-fila .etiqueta { font-size: 11px; padding: 1px 8px; }
body.ocultar-etiquetas-dir .chips-fila,
body.ocultar-etiquetas-dir .fila-lista .etiqueta:not(.etiqueta-quitable),
body.ocultar-etiquetas-dir .fila-simple .etiqueta:not(.etiqueta-quitable),
body.ocultar-etiquetas-dir .fila-arbol .etiqueta:not(.etiqueta-quitable) { display: none; }
/* Placa "Una piedra, muchos colores": la gema con destellos que cambian de color */
.rc-gema { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 170px; height: 150px; }
.rc-gema .rc-logo { position: relative; z-index: 1; }
.rc-halo { position: absolute; inset: 22px 30px; border-radius: 50%; background: #7B6CC4; opacity: .35; filter: blur(18px); animation: rc-halo 8s linear infinite; }
@keyframes rc-halo { 0% { background: #2F6FB0; } 25% { background: #3FA7A3; } 50% { background: #E8B84A; } 75% { background: #7B6CC4; } 100% { background: #2F6FB0; } }
.rc-destello { position: absolute; z-index: 2; width: 14px; height: 14px; background: currentColor; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; animation: rc-destello 3.2s ease-in-out infinite; }
.rc-destello.d1 { top: 12px; left: 28px; color: #2F6FB0; animation-delay: 0s; }
.rc-destello.d2 { top: 26px; right: 22px; color: #E8B84A; animation-delay: .7s; }
.rc-destello.d3 { bottom: 30px; left: 18px; color: #5BBF7A; animation-delay: 1.4s; }
.rc-destello.d4 { bottom: 14px; right: 36px; color: #7B6CC4; animation-delay: 2.1s; width: 10px; height: 10px; }
.rc-destello.d5 { top: 4px; right: 62px; color: #3FA7A3; animation-delay: 2.6s; width: 10px; height: 10px; }
@keyframes rc-destello { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 40% { opacity: 1; transform: scale(1) rotate(45deg); } 70% { opacity: 0; transform: scale(.6) rotate(90deg); } }
@media (prefers-reduced-motion: reduce) { .rc-halo, .rc-destello { animation: none; } .rc-destello { opacity: .8; } }