/* OnWork Cloud — hoja de estilos base
   Paleta y tokens siguiendo el sistema de color validado (ver skill dataviz):
   series-1 azul / series-2 naranja para comparativas Total/Usado, tinta y
   superficies neutras para el resto de la interfaz. */

:root {
  --surface-1: #fcfcfb;
  --page-plane: #f4f4f2;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #898781;
  --gridline: #e1e0d9;
  --border: rgba(11, 11, 11, 0.10);
  --border-strong: #c3c2b7;

  --series-1: #2a78d6; /* azul: valores "Total" */
  --series-2: #eb6834; /* naranja: valores "Usado" */

  --status-good: #0ca30c;
  --status-warning: #fab219;
  --status-serious: #ec835a;
  --status-critical: #d03b3b;

  --radius: 10px;
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  color: var(--text-primary);
  background: var(--page-plane);
  font-size: 15px;
  line-height: 1.5;
}
/* El fondo gris clarito del dashboard hace que las tarjetas resalten en
   pantalla, pero en el PDF exportado se ve como si la página no fuera
   blanca. El PDF lleva su propio fondo. */
html.pdf-export, body.pdf-export { background: #fff; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 0.4em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; margin-top: 1.6em; }
p { margin: 0.4em 0; }

a { color: var(--series-1); text-decoration: none; }
a:hover { text-decoration: underline; }

.muted { color: var(--text-secondary); font-size: 0.92em; }

.container {
  max-width: 1020px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}
.container-narrow { max-width: 640px; }

/* Barra superior */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--gridline);
}
.brand {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-primary);
}
.brand span { color: var(--series-1); }
.topnav { display: flex; align-items: center; gap: 16px; }
.topnav a { color: var(--text-primary); font-weight: 500; }
.who { color: var(--text-secondary); font-size: 0.9em; }
.link-btn {
  background: none; border: none; cursor: pointer;
  font: inherit; color: var(--text-secondary); padding: 0;
}
.link-btn:hover { color: var(--text-primary); text-decoration: underline; }

/* Cards */
.card {
  background: var(--surface-1);
  border: 1px solid var(--gridline);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 18px;
}
.empty-state { text-align: center; padding: 40px 22px; }
.notes-box { font-size: 0.95em; }

.center-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--page-plane);
}
.login-card { width: 340px; }
.login-card h1 { text-align: center; }
.login-card .accent { color: var(--series-1); }
.login-card .muted { display: block; text-align: center; margin-bottom: 18px; }

/* Formularios */
label {
  display: block;
  margin-bottom: 14px;
  font-weight: 600;
  font-size: 0.9em;
  color: var(--text-secondary);
}
input, select, textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font: inherit;
  color: var(--text-primary);
  background: #fff;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--series-1);
  outline-offset: 1px;
}
textarea { resize: vertical; font-family: var(--font); }

/* Editor de "Propuestas" y "Observaciones": un contenteditable en vez de un
   textarea, para poder pegar imágenes (un textarea no admite pegar nada que
   no sea texto). Mismo aspecto que el resto de campos del formulario. */
.rich-editor {
  min-height: 90px;
  margin-top: 6px;
  padding: 9px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: #fff;
  font: inherit;
  color: var(--text-primary);
  white-space: pre-wrap;
}
.rich-editor:focus {
  outline: 2px solid var(--series-1);
  outline-offset: 1px;
}
.rich-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
}
.rich-editor img { max-width: 100%; height: auto; display: block; border-radius: 6px; margin: 8px 0; }

.form-actions { display: flex; gap: 10px; margin-top: 8px; }
.error {
  background: #fdeceb;
  color: var(--status-critical);
  border: 1px solid #f4c6c1;
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9em;
}

