/* Estilo base de app.kori.es: el mismo sistema que bookance y desk (paleta verde lima,
   IBM Plex Sans, bordes de 0,5 px, esquinas redondeadas, tarjetas planas). Cada mini-app
   usa estas variables y clases; su CSS solo añade lo suyo. */

:root {
  --color-primary: #C7F33C;
  --color-primary-dark: #B3D91F;
  --color-primary-bg: #E1F2AE;
  --color-primary-text: #7B9D1B;
  --color-primary-text-strong: #4B6E0A;
  --color-primary-bg-light: #EDF5CA;
  --color-highlight-bg: #FDECC8;

  --color-surface-1: #F9FAFB;
  --color-surface-2: #F3F4F6;
  --color-white: #FFFFFF;

  --color-text-primary: #1F2937;
  --color-text-secondary: #6B7280;
  --color-text-muted: #9CA3AF;

  --color-border: #E5E7EB;
  --color-border-strong: #D1D5DB;

  --color-success: #10B981;
  --color-success-bg: #D1FAE5;
  --color-success-text: #065F46;
  --color-success-border: #6EE7B7;
  --color-error: #EF4444;
  --color-error-bg: #FEF2F2;
  --color-error-text: #991B1B;
  --color-error-border: #FECACA;
  --color-warning: #F59E0B;
  --color-warning-bg: #FEF3C7;
  --color-warning-text: #92400E;
  --color-warning-border: #FCD34D;
  --color-info: #3B82F6;
  --color-info-bg: #DBEAFE;
  --color-info-text: #1E40AF;
  --color-info-border: #93C5FD;

  --font-family-base: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --shadow-modal: 0 20px 25px rgba(0, 0, 0, 0.1);
  --menu-ancho: 224px;
  --menu-contraido: 64px;
  --cabecera: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-family-base); font-size: 14px; line-height: 1.5;
  background: var(--color-surface-1); color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
#app { height: 100%; }

/* ── Armazón: cabecera + menú lateral + contenido ── */
.armazon { display: flex; flex-direction: column; height: 100%; }

.cabecera {
  background: var(--color-surface-2); border-bottom: 0.5px solid var(--color-border);
  height: var(--cabecera); padding: 0 24px 0 18px; flex-shrink: 0;
  display: flex; align-items: center; gap: 12px; position: relative; z-index: 100;
}
.cab-marca { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 4px; cursor: pointer; border-radius: 10px; flex-shrink: 0; }
.cab-marca img { height: 24px; display: block; }
.cab-centro {
  position: absolute; top: 0; bottom: 0; display: flex; align-items: center; gap: 8px;
  left: calc(var(--menu-ancho) + 28px); transition: left 0.3s ease; min-width: 0;
}
.armazon.contraido .cab-centro { left: calc(var(--menu-contraido) + 28px); }
.cab-app { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.cab-app-icono { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--color-text-primary); }
.cab-app-icono svg { width: 16px; height: 16px; }
.pildora {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  background: var(--color-primary-bg); border: 0.5px solid var(--color-primary); border-radius: 20px;
  font-size: 12px; font-weight: 600; color: var(--color-text-primary); white-space: nowrap;
}
button.pildora { cursor: pointer; transition: background 0.2s; }
button.pildora:hover { background: var(--color-primary); }
.pildora svg { width: 11px; height: 11px; }
.cab-derecha { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--color-text-secondary); }
.cab-derecha strong { color: var(--color-text-primary); font-weight: 600; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--color-text-primary); color: var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0;
  border: 0; cursor: pointer;
}
.cab-hamburguesa { display: none; }

.cuerpo { display: flex; flex: 1; min-height: 0; }

