/* anexos.css — Estilos de las páginas de anexos clínicos */

.anexos-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}
.anexo-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--space-5);
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: transform .12s, box-shadow .12s;
}
.anexo-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.anexo-card h3 {
  margin: 0;
  font-size: 16px;
  color: var(--ink);
}
.anexo-card .tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--ink-mute);
}

.anexo {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--space-6);
}
.anexo > h2 {
  background: var(--c-D);
  color: #fff;
  border-radius: var(--r-pill);
  padding: 10px 22px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: -10px -10px var(--space-5);
}

.anexo h3 { margin: var(--space-5) 0 var(--space-2); font-size: 15px; color: var(--c-D); }

.anexo table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: var(--space-4);
}
.anexo th, .anexo td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.anexo th {
  background: var(--bg-soft);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}
.anexo tr:nth-child(even) td { background: var(--bg-soft); }

/* Color del catéter */
.cateter-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 6px;
  border: 1px solid var(--line-strong);
}
.cateter-naranja { background: #f59e0b; }
.cateter-gris    { background: #9ca3af; }
.cateter-verde   { background: #16a34a; }
.cateter-rosa    { background: #ec4899; }
.cateter-azul    { background: #3b82f6; }
.cateter-amarillo{ background: #facc15; }

/* Escalas */
.escala-seccion {
  background: var(--bg-soft);
  border-radius: var(--r-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}
.escala-seccion h4 {
  margin: 0 0 var(--space-2);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-D);
}
.escala-seccion ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.escala-seccion li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: 13px;
}
.escala-seccion li .pts {
  background: var(--c-D);
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 11px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* Lista clasificación */
.clasif {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}
.clasif-grupo {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-elev);
}
.clasif-grupo h4 {
  margin: 0;
  background: var(--c-D);
  color: #fff;
  padding: 6px 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.clasif-grupo ul {
  list-style: none;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Texto estructurado */
.tx-seccion {
  margin-bottom: var(--space-4);
}
.tx-seccion h4 {
  margin: 0 0 var(--space-2);
  font-size: 13px;
  background: var(--c-D);
  color: #fff;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  display: inline-block;
}
.tx-seccion p {
  margin: 0;
  font-size: 14px;
  color: var(--ink);
}

/* — Compatibilidad fármaco-fármaco — */
.compat {
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  gap: var(--space-5);
}
.compat-controls {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--space-4);
}
.compat-controls h3 {
  margin: 0 0 var(--space-3);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-D);
}
.compat-controls label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: var(--space-3) 0 var(--space-1);
}
.compat-controls select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font: inherit;
  background: var(--bg);
  color: var(--ink);
}

.compat-result {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--r-md);
  background: var(--bg-soft);
  font-size: 14px;
  text-align: center;
}
.compat-result.compatible { background: var(--ok-bg); color: #1e5b35; }
.compat-result.incompat   { background: var(--ko-bg); color: #7a0b1f; }
.compat-result.precaucion { background: var(--warn-bg); color: #7c4d00; }
.compat-result.unknown    { background: var(--bg-soft); color: var(--ink-mute); }
.compat-result strong { display: block; font-size: 16px; margin-bottom: 4px; }

.compat-viewer {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  height: 70vh;
  min-height: 400px;
}
.compat-canvas {
  position: absolute;
  inset: 0;
  cursor: grab;
  overflow: hidden;
  touch-action: none;
}
.compat-canvas.dragging { cursor: grabbing; }
.compat-canvas img {
  position: absolute;
  top: 0; left: 0;
  transform-origin: 0 0;
  user-select: none;
  pointer-events: none;
  max-width: none;
}
.compat-toolbar {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: flex;
  gap: 4px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 4px;
  z-index: 2;
}
.compat-toolbar button {
  border: 0;
  background: transparent;
  font-size: 16px;
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  color: var(--ink-soft);
}
.compat-toolbar button:hover { background: var(--bg-soft); color: var(--ink); }

@media (max-width: 800px) {
  .compat { grid-template-columns: 1fr; }
  .compat-viewer { height: 60vh; }
}

/* — Modo revisión — */
.revisar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  height: calc(100vh - var(--topbar-h) - 80px);
}
.revisar-form {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--space-4);
  overflow-y: auto;
}
.revisar-form h2 { margin: 0 0 var(--space-3); font-size: 18px; }
.revisar-form .field { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--space-3); }
.revisar-form label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--ink-mute); letter-spacing: 0.05em; }
.revisar-form input,
.revisar-form textarea,
.revisar-form select {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 6px 10px;
  font: inherit;
  background: var(--bg);
  color: var(--ink);
}
.revisar-form textarea { resize: vertical; min-height: 60px; }
.revisar-form .checkbox-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.revisar-form .checkbox-row label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-transform: none;
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0;
}

.revisar-image {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: grid;
  place-items: center;
  position: relative;
}
.revisar-image img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.revisar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.revisar-toolbar .progress { font-size: 13px; color: var(--ink-mute); }
.revisar-toolbar .progress strong { color: var(--ink); }
.revisar-toolbar button {
  border: 1px solid var(--line);
  background: var(--bg);
  padding: 6px 12px;
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--ink);
}
.revisar-toolbar button:hover { background: var(--bg-soft); }
.revisar-toolbar .primary {
  background: var(--c-D);
  color: #fff;
  border-color: var(--c-D);
}

@media (max-width: 800px) {
  .revisar { grid-template-columns: 1fr; height: auto; }
  .revisar-image { height: 50vh; }
}