@charset "UTF-8";
/* CSS Document */

    :root {
      --bg: #f5f5f7;
      --panel-bg: #ffffff;
      --panel-border: #eeeeee;
      --text-main: #111111;
      --text-muted: #666666;
      --accent: #cacaca;
      --accent-soft: #eeeeee;
      --radius-lg: 14px;
      --shadow-soft: 0 14px 30px rgba(0, 0, 0, 0.08);
      --transition-fast: 0.2s ease-out;
      --font-main: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
        "Roboto", "Segoe UI", sans-serif;
    }

    /* Tema oscuro automático (se activa con body.dark-theme) */
    body.dark-theme {
      --bg: #050509;
      --panel-bg: #111318;
      --panel-border: #444444;
      --text-main: #f9fafb;
      --text-muted: #eeeeee;
      --accent: #444444;
      --accent-soft: #333333;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: env(safe-area-inset-top, 0) 0 0 0;
      font-family: var(--font-main);
      background: var(--bg);
      color: var(--text-main);
    }

    .app-shell {
      display: none;
      height: calc(100vh - env(safe-area-inset-top, 0));
      width: 100vw;
      display: flex;
      overflow: hidden;
    }

    .workspace {
      flex: 1;
      padding: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      font-size: 14px;
    }

    .workspace-mock {
      width: 100%;
      max-width: 900px;
      height: 70vh;
      border-radius: var(--radius-lg);
      border: 1px dashed #c5c5d5;
      background: #fbfbfd;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 24px;
    }

    body.dark-theme .workspace-mock {
      background: #111318;
      border-color: #262838;
    }

	/* Logo Planeta en modo oscuro: lo “vuelve” claro */
	body.dark-theme .pg-logo{
		filter: invert(1) brightness(1.15) contrast(1.05);
	}

	/* En modo oscuro, intenta volver claro el logo (funciona mejor con PNG/SVG negros) */
	body.dark-theme .org-logo-slot {
		filter: invert(1) brightness(1.2) contrast(1.1);
		opacity: 0.95;
	}

	

    .toggle-dock-btn {
      position: fixed;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      background: #111111;
      color: #ffffff;
      border: none;
      border-radius: 8px 0 0 8px;
      padding: 8px 10px;
      font-size: 11px;
      cursor: pointer;
      z-index: 30;
      writing-mode: vertical-rl;
      text-orientation: mixed;
    }

    body.dark-theme .toggle-dock-btn {
      background: #f5f5f7;
      color: #111111;
    }

    .dock {
      width: 420px;
      max-width: 95vw;
      background: var(--panel-bg);
      border-left: 1px solid var(--panel-border);
      box-shadow: -10px 0 25px rgba(0, 0, 0, 0.06);
      display: flex;
      flex-direction: column;
      transition: width var(--transition-fast);
      position: relative;
      overflow-y: auto;
    }

    .dock.hidden {
      display: none;
    }

    /* Estado colapsado */
    .dock.collapsed {
      width: 80px;
    }

    .dock.collapsed .dock-header {
      display: none;
    }

    .dock.collapsed .dock-content {
      display: none;
    }

    .dock.collapsed .dock-tab span:not(.dock-tab-icon) {
      display: none;
    }

    .dock.collapsed .dock-footer span:first-child {
      display: none;
    }

    .dock-header {
      padding: 8px 14px 4px;
      border-bottom: 1px solid #e5e5f0;
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 11px;
      background: #f3f3f5;
    }

    body.dark-theme .dock-header {
      background: #171923;
      border-bottom-color: #262838;
    }

    /* Título: Entorno profesional activo */
    #dockMatrix {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-main);
      padding: 2px 0 0;
    }

    .dock-header-top {
      display: flex;
      gap: 6px;
      align-items: center;
    }

    .dock-select-small {
      font-size: 11px;
      font-family: inherit;
      border: none;
      border-bottom: 1px solid #c5c5d8;
      background: transparent;
      padding: 2px 2px;
      min-width: 120px;
      color: var(--text-main);
    }

    .dock-select-small:focus {
      outline: none;
      border-bottom-color: var(--accent);
    }

    .dock-user {
      font-size: 11px;
      color: var(--text-muted);
    }

    .dock-collapse-btn {
      position: absolute;
      top: 8px;
      right: 8px;
      border: none;
      background: transparent;
      cursor: pointer;
      font-size: 20px;
      color: var(--text-muted);
    }

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

    .dock-tabs {
      width: 88px;
      border-right: 1px solid #e5e5f0;
      display: flex;
      flex-direction: column;
      padding: 8px 6px;
      gap: 4px;
    }

    body.dark-theme .dock-tabs {
      border-right-color: #262838;
    }

    .dock-tab {
      border-radius: 8px;
      padding: 10px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      cursor: pointer;
      font-size: 11px;
      color: var(--text-muted);
      border: 1px solid transparent;
      background: transparent;
      transition: background var(--transition-fast), border var(--transition-fast),
        color var(--transition-fast), transform var(--transition-fast);
    }

    .dock-tab-icon {
      font-size: 32px;
		margin-bottom: 2px; 
      color: #333;   /* negro por defecto */
    }

    body.dark-theme .dock-tab-icon {
      color: var(--text-main);
    }

    .dock-tab.active {
      background: var(--accent-soft);
      border-color: var(--accent);
      /* color: var(--accent); */
      transform: translateX(2px);
    }

    .dock-content {
      flex: 1;
      padding: 12px 14px 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      overflow-y: auto;
      font-size: 12px;
    }

    .dock-section-title {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-muted);
    }

    .dock-card {
      border-radius: 8px;
      border: 1px solid #e5e5f0;
      padding: 8px 10px;
      font-size: 12px;
      background: #fcfcff;
		 max-height: 1080px; 
    }