.menu {
  width: var(--menu-ancho); background: var(--color-surface-2); border-right: 0.5px solid var(--color-border);
  padding: 12px; display: flex; flex-direction: column; transition: width 0.3s ease; overflow: hidden; flex-shrink: 0;
}
.armazon.contraido .menu { width: var(--menu-contraido); }
.menu-arriba { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; }
.menu-arriba > *, .menu-abajo > * { flex-shrink: 0; }
.menu-abajo { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; border-top: 0.5px solid var(--color-border); padding-top: 8px; flex-shrink: 0; }
.menu-seccion {
  font-size: 10px; font-weight: 600; color: var(--color-text-muted); letter-spacing: 0.5px; text-transform: uppercase;
  padding: 10px 10px 2px; white-space: nowrap; transition: opacity 0.2s; display: flex; align-items: center; justify-content: space-between;
}
.armazon.contraido .menu-seccion { opacity: 0; pointer-events: none; height: 12px; padding: 0; }
.item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 14px;
  border: 0.5px solid transparent; color: var(--color-text-secondary); font-size: 14px; font-weight: 500;
  cursor: pointer; background: transparent; width: 100%; text-align: left; transition: all 0.2s;
  white-space: nowrap; overflow: hidden; text-decoration: none;
}
.item:hover { background: var(--color-surface-1); color: var(--color-text-primary); }
.item.activo { background: var(--color-primary-bg); border-color: var(--color-primary); color: var(--color-text-primary); }
.item svg { flex-shrink: 0; width: 20px; height: 20px; }
.item-texto { transition: opacity 0.2s; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.item-contador { font-size: 11px; color: var(--color-text-muted); font-weight: 500; transition: opacity 0.2s; }
.armazon.contraido .item-texto, .armazon.contraido .item-contador { opacity: 0; }
.item-tenue { color: var(--color-text-muted); font-size: 13px; }
.item-peligro { color: var(--color-error-text); }
.item-peligro:hover { background: var(--color-error-bg); color: var(--color-error); }
.item-punto { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin: 0 5px; }

.contenido { flex: 1; min-width: 0; overflow-y: auto; padding: 28px; }
.contenido.lleno { padding: 0; overflow: hidden; display: flex; }

.titulo-pagina { font-size: 24px; font-weight: 500; margin: 0 0 4px; }
.subtitulo-pagina { font-size: 13px; color: var(--color-text-secondary); margin: 0 0 28px; }
.barra-pagina { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Botón + junto al título de sección del menú lateral */
.menu-seccion-boton { border: 0; background: none; padding: 2px; border-radius: 6px; cursor: pointer; color: var(--color-text-muted); display: inline-flex; }
.menu-seccion-boton:hover { background: var(--color-surface-1); color: var(--color-text-primary); }
.menu-seccion-boton svg { width: 14px; height: 14px; }

/* Velo del menú en el móvil */
.velo { display: none; }

@media (max-width: 800px) {
  .cabecera { padding: 0 12px; }
  .cab-hamburguesa { display: inline-flex; }
  .cab-centro { position: static; flex: 1; overflow: hidden; }
  .cab-derecha .saludo { display: none; }
  .menu {
    position: fixed; top: var(--cabecera); bottom: 0; left: 0; z-index: 90; width: 260px !important;
    transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: var(--shadow-modal);
  }
  .armazon.menu-abierto .menu { transform: none; }
  .armazon.menu-abierto .velo { display: block; position: fixed; inset: var(--cabecera) 0 0 0; background: rgba(0,0,0,0.25); z-index: 80; }
  .armazon .item-texto, .armazon .item-contador { opacity: 1 !important; }
  .armazon .menu-seccion { opacity: 1 !important; height: auto !important; padding: 10px 10px 2px !important; }
  .menu .solo-escritorio { display: none; }
  .contenido { padding: 18px 14px; }
}

/* ── Botones ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px;
  background: var(--color-text-primary); color: var(--color-primary); border: none; border-radius: 10px;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; white-space: nowrap;
}
.btn:hover { opacity: 0.88; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }
.btn-2 {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 14px; background: transparent;
  color: var(--color-text-secondary); border: 0.5px solid var(--color-border-strong); border-radius: 10px;
  font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.btn-2:hover { background: var(--color-surface-2); color: var(--color-text-primary); }
.btn-2 svg { width: 16px; height: 16px; }
.btn-peligro {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: transparent; color: var(--color-error);
  border: 0.5px solid var(--color-error-border); border-radius: 10px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s;
}
.btn-peligro:hover { background: var(--color-error-bg); }
.btn-icono {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: transparent;
  border: 0.5px solid var(--color-border); border-radius: 8px; cursor: pointer; color: var(--color-text-secondary); transition: all 0.2s; flex-shrink: 0;
}
.btn-icono:hover { background: var(--color-surface-2); color: var(--color-text-primary); }
.btn-icono.activo { background: var(--color-primary-bg); border-color: var(--color-primary); color: var(--color-text-primary); }
.btn-icono svg { width: 16px; height: 16px; }
.btn-icono.sin-borde { border-color: transparent; }

/* ── Formularios ── */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo-etiqueta { font-size: 12px; font-weight: 500; letter-spacing: 0.2px; }
.entrada {
  height: 40px; padding: 0 12px; border: 0.5px solid var(--color-border-strong); border-radius: 10px; font-size: 14px;
  background: var(--color-surface-1); outline: none; transition: border-color 0.15s; width: 100%;
}
.entrada:focus { border-color: var(--color-text-primary); box-shadow: 0 0 0 3px var(--color-primary-bg); }
select.entrada { padding-right: 8px; }
.pista { font-size: 12px; color: var(--color-text-muted); }
.error-form { font-size: 13px; color: var(--color-error-text); background: var(--color-error-bg); border: 0.5px solid var(--color-error-border); border-radius: 10px; padding: 10px 12px; }
.fila-form { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 0.5px solid var(--color-surface-2); }
.fila-form:last-child { border-bottom: none; }
.fila-form-sub { font-size: 12px; color: var(--color-text-muted); }

.interruptor { position: relative; width: 36px; height: 20px; background: var(--color-border-strong); border: none; border-radius: 20px; cursor: pointer; transition: background 0.2s; flex-shrink: 0; padding: 0; }
.interruptor.on { background: var(--color-success); }
.interruptor::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: white; border-radius: 50%; transition: transform 0.2s; }
.interruptor.on::after { transform: translateX(16px); }

.casilla { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; padding: 4px 0; user-select: none; }
.casilla input { width: 16px; height: 16px; accent-color: var(--color-text-primary); margin: 0; cursor: pointer; }

/* ── Tarjetas, tablas, etiquetas ── */
.tarjeta { background: var(--color-white); border: 0.5px solid var(--color-border); border-radius: 20px; padding: 20px; }
.tarjeta-titulo { font-size: 15px; font-weight: 600; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--color-primary); }

