/* CONSULTOR LEGAL NR — la capa de teléfono.
 *
 * NO redefine el estándar visual: se apoya en los tokens de /src/shared/theme.css (el
 * índigo #5C6BC0, los radios, los estados) y solo cambia lo que el teléfono exige. La app
 * del despacho está pensada para pantallas anchas y matrices densas; esta es de UNA
 * COLUMNA, con áreas de toque grandes y sin nada que obligue a hacer zoom.
 *
 * Tres reglas que vienen de usar el teléfono de verdad:
 *  · Los controles bajan a 16 px como mínimo: por debajo de eso iOS hace zoom solo al
 *    enfocar un campo y descoloca la pantalla entera.
 *  · La barra de acción va fija abajo, al alcance del pulgar, y respeta el área segura del
 *    notch con env(safe-area-inset-bottom).
 *  · El informe se lee: interlineado holgado y ancho de línea cómodo, porque son varias
 *    pantallas de texto jurídico.
 */

.cnr-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

/* ── Barra superior ───────────────────────────────────────────────────────── */
.cnr-top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: .5rem;
  padding: calc(env(safe-area-inset-top, 0px) + .55rem) .8rem .55rem;
  background: var(--indigo); color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
.cnr-top .cnr-titulo { font-weight: 700; font-size: 1rem; flex: 1; letter-spacing: .2px; }
.cnr-top button {
  background: transparent; border: 1px solid rgba(255, 255, 255, .55); color: #fff;
  border-radius: var(--radius-sm, 8px); padding: .3rem .6rem; font-size: .84rem;
  min-height: 36px;
}
.cnr-top button:active { background: rgba(255, 255, 255, .18); }

.cnr-main { flex: 1; padding: .8rem .8rem 6.5rem; max-width: 720px; width: 100%; margin: 0 auto; }

/* ── Barra de acción fija, al alcance del pulgar ──────────────────────────── */
.cnr-accion {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: .6rem .8rem calc(env(safe-area-inset-bottom, 0px) + .6rem);
  background: #fff; border-top: 1px solid var(--border);
  display: flex; gap: .5rem;
}
.cnr-accion .btn { flex: 1; justify-content: center; min-height: 52px; font-size: 1rem; font-weight: 700; }

/* ── Campos: 16 px o iOS hace zoom al enfocar ─────────────────────────────── */
.cnr-main :where(input, textarea, select) { font-size: 16px; min-height: 46px; }
.cnr-main textarea { line-height: 1.5; }
.cnr-consulta {
  width: 100%; min-height: 190px; padding: .7rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm, 8px);
  font-family: inherit; resize: vertical; background: #fff;
}
.cnr-consulta:focus { outline: 2px solid var(--indigo); outline-offset: -1px; }

/* Botonera de captura: dictar, fotografiar, adjuntar. Envuelve sola. */
.cnr-captura { display: flex; flex-wrap: wrap; gap: .45rem; margin: .55rem 0; }
.cnr-captura .btn { flex: 1 1 auto; min-height: 46px; font-size: .92rem; }

.cnr-adjuntos { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0; }
.cnr-adjunto {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--indigo-bg); color: var(--indigo);
  border-radius: 999px; padding: .3rem .6rem; font-size: .8rem; font-weight: 600;
  max-width: 100%;
}
.cnr-adjunto span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12rem; }
.cnr-adjunto button {
  border: none; background: transparent; color: var(--danger);
  font-size: 1rem; line-height: 1; padding: .1rem .2rem; min-height: 28px; min-width: 28px;
}

/* ── El informe ───────────────────────────────────────────────────────────── */
.cnr-informe { font-size: .95rem; line-height: 1.62; }
.cnr-informe h1, .cnr-informe h2, .cnr-informe h3 { color: var(--indigo); line-height: 1.3; }
.cnr-informe h1 { font-size: 1.15rem; } .cnr-informe h2 { font-size: 1.05rem; } .cnr-informe h3 { font-size: .98rem; }
.cnr-informe table { display: block; overflow-x: auto; max-width: 100%; }
.cnr-informe pre { overflow-x: auto; }

/* Tarjeta de una consulta en el historial: toda la fila es tocable. */
.cnr-item {
  display: block; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px); padding: .7rem .75rem; margin-bottom: .5rem;
  color: inherit; text-decoration: none;
}
.cnr-item:active { background: var(--indigo-bg); }
.cnr-item .cnr-item-t { font-weight: 700; font-size: .92rem; line-height: 1.35; }
.cnr-item .cnr-item-m { color: var(--ink-soft); font-size: .78rem; margin-top: .2rem; }

.cnr-vacio { text-align: center; color: var(--ink-soft); padding: 2.5rem 1rem; font-size: .9rem; }

/* Indicador de trabajo: la consulta tarda minutos y hay que ver que avanza. */
.cnr-espera { text-align: center; padding: 1.6rem .8rem; }
.cnr-espera .cnr-onda { letter-spacing: 3px; color: var(--indigo); font-size: 1.1rem; }
.cnr-espera .cnr-fase { margin-top: .5rem; font-size: .9rem; color: var(--ink); }
.cnr-espera .cnr-reloj { margin-top: .2rem; font-size: .8rem; color: var(--ink-soft); }