.login-logo-wrapper {
  text-align: center;
  margin-bottom: 12px;
}

.login-logo {
  max-height: 48px;
  max-width: 160px;
  object-fit: contain;
  display: none; /* se muestra solo si hay logoUrl */
}

.dock-header-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.org-logo {
  max-height: 28px;
  max-width: 120px;
  object-fit: contain;
}


.dock-sidebar {
  display: flex;
  flex-direction: column;
}

.dock-logo {
  margin-top: auto;          /* empuja el logo hasta abajo */
  padding: 12px 0;
  display: flex;
  justify-content: center;
}

.dock-logo-img {
  max-height: 45px;
  max-width: 120px;
  object-fit: contain;
  opacity: 0.7;
}


.dock-card-colors {
  max-height: 220px;      /* ajusta este valor a tu gusto */
  overflow-y: auto;       /* si hay muchos colores, aparece scroll interno */
}

.dock-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between; /* usuario a la izquierda, botón a la derecha */
  gap: 8px;
}

.logout-btn {
  margin-left: auto;                 /* se pega al lado derecho */
  padding: 3px 10px;
  font-size: 11px;
  border-radius: 999px;
  border: none;                      /* sin contorno de botón viejo */
  background: transparent;           /* fondo transparente */
  color: var(--text-muted);
  cursor: pointer;
}

.logout-btn:hover {
  background: #eeeeee;               /* leve resaltado al pasar el mouse */
}

body.dark-theme .logout-btn:hover {
  background: #333333;
}