.tabla { width: 100%; background: var(--color-white); border: 0.5px solid var(--color-border); border-radius: 20px; overflow: hidden; }
.tabla-scroll { overflow-x: auto; }
.tabla table { width: 100%; border-collapse: collapse; }
.tabla thead tr { background: var(--color-surface-2); border-bottom: 0.5px solid var(--color-border); }
.tabla th { padding: 11px 16px; text-align: left; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.tabla td { padding: 12px 16px; font-size: 13px; border-bottom: 0.5px solid var(--color-surface-2); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: none; }
.tabla tbody tr { cursor: pointer; }
.tabla tbody tr:hover td { background: var(--color-surface-1); }
.tabla .tenue { color: var(--color-text-muted); }

.etiqueta { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--color-surface-2); color: var(--color-text-secondary); border: 0.5px solid var(--color-border); }
.etiqueta-primaria { background: var(--color-primary-bg); color: var(--color-primary-text-strong); border-color: var(--color-primary); }
.etiqueta-ok { background: var(--color-success-bg); color: var(--color-success-text); border-color: var(--color-success-border); }
.etiqueta-no { background: var(--color-error-bg); color: var(--color-error-text); border-color: var(--color-error-border); }
.etiqueta-info { background: var(--color-info-bg); color: var(--color-info-text); border-color: var(--color-info-border); }
.etiquetas { display: flex; flex-wrap: wrap; gap: 4px; }

