/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1rem;
  border-radius: var(--radio-sm);
  font-size: .88rem;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background var(--transicion), border-color var(--transicion), opacity var(--transicion);
  white-space: nowrap;
}
.btn--primario { background: var(--color-primario); color: var(--color-primario-texto); }
.btn--primario:hover { background: var(--color-primario-hover); }
.btn--secundario { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); }
.btn--secundario:hover { background: var(--color-surface-hover); }
.btn--texto { background: transparent; color: var(--color-text); padding: .4rem .6rem; font-weight: 500; }
.btn--texto:hover { background: var(--color-surface-hover); }
.btn--peligro { background: var(--color-error); color: #fff; }
.btn--peligro-texto { color: var(--color-error); }
.btn--exito-texto { color: var(--color-exito); }
.btn--pequeno { padding: .35rem .6rem; font-size: .8rem; }
.btn--icono { padding: .35rem .55rem; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* Tabla generica */
.ui-table-wrap { overflow-x: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radio); }
.ui-table { width: 100%; font-size: .88rem; }
.ui-table thead th {
  text-align: left;
  padding: .7rem .9rem;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-tenue);
  border-bottom: 1px solid var(--color-border);
}
.ui-table tbody td { padding: .65rem .9rem; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.ui-table tbody tr:last-child td { border-bottom: none; }
.ui-table tbody tr:hover { background: var(--color-surface-hover); }
.ui-table__vacio { text-align: center; padding: 2rem !important; }
.ui-table__acciones { display: flex; gap: .25rem; justify-content: flex-end; white-space: nowrap; }
.es-arrastrable { cursor: grab; }
.is-dragging { opacity: .4; }
.muestra-color { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: middle; border: 1px solid var(--color-border); }

/* Modal */
.ui-modal-overlay {
  position: fixed; inset: 0; background: rgba(20, 18, 14, .45);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 1rem;
}
.ui-modal {
  background: var(--color-surface); border-radius: var(--radio);
  width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
  box-shadow: var(--sombra);
}
.ui-modal__header { display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--color-border); position: sticky; top: 0; background: var(--color-surface); }
.ui-modal__header h3 { font-size: 1.05rem; }
.ui-modal__close { font-size: 1.3rem; line-height: 1; color: var(--color-text-tenue); padding: .2rem .5rem; }
.ui-modal__close:hover { color: var(--color-text); }
.ui-modal__body { padding: 1.4rem; }
.ui-modal__acciones { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.4rem; }
.ui-modal__mensaje { margin-bottom: 0; }
.ui-modal__subtitulo { margin-top: 1.5rem; margin-bottom: .5rem; }

/* Formularios dinamicos */
.ui-dynamic-form { display: flex; flex-direction: column; gap: 1rem; }
.campo-form label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .35rem; }
.campo-form input[type="text"], .campo-form input[type="password"], .campo-form input[type="number"],
.campo-form input[type="date"], .campo-form input[type="time"], .campo-form input[type="tel"],
.campo-form select, .campo-form textarea {
  width: 100%; padding: .6rem .75rem; border: 1px solid var(--color-border); border-radius: var(--radio-sm);
  background: var(--color-surface); font-size: .9rem;
}
.campo-form input[type="color"] { width: 60px; height: 38px; border: 1px solid var(--color-border); border-radius: var(--radio-sm); padding: .2rem; }
.campo-form textarea { resize: vertical; }
.campo-form__label-check { display: flex; align-items: center; gap: .55rem; font-weight: 600; font-size: .88rem; }
.campo-form__ayuda { color: var(--color-text-tenue); font-size: .78rem; margin-top: .3rem; }
.campo-form__error { color: var(--color-error); font-size: .78rem; min-height: 1.1em; margin-top: .2rem; }

/* Telefonos */
.ui-phone-list { display: flex; flex-direction: column; gap: .5rem; }
.ui-phone-list__fila { display: grid; grid-template-columns: 1fr 1fr auto; gap: .5rem; }
.ui-phone-list__fila input { padding: .55rem .7rem; border: 1px solid var(--color-border); border-radius: var(--radio-sm); }