.dock-connection {
  font-size: 10px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2e7d32;                         /* verde encendido */
  box-shadow: 0 0 0 3px rgba(46, 125, 50, .25);/* halo suave */
}



    body.dark-theme .dock-card {
      background: #171923;
      border-color: #262838;
    }

    .dock-label {
      font-size: 11px;
      color: var(--text-muted);
      margin-bottom: 2px;
    }

    .dock-input,
    .dock-select {
      width: 100%;
      padding: 5px 4px;
      border-radius: 0;
      border: none;
      border-bottom: 1px solid #d7d7e5;
      font-size: 12px;
      font-family: inherit;
      outline: none;
      background: #ffffff;
      color: var(--text-main);
    }

    body.dark-theme .dock-input,
    body.dark-theme .dock-select {
      background: #111318;
      border-bottom-color: #30334a;
      color: var(--text-main);
    }

    .dock-input:focus,
    .dock-select:focus {
      border-bottom-color: var(--accent);
    }

    .dock-chip-row {
      display: flex;
      gap: 6px;
      align-items: center;
      font-size: 11px;
    }

    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #bdbdbd;
    }

    .status-dot.active {
      background: #2e7d32;
    }

    .status-dot.paused {
      background: #f9a825;
    }

    .dock-btn-row {
      margin-top: 8px;
      display: flex;
      gap: 8px;
    }

    .btn {
      flex: 1;
      border-radius: 6px;
      border: 1px solid #c5c5d8;
      background: #ffffff;
      font-size: 12px;
      padding: 5px 6px;
      cursor: pointer;
      font-family: inherit;
      transition: background var(--transition-fast), border var(--transition-fast),
        transform var(--transition-fast);
      color: var(--text-main);
    }

    body.dark-theme .btn {
      background: #111318;
      border-color: #30334a;
      color: var(--text-main);
    }

    .btn.primary {
      background: var(--accent);
      color: #ffffff;
      border-color: var(--accent);
    }

    .btn:hover {
      background: #eeeeee;
      transform: translateY(-1px);
    }

    body.dark-theme .btn:hover {
      background: #222742;
    }

    .btn.primary:hover {
      background: #444444;
    }

    .btn.small {
      flex: 0;
      font-size: 11px;
      padding: 3px 6px;
    }

    .timer-display {
      font-variant-numeric: tabular-nums;
      font-size: 18px;
      text-align: center;
      margin: 6px 0 4px;
    }

    hr {
      border: none;
      border-bottom: 1px solid #e1e1ec;
      margin: 6px 0;
    }

    body.dark-theme hr {
      border-bottom-color: #262838;
    }

    .brand-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      margin-bottom: 4px;
    }

    .color-row {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 2px;
  font-size: 11px;
  align-items: flex-start;
  margin-bottom: 2px;
}

.color-row span {
  display: block;           /* el texto ocupa todo el ancho disponible */
  white-space: normal;      /* por si algo venía sin permitir salto de línea */
}


    .color-swatch {
      width: 40px;
      height: 18px;
      border-radius: 4px;
      border: 1px solid #c4c4d4;
    }

    .code {
      font-family: "SF Mono", "Roboto Mono", ui-monospace, Menlo, monospace;
      font-size: 11px;
      background: #f1f1fa;
      padding: 2px 4px;
      border-radius: 4px;
    }

    body.dark-theme .code {
      background: #20253c;
    }

    .asset-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      margin-bottom: 4px;
    }

    .asset-left {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .asset-thumb {
      width: 22px;
      height: 22px;
      border-radius: 4px;
      background: #999;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      color: #333366;
    }

    body.dark-theme .asset-thumb {
      background: #262b4a;
      color: #999;
    }

    .dock-footer {
      padding: 6px 10px;
      border-top: 1px solid #e5e5f0;
      font-size: 10px;
      color: var(--text-muted);
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: var(--panel-bg);
    }

    body.dark-theme .dock-footer {
      border-top-color: #262838;
    }

    .sync-status {
      font-size: 10px;
      display: flex;
      align-items: center;
      gap: 4px;
    }


.sync-card {
  border-radius: 12px;
  padding: 16px 20px;
  margin-top: 8px;
  font-size: 13px;
}

.sync-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.sync-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.sync-dot.online {
  background: #22c55e;
}

.sync-dot.offline {
  background: #ef4444;
}

.sync-users-title {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

#syncUsersList {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.sync-user-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}

.sync-user-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
}

.sync-user-time {
  opacity: .6;
  font-size: 12px;
}

/* ===== ADMIN PANEL ===== */
.admin-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

@media (min-width: 520px){
  .admin-grid{ grid-template-columns:1fr 1fr; }
}

@media (min-width: 780px){
  .admin-grid{ grid-template-columns:1fr 1fr 1fr; }
}

.admin-box{
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  padding:10px;
  background: rgba(255,255,255,0.03);
}

.admin-title{
  font-size:12px;
  font-weight:700;
  margin-bottom:8px;
  letter-spacing:.02em;
}

.dock-btn{
  width:100%;
  border: none;
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:700;
  margin-top:8px;
  background: #eee;
  /*color: var(--text);*/
}

.dock-btn.secondary{
  background: #eee;
  font-weight:600;
}

.dock-btn:active{ transform: translateY(1px); }

.admin-msg{
  margin-top:10px;
  font-size:12px;
  opacity: .9;
}

.sync-user-empty {
  opacity: .6;
  font-size: 12px;
}





.faro-status {
      font-size: 10px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .badge-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #2e7d32;
    }

    .screen {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg);
      z-index: 20;
    }

    .screen.hidden {
      display: none;
    }

    .card {
      background: var(--panel-bg);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-soft);
      padding: 24px 26px;
      min-width: 280px;
      max-width: 420px;
      color: var(--text-main);
    }

    .card-title {
      font-size: 20px;
      margin-bottom: 4px;
    }

    .card-subtitle {
      font-size: 13px;
      color: var(--text-muted);
      margin-bottom: 12px;
    }

    .card-field {
      margin-bottom: 10px;
      font-size: 12px;
    }

    .card-field label {
      display: block;
      font-size: 12px;
      margin-bottom: 3px;
      color: var(--text-muted);
    }

    .card-input {
      width: 100%;
      padding: 7px 6px;
      border-radius: 0;
      border: none;
      border-bottom: 1px solid #d0d0dd;
      font-size: 13px;
      font-family: inherit;
      outline: none;
      background: #ffffff;
      color: var(--text-main);
    }

    body.dark-theme .card-input {
      background: #111318;
      border-bottom-color: #30334a;
      color: var(--text-main);
    }

    .card-input:focus {
      border-bottom-color: var(--accent);
    }

    .card-button {
      width: 100%;
      margin-top: 10px;
      padding: 9px 10px;
      border-radius: 8px;
      border: none;
      background: var(--accent);
      color: #ffffff;
      font-size: 13px;
      cursor: pointer;
      font-family: inherit;
    }

    .card-button:hover {
      background: #444444;
    }

    .project-list {
      margin: 8px 0 4px;
      padding: 0;
      list-style: none;
      max-height: 220px;
      overflow-y: auto;
    }

    .project-item {
      padding: 6px 8px;
      border-radius: 8px;
      font-size: 13px;
      cursor: pointer;
      margin-bottom: 4px;
    }

    .project-item.active {
      background: var(--accent-soft);
      color: var(--accent);
    }

    .project-item:hover {
      background: #eeeeee;
    }

    body.dark-theme .project-item:hover {
      background: #222222;
    }

    @media (max-width: 780px) {
      .dock {
        width: 100%;
      }
      .app-shell {
        flex-direction: column;
      }
      .workspace {
        display: none;
      }
      .toggle-dock-btn {
        top: auto;
        bottom: 10px;
        right: 10px;
        transform: none;
        writing-mode: horizontal-tb;
        border-radius: 999px;
      }
    }
	  
