/* ═══════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════ */
/* Paleta alineada con styles-site.css (sistema único del sitio).
   Antes esta herramienta tenia su propia paleta independiente (azul vivo,
   cian, morado y grises slate— que no coincidía con ninguna otra página.
   Todos los tokens de marca y neutros apuntan ahora a los mismos valores que
   el resto del sitio. Se conservan como excepción los colores de semáforo
   (correcto / atención / fuera de norma) porque en una herramienta que informa
   de si un parámetro cumple el límite legal la lectura por color es funcional,
   no decorativa. Aun así se han reajustado en tono y saturación para convivir
   con la paleta azul, y el rojo es exactamente el --risk del sitio. */
:root {
  /* Semáforo — funcionales, armonizados con la paleta del sitio */
  --color-ok:      #1a7f5a; /* verde profundo, no neón */
  --color-ok-bg:   #e6f4ee;
  --color-warn:    #b3762f; /* ámbar en el mismo registro que el rojo de riesgo */
  --color-warn-bg: #f7ecdd;
  --color-error:      #b3402f; /* = --risk del sitio */
  --color-error-bg:   #f6e4e0; /* = --risk-wash del sitio */
  --color-closure:    #b3402f;
  --color-closure-bg: #f6e4e0;

  /* Marca — idénticos a los tokens de styles-site.css */
  --color-primary:       #0284c7; /* = --accent */
  --color-primary-hover: #075985; /* = --accent-deep */
  --color-primary-light: #e0f2fe; /* = --accent-wash */
  --color-accent:        #38bdf8; /* = --accent-bright */

  /* Neutros — idénticos a los tokens de styles-site.css */
  --color-bg:        #eef6fb; /* = --paper */
  --color-surface:   #ffffff; /* = --paper-raised */
  --color-surface-2: #dcedf7; /* = --paper-dim */
  --color-border:    #c3ddef; /* = --line */
  --color-border-2:  #93c3e2; /* = --line-strong */
  --color-text:      #0b3a5c; /* = --ink */
  --color-text-2:    #1c5a84; /* = --ink-soft */
  --color-text-3:    #4f7896; /* = --muted */

  /* Aviso específico de Legionella — azul profundo del sistema en lugar del
     morado anterior, que era el único color de toda la web fuera de paleta */
  --color-legionella:    #075985; /* = --accent-deep */
  --color-legionella-bg: #dcedf7; /* = --paper-dim */

  /* Sizing */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-md:   300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Shadows */
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* ═══════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  /* Misma familia tipografica que el resto del sitio (styles-site.css) */
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-size: 15px;
  line-height: 1.6;
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  background-image:
    radial-gradient(at 0% 0%, rgba(224,242,254,.85) 0, transparent 50%),
    radial-gradient(at 100% 0%, rgba(220,237,247,.85) 0, transparent 50%);
}

/* Los titulos usan la display del sitio, igual que en el resto de paginas */
h1, h2, h3, h4, .card__title, .app-header h1 {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  letter-spacing: -0.01em;
}

/* ═══════════════════════════════════════════
   FOCUS VISIBLE (WCAG 2.1 AA)
═══════════════════════════════════════════ */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ═══════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════ */
.app-wrapper {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space-md);
}

/* ═══════════════════════════════════════════
   HEADER
═══════════════════════════════════════════ */
.app-header {
  background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 100%);
  color: white;
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-xl);
  position: relative;
  overflow: hidden;
}

.app-header::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
  border-radius: 50%;
}

.app-header__icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-md);
  display: block;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
}

.app-header h1 {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-xs);
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.app-header p {
  font-size: 0.9rem;
  opacity: 0.9;
  max-width: 650px;
  font-weight: 500;
}

/* ═══════════════════════════════════════════
   CARDS
═══════════════════════════════════════════ */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-md), box-shadow var(--transition-md);
}

.card:hover {
  box-shadow: var(--shadow-lg);
}

.card__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.card__title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--color-border), transparent);
  margin-left: var(--space-sm);
}

