/*
 * Mycelium Studio — tokens y layout (plan §10.1–10.2).
 * Regla: jamás colores hardcodeados en vistas; solo estos tokens.
 */

/* ------------------------------------------------------------------ */
/* Tokens                                                              */
/* ------------------------------------------------------------------ */
:root,
[data-bs-theme="dark"] {
  /* Sustrato (fondos) — humus: oscuro con temperatura verde-marrón, nunca #000 */
  --myc-bg:        #141814;   /* fondo app */
  --myc-surface:   #1B211B;   /* cards, sidebar */
  --myc-surface-2: #232B23;   /* hover, inputs */
  --myc-border:    #2E372E;   /* líneas, hilos */
  /* Tinta */
  --myc-ink:       #E8ECE6;   /* texto principal */
  --myc-ink-dim:   #9AA69A;   /* secundario */
  /* Foxfire — acento bioluminiscente APAGADO (jade), no verde ácido neón */
  --myc-accent:    #5FBF9F;   /* acciones primarias, enlaces, nodo vivo */
  --myc-accent-ink:#0E1512;   /* texto sobre accent */
  /* Espora — ámbar cálido: avisos, badges de FK, resaltados */
  --myc-spore:     #D9A544;
  --myc-danger:    #D97066;   /* rojizo tierra, no rojo semáforo */
  --myc-radius: 10px;
  --myc-radius-sm: 6px;
}

[data-bs-theme="light"] {
  /* Tema "Claro de bosque": misma tinta invertida, acentos oscurecidos (AA) */
  --myc-bg:        #F4F5F1;
  --myc-surface:   #FBFCFA;
  --myc-surface-2: #ECEEE8;
  --myc-border:    #D5DAD2;
  --myc-ink:       #1C221C;
  --myc-ink-dim:   #5D675D;
  --myc-accent:    #2E8A6C;
  --myc-accent-ink:#F4FBF8;
  --myc-spore:     #A87A22;
  --myc-danger:    #B24A40;
}

/* ------------------------------------------------------------------ */
/* Mapeo a Bootstrap 5.3                                               */
/* ------------------------------------------------------------------ */
:root,
[data-bs-theme="dark"],
[data-bs-theme="light"] {
  --bs-body-bg: var(--myc-bg);
  --bs-body-color: var(--myc-ink);
  --bs-secondary-color: var(--myc-ink-dim);
  --bs-border-color: var(--myc-border);
  --bs-primary: var(--myc-accent);
  --bs-link-color: var(--myc-accent);
  --bs-link-hover-color: var(--myc-accent);
  --bs-danger: var(--myc-danger);
  --bs-warning: var(--myc-spore);
  --bs-border-radius: var(--myc-radius-sm);
  --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-font-monospace: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
}

body {
  background-color: var(--myc-bg);
  color: var(--myc-ink);
  font-family: var(--bs-font-sans-serif);
}

h1, h2, h3, .myc-display {
  font-family: "Sora", var(--bs-font-sans-serif);
  font-weight: 600;
}

.card, .modal-content, .offcanvas, .dropdown-menu, .toast {
  background-color: var(--myc-surface);
  border-color: var(--myc-border);
  color: var(--myc-ink);
  border-radius: var(--myc-radius);
}

.form-control, .form-select {
  background-color: var(--myc-surface-2);
  border-color: var(--myc-border);
  color: var(--myc-ink);
}
.form-control:focus, .form-select:focus {
  background-color: var(--myc-surface-2);
  border-color: var(--myc-accent);
  color: var(--myc-ink);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--myc-accent) 25%, transparent);
}
.form-control::placeholder { color: var(--myc-ink-dim); }

