/* Panel del operador: estilos mínimos, sin dependencias externas. */

/*
 * Tema del panel (014). Cada color se escribe una sola vez en las dos paletas, y cuatro bloques de
 * mapeo eligen la que manda sobre los 16 tokens de trabajo: claro por omisión, oscuro cuando lo
 * pide el sistema (salvo que el operador haya forzado claro), oscuro forzado por el operador y
 * claro siempre al imprimir. Los tres tokens `--fixed-*` no cambian con el tema: son colores e
 * imágenes del negocio, no del panel (FR-019).
 */
:root {
  /* Paleta clara: los valores que el panel ha usado siempre (FR-005). */
  --c-light-bg: #f6f7f9;
  --c-light-card: #ffffff;
  --c-light-field: #ffffff;
  --c-light-fg: #1d2330;
  --c-light-muted: #5f6878;
  --c-light-line: #d9dde4;
  --c-light-control-line: #d9dde4;
  --c-light-accent: #1f5fbf;
  --c-light-on-accent: #ffffff;
  --c-light-ok: #1f7a4a;
  --c-light-warn: #9a6200;
  --c-light-danger: #b3261e;
  --c-light-flash-bg: #e8f5ec;
  --c-light-flash-line: #b7dcc4;
  --c-light-error-bg: #fdecea;
  --c-light-error-line: #f1b7b2;

  /* Paleta oscura: contrastes comprobados en theme-css.test.ts (FR-014, FR-015). */
  --c-dark-bg: #11151b;
  --c-dark-card: #181d26;
  --c-dark-field: #0d1117;
  --c-dark-fg: #e6e9ef;
  --c-dark-muted: #a3adbd;
  --c-dark-line: #2c3442;
  --c-dark-control-line: #6b7686;
  --c-dark-accent: #7fb0ff;
  --c-dark-on-accent: #0b1017;
  --c-dark-ok: #6cc98f;
  --c-dark-warn: #e5b969;
  --c-dark-danger: #ff9b91;
  --c-dark-flash-bg: #102c1d;
  --c-dark-flash-line: #3f8a5d;
  --c-dark-error-bg: #331418;
  --c-dark-error-line: #a85a60;

  /* Colores que no cambian con el tema: son del negocio, no del panel. */
  --fixed-sample: #ffffff;
  --fixed-canvas-a: #f6f7f9;
  --fixed-canvas-b: #eef0f3;

  /* Mapeo 1 de 4: claro por omisión. */
  color-scheme: light;
  --bg: var(--c-light-bg);
  --card: var(--c-light-card);
  --field: var(--c-light-field);
  --fg: var(--c-light-fg);
  --muted: var(--c-light-muted);
  --line: var(--c-light-line);
  --control-line: var(--c-light-control-line);
  --accent: var(--c-light-accent);
  --on-accent: var(--c-light-on-accent);
  --ok: var(--c-light-ok);
  --warn: var(--c-light-warn);
  --danger: var(--c-light-danger);
  --flash-bg: var(--c-light-flash-bg);
  --flash-line: var(--c-light-flash-line);
  --error-bg: var(--c-light-error-bg);
  --error-line: var(--c-light-error-line);

  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
  color: var(--fg);
  background: var(--bg);
}

/* Mapeo 2 de 4: oscuro si lo pide el sistema y el operador no ha forzado claro (FR-001). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: var(--c-dark-bg);
    --card: var(--c-dark-card);
    --field: var(--c-dark-field);
    --fg: var(--c-dark-fg);
    --muted: var(--c-dark-muted);
    --line: var(--c-dark-line);
    --control-line: var(--c-dark-control-line);
    --accent: var(--c-dark-accent);
    --on-accent: var(--c-dark-on-accent);
    --ok: var(--c-dark-ok);
    --warn: var(--c-dark-warn);
    --danger: var(--c-dark-danger);
    --flash-bg: var(--c-dark-flash-bg);
    --flash-line: var(--c-dark-flash-line);
    --error-bg: var(--c-dark-error-bg);
    --error-line: var(--c-dark-error-line);
  }
}

/* Mapeo 3 de 4: oscuro forzado por el operador, pase lo que pase en el sistema (FR-008). */
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: var(--c-dark-bg);
  --card: var(--c-dark-card);
  --field: var(--c-dark-field);
  --fg: var(--c-dark-fg);
  --muted: var(--c-dark-muted);
  --line: var(--c-dark-line);
  --control-line: var(--c-dark-control-line);
  --accent: var(--c-dark-accent);
  --on-accent: var(--c-dark-on-accent);
  --ok: var(--c-dark-ok);
  --warn: var(--c-dark-warn);
  --danger: var(--c-dark-danger);
  --flash-bg: var(--c-dark-flash-bg);
  --flash-line: var(--c-dark-flash-line);
  --error-bg: var(--c-dark-error-bg);
  --error-line: var(--c-dark-error-line);
}

/*
 * Mapeo 4 de 4: al imprimir, siempre claro (FR-021). Repite los selectores de los mapeos oscuros
 * para igualar su especificidad: así manda por ir después, también con el tema forzado a oscuro.
 */