.vacio { text-align: center; padding: 48px 20px; color: var(--color-text-muted); font-size: 13px; }
.vacio strong { display: block; font-size: 16px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 6px; }
.vacio svg { width: 36px; height: 36px; margin-bottom: 10px; opacity: 0.6; }

/* ── Ventanas (modales) ── */
.modal-fondo { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { background: var(--color-white); border-radius: 20px; padding: 28px; width: 100%; max-width: 480px; box-shadow: var(--shadow-modal); max-height: calc(100% - 32px); display: flex; flex-direction: column; }
.modal.ancho { max-width: 640px; }
.modal-cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-shrink: 0; }
.modal-titulo { font-size: 18px; font-weight: 600; margin: 0; }
.modal-cuerpo { display: flex; flex-direction: column; gap: 16px; overflow-y: auto; min-height: 0; margin: 0 -4px; padding: 0 4px; }
.modal-pie { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 24px; flex-shrink: 0; }
.modal-pie .izquierda { margin-right: auto; }

/* ── Avisos flotantes ── */
.avisos { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 2000; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.aviso { padding: 10px 16px; border-radius: 12px; font-size: 13px; font-weight: 500; background: var(--color-text-primary); color: var(--color-white); box-shadow: var(--shadow-modal); animation: aviso-entra 0.2s ease; }
.aviso.error { background: var(--color-error-bg); color: var(--color-error-text); border: 0.5px solid var(--color-error-border); }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(8px); } }

/* ── Carga ── */
.cargando { display: flex; align-items: center; justify-content: center; height: 100%; gap: 10px; color: var(--color-text-secondary); font-size: 13px; }
.rueda { width: 18px; height: 18px; border: 2px solid var(--color-border-strong); border-top-color: var(--color-text-primary); border-radius: 50%; animation: gira 0.8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ── Entrada (login) ── */
.login { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--color-surface-1); }
.login-caja { width: 100%; max-width: 380px; }
.login-logo { height: 40px; display: block; margin: 0 auto 28px; }
.login .tarjeta { padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.login h1 { font-size: 20px; font-weight: 600; margin: 0; }
.login p { margin: 0; color: var(--color-text-secondary); font-size: 13px; }
.login .btn { height: 42px; font-size: 14px; }

/* ── Inicio: selector de apps ── */
.rejilla-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.ficha-app {
  background: var(--color-white); border: 0.5px solid var(--color-border); border-radius: 20px; padding: 20px;
  display: flex; flex-direction: column; gap: 14px; cursor: pointer; text-align: left; transition: all 0.2s; min-height: 150px;
}
.ficha-app:hover { border-color: var(--color-border-strong); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,0.06); }
.ficha-app-icono { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--color-text-primary); }
.ficha-app-icono svg { width: 24px; height: 24px; }
.ficha-app-nombre { font-size: 16px; font-weight: 600; }
.ficha-app-desc { font-size: 13px; color: var(--color-text-secondary); margin-top: 2px; }
.ficha-app.admin { background: var(--color-text-primary); border-color: var(--color-text-primary); color: var(--color-white); }
.ficha-app.admin .ficha-app-desc { color: rgba(255,255,255,0.65); }
.ficha-app.admin .ficha-app-icono { background: rgba(255,255,255,0.12); color: var(--color-primary); }

/* ── Desplegable (selector de empresa) ── */
.desplegable { position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; background: var(--color-white); border: 0.5px solid var(--color-border); border-radius: 14px; box-shadow: var(--shadow-modal); padding: 6px; z-index: 200; }
.desplegable .item { font-size: 13px; padding: 8px 10px; border-radius: 10px; }
.ancla { position: relative; }