/* ═══════════════════════════════════════════
   FORM
═══════════════════════════════════════════ */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.form-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-2);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  cursor: default;
}

.form-group label.has-hint { cursor: help; }

.field-unit {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-primary-light);
  border-radius: 4px;
  padding: 1px 6px;
  text-transform: uppercase;
}

.badge-optional {
  font-size: 0.65rem;
  background: var(--color-surface-2);
  color: var(--color-text-3);
  border-radius: 4px;
  padding: 1px 5px;
  font-weight: 700;
  text-transform: uppercase;
}

.field-hint {
  font-size: 0.75rem;
  color: var(--color-text-3);
  line-height: 1.4;
  margin-top: 4px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--transition-md), opacity var(--transition-md), margin-top var(--transition-md);
}

.form-group:focus-within .field-hint {
  max-height: 60px;
  opacity: 1;
  margin-top: 4px;
}

/* Inputs */
input[type="number"], input[type="text"], select {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--color-border-2);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-surface);
  transition: all var(--transition-fast);
}

input[type="number"]:hover, input[type="text"]:hover, select:hover {
  border-color: var(--color-primary);
}

input[type="number"]:focus, input[type="text"]:focus, select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
  outline: none;
}

input.input-error {
  border-color: var(--color-error) !important;
  background: var(--color-surface);
}

.error-message {
  font-size: 0.8rem;
  color: var(--color-error);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.error-message::before { font-size: 0.8rem; }

/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 12px 28px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn:active { transform: scale(0.96); }

.btn-primary {
  background: var(--color-primary);
  color: white;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text-2);
  border: 1.5px solid var(--color-border-2);
}

.btn-secondary:hover {
  background: var(--color-surface-2);
  border-color: var(--color-text-3);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.form-actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

/* ═══════════════════════════════════════════
   RESULTS
═══════════════════════════════════════════ */
.global-status {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  font-weight: 800;
  font-size: 1.2rem;
  margin-bottom: var(--space-lg);
  border: 2px solid;
}

.global-status.conforme    { background: var(--color-ok-bg);      color: var(--color-ok);      border-color: var(--color-ok); }
.global-status.advertencia { background: var(--color-warn-bg);    color: var(--color-warn);    border-color: var(--color-warn); }
.global-status.cierre      { background: var(--color-closure-bg); color: var(--color-closure); border-color: var(--color-closure); }
.global-status.no_conforme { background: var(--color-closure-bg); color: var(--color-closure); border-color: var(--color-closure); }

.legionella-banner {
  background: var(--color-legionella-bg);
  border: 2px solid var(--color-legionella);
  color: var(--color-legionella);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15);
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.result-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  position: relative;
  transition: all var(--transition-md);
}

.result-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.result-card--ok      { border-top: 4px solid var(--color-ok); }
.result-card--warning { border-top: 4px solid var(--color-warn); }
.result-card--closure { border-top: 4px solid var(--color-closure); }
.result-card--error   { border-top: 4px solid var(--color-closure); }

.result-card__label { font-size: 0.7rem; color: var(--color-text-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.result-card__value { font-size: 1.75rem; font-weight: 800; line-height: 1.1; margin-bottom: 8px; }
.result-card__value--ok      { color: var(--color-ok); }
.result-card__value--warning { color: var(--color-warn); }
.result-card__value--closure { color: var(--color-closure); }
.result-card__value--error   { color: var(--color-closure); }

.result-card__badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 99px;
}
.result-card__badge--ok      { background: var(--color-ok-bg);      color: var(--color-ok); }
.result-card__badge--warning { background: var(--color-warn-bg);    color: var(--color-warn); }
.result-card__badge--closure { background: var(--color-closure-bg); color: var(--color-closure); }
.result-card__badge--error   { background: var(--color-closure-bg); color: var(--color-closure); }

/* Langelier */
.langelier-block {
  background: linear-gradient(to right, var(--color-surface), var(--color-surface-2));
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-top: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.langelier-value {
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1;
  color: var(--color-primary);
}

/* Recomendaciones */
.recommendations-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.recommendation-item {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  transition: border-color var(--transition-fast);
}

.recommendation-item:hover {
  border-color: var(--color-text-3);
}

.recommendation-item--critical { background: linear-gradient(to right, var(--color-error-bg), var(--color-surface)); border-left: 6px solid var(--color-error); }
.recommendation-item--warning  { background: linear-gradient(to right, var(--color-warn-bg), var(--color-surface)); border-left: 6px solid var(--color-warn); }
.recommendation-item--info     { background: linear-gradient(to right, var(--color-primary-light), var(--color-surface)); border-left: 6px solid var(--color-accent); }

/* ═══════════════════════════════════════════
   NORMATIVE TABLE
═══════════════════════════════════════════ */
.normative-table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
}

.normative-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  min-width: 600px;
}