@media print {
  :root,
  :root[data-theme='dark'],
  :root[data-theme='light'] {
    color-scheme: light;
    --bg: var(--c-light-bg);
    --card: var(--c-light-card);
    --field: var(--c-light-field);
    --fg: var(--c-light-fg);
    --muted: var(--c-light-muted);
    --line: var(--c-light-line);
    --control-line: var(--c-light-control-line);
    --accent: var(--c-light-accent);
    --on-accent: var(--c-light-on-accent);
    --ok: var(--c-light-ok);
    --warn: var(--c-light-warn);
    --danger: var(--c-light-danger);
    --flash-bg: var(--c-light-flash-bg);
    --flash-line: var(--c-light-flash-line);
    --error-bg: var(--c-light-error-bg);
    --error-line: var(--c-light-error-line);
  }
}

/* Foco visible en todo el panel, con 3:1 contra el fondo en los dos temas (FR-015). */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
a {
  color: var(--accent);
}
h1 {
  font-size: 1.5rem;
  margin: 0 0 1rem;
}
h2 {
  font-size: 1.15rem;
  margin: 1.5rem 0 0.75rem;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1.25rem;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.brand {
  font-weight: 600;
  text-decoration: none;
  color: var(--fg);
}
.logout {
  margin-left: auto;
}
.sections {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  padding: 0.5rem 1.25rem;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.sections a {
  text-decoration: none;
  color: var(--muted);
  padding: 0.2rem 0;
}
.sections a[aria-current='page'] {
  color: var(--fg);
  font-weight: 600;
  border-bottom: 2px solid var(--accent);
}
main {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

.badge {
  font-size: 0.8rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px solid currentColor;
}
.badge-ok {
  color: var(--ok);
}
.badge-draft {
  color: var(--warn);
}
.badge-warn {
  color: var(--danger);
}

/* Versión de la instancia (009): línea fija al pie de todas las páginas. */
.version {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0.75rem 1.25rem 1.5rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.version .badge {
  margin-left: 0.5rem;
}
.warnings-count {
  font-size: 0.85rem;
  text-decoration: none;
}
.warnings-count.has-critical {
  color: var(--danger);
  font-weight: 600;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.flash {
  background: var(--flash-bg);
  border: 1px solid var(--flash-line);
  color: var(--ok);
  padding: 0.6rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}
.general-error {
  background: var(--error-bg);
  border: 1px solid var(--error-line);
  color: var(--danger);
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}
.meta {
  color: var(--muted);
  font-size: 0.85rem;
}
.hint {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0.25rem 0 0.75rem;
}
/* Recuadro "Contacto que usa el bot" (003, FR-005). */
.handoff-effective {
  border-left: 4px solid var(--accent);
  background: var(--card);
  padding: 0.6rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}
.handoff-effective.is-none {
  border-left-color: var(--danger);
}
.handoff-effective p {
  margin: 0.2rem 0;
}
/* Medio marcado para quitar: se ve el efecto antes de guardar, sin JavaScript (003, FR-001). */
.channel-row:has(.remove input:checked) {
  opacity: 0.55;
}
.channel-row:has(.remove input:checked) select,
.channel-row:has(.remove input:checked) input[type='text'] {
  text-decoration: line-through;
}

form.stack {
  display: grid;
  gap: 0.9rem;
}
label {
  display: grid;
  gap: 0.25rem;
  font-weight: 500;
}
label.inline,
.checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
}
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='number'],
input[type='password'],
input[type='date'],
input[type='time'],
select,
textarea {
  font: inherit;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--control-line);
  border-radius: 6px;
  background: var(--field);
  max-width: 100%;
}
textarea {
  min-height: 6rem;
}
.has-error input,
.has-error select,
.has-error textarea,
input.has-error {
  border-color: var(--danger);
}
.field-error {
  color: var(--danger);
  font-size: 0.85rem;
  font-weight: 400;
}
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: end;
}
.actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.5rem;
}

button {
  font: inherit;
  padding: 0.45rem 0.9rem;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
}
button.secondary {
  background: var(--field);
  color: var(--accent);
}
button.danger {
  background: var(--field);
  color: var(--danger);
  border-color: var(--danger);
}
button.link {
  background: none;
  border: none;
  color: var(--accent);
  padding: 0;
  text-decoration: underline;
}
button.small {
  padding: 0.15rem 0.5rem;
  font-size: 0.85rem;
}
form.inline {
  display: inline;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
}
th,
td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
th {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
}
tr.inactive td {
  color: var(--muted);
}

.week {
  display: grid;
  gap: 0.5rem;
}
.day {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0.5rem;
  align-items: start;
  padding: 0.4rem 0;
  border-bottom: 1px dashed var(--line);
}
.day-name {
  font-weight: 500;
  padding-top: 0.45rem;
}
.slot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.3rem;
}

.warnings {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}
.warning {
  border-left: 4px solid var(--warn);
  background: var(--card);
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
}
.warning.critical {
  border-left-color: var(--danger);
}
.warning .code {
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--muted);
}

