/* =====================================================================
 * Tema ETN para bots.etnglobal.es (OpenMausBot 0.1.87) · v1, 29/10/2026
 * ---------------------------------------------------------------------
 * Misma técnica que el tema de bots.enertria.es (enertria-skin.css): se
 * carga DESPUÉS de la hoja de OpenMausBot (nginx, o local/proxy-tema.mjs en
 * local, lo añade antes de </head>) y solo cambia sus variables de color y
 * algunos detalles. No toca el programa: si una actualización cambia sus
 * nombres internos, el panel vuelve a su aspecto de siempre sin romperse.
 *
 * Colores y tipografía de ETN, los mismos que gestion.etnglobal.es
 * (etn-gestion-web/src/styles/tokens.css):
 *   Verde ETN #2f9e4f (500) · #1d7a3a (600, texto/botón) · #14532d (800)
 *   Carbón    #1e2320 (menú lateral y superficies oscuras) · #2a312c
 *   Neutros con punto de verde: fondo #eef1ef · borde #d7ded9 · texto #1a1e1c
 *   Tipografía Inter (Segoe UI de respaldo).
 * Logos (servidos junto a este fichero): etn-logo-official.webp (el oficial de
 * etn-gestion-web, pintado en blanco con mask), etn-login.webp y etn-favicon.svg.
 *
 * Claro u oscuro: Ajustes → Appearance → Tema. Solo quedan «ETN oscuro» y
 * «ETN claro»; los demás temas de OpenMausBot se ven como uno de los dos.
 * ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* --------------------------------------------------- ETN oscuro (carbón) */