/* Botones */
.btn {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.92em;
  cursor: pointer;
  text-align: center;
}
.btn:hover { background: #f3f2ef; text-decoration: none; }
.btn-primary { background: var(--series-1); border-color: var(--series-1); color: #fff; }
.btn-primary:hover { background: #2166b8; }
.btn-danger { background: #fff; border-color: var(--status-critical); color: var(--status-critical); }
.btn-danger:hover { background: #fdeceb; }
.btn-small { padding: 5px 10px; font-size: 0.85em; }

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.header-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.back-link { font-size: 0.88em; color: var(--text-secondary); }

/* Listado de clientes */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.client-card { display: block; color: inherit; }
.client-card:hover { border-color: var(--series-1); text-decoration: none; }
.client-card h2 { font-size: 1.05rem; margin-bottom: 4px; }

/* Tablas */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface-1);
  border: 1px solid var(--gridline);
  border-radius: var(--radius);
  overflow: hidden;
}
.data-table th, .data-table td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--gridline);
  font-size: 0.78em;
  word-break: break-word;
}
.data-table thead th {
  background: #f6f5f2;
  color: var(--text-secondary);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.66em;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: #fafaf8; }
.row-actions { display: flex; gap: 6px; white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

.danger-zone { margin-top: 30px; padding-top: 16px; border-top: 1px dashed var(--gridline); }

/* Formulario de informe: tablas dinámicas */
.editable-table-wrap { overflow-x: auto; }
.editable-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.editable-table th {
  text-align: left; font-size: 0.75em; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.02em; padding: 4px 6px;
}
.editable-table td { padding: 4px 6px; }
.editable-table input, .editable-table select { padding: 6px 8px; font-size: 0.88em; margin-top: 0; }
.remove-row-btn {
  background: none; border: none; color: var(--status-critical);
  cursor: pointer; font-size: 1.1em; padding: 4px 8px;
}
.add-row-btn { margin-top: 10px; }
.section-block { margin-bottom: 30px; }
.section-block h3 { margin-bottom: 10px; font-size: 1rem; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .two-col { grid-template-columns: 1fr; } }

/* Vista de informe: encabezado + gráficos */
.report-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 14px; margin-bottom: 18px;
}
.report-title h1 { margin-bottom: 2px; }
.report-actions { display: flex; gap: 10px; }

/* Logo corporativo: en la barra superior y como membrete del informe (también
   en el PDF, donde llega incrustado en base64). Se sustituye cambiando el
   fichero public/img/logo-onwork.png. */
.brand-logo { display: block; height: 26px; width: auto; }
.report-brand {
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.report-logo { height: 42px; width: auto; }
@media (max-width: 600px) {
  .report-brand { align-items: flex-start; }
  .report-logo { height: 34px; }
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 18px 0 28px;
}
@media (max-width: 780px) { .charts-grid { grid-template-columns: 1fr; } }
.chart-card { background: var(--surface-1); border: 1px solid var(--gridline); border-radius: var(--radius); padding: 16px; }
.chart-card h3 { font-size: 0.92rem; margin-bottom: 10px; color: var(--text-secondary); }
.chart-card canvas { max-height: 240px; }

.legend-row { display: flex; gap: 16px; margin-top: 10px; font-size: 0.82em; color: var(--text-secondary); flex-wrap: wrap; }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }

.status-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px; font-size: 0.78em; font-weight: 700;
}
.status-chip.good { background: #e7f7e7; color: #0a6b0a; }
.status-chip.warning { background: #fff4e0; color: #8a5a00; }
.status-chip.critical { background: #fdeceb; color: #a32c2c; }

.text-box {
  background: var(--surface-1);
  border: 1px solid var(--gridline);
  border-radius: var(--radius);
  padding: 16px 18px;
  white-space: pre-wrap;
  font-size: 0.95em;
}
.text-box.empty { color: var(--text-muted); font-style: italic; }
.text-box img { max-width: 100%; height: auto; display: block; border-radius: 6px; margin: 10px 0; }
.pdf-mode .text-box img { break-inside: avoid; page-break-inside: avoid; }

.pdf-brand-footer {
  margin-top: 30px;
  padding-top: 14px;
  border-top: 1px solid var(--gridline);
  color: var(--text-muted);
  font-size: 0.78em;
  display: flex;
  justify-content: space-between;
}

/* --- Acceso a vCenter (recogida en vivo) --- */
.vc-fieldset {
  border: 1px solid var(--gridline);
  border-radius: var(--radius);
  padding: 16px 18px 18px;
  margin: 22px 0 4px;
}
.vc-fieldset legend {
  padding: 0 8px;
  font-weight: 600;
  font-size: 0.95rem;
}
.small { font-size: 0.85em; }
.form-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.form-row .grow { flex: 1 1 220px; }
.form-row .narrow { flex: 0 0 140px; }
.check-inline {
  display: flex; align-items: center; gap: 8px;
  flex-direction: row; margin-top: 12px;
}
.check-inline input { width: auto; margin: 0; }

.vc-status-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px 20px;
}
.vc-status-grid span { display: block; margin-bottom: 2px; }
.vc-last { margin-top: 14px; }
.vc-status .form-actions { margin-top: 16px; align-items: center; gap: 12px; }

/* Explorador de vCenter */
.vc-filtro {
  width: 100%; max-width: 420px; margin: 0 0 12px;
  padding: 8px 12px; border: 1px solid var(--gridline);
  border-radius: var(--radius); font: inherit;
}
.vc-resumen { margin-bottom: 8px; }
#vc_contenido h2 { margin-top: 28px; }

/* Las tablas del explorador tienen muchas columnas: que no se compriman
   (partiendo las IPs en vertical) sino que el contenedor haga scroll. */
#vc_contenido .data-table th,
#vc_contenido .data-table td { white-space: nowrap; }
#vc_contenido .editable-table-wrap { padding-bottom: 4px; }

/* Tablas de las secciones ampliadas del informe. En pantalla no se comprimen
   (el contenedor hace scroll horizontal); en el PDF no hay scroll que valga,
   así que ahí sí tienen que envolver y encoger para no quedar cortadas. */
.extra-table th, .extra-table td { white-space: nowrap; }
.extra-table td { vertical-align: top; }

/* El relleno del contenedor sobra en el PDF: los márgenes ya los pone
   page.pdf(), y aquí solo servían para desbordar la portada. */
.container.pdf-mode { padding: 0; }

/* --- Modo PDF -----------------------------------------------------------
   El PDF va en A4 apaisado y no tiene scroll: lo que no cabe se pierde. Aquí
   se encoge lo justo para que las tablas anchas entren enteras y los gráficos
   no se coman una página. Solo aplica dentro de <main class="pdf-mode">. */

/* Tipografía más compacta: con 12 columnas, a tamaño de pantalla las celdas
   quedan tan estrechas que "192.168.2.8" se parte en tres líneas. */
.pdf-mode .data-table th,
.pdf-mode .data-table td {
  font-size: 0.62em;
  padding: 3px 5px;
  /* break-word parte por cualquier sitio; normal solo parte entre palabras y
     deja las IPs y los estados de una pieza. */
  word-break: normal;
  overflow-wrap: break-word;
}
.pdf-mode .data-table thead th { font-size: 0.58em; }

/* Cabecera repetida en cada página y filas que no se parten por la mitad. */
.pdf-mode .data-table thead { display: table-header-group; }
.pdf-mode .data-table tr { break-inside: avoid; page-break-inside: avoid; }

/* Gráficos más pequeños y que no queden cortados por el salto de página. */
.pdf-mode .charts-grid { gap: 10px; margin: 12px 0 18px; }
.pdf-mode .chart-card {
  padding: 10px;
  break-inside: avoid;
  page-break-inside: avoid;
}
.pdf-mode .chart-card h3 { font-size: 0.78rem; margin-bottom: 6px; }
/* Chart.js ya dibuja apaisado en PDF (aspectRatio en report_view.js); esto es
   solo una red de seguridad, holgada, para que no aplaste el dibujo. */
.pdf-mode .chart-card canvas { max-height: 190px; }

/* Los títulos no se quedan solos al final de una página. */
.pdf-mode h2 { break-after: avoid; page-break-after: avoid; }

/* Cada cambio de temática (ESXi, VMs, backups, alarmas...) empieza en una
   página nueva, salvo el primer bloque: ese va justo debajo de la cabecera
   del informe, en la misma página, como hasta ahora. Sin esto, secciones
   cortas (alarmas, datastores...) se apilaban en la misma página dejando
   huecos irregulares y otras se partían a media tabla. */
.pdf-mode h2:not(:first-of-type) { break-before: page; page-break-before: always; }

/* --- Pantalla de acceso --- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.login-card {
  width: 100%; max-width: 380px; background: var(--surface-1);
  border: 1px solid var(--gridline); border-radius: var(--radius);
  padding: 32px 28px; box-shadow: 0 10px 34px rgba(16, 24, 40, .06);
}
.login-brand { text-align: center; margin-bottom: 26px; }
.login-brand img { width: 190px; max-width: 78%; height: auto; }
.login-sub {
  margin: 12px 0 0; color: var(--text-secondary);
  font-size: 0.82rem; text-transform: uppercase; letter-spacing: .08em;
}
.login-card label { display: block; margin-bottom: 14px; }
.btn-block { width: 100%; justify-content: center; margin-top: 6px; }
.login-lang { margin-top: 22px; text-align: center; }

/* --- Selector de idioma --- */
.lang-switch {
  display: inline-flex; border: 1px solid var(--gridline);
  border-radius: 999px; overflow: hidden;
}
.lang-opt {
  padding: 3px 11px; font-size: 0.74rem; font-weight: 600;
  letter-spacing: .04em; color: var(--text-secondary); text-decoration: none;
  background: transparent; line-height: 1.6;
}
.lang-opt:hover { background: #f0efea; text-decoration: none; }
.lang-opt.is-active { background: var(--series-1); color: #fff; }

/* Etiqueta de idioma junto al nombre del cliente */
.lang-tag {
  font-size: 0.6em; font-weight: 700; letter-spacing: .06em;
  color: var(--text-secondary); border: 1px solid var(--gridline);
  border-radius: 4px; padding: 1px 5px; vertical-align: middle;
}

/* --- Logo de la empresa cliente --- */
.logo-field { margin-bottom: 14px; }
.logo-label {
  display: block; font-weight: 600; font-size: 0.9em; margin-bottom: 6px;
}
.logo-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.logo-preview {
  width: 150px; min-height: 56px; display: flex; align-items: center;
  justify-content: center; padding: 8px;
  border: 1px dashed var(--gridline); border-radius: var(--radius);
  background: #fff;
}
.logo-preview img { max-width: 100%; max-height: 48px; height: auto; }
.logo-controls { flex: 1 1 220px; }
.logo-controls input[type=file] { font-size: 0.85em; }

/* En la cabecera del informe: logo del cliente a la izquierda del título */
.report-client-logo {
  max-height: 48px; max-width: 190px; width: auto; height: auto;
  display: block; margin-bottom: 10px;
}
.pdf-mode .report-client-logo { max-height: 42px; max-width: 165px; }

/* --- Portada e índice del PDF ------------------------------------------
   Solo se pintan en modo PDF. Cada una ocupa una página completa. */
.pdf-portada,
.pdf-indice {
  break-after: page;
  page-break-after: always;
}

.pdf-portada {
  /* Alto útil de un A4 apaisado: 210mm de alto menos los 20mm de márgenes que
     se le pasan a page.pdf(). Se dejan 2mm de holgura para que el redondeo no
     empuje el pie a una segunda página. */
  height: 188mm;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4mm 2mm 2mm;
  box-sizing: border-box;
}
.portada-cabecera {
  min-height: 26mm;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.portada-logo-cliente { max-height: 24mm; max-width: 95mm; width: auto; height: auto; }

.portada-cuerpo { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.portada-tipo {
  margin: 0 0 6px; color: var(--text-secondary);
  font-size: 0.95rem; text-transform: uppercase; letter-spacing: .16em;
}
.portada-cliente {
  margin: 0 0 10px; font-size: 3.1rem; line-height: 1.05; letter-spacing: -.02em;
}
.portada-periodo { margin: 0; font-size: 1.5rem; color: var(--text-secondary); }

.portada-pie {
  display: flex; justify-content: space-between; align-items: flex-end;
  border-top: 2px solid var(--gridline); padding-top: 10px;
}
.portada-etiqueta {
  display: block; margin-bottom: 5px; font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--text-secondary);
}
.portada-logo-onwork { height: 15mm; width: auto; }

.indice-titulo { margin: 0 0 18px; }
.indice-lista { list-style: none; margin: 0; padding: 0; counter-reset: indice; }
.indice-fila {
  display: flex; align-items: baseline; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid var(--gridline);
  font-size: 0.95rem;
}
.indice-fila::before {
  counter-increment: indice; content: counter(indice) ".";
  color: var(--text-secondary); min-width: 22px;
}
.indice-nombre { flex: 0 0 auto; }
/* Los puntos de relleno entre el título y el número de página. */
.indice-puntos {
  flex: 1 1 auto; border-bottom: 1px dotted var(--gridline);
  transform: translateY(-3px);
}
.indice-pagina { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 600; }

/* El botón de eliminar informe va debajo de las acciones, separado, para que
   no se pulse por error al ir a por "Descargar PDF". */
.report-delete { margin-top: 10px; text-align: right; }