.normative-table th {
  background: var(--color-surface-2);
  color: var(--color-primary);
  font-weight: 700;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 2px solid var(--color-border);
}

.normative-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-2);
}

.normative-table tr:last-child td { border-bottom: none; }

/* En movil la tabla normativa se apila: el min-width de 600px obligaba a
   arrastrarla en horizontal dentro de su contenedor, algo que el visitante
   ni descubre. Cada fila pasa a bloque con el rotulo de cada columna. */
@media (max-width: 780px) {
  .normative-table-wrapper { overflow-x: visible; border: 0; }
  .normative-table { min-width: 0; display: block; }
  .normative-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .normative-table tbody { display: block; }
  .normative-table tr {
    display: block;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    overflow: hidden;
  }
  .normative-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--color-border);
  }
  .normative-table tr td:last-child { border-bottom: none; }
  .normative-table td::before {
    content: attr(data-label);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-3);
    flex: 0 0 42%;
  }

  /* Tabla comparativa Legionella / Pseudomonas: mismo tratamiento */
  .cmp-scroll { overflow-x: visible !important; }
  .cmp-table, .cmp-table tbody, .cmp-table tr, .cmp-table td { display: block; width: 100%; }
  .cmp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cmp-table tr {
    border: 1.5px solid var(--color-border) !important;
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    overflow: hidden;
  }
  .cmp-table td:first-child {
    background: var(--color-surface-2);
    font-weight: 700;
    color: var(--color-text);
  }
  .cmp-table td { border-bottom: 1px solid var(--color-border); }
  .cmp-table tr td:last-child { border-bottom: none; }
  .cmp-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-3);
    margin-bottom: 3px;
  }
}

/* ═══════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════ */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-in {
  animation: fadeIn 400ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* ═══════════════════════════════════════════
   TOOLS (DOSAGE)
   ═══════════════════════════════════════════ */
.tool-card {
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
}


.tool-result {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--color-primary-light);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-sm);
  animation: fadeIn 300ms ease-out;
}

/* ── Result block dentro de tool-result ── */
.result-block--tool {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.result-block--tool .result-block__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0;
}

.result-block--tool .result-block__value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-primary);
  margin: 0;
  line-height: 1.1;
}

.result-block--tool .result-block__sub {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-2);
  margin-left: var(--space-xs);
}

.result-block--tool .result-block__detail {
  font-size: 0.8rem;
  color: var(--color-text-2);
  margin: var(--space-xs) 0 0;
}

.result-block--tool .result-block__tip {
  font-size: 0.75rem;
  color: var(--color-text-3);
  background: rgba(0,0,0,0.04);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  margin-top: var(--space-sm);
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 640px) {
  .app-wrapper { padding: var(--space-sm); }
  .app-header { padding: var(--space-lg); }
  .card { padding: var(--space-lg); }
  .results-grid { grid-template-columns: 1fr; }
  .langelier-block { flex-direction: column; text-align: center; gap: var(--space-md); }
  .form-actions { flex-direction: column; }
  .btn { width: 100%; }
}