:is(html, div):is([data-skin="midnight"], [data-skin="foundry"], [data-skin="graphite"], [data-skin="dusk"]) {
  --code-color-scheme: dark;
  --color-app: #161a18;
  --color-panel: #1e2320;
  --color-raised: #2a312c;
  --color-raised-hover: #333b36;
  --color-composer: #212723;
  --color-composer-ring: #2f9e4f55;
  --color-card: #202622;
  --color-menu: #252b27;
  --color-inset: #1a1e1c;
  --color-control: #2a312c;
  --color-hairline: #323a35;
  --color-line: #3d4642;
  --color-surface: #1a1e1c;
  --color-ink: #f5f7f6;
  --color-ink-secondary: #f5f7f6a3;
  --color-accent: #36b25c;
  --color-accent-border: #5fbf7c;
  --color-accent-text: #8dcaa0;
  --color-accent-ink: #ffffff;
  --color-bubble-user: #1d7a3a;
  --color-bubble-user-ink: #ffffff;
  --color-success: #5fbf7c;
  --color-success-ink: #123f20;
  --color-danger: #ff6b5f;
  --color-danger-ink: #ffffff;
  --color-warning: #d69e2e;
  --color-scrollbar: #3d4642;
  --color-maus-line: #f5f7f6;
  --etn-fondo:
    radial-gradient(1100px 620px at 88% -12%, #2f9e4f1f, transparent 62%),
    radial-gradient(900px 520px at -8% 112%, #2f9e4f12, transparent 60%),
    #161a18;
  --etn-tarjeta-borde: #323a35;
  --etn-sombra: 0 10px 30px -18px #000c;
}

/* ------------------------------------------------------------ ETN claro */
:is(html, div):is([data-skin="daylight"], [data-skin="linen"], [data-skin="atelier"], [data-skin="lagoon"]) {
  --code-color-scheme: light;
  --color-app: #eef1ef;
  --color-panel: #ffffff;
  --color-raised: #f5f7f6;
  --color-raised-hover: #e3e8e5;
  --color-composer: #ffffff;
  --color-composer-ring: #2f9e4f40;
  --color-card: #ffffff;
  --color-menu: #ffffff;
  --color-inset: #fafbfa;
  --color-control: #f5f7f6;
  --color-hairline: #e3e8e5;
  --color-line: #d7ded9;
  --color-surface: #ffffff;
  --color-ink: #1a1e1c;
  --color-ink-secondary: #1a1e1ca3;
  --color-accent: #1d7a3a;
  --color-accent-border: #1a5f2e;
  --color-accent-text: #1d7a3a;
  --color-accent-ink: #ffffff;
  --color-bubble-user: #1e2320;
  --color-bubble-user-ink: #ffffff;
  --color-success: #1d7a3a;
  --color-success-ink: #ffffff;
  --color-danger: #b42318;
  --color-danger-ink: #ffffff;
  --color-warning: #8a5a00;
  --color-scrollbar: #c2cbc5;
  --color-maus-line: #1a1e1c;
  --etn-fondo: #eef1ef;
  --etn-tarjeta-borde: #e3e8e5;
  --etn-sombra: 0 12px 30px -22px #1e232066;
}

/* -------------------------------------------------------------- comunes */
html[data-skin] {
  --font-sans: Inter, "Segoe UI", system-ui, sans-serif;
  --radius-lg: 12px;
  --radius-xl: 16px;
}
html[data-skin] body,
html[data-skin] #root { background: var(--etn-fondo); }
html[data-skin] * { scrollbar-width: thin; scrollbar-color: var(--color-scrollbar) transparent; }
html[data-skin] ::selection { background: #2f9e4f40; }

/* Menú lateral: carbón ETN en los dos temas (como gestion.etnglobal.es). */
html[data-skin] aside {
  background: linear-gradient(180deg, #1e2320 0%, #1a1e1c 100%) !important;
  border-right-color: #2a312c !important;
  --color-ink: #ffffff;
  --color-ink-secondary: #a7b0aa;
  --color-raised: #2a312c;
  --color-raised-hover: #333b36;
  --color-inset: #161a18;
  --color-hairline: #323a35;
  --color-accent-text: #5fbf7c;
  /* Menús que se abren desde el lateral (Herramientas, tu nombre). */
  --color-menu: #252b27;
  --color-card: #252b27;
  --color-panel: #1e2320;
  --color-control: #2a312c;
  --color-composer: #212723;
  --color-line: #3d4642;
  --color-surface: #1a1e1c;
  color: #ffffff;
}
/* Línea verde ETN arriba del menú. */
html[data-skin] aside { box-shadow: inset 0 3px 0 #2f9e4f; }

/* Logotipo ETN (blanco) en lugar de los tres puntitos de ventana de Mac. */
html[data-skin] aside div:has(> span[class*="ff5f57"]) { position: relative; width: 74px; height: 44px; margin-right: 10px; }
html[data-skin] aside div:has(> span[class*="ff5f57"]) > span { display: none !important; }
html[data-skin] aside div:has(> span[class*="ff5f57"])::before {
  content: ""; position: absolute; inset: 0;
  background: #ffffff;
  -webkit-mask: url("/etn-logo-official.webp") left center / contain no-repeat;
  mask: url("/etn-logo-official.webp") left center / contain no-repeat;
}

/* Conversación. */
html[data-skin] div.rounded-2xl.bg-card {
  border: 1px solid var(--etn-tarjeta-borde);
  box-shadow: var(--etn-sombra);
}
html[data-skin] [class*="bg-bubble-user"] { box-shadow: var(--etn-sombra); }

/* Botones de color: verde ETN con texto blanco (AA con el 600). */
html[data-skin] .bg-accent {
  background-image: linear-gradient(180deg, #ffffff1a, transparent);
  font-weight: 600;
  transition: filter .15s, transform .15s;
}
html[data-skin] .bg-accent:hover:not(:disabled) { filter: brightness(1.06); }
html[data-skin] .bg-accent:active:not(:disabled) { transform: translateY(1px); }

/* ============================================ Ajustes → Appearance → Tema */
html[data-skin] div.grid:has(> button > div[data-skin="daylight"]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
html[data-skin] button:is(:has(> div[data-skin="atelier"]), :has(> div[data-skin="foundry"]),
  :has(> div[data-skin="lagoon"]), :has(> div[data-skin="graphite"]),
  :has(> div[data-skin="linen"]), :has(> div[data-skin="dusk"])) { display: none !important; }
html[data-skin] button:is(:has(> div[data-skin="midnight"]), :has(> div[data-skin="daylight"])) > div:not([data-skin]) { display: none; }
html[data-skin] button:is(:has(> div[data-skin="midnight"]), :has(> div[data-skin="daylight"]))::after {
  display: block; padding: 2px 4px 4px; font-size: 13px; font-weight: 500; line-height: 1.35; white-space: pre-line;
}
html[data-skin] button:has(> div[data-skin="midnight"])::after { content: "ETN oscuro\A Carbón y verde ETN, para poca luz"; }
html[data-skin] button:has(> div[data-skin="daylight"])::after { content: "ETN claro\A Como gestion.etnglobal.es"; }
html[data-skin] button[aria-pressed="true"]:has(> div[data-skin="midnight"])::after { content: "✓ ETN oscuro\A Carbón y verde ETN, para poca luz"; }
html[data-skin] button[aria-pressed="true"]:has(> div[data-skin="daylight"])::after { content: "✓ ETN claro\A Como gestion.etnglobal.es"; }
html[data-skin] button:is(:has(> div[data-skin="midnight"]), :has(> div[data-skin="daylight"])) > div[data-skin] { height: 96px; }

/* ============================================================== ENTRADA */
/* Pantalla de entrada, con el diseño de la de etn-gestion-web
 * (src/ui/AuthShell.tsx + styles/screens/login.css, lienzo «ETN · Entradas
 * Gestión y Empleados», 28/10/2026):
 *  - PC (≥ 1024 px): foto del taller difuminada a la izquierda, con rejilla y
 *    aros verdes; el acceso sobre el carbón a la derecha.
 *  - Tablet (≥ 640 px): la foto de fondo y el acceso en una tarjeta carbón.
 *  - Móvil: la foto como franja arriba y el acceso debajo. */
html[data-skin] main.min-h-screen:has(> div[class*="max-w-[420px]"]) {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid !important; align-content: start; justify-items: stretch;
  padding: 0 !important;
  background: #1e2320 !important;
  --color-ink: #ffffff;
  --color-ink-secondary: #c2cbc5;
}
/* Foto del taller, difuminada (móvil: franja de 220 px). */
html[data-skin] main.min-h-screen:has(> div[class*="max-w-[420px]"])::before {
  content: ""; position: absolute; z-index: -2; left: -24px; right: -24px; top: -24px; height: 268px;
  background: url("/etn-login.webp") 55% 45% / cover no-repeat;
  filter: blur(6px) saturate(.8);
  clip-path: inset(24px); /* el difuminado no se sale de su franja */
}
/* Rejilla fina, velo carbón y aro (móvil). */
html[data-skin] main.min-h-screen:has(> div[class*="max-w-[420px]"])::after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 220px; pointer-events: none;
  background:
    radial-gradient(circle at calc(100% + 90px) -60px, transparent 149px, #2f9e4f3d 150px, transparent 151px),
    linear-gradient(90deg, #2f9e4f0f 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(#2f9e4f0f 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(180deg, #1e232073 0%, #1e2320b3 60%, #1e2320 100%);
}
/* El acceso: sobre el carbón, texto claro. */
html[data-skin] main.min-h-screen > div[class*="max-w-[420px]"] {
  position: relative; z-index: 1; color: #ffffff; overflow: visible;
  width: 100%; max-width: 520px !important; box-sizing: border-box;
  margin: 0 auto !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0; padding: 300px 24px 24px;
}
/* Logotipo ETN en blanco. */
html[data-skin] main.min-h-screen > div[class*="max-w-[420px]"]::before {
  content: ""; position: absolute; left: 24px; top: 230px; width: 104px; height: 51px;
  background: #ffffff; /* logotipo oficial de ETN (el de etn-gestion-web), en blanco */
  -webkit-mask: url("/etn-logo-official.webp") left center / contain no-repeat;
  mask: url("/etn-logo-official.webp") left center / contain no-repeat;
}
html[data-skin] main.min-h-screen > div[class*="max-w-[420px]"]::after {
  content: "bots.etnglobal.es · Solo cuentas de ETN Global";
  display: block; margin-top: 32px;
  font-size: 13px; color: #a7b0aa; text-align: left;
}
html[data-skin] main.min-h-screen > div[class*="max-w-[420px]"] h1 {
  color: #ffffff; font-size: 28px; font-weight: 700; letter-spacing: -.02em;
}
html[data-skin] main.min-h-screen > div[class*="max-w-[420px]"] p,
html[data-skin] main.min-h-screen > div[class*="max-w-[420px]"] span { color: #c2cbc5; }
html[data-skin] main.min-h-screen > div[class*="max-w-[420px]"] label { color: #eef1ef; font-weight: 600; }
/* Sin texto de versión (etn-sesion.js marca el párrafo). */
html[data-skin] main.min-h-screen > div[class*="max-w-[420px]"] p[data-etn-oculto] { display: none; }
/* Sin el campo «This device» (el nombre del navegador se rellena solo). */
html[data-skin] main.min-h-screen > div[class*="max-w-[420px]"] :is(label[for="signin-label"], #signin-label) { display: none !important; }
/* Aviso de error (p. ej. correo que no es de ETN): rojo y bien visible. */
html[data-skin] main.min-h-screen > div[class*="max-w-[420px]"] p.text-danger {
  color: #ffb4ad !important; background: #ff6b5f1f; border: 1px solid #ff6b5f80;
  border-left: 4px solid #ff6b5f; border-radius: 8px; padding: 10px 12px;
  font-size: 14px !important; font-weight: 600; line-height: 1.4;
}
html[data-skin] main.min-h-screen > div[class*="max-w-[420px]"] input {
  min-height: 54px; box-sizing: border-box;
  background: #ffffff !important; border: 1px solid #c2cbc5 !important; color: #1a1e1c !important;
  border-radius: 10px; padding: 0 16px; font-size: 17px; transition: border-color .15s, box-shadow .15s;
}
html[data-skin] main.min-h-screen > div[class*="max-w-[420px]"] input::placeholder { color: #6b7570; }
html[data-skin] main.min-h-screen > div[class*="max-w-[420px]"] input:focus {
  border-color: #5fbf7c !important; box-shadow: 0 0 0 3px #8dcaa066; outline: none;
}
html[data-skin] main.min-h-screen > div[class*="max-w-[420px]"] button[type="submit"] {
  min-height: 56px; width: 100%;
  background: #1d7a3a !important; color: #ffffff !important;
  border-radius: 10px; font-size: 17px; font-weight: 700; box-shadow: none;
}
html[data-skin] main.min-h-screen > div[class*="max-w-[420px]"] button[type="submit"]:hover:not(:disabled) { background: #1a5f2e !important; }
html[data-skin] main.min-h-screen > div[class*="max-w-[420px]"] a,
html[data-skin] main.min-h-screen > div[class*="max-w-[420px]"] button:not([type="submit"]) { color: #8dcaa0 !important; }
html[data-skin] main.min-h-screen > div[class*="max-w-[420px]"] :focus-visible { outline: 3px solid #8dcaa0; outline-offset: 2px; }

/* Tablet: la foto de fondo y el acceso en una tarjeta carbón centrada. */
@media (min-width: 640px) {
  html[data-skin] main.min-h-screen:has(> div[class*="max-w-[420px]"]) {
    align-content: center; justify-items: center; padding: 40px 24px !important;
  }
  html[data-skin] main.min-h-screen:has(> div[class*="max-w-[420px]"])::before {
    left: -30px; right: -30px; top: -30px; bottom: -30px; height: auto; filter: blur(9px) saturate(.8);
    clip-path: none;
  }
  html[data-skin] main.min-h-screen:has(> div[class*="max-w-[420px]"])::after {
    height: auto; bottom: 0;
    background:
      radial-gradient(circle at 50% 50%, transparent 299px, #2f9e4f33 300px, transparent 301px),
      linear-gradient(90deg, #2f9e4f0f 1px, transparent 1px) 0 0 / 82px 82px,
      linear-gradient(#2f9e4f0f 1px, transparent 1px) 0 0 / 82px 82px,
      #1e23209e;
  }
  html[data-skin] main.min-h-screen > div[class*="max-w-[420px]"] {
    width: min(560px, 100%); max-width: none !important;
    padding: 132px 56px 40px;
    background: #1e2320 !important; border-radius: 10px;
    box-shadow: 0 24px 60px #00000073 !important;
  }
  html[data-skin] main.min-h-screen > div[class*="max-w-[420px]"]::before { left: 56px; top: 48px; width: 124px; height: 61px; }
  html[data-skin] main.min-h-screen > div[class*="max-w-[420px]"] h1 { font-size: 34px; }
  html[data-skin] main.min-h-screen > div[class*="max-w-[420px]"] input { min-height: 62px; font-size: 19px; }
  html[data-skin] main.min-h-screen > div[class*="max-w-[420px]"] button[type="submit"] { min-height: 64px; font-size: 19px; }
}

/* PC: foto difuminada a la izquierda y el acceso a la derecha, sobre el carbón. */
@media (min-width: 1024px) {
  html[data-skin] main.min-h-screen:has(> div[class*="max-w-[420px]"]) {
    grid-template-columns: minmax(0, 1fr) minmax(480px, 600px);
    align-content: stretch; justify-items: stretch; padding: 0 !important;
  }
  html[data-skin] main.min-h-screen:has(> div[class*="max-w-[420px]"])::before {
    left: -30px; top: -30px; bottom: -30px; right: calc(clamp(480px, 40vw, 600px) - 30px);
    filter: blur(7px) saturate(.8);
    clip-path: inset(30px); /* la foto termina justo donde empieza el carbón */
  }
  html[data-skin] main.min-h-screen:has(> div[class*="max-w-[420px]"])::after {
    left: 0; top: 0; bottom: 0; right: clamp(480px, 40vw, 600px);
    background:
      radial-gradient(circle at 50% 50%, transparent 279px, #2f9e4f38 280px, transparent 281px),
      radial-gradient(circle at 50% 50%, transparent 179px, #2f9e4f24 180px, transparent 181px),
      linear-gradient(90deg, #2f9e4f0f 1px, transparent 1px) 0 0 / 96px 96px,
      linear-gradient(#2f9e4f0f 1px, transparent 1px) 0 0 / 96px 96px,
      linear-gradient(90deg, #1e23208c 0%, #1e232073 55%, #1e2320eb 88%, #1e2320 100%);
  }
  html[data-skin] main.min-h-screen > div[class*="max-w-[420px]"] {
    grid-column: 2; align-self: center; justify-self: start;
    width: auto; max-width: 420px !important;
    margin: 0 100px 0 80px !important; padding: 96px 0 0;
    background: transparent !important; box-shadow: none !important; border-radius: 0;
  }
  html[data-skin] main.min-h-screen > div[class*="max-w-[420px]"]::before { left: 0; top: 0; }
}