.login {
  max-width: 22rem;
  margin: 10vh auto;
}

/* Probar el bot (004, US1): conversación de prueba e información técnica. */
.notice {
  border-left: 4px solid var(--warn);
  background: var(--card);
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  margin: 0 0 1rem;
}
.thread {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
}
.msg {
  display: grid;
  gap: 0.35rem;
  max-width: 34rem;
}
.msg-operator {
  justify-items: end;
  margin-left: auto;
}
.bubble {
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.msg-operator .bubble {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.typing {
  color: var(--muted);
  font-style: italic;
}
.trace {
  font-size: 0.8rem;
  color: var(--muted);
  border-collapse: collapse;
}
.trace caption {
  text-align: left;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  padding-bottom: 0.2rem;
}
.trace th,
.trace td {
  border: 0;
  padding: 0.1rem 0.6rem 0.1rem 0;
  text-align: left;
  font-weight: 400;
  vertical-align: top;
}
.trace th {
  color: var(--muted);
  white-space: nowrap;
}

/* Chat web (004, US2): fragmento para la web del negocio y casilla de activación. */
label.inline {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 500;
}
.snippet {
  width: 100%;
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
  resize: vertical;
  background: var(--bg);
}
code {
  font-family: ui-monospace, monospace;
  font-size: 0.85em;
  background: var(--bg);
  padding: 0 0.2em;
  border-radius: 3px;
}
.notice.critical {
  border-left-color: var(--danger);
}

/* Exportar e importar la configuración (008). */
a.button {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
}
a.button.secondary {
  background: var(--field);
  color: var(--accent);
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.import-issues h3,
.config-diff h3 {
  font-size: 1rem;
  margin: 1rem 0 0.4rem;
}
.issues,
.config-diff ul {
  margin: 0;
  padding-left: 1.2rem;
}
.issues li,
.config-diff li {
  margin: 0.2rem 0;
}
.issues strong,
.issues code {
  margin-right: 0.4rem;
}
.config-diff .added {
  color: var(--ok);
}
.config-diff .removed {
  color: var(--danger);
}
.config-diff .change {
  color: var(--muted);
}
.outcome {
  font-weight: 600;
}
.outcome.ok {
  color: var(--ok);
}
.outcome.blocked {
  color: var(--danger);
}

/* Consumo (010): tablas anchas con desplazamiento propio y aviso del tope de gasto. */
.table-scroll {
  overflow-x: auto;
}
td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
tr.total th,
tr.total td {
  font-weight: 600;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.spend-banner {
  margin: 0;
  border-radius: 0;
}

/* Diseño del chat (011): formulario a la izquierda y vista previa a la derecha en escritorio. */
.chat-design {
  display: grid;
  gap: 1rem;
  align-items: start;
}
@media (min-width: 1100px) {
  .chat-design {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .design-preview {
    position: sticky;
    top: 1rem;
  }
}
.chat-design fieldset {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.75rem;
  display: grid;
  gap: 0.6rem;
}
.chat-design legend {
  font-weight: 600;
  padding: 0 0.3rem;
}
.color-field {
  display: grid;
  gap: 0.2rem;
}
.color-pair {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.color-pair input[type='color'] {
  width: 2.6rem;
  height: 2.2rem;
  padding: 0.1rem;
  border: 1px solid var(--control-line);
  border-radius: 4px;
  background: var(--fixed-sample);
}
.color-pair .color-text {
  width: 8rem;
  font-family: ui-monospace, monospace;
}
.contrast-issues:empty {
  display: none;
}
.contrast-issues {
  color: var(--danger);
  font-size: 0.85rem;
}
.design-image {
  display: grid;
  gap: 0.3rem;
}
.design-image img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--fixed-sample);
}
.preview-frames {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
}
.preview-frames iframe {
  border: 1px dashed var(--line);
  background: repeating-linear-gradient(
    45deg,
    var(--fixed-canvas-a) 0 10px,
    var(--fixed-canvas-b) 10px 20px
  );
  max-width: 100%;
}
.field-warning {
  color: var(--warn);
  font-size: 0.85rem;
}
.field-warning:empty {
  display: none;
}
/* Chat abajo a la izquierda en la vista previa: el chat abierto pasa al lado izquierdo. */
.preview-frames[data-position='left'] {
  flex-direction: row-reverse;
  justify-content: flex-end;
}
a.button.danger {
  background: var(--field);
  color: var(--danger);
  border-color: var(--danger);
}

/* Control del tema (014): barra superior del panel y pantalla de acceso. */
.theme-switch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.theme-switch fieldset {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.1rem 0.5rem 0.2rem;
  margin: 0;
}
.theme-switch legend {
  font-size: 0.8rem;
  color: var(--muted);
  padding: 0 0.2rem;
}
.theme-switch label {
  font-size: 0.85rem;
  font-weight: 400;
  gap: 0.25rem;
}
.login .theme-switch {
  margin-top: 1.5rem;
  flex-wrap: wrap;
}