/* MODO PANEL: solo dock, sin área simulada */
body.dock-only .workspace {
  display: none;              /* ocultamos el área de trabajo simulada */
}

body.dock-only .app-shell {
  display: flex;
  height: 100vh;              /* ocupa todo el alto de la ventana */
  justify-content: flex-end;  /* pegado a la derecha */
  align-items: flex-start;    /* pegado arriba */
}

/* Panel flotante arriba a la derecha */
body.dock-only .dock {
  width: 100%;                         /* ancho base */
  max-width: calc(100vw - 32px);        /* deja aire lateral */
  margin: 16px 16px auto auto;          /* 16 px top y right, auto abajo/izq */
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

/* En pantallas muy pequeñas, el panel se hace full-width abajo (modo móvil) */
@media (max-width: 480px) {
  body.dock-only .app-shell {
    justify-content: center;
    align-items: stretch;
  }

  body.dock-only .dock {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

	  
	  /* Forzar que el modo colapsado sea solo barra de iconos */
body.dock-only .dock.collapsed {
  width: 80px;
  max-width: 80px;
  margin: 16px 16px auto auto; /* mantiene posición arriba derecha */
}

/* Ocultar completamente el área de contenido cuando está colapsado */
body.dock-only .dock.collapsed .dock-content {
  display: none;
}

/* Opcional: que el footer sea sólo la hora chiquita */
body.dock-only .dock.collapsed .dock-footer span:first-child {
  display: none;
}

	  .password-wrapper {
  position: relative;
}

.password-wrapper input {
  width: 100%;
  padding-right: 40px; /* espacio para el ojo */
}

.password-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:transparent;
  cursor:pointer;
  font-size:18px;
  line-height:1;
}