/* Tabs */
.ui-tabs__nav { display: flex; gap: .25rem; border-bottom: 1px solid var(--color-border); margin-bottom: 1.25rem; overflow-x: auto; }
.ui-tabs__tab { padding: .65rem .9rem; font-size: .86rem; font-weight: 600; color: var(--color-text-tenue); border-bottom: 2px solid transparent; white-space: nowrap; }
.ui-tabs__tab:hover { color: var(--color-text); }
.ui-tabs__tab.is-active { color: var(--color-acento); border-color: var(--color-acento); }

/* Badges y chips */
.badge { display: inline-block; padding: .2rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--color-acento-suave); color: #6b4c1c; }
.badge--pendiente { background: var(--color-aviso-bg); color: var(--color-aviso); }
.badge--validado { background: var(--color-exito-bg); color: var(--color-exito); }
.badge--rechazado { background: var(--color-error-bg); color: var(--color-error); }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0; }
.chip { display: inline-flex; align-items: center; gap: .35rem; background: var(--color-surface-hover); border: 1px solid var(--color-border); border-radius: 999px; padding: .25rem .5rem .25rem .7rem; font-size: .82rem; }
.chip__quitar { color: var(--color-text-tenue); font-size: .8rem; }
.chip__quitar:hover { color: var(--color-error); }

/* Toast */
.ui-toast-host { position: fixed; bottom: 1.25rem; right: 1.25rem; display: flex; flex-direction: column; gap: .5rem; z-index: 200; }
.ui-toast {
  background: var(--color-primario); color: #fff; padding: .7rem 1.1rem; border-radius: var(--radio-sm);
  box-shadow: var(--sombra); font-size: .86rem; opacity: 0; transform: translateY(8px); transition: all var(--transicion);
}
.ui-toast.is-visible { opacity: 1; transform: translateY(0); }
.ui-toast--exito { background: var(--color-exito); }
.ui-toast--error { background: var(--color-error); }

/* Arbol de tipos de personal */
.ui-tree-editor__lista { padding-left: 1.1rem; border-left: 1px dashed var(--color-border); margin-top: .4rem; }
.ui-tree-editor > .ui-tree-editor__lista { border-left: none; padding-left: 0; }
.ui-tree-editor__fila { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .4rem .5rem; border-radius: var(--radio-sm); }
.ui-tree-editor__fila:hover { background: var(--color-surface-hover); }
.ui-tree-editor__fila.esta-inactivo { opacity: .55; }
.ui-tree-editor__acciones { display: flex; gap: .15rem; }

/* Matriz de permisos */
.ui-permission-matrix { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ui-permission-matrix table { min-width: 480px; }
.ui-permission-matrix select { padding: .4rem .5rem; border: 1px solid var(--color-border); border-radius: 6px; font-size: .82rem; }
.celda-na { color: var(--color-border); text-align: center; }

/* Selector con busqueda */
.ui-select-search { position: relative; }
.ui-select-search input { width: 100%; padding: .55rem .7rem; border: 1px solid var(--color-border); border-radius: var(--radio-sm); }
.ui-select-search__lista {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radio-sm); box-shadow: var(--sombra);
  max-height: 220px; overflow-y: auto; z-index: 20;
}
.ui-select-search__item { padding: .5rem .7rem; font-size: .86rem; cursor: pointer; }
.ui-select-search__item:hover { background: var(--color-surface-hover); }
.ui-select-search__vacio { padding: .5rem .7rem; color: var(--color-text-tenue); font-size: .84rem; }

/* Subida de archivos */
.ui-file-upload__zona {
  border: 2px dashed var(--color-border); border-radius: var(--radio); padding: 1.5rem; text-align: center;
  color: var(--color-text-tenue); font-size: .88rem; cursor: pointer; transition: border-color var(--transicion), background var(--transicion);
}
.ui-file-upload__zona:hover, .ui-file-upload__zona.is-dragover { border-color: var(--color-acento); background: var(--color-acento-suave); color: var(--color-text); }

/* Importador de Excel */
.importador__resultado { margin-top: 1.25rem; }
.importador__selector-fila { display: block; font-size: .82rem; margin-bottom: .75rem; color: var(--color-text-tenue); }
.importador table input { width: 100%; border: 1px solid transparent; background: transparent; padding: .2rem; border-radius: 4px; }
.importador table input:hover, .importador table input:focus { border-color: var(--color-border); background: var(--color-surface); }