/* Estilos del shell común y primitivos compartidos. Cárgalo en el <head>
   junto a colors_and_type.css y los estilos específicos de cada pantalla. */

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg-app); }

/* minmax(0, 1fr): la columna nunca pasa del ancho de la pantalla (si no, una
   tabla ancha estira toda la página y en el móvil se sale por la derecha). */
.pe-app { min-height: 100vh; display: grid; grid-template-rows: 64px 1fr; grid-template-columns: minmax(0, 1fr); }

.pe-header {
  grid-row: 1;
  height: 64px;
  background: white;
  border-bottom: 1px solid var(--border-subtle);
  padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 10;
}
.pe-divider { width: 1px; height: 24px; background: var(--border-default); }

.pe-icon-btn {
  width: 36px; height: 36px; border-radius: 8px;
  background: transparent; border: 1px solid transparent; color: var(--fg-2);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font: 500 13px/1 var(--font-sans);
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
.pe-icon-btn:hover { background: var(--color-gray-50); border-color: var(--border-subtle); }
.pe-icon-btn:disabled { opacity: .4; cursor: not-allowed; background: transparent; border-color: transparent; }
.pe-icon-btn-sm { width: 28px; height: 28px; }

/* Marca Kompas en el header — clickable, vuelve al dashboard */
.pe-brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  padding: 6px 10px;
  margin-left: -10px;
  border-radius: 8px;
  transition: background var(--motion-fast);
}
.pe-brand:hover { background: var(--color-gray-50); }
.pe-brand-logo {
  width: 28px; height: 28px; border-radius: 7px;
  display: block; flex-shrink: 0;
}
.pe-brand-name {
  font: 700 16px/1 var(--font-display);
  color: var(--kompas-navy, #0F2A4A);
  letter-spacing: -0.01em;
}

/* Tenant a la derecha del header — chip con logo + nombre + ccaa */
.pe-tenant-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 10px 5px 5px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: var(--color-gray-50);
  max-width: 280px;
}
.pe-tenant-mono {
  width: 28px; height: 28px; border-radius: 999px;
  display: grid; place-items: center;
  color: white; font: 700 13px/1 var(--font-sans);
  overflow: hidden; flex-shrink: 0;
}
.pe-tenant-mono img { width: 100%; height: 100%; object-fit: cover; }
.pe-tenant-text {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0; overflow: hidden;
}
.pe-tenant-name {
  font: 600 13px/1.1 var(--font-sans); color: var(--fg-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 180px;
}
.pe-tenant-loc {
  font: 400 11px/1 var(--font-sans); color: var(--fg-2);
  letter-spacing: 0.02em;
}

/* Body: flex para que el main se expanda al colapsar el sidebar */
.pe-body { display: flex; }
.pe-body > .pe-main { flex: 1; min-width: 0; }

.pe-sidebar {
  /* Ancho fijo — nunca depende del contenido. Cambia solo al pulsar toggle. */
  width: 232px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-subtle);
  padding: 14px 12px;
  display: flex; flex-direction: column;
  background: white;
  min-height: calc(100vh - 64px);
  position: sticky; top: 64px;
  transition: width var(--motion-fast);
  overflow: hidden;
}
.pe-sidebar.is-collapsed {
  width: 64px;
  padding: 14px 8px;
}
.pe-sidebar-toggle {
  align-self: flex-end;
  width: 26px; height: 26px;
  border-radius: 6px;
  background: var(--color-gray-50);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  display: grid; place-items: center;
  color: var(--fg-2);
  margin-bottom: 8px;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.pe-sidebar-toggle:hover {
  background: var(--color-gray-100);
  color: var(--fg-1);
}
.pe-sidebar.is-collapsed .pe-sidebar-toggle { align-self: center; }

.pe-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  margin-bottom: 2px;
  border-radius: 8px;
  font: 500 13.5px/1 var(--font-sans);
  color: var(--fg-2);
  text-decoration: none;
  transition: background var(--motion-fast), color var(--motion-fast);
  cursor: pointer; border: 0; background: transparent; text-align: left;
  width: 100%;
  /* min-width:0 + ellipsis para que las pills Pro/Business no hagan que
     el item se redimensione en cada click. */
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.pe-nav-item .pe-nav-label {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
}
.pe-nav-item:hover { background: var(--color-gray-50); color: var(--fg-1); }
.pe-nav-item.is-active { background: var(--color-primary-50); color: var(--color-primary-700); }
.pe-nav-item.is-active i[data-lucide],
.pe-nav-item.is-active svg { color: var(--color-primary-600); }
.pe-sidebar.is-collapsed .pe-nav-item {
  justify-content: center;
  padding: 10px 0;
}
.pe-sidebar.is-collapsed .pe-nav-item .pe-nav-label,
.pe-sidebar.is-collapsed .pe-nav-pro { display: none; }

.pe-nav-pro {
  /* flex-shrink:0 para tamaño fijo. Posicionamiento por flex en el item
     (no margin-left:auto que pelea con el ellipsis). */
  flex-shrink: 0;
  font: 700 10px/1 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  padding: 3px 8px;
  border-radius: 999px;
}
/* Business: dorado premium con leve gradiente para sensación de valor.
   El `!important` blinda el color cuando el item está activo (is-active
   pinta el contenido en azul-primary) — la marca premium debe ser
   reconocible siempre, no solo en pantallas no-activas.
   Compactamos padding/font para que la palabra 'Asistente IA' no se
   trunque a 232px de sidebar (BUSINESS es más largo que Pro). */
.pe-nav-business {
  background: linear-gradient(135deg, #FCD34D 0%, #F59E0B 100%) !important;
  color: #78350F !important;
  font: 700 9px/14px var(--font-sans) !important;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  box-shadow: 0 1px 2px rgba(180, 83, 9, 0.18), inset 0 0 0 1px rgba(120, 53, 15, 0.15);
}

.pe-main { padding: 24px 28px 48px; min-width: 0; }
.pe-screen { max-width: 1180px; }

.pe-subtle { font: 400 14px/20px var(--font-sans); color: var(--fg-2); margin: 0 0 20px; }
.pe-eyebrow { font: 500 11px/1 var(--font-sans); color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.06em; }

.pe-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px;
  border-radius: 8px;
  font: 500 14px/1 var(--font-sans);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
.pe-btn:disabled { background: var(--color-gray-200); color: var(--fg-3); cursor: not-allowed; }
.pe-btn-primary { background: var(--color-primary-600); color: white; }
.pe-btn-primary:hover:not(:disabled) { background: var(--color-primary-700); }
.pe-btn-primary:active:not(:disabled) { background: var(--color-primary-800); }
.pe-btn-secondary { background: white; color: var(--fg-1); border-color: var(--border-strong); }
.pe-btn-secondary:hover { border-color: var(--color-gray-400); background: var(--color-gray-50); }
.pe-btn-ghost { background: transparent; color: var(--color-primary-600); padding: 0 10px; }
.pe-btn-ghost:hover { background: var(--color-primary-50); }
.pe-btn-danger { background: var(--color-danger-600); color: white; }
.pe-btn-danger:hover:not(:disabled) { background: var(--color-danger-700); }
.pe-btn-danger-ghost { background: transparent; color: var(--color-danger-700); }
.pe-btn-danger-ghost:hover { background: var(--color-danger-100); }
.pe-btn-sm { height: 32px; padding: 0 10px; font-size: 13px; }
.pe-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.pe-card {
  background: white;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  box-shadow: var(--shadow-xs);
}

.pe-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font: 500 12px/1.4 var(--font-sans);
  white-space: nowrap;
}
.pe-tag-dot {
  width: 6px; height: 6px; border-radius: 999px;
  display: inline-block;
}

.pe-input {
  display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 12px;
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
  font: 400 14px/1 var(--font-sans);
  color: var(--fg-1);
  width: 100%;
}
.pe-input:focus { outline: none; border-color: var(--color-primary-600); box-shadow: var(--shadow-focus); }

.pe-textarea {
  width: 100%;
  padding: 10px 12px;
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font: 400 14px/20px var(--font-sans);
  color: var(--fg-1);
  resize: vertical;
  min-height: 70px;
}
.pe-textarea:focus { outline: none; border-color: var(--color-primary-600); box-shadow: var(--shadow-focus); }

.pe-label {
  display: block;
  font: 500 12px/1 var(--font-sans);
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.pe-page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 24px;
}
.pe-page-title {
  font: 600 28px/36px var(--font-display);
  color: var(--fg-1); margin: 0 0 4px;
}
.pe-page-sub {
  font: 400 14px/20px var(--font-sans);
  color: var(--fg-2);
}

.pe-table {
  width: 100%;
  border-collapse: collapse;
}
.pe-table th, .pe-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
  font: 400 14px/20px var(--font-sans);
  color: var(--fg-1);
}
.pe-table th {
  font: 500 11px/1 var(--font-sans);
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--color-gray-50);
}
.pe-table tbody tr:hover { background: var(--color-gray-50); }
.pe-table-actions {
  display: flex; gap: 4px; justify-content: flex-end;
}