.btn-primary {
  --bs-btn-bg: var(--myc-accent);
  --bs-btn-border-color: var(--myc-accent);
  --bs-btn-color: var(--myc-accent-ink);
  --bs-btn-hover-bg: color-mix(in srgb, var(--myc-accent) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--myc-accent) 85%, black);
  --bs-btn-hover-color: var(--myc-accent-ink);
  --bs-btn-active-bg: color-mix(in srgb, var(--myc-accent) 75%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--myc-accent) 75%, black);
  --bs-btn-active-color: var(--myc-accent-ink);
}
.btn-outline-secondary {
  --bs-btn-color: var(--myc-ink-dim);
  --bs-btn-border-color: var(--myc-border);
  --bs-btn-hover-bg: var(--myc-surface-2);
  --bs-btn-hover-color: var(--myc-ink);
  --bs-btn-hover-border-color: var(--myc-border);
}

a { color: var(--myc-accent); }

/* Foco visible (accesibilidad §10.4) */
:focus-visible {
  outline: 2px solid var(--myc-accent);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Layout global (§10.2): topbar 56px, sidebar 232px colapsable a 64px */
/* ------------------------------------------------------------------ */
.myc-app {
  display: grid;
  grid-template-columns: 232px 1fr;
  grid-template-rows: 56px 1fr;
  grid-template-areas: "sidebar topbar" "sidebar main";
  min-height: 100vh;
}
.myc-app.myc-sidebar-collapsed { grid-template-columns: 64px 1fr; }

.myc-topbar {
  grid-area: topbar;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem;
  background-color: var(--myc-bg);
  border-bottom: 1px solid var(--myc-border);
}

.myc-sidebar {
  grid-area: sidebar;
  background-color: var(--myc-surface);
  border-right: 1px solid var(--myc-border);
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
}
.myc-sidebar .myc-logo {
  font-family: "Sora", sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--myc-accent);
  padding: 0.5rem 1rem 1rem;
  text-decoration: none;
  white-space: nowrap;
}
.myc-sidebar .nav-link {
  color: var(--myc-ink-dim);
  padding: 0.5rem 1rem;
  border-left: 2px solid transparent;
  border-radius: 0;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.myc-sidebar .nav-link:hover {
  color: var(--myc-ink);
  background-color: var(--myc-surface-2);
}
.myc-sidebar .nav-link.active {
  color: var(--myc-ink);
  border-left-color: var(--myc-accent);
  background-color: var(--myc-surface-2);
}
.myc-sidebar .nav-link .bi { font-size: 1.05rem; min-width: 1.25rem; text-align: center; }
/* Ítems de fase 2: deshabilitados, con un badge "pronto" tenue. */
.myc-sidebar .nav-link.disabled { opacity: 0.55; cursor: default; }
.myc-sidebar .myc-phase2-badge {
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--myc-spore);
  background-color: var(--myc-surface-2);
  text-transform: lowercase;
}
.myc-app.myc-sidebar-collapsed .myc-sidebar .myc-label { display: none; }
.myc-app.myc-sidebar-collapsed .myc-sidebar .myc-logo { padding-inline: 0; text-align: center; }

.myc-main {
  grid-area: main;
  padding: 1.5rem;
  /* El área de contenido nunca provoca scroll horizontal de la página: las
     tablas anchas hacen scroll dentro de su propio contenedor. */
  min-width: 0;
  overflow-x: hidden;
}
/* Contenido de lectura (dashboard, formularios, ajustes): ancho legible. */
.myc-main > .myc-content { max-width: 1320px; margin-inline: auto; }
/* Contenido de datos (tablas, SQL, logs): usa todo el ancho disponible. */
.myc-main > .myc-content.myc-content--fluid { max-width: none; }

@media (max-width: 991.98px) {
  .myc-app { grid-template-columns: 0 1fr; }
  .myc-sidebar { display: none; } /* v1: offcanvas en fase posterior */
}

/* ------------------------------------------------------------------ */
/* Elementos firma (§10.1): nodo vivo e hilo de hifa                   */
/* ------------------------------------------------------------------ */
.myc-node {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--myc-accent);
  animation: myc-pulse 2s ease-in-out infinite;
}
.myc-node.myc-node-warn  { background-color: var(--myc-spore); }
.myc-node.myc-node-error { background-color: var(--myc-danger); }

@keyframes myc-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .myc-node { animation: none; }
}

/* Hilo de hifa: SOLO login, estados vacíos y cabecera del wizard */
.myc-hifa-bg {
  background-image: url("../img/hifa.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 480px;
}

/* Estado vacío (§10.4) */
.myc-empty {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--myc-ink-dim);
}
.myc-empty img { width: 140px; opacity: 0.8; margin-bottom: 1rem; }

/* Grid de datos: JetBrains Mono 13px (§10.3 P3) */
.myc-datagrid {
  font-family: var(--bs-font-monospace);
  font-size: 13px;
}

/* Card punteada "+ Nueva conexión" (P10) */
.myc-card-new {
  border: 1px dashed var(--myc-border);
  background: transparent;
  color: var(--myc-ink-dim);
  min-height: 10rem;
}
.myc-card-new:hover,
.myc-card-new:focus-visible {
  border-color: var(--myc-accent);
  color: var(--myc-ink);
}

/* Login (P0) */
.myc-login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.myc-login-card { width: 100%; max-width: 400px; }

/* Instalador (plan §16): misma página centrada del login, card ancha */
.myc-install-card { width: 100%; max-width: 720px; }

/* Logs (P8, §10.3): badges de status por clase + punto de "En vivo" */
.myc-badge-2xx { color: var(--myc-accent-ink); background-color: var(--myc-accent); }
.myc-badge-3xx { color: var(--myc-accent-ink); background-color: color-mix(in srgb, var(--myc-accent) 60%, var(--myc-ink-dim)); }
.myc-badge-4xx { color: var(--myc-accent-ink); background-color: var(--myc-spore); }
.myc-badge-5xx { color: #fff; background-color: var(--myc-danger); }
.myc-badge-2xx, .myc-badge-3xx, .myc-badge-4xx, .myc-badge-5xx {
  display: inline-block;
  padding: 0.25em 0.5em;
  font-size: 0.75em;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--myc-radius-sm);
}

/* ------------------------------------------------------------------ */
/* Diagrama E-R (P3 pestaña Diagrama y página diagram de la conexión)  */
/* SVG inline tematizado solo por tokens; compartido por ambas vistas. */
/* ------------------------------------------------------------------ */
.myc-er-scroll {
  overflow: auto;
  border: 1px solid var(--myc-border);
  border-radius: var(--myc-radius-sm);
  background: var(--myc-bg);
}
.myc-er { display: block; font-family: var(--bs-font-monospace); }
.myc-er-bg { fill: var(--myc-surface); stroke: var(--myc-border); }
.myc-er-head { fill: var(--myc-surface-2); }
.myc-er-title { fill: var(--myc-ink); font-size: 13px; font-weight: 600; }
.myc-er-col { fill: var(--myc-ink-dim); font-size: 12px; }
.myc-er-more { fill: var(--myc-ink-dim); font-size: 11px; font-style: italic; }
.myc-er-badge { font-size: 10px; font-weight: 600; }
.myc-er-badge-pk { fill: var(--myc-spore); }
.myc-er-badge-fk { fill: var(--myc-accent); }
.myc-er-box-active .myc-er-bg { stroke: var(--myc-accent); stroke-width: 1.5; }
.myc-er-box-active .myc-er-title { fill: var(--myc-accent); }
.myc-er-box-hidden { opacity: .55; }
.myc-er a:hover .myc-er-bg, .myc-er a:focus-visible .myc-er-bg { stroke: var(--myc-accent); }
.myc-er a { text-decoration: none; }
.myc-er-edge { fill: none; stroke: var(--myc-ink-dim); stroke-width: 1.25; opacity: .8; }
.myc-er-edge:hover { stroke: var(--myc-accent); opacity: 1; }
#myc-er-arrow path { fill: var(--myc-accent); }

/* Punto jade pulsante junto al toggle "En vivo" (mismo gesto que el nodo) */
.myc-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--myc-accent);
  animation: myc-pulse 2s ease-in-out infinite;
  vertical-align: middle;
}
@media (prefers-reduced-motion: reduce) {
  .myc-live-dot { animation: none; }
}