.pe-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--fg-2);
  font: 400 14px/20px var(--font-sans);
}

/* Modal */
.pe-modal-overlay {
  position: fixed; inset: 0;
  background: var(--bg-overlay);
  display: grid; place-items: center;
  z-index: 100;
  padding: 24px;
  animation: peFadeIn 150ms ease;
}
.pe-modal {
  background: white;
  border-radius: 16px;
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: peScaleIn 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.pe-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-subtle);
}
.pe-modal-head h2 {
  font: 600 18px/24px var(--font-display);
  color: var(--fg-1); margin: 0;
}
.pe-modal-body {
  padding: 24px;
  overflow: auto;
  flex: 1;
}
.pe-modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-subtle);
  background: var(--color-gray-50);
}

@keyframes peFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes peScaleIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

/* Toast */
.pe-toast {
  position: fixed;
  top: 88px; right: 24px;
  z-index: 200;
  background: white;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  font: 500 13.5px/1 var(--font-sans);
  color: var(--fg-1);
  max-width: 380px;
  animation: peSlideIn 200ms ease;
}
.pe-toast-success { border-color: var(--color-success-600); }
.pe-toast-success::before { content: ''; width: 4px; align-self: stretch; background: var(--color-success-600); border-radius: 999px; margin-right: 4px; }
.pe-toast-error { border-color: var(--color-danger-600); color: var(--color-danger-700); }
.pe-toast-info { border-color: var(--color-primary-600); }
@keyframes peSlideIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* Form rows en grid */
.pe-form-grid {
  display: grid;
  gap: 16px;
}
.pe-form-row {
  display: grid;
  gap: 6px;
}

/* ──────────────────────────── Responsive (≤900px) ──────────────────────────── */
@media (max-width: 900px) {
  .pe-app { grid-template-rows: 56px 1fr; }
  .pe-header { height: 56px; padding: 0 14px; gap: 8px; }
  .pe-divider { display: none; }
  /* En móvil escondemos el chip de tenant (ya tenemos el logo Kompas a la
     izquierda y el menú del usuario a la derecha) — el espacio es escaso. */
  .pe-tenant-pill { display: none; }
  .pe-brand-name { display: none; }
  .pe-body { display: flex; flex-direction: column; }
  .pe-sidebar { display: none; }
  .pe-main { padding: 16px 14px 32px; }
  .pe-screen { max-width: 100%; }
  .pe-page-head { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 16px; }
  .pe-page-title { font-size: 22px; line-height: 28px; }
  .pe-page-sub { font-size: 13px; line-height: 18px; }
  .pe-table { font-size: 13px; }
  .pe-table th, .pe-table td { padding: 10px 12px; }
  .pe-toast { top: 72px; right: 12px; left: 12px; max-width: none; }
  .pe-modal-overlay { padding: 12px; }
  .pe-modal-head { padding: 16px 18px; }
  .pe-modal-body { padding: 18px; }
  .pe-modal-foot { padding: 12px 18px; }
}

/* Una tabla más ancha que su tarjeta (portátil pequeño, iPad en horizontal)
   se desplaza dentro de ella en vez de salirse. Si la tarjeta lleva además
   un desplegable (p. ej. el selector de personas), la tabla va dentro de
   .pe-tabla-desliza para que el desplegable no quede recortado. */
.pe-card:has(> .pe-table) { overflow-x: auto; }
.pe-tabla-desliza { overflow-x: auto; }

/* Tablas que en el móvil se convierten en fichas, una por fila: cada celda
   lleva su etiqueta en data-label y va en una rejilla de dos columnas;
   .pe-td-ancha ocupa las dos. Se activa con class="pe-table pe-table-apilable". */
@media (max-width: 900px) {
  .pe-table-apilable, .pe-table-apilable tbody { display: block; }
  .pe-table-apilable thead { display: none; }
  .pe-table-apilable tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense;
    gap: 12px 16px; padding: 14px 16px; border-bottom: 1px solid var(--border-subtle);
  }
  .pe-table-apilable tr:last-child { border-bottom: 0; }
  .pe-table-apilable tbody tr:hover { background: none; }
  .pe-table-apilable td { display: block; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; }
  .pe-table-apilable td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 4px;
    font: 500 11px/14px var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-2);
  }
  .pe-table-apilable .pe-td-ancha { grid-column: 1 / -1; }
  .pe-table-apilable .pe-table-actions { justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
  .pe-table-apilable .pe-btn { white-space: nowrap; }
}

/* Contador de solicitudes pendientes junto a "Vacaciones". */
.pe-nav-item { position: relative; }
.pe-nav-count {
  flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: inline-grid; place-items: center;
  font: 700 11px/1 var(--font-sans); color: white; background: var(--color-danger-500, #EF4444);
}
.pe-sidebar.is-collapsed .pe-nav-count {
  position: absolute; top: 4px; right: 8px; min-width: 8px; width: 8px; height: 8px; padding: 0; font-size: 0;
}

/* Selector de varias personas (PortalShell.SelectorPersonas). */
.pe-selpers { position: relative; display: inline-block; max-width: 100%; }
.pe-selpers-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; height: 32px;
  max-width: 100%; min-width: 170px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px;
  background: white; font: 400 13px/1 var(--font-sans); color: var(--fg-1); cursor: pointer; }
.pe-selpers-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-selpers-btn.is-on { border-color: var(--color-primary-600); background: var(--color-primary-50); color: var(--color-primary-800); font-weight: 500; }
.pe-selpers-pop { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; width: 260px; max-width: calc(100vw - 28px);
  padding: 8px; border: 1px solid var(--border-default); border-radius: 10px; background: white;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .14); }
.pe-selpers-busca { width: 100%; height: 32px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px;
  font: 400 13px/1 var(--font-sans); }
.pe-selpers-acc { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 2px; }
.pe-selpers-acc button { border: 0; background: none; padding: 2px 0; font: 500 12px/1.3 var(--font-sans);
  color: var(--color-primary-700); cursor: pointer; }
.pe-selpers-acc button:disabled { color: var(--fg-3); cursor: default; }
.pe-selpers-lista { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow: auto; }
.pe-selpers-lista label { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 6px;
  font: 400 13px/1.3 var(--font-sans); color: var(--fg-1); cursor: pointer; }
.pe-selpers-lista label:hover { background: var(--color-gray-50); }
.pe-selpers-lista small { color: var(--fg-3); }
.pe-selpers-punto { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 999px; }
.pe-selpers-nada { padding: 8px 4px; font: 400 13px/1.3 var(--font-sans); color: var(--fg-3); }
@media (max-width: 900px) {
  .pe-selpers-btn { min-width: 0; width: 100%; }
  .pe-selpers { width: 100%; }
}

/* Para quién (comunicaciones, documentos): todo el equipo o una lista. */
.pe-destinos { display: grid; gap: 8px; }
.pe-destinos-modo { display: flex; gap: 6px; flex-wrap: wrap; }
.pe-destinos-opcion {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px;
  border: 1px solid var(--border-strong); border-radius: 999px; background: white;
  font: 500 13px/1 var(--font-sans); color: var(--fg-2); cursor: pointer;
}
.pe-destinos-opcion.is-selected { border-color: var(--color-primary-400); background: var(--color-primary-50); color: var(--color-primary-700); }
.pe-destinos-ayuda { margin: 0; font: 400 12px/1.4 var(--font-sans); color: var(--fg-3); }
.pe-destinos-caja { border: 1px solid var(--color-gray-200); border-radius: 8px; padding: 8px; display: grid; gap: 8px; }
.pe-destinos-equipos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font: 400 12px/1 var(--font-sans); color: var(--fg-3); }
.pe-destinos-equipos button, .pe-destinos-barra button {
  padding: 5px 8px; border: 1px solid var(--color-gray-200); border-radius: 6px; background: white;
  font: 500 12px/1 var(--font-sans); color: var(--fg-2); cursor: pointer;
}
.pe-destinos-equipos button:hover, .pe-destinos-barra button:hover { border-color: var(--color-primary-400); color: var(--fg-1); }
.pe-destinos-barra { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pe-destinos-barra .pe-selpers-busca { flex: 1 1 140px; margin: 0; }
.pe-destinos-lista { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; }
.pe-destinos-lista label { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font: 400 13px/1.2 var(--font-sans); cursor: pointer; }
.pe-destinos-cuenta { font: 500 12px/1 var(--font-sans); color: var(--fg-3); }

/* Función de Pro que el negocio no tiene (shell.jsx: ModuloBloqueado). */
.pe-bloqueado { padding: 28px; max-width: 560px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pe-bloqueado-titulo { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 600 18px/24px var(--font-display); color: var(--fg-1); }
.pe-bloqueado-texto { margin: 0; font: 400 14px/21px var(--font-sans); color: var(--fg-2); }
.pe-bloqueado .pe-btn { text-decoration: none; display: inline-flex; align-items: center; }
/* Un bloque de una pantalla que es de Pro (shell.jsx: EtiquetaPro, AvisoPro). */
.pe-pro {
  display: inline-block; margin-left: 8px; vertical-align: middle;
  font: 700 10px/1 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--color-primary-100); color: var(--color-primary-700);
  padding: 3px 8px; border-radius: 999px;
}
.pe-pro-aviso { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 2px 0 10px; font: 400 13px/18px var(--font-sans); color: var(--fg-2); }
.pe-pro-aviso a { color: var(--color-primary-700); font-weight: 500; }