/* Ocusalud — paleta de marca. El diseño fino viene después; esto fija color,
   tipografía base y el componente de estado. */

:root {
  --marca:        #0F4C5C;   /* azul petróleo */
  --marca-suave:  #E3EEF1;

  --texto:        #1F2937;
  --texto-tenue:  #6B7280;
  --fondo:        #F9FAFB;
  --superficie:   #FFFFFF;
  --divisor:      #E5E7EB;
  --divisor-firme:#D1D5DB;

  /* Estados. Cada uno se acompaña SIEMPRE de texto e ícono: ver
     vistas/parciales/estado.ejs. El color solo refuerza, nunca informa solo. */
  --aprobado:     #15803D;  --aprobado-fondo:  #ECFDF5;  --aprobado-borde:  #A7F3D0;
  --rechazado:    #B91C1C;  --rechazado-fondo: #FEF2F2;  --rechazado-borde: #FECACA;
  --cargado:      #1D4ED8;  --cargado-fondo:   #EFF6FF;  --cargado-borde:   #BFDBFE;
  --pendiente:    #B45309;  --pendiente-fondo: #FFFBEB;  --pendiente-borde: #FDE68A;
  --neutro:       #6B7280;  --neutro-fondo:    #F3F4F6;  --neutro-borde:    #D1D5DB;
}

* { box-sizing: border-box; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fondo);
}

/* ---------- disposición: barra lateral + columna de contenido ---------- */
.disposicion {
  display: grid; grid-template-columns: 15rem 1fr; min-height: 100vh;
  transition: grid-template-columns .16s ease;
}

/* Plegada: queda un carril de íconos. No desaparece, para no perder la
   navegación de un clic. */
.plegar-interruptor { position: absolute; opacity: 0; pointer-events: none; }
.plegar-interruptor:checked ~ .disposicion { grid-template-columns: 4rem 1fr; }
.plegar-interruptor:checked ~ .disposicion .lateral { padding: 1rem .55rem; }
.plegar-interruptor:checked ~ .disposicion .lateral-texto,
.plegar-interruptor:checked ~ .disposicion .lateral .logo-ancho { display: none; }
.plegar-interruptor:checked ~ .disposicion .lateral .logo-angosto { display: block; }
.plegar-interruptor:checked ~ .disposicion .lateral-cabeza { flex-direction: column; gap: .5rem; }
.plegar-interruptor:checked ~ .disposicion .lateral-menu a,
.plegar-interruptor:checked ~ .disposicion .lateral-menu button {
  justify-content: center; padding: .55rem 0;
}
.plegar-interruptor:focus-visible ~ .disposicion .plegar-boton {
  outline: 2px solid var(--marca); outline-offset: 2px;
}

.lateral-cabeza { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.lateral .logo-angosto { display: none; height: 30px; width: auto; }
.plegar-boton {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; flex: none; border-radius: 6px;
  color: var(--texto-tenue); cursor: pointer;
}
.plegar-boton:hover { background: var(--marca-suave); color: var(--marca); }
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.columna { min-width: 0; display: flex; flex-direction: column; }
main { padding: 1.2rem 1.5rem 4rem; max-width: 62rem; width: 100%; }

.lateral {
  background: var(--superficie);
  border-right: 1px solid var(--divisor);
  padding: 1rem .9rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.lateral-marca { display: block; padding: .3rem .2rem; min-width: 0; }
/* En escritorio el menú está siempre visible y el interruptor no existe. */
.lateral-interruptor { position: absolute; opacity: 0; pointer-events: none; }
.lateral-boton { display: none; }
.lateral-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }

.lateral-menu a,
.lateral-menu button {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .55rem .7rem; border-radius: 6px;
  font: inherit; font-size: .95rem; text-align: left;
  color: var(--marca); background: none; border: 0; text-decoration: none; cursor: pointer;
}
.lateral-menu a:hover, .lateral-menu button:hover { background: var(--marca-suave); }
.lateral-menu a.activa {
  background: var(--marca); color: #fff; font-weight: 600;
}
.lateral-salir { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--divisor); }
.lateral-salir button { color: var(--texto-tenue); }

@media (max-width: 46rem) {
  /* En teléfono el plegado de escritorio no aplica: manda el menú desplegable. */
  .disposicion,
  .plegar-interruptor:checked ~ .disposicion {
    grid-template-columns: 1fr;
    /* Sin esto la cuadrícula repartía el 100vh entre las dos filas y la barra
       se comía media pantalla. */
    grid-template-rows: auto 1fr;
  }
  .plegar-boton { display: none; }
  .plegar-interruptor:checked ~ .disposicion .lateral-texto { display: inline; }
  .plegar-interruptor:checked ~ .disposicion .lateral .logo-ancho { display: block; }
  .plegar-interruptor:checked ~ .disposicion .lateral .logo-angosto { display: none; }
  .plegar-interruptor:checked ~ .disposicion .lateral { padding: .6rem .9rem; }
  .plegar-interruptor:checked ~ .disposicion .lateral-cabeza { flex-direction: row; }
  .lateral {
    border-right: 0; border-bottom: 1px solid var(--divisor);
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: .5rem; padding: .6rem .9rem; flex-wrap: wrap;
  }
  .lateral-marca { padding: 0; }
  /* En teléfono el menú se pliega detrás del botón. */
  .lateral-boton {
    display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
    padding: .4rem .8rem; border: 1px solid var(--divisor-firme); border-radius: 6px;
    font-size: .9rem; color: var(--marca); user-select: none;
  }
  .lateral-boton::after { content: "▾"; }
  .lateral-interruptor:checked ~ .lateral-boton::after { content: "▴"; }
  .lateral-interruptor:focus-visible ~ .lateral-boton { outline: 2px solid var(--marca); outline-offset: 2px; }
  .lateral-menu { display: none; }
  .lateral-interruptor:checked ~ .lateral-menu {
    display: block;
    position: absolute; right: .9rem; top: 3.4rem; z-index: 10;
    background: var(--superficie); border: 1px solid var(--divisor-firme);
    border-radius: 8px; padding: .4rem; min-width: 12rem;
    box-shadow: 0 6px 20px rgba(31,41,55,.12);
  }
  main { padding: 1rem 1rem 3rem; }
}

/* ---------- barra ---------- */
.barra {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  min-height: 3.25rem;       /* alto propio: el contenido nunca se corta */
  padding: .5rem 1.5rem;
  background: var(--superficie);
  border-bottom: 1px solid var(--divisor);
}
.marca {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -.01em;
  color: var(--marca);
  text-decoration: none;
}
.quien { margin-left: auto; color: var(--texto-tenue); font-size: .875rem; }

h1 { font-size: 1.6rem; line-height: 1.2; margin: 0 0 .6rem; color: var(--marca); }
h2 { font-size: 1.2rem; margin: 1.6rem 0 .5rem; }
h3 { font-size: 1rem; margin: .6rem 0 .3rem; }
a { color: var(--marca); }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
}

/* ---------- tablas y formularios ---------- */
/* La tabla se desplaza dentro de su propio contenedor: sin esto, en pantallas
   angostas las columnas se aplastan y la última queda cortada. */
.tabla { overflow-x: auto; margin: .5rem 0; border: 1px solid var(--divisor); border-radius: 6px; }
.tabla table { margin: 0; border: 0; min-width: 44rem; }
.tabla th:first-child, .tabla td:first-child { border-left: 0; }
.tabla th:last-child, .tabla td:last-child { border-right: 0; }
table { border-collapse: collapse; width: 100%; margin: .5rem 0; background: var(--superficie); }
th, td { border: 1px solid var(--divisor); padding: .45rem .6rem; text-align: left; vertical-align: top; }
th { background: var(--marca-suave); color: var(--marca); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
label { display: block; margin: .4rem 0; }
input, select, textarea {
  font: inherit;
  padding: .3rem .45rem;
  border: 1px solid var(--divisor-firme);
  border-radius: 4px;
  background: var(--superficie);
  color: var(--texto);
}
button {
  font: inherit;
  padding: .35rem .8rem;
  border: 1px solid var(--marca);
  border-radius: 4px;
  background: var(--marca);
  color: #fff;
  cursor: pointer;
}
button:hover { background: #0C3E4B; }
.linea, .filtros { display: flex; gap: .6rem; align-items: end; flex-wrap: wrap; margin: .6rem 0; }
.linea label, .filtros label { display: inline-block; margin: 0; }

/* ---------- checklist ---------- */
details.protocolo {
  border: 1px solid var(--divisor-firme);
  border-radius: 6px;
  background: var(--superficie);
  margin: .5rem 0;
  padding: .5rem .8rem;
}
details.protocolo[open] { border-color: var(--marca); }
summary { cursor: pointer; }
details.seccion { margin: .8rem 0 .8rem 1rem; padding: .2rem .8rem; border-left: 3px solid var(--marca-suave); }
details.seccion > summary {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  padding: .35rem 0; cursor: pointer; list-style: none;
}
details.seccion > summary::-webkit-details-marker { display: none; }
details.seccion > summary::before {
  content: "▾"; color: var(--texto-tenue); font-size: .8rem; width: .8rem;
}
details.seccion:not([open]) > summary::before { content: "▸"; }
details.seccion:not([open]) { border-left-color: var(--divisor-firme); }
.seccion-titulo {
  font-size: .92rem; font-weight: 600; color: var(--marca);
  text-transform: uppercase; letter-spacing: .04em;
}
.seccion-cuenta { font-size: .82rem; color: var(--texto-tenue); }
.seccion-cuenta strong { color: var(--pendiente); }
.item { border-top: 1px solid var(--divisor); padding: .6rem 0; }
.encabezado { margin: 0 0 .25rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.pregunta { margin: .2rem 0; }

/* ---------- estado: color + TEXTO + ÍCONO ---------- */
/* Las tres señales van juntas siempre. Quitar el texto o el ícono dejaría el
   estado ilegible para quien no distingue rojo de verde. */
.estado {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.4;
  padding: .1rem .5rem .1rem .4rem;
  border-radius: 999px;
  border: 1px solid var(--neutro-borde);
  background: var(--neutro-fondo);
  color: var(--neutro);
  white-space: nowrap;
}
.estado-icono { flex: none; }
.estado-detalle { font-weight: 400; opacity: .85; }

.estado--aprobado, .estado--vigente {
  color: var(--aprobado); background: var(--aprobado-fondo); border-color: var(--aprobado-borde);
}
.estado--rechazado, .estado--vencida {
  color: var(--rechazado); background: var(--rechazado-fondo); border-color: var(--rechazado-borde);
}
.estado--cargado {
  color: var(--cargado); background: var(--cargado-fondo); border-color: var(--cargado-borde);
}
.estado--pendiente, .estado--por_vencer, .estado--falta_difusion,
.estado--falta_informe, .estado--falta_fecha_del_oal {
  color: var(--pendiente); background: var(--pendiente-fondo); border-color: var(--pendiente-borde);
}
/* no_aplica, sin_calcular y protocolo_sin_criterio usan el neutro por defecto. */

/* Etiqueta neutra para datos que no son estado (nº de evidencias, etapa). */
.chip {
  display: inline-block;
  font-size: .75rem;
  border: 1px solid var(--divisor-firme);
  border-radius: 999px;
  padding: 0 .5rem;
  background: var(--superficie);
  color: var(--texto-tenue);
}

/* ---------- avisos ---------- */
.aviso, .error {
  padding: .6rem .8rem;
  border-radius: 4px;
  border-left: 4px solid;
  margin: .6rem 0;
}
.aviso { background: var(--marca-suave); border-color: var(--marca); }
.error { background: var(--rechazado-fondo); border-color: var(--rechazado); color: var(--rechazado); font-weight: 500; }

.requisito, .observacion, .comentario, .ayuda, .pequeno { font-size: .85rem; color: var(--texto-tenue); }
.ruta { font-size: .85rem; color: var(--texto-tenue); }
.etapa { font-size: .75rem; color: var(--texto-tenue); }

/* =====================================================================
   PANTALLA DE ENTRADA — dividida: panel a la izquierda, formulario a la
   derecha. En pantalla angosta el panel desaparece: en faena se entra
   desde el teléfono y la foto no aporta.
   ===================================================================== */
body.entrada {
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--superficie);
}
.entrada-panel { position: relative; overflow: hidden; background: var(--marca); }
.entrada-panel svg,
.entrada-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.entrada-forma { display: grid; place-items: center; padding: 2rem 1.5rem; }
.entrada-caja { width: 100%; max-width: 22rem; }

.entrada-cliente { min-height: 3rem; margin-bottom: 2.5rem; }
.logo-cliente { max-height: 3rem; max-width: 100%; }
.logo-cliente-texto {
  margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; color: var(--marca);
}

body.entrada h1 { font-size: 1.5rem; margin: 0 0 .3rem; }
.entrada-ayuda { color: var(--texto-tenue); font-size: .92rem; margin: 0 0 1.5rem; }

.entrada-form label {
  font-size: .8rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--texto-tenue); margin-bottom: .3rem;
}
.entrada-form input {
  width: 100%; padding: .7rem .9rem; border-radius: 999px;
  border: 1px solid var(--divisor-firme); font-size: 1rem;
}
.entrada-form input:focus-visible { border-color: var(--marca); }
.entrada-form button {
  width: 100%; margin-top: 1rem; padding: .75rem 1rem;
  border-radius: 999px; font-size: 1rem; font-weight: 600;
}

.entrada-pie {
  margin-top: 4rem; padding-top: 1.2rem; border-top: 1px solid var(--divisor);
  display: flex; flex-direction: column; gap: .15rem;
}


@media (max-width: 46rem) {
  body.entrada { grid-template-columns: 1fr; }
  .entrada-panel { display: none; }
  .entrada-pie { margin-top: 2.5rem; }
}

/* =====================================================================
   CABECERA con logo del cliente
   ===================================================================== */
.logo-cliente-barra { max-height: 2rem; max-width: 11rem; display: block; }
.marca-cliente { font-weight: 700; color: var(--texto); text-decoration: none; }
/* 30 px: el alto que se verificó legible antes de darlo por bueno. */
.logo-ocusalud { height: 30px; width: auto; display: block; }
.logo-ocusalud-completo { height: 54px; width: auto; display: block; }

/* =====================================================================
   TABLERO DE TARJETAS
   ===================================================================== */
.periodo-cabecera {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.periodo-cabecera h1 { margin: 0 0 .15rem; }
.periodo-mes { margin: 0; color: var(--texto-tenue); }
.global { text-align: right; }
.global-cifra {
  margin: 0; font-size: 2.4rem; font-weight: 700; line-height: 1;
  color: var(--marca); font-variant-numeric: tabular-nums;
}
.global-nota { margin: .2rem 0 0; font-size: .82rem; color: var(--texto-tenue); }

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: 1rem;
  margin: 1.2rem 0;
}

.tarjeta {
  display: block;
  background: var(--superficie);
  border: 1px solid var(--divisor);
  border-top: 4px solid var(--neutro-borde);
  border-radius: 10px;
  padding: 1.1rem 1.1rem 1rem;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 2px rgba(31, 41, 55, .06);
  transition: box-shadow .12s, transform .12s;
}
.tarjeta:hover { box-shadow: 0 4px 12px rgba(31, 41, 55, .1); transform: translateY(-1px); }
.tarjeta:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

/* El borde superior marca la urgencia del vencimiento. Nunca informa solo:
   la tarjeta lleva la insignia con texto e ícono justo debajo. */
.urgencia--vencida    { border-top-color: var(--rechazado); }
.urgencia--por-vencer { border-top-color: var(--pendiente); }
.urgencia--al-dia     { border-top-color: var(--aprobado); }
.urgencia--sin-fecha  { border-top-color: var(--neutro-borde); }

.tarjeta-arriba { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .8rem; }
.tarjeta-icono { color: var(--marca); flex: none; line-height: 0; }
.tarjeta-icono.grande { color: var(--marca); }
.tarjeta h2 { margin: 0; font-size: 1rem; letter-spacing: .02em; color: var(--marca); }
.tarjeta-nombre {
  margin: .1rem 0 0; font-size: .78rem; color: var(--texto-tenue); line-height: 1.35;
}

.tarjeta-cifra {
  margin: 0 0 .4rem; display: flex; align-items: baseline; gap: .25rem;
  font-variant-numeric: tabular-nums;
}
.tarjeta-cifra strong { font-size: 1.7rem; line-height: 1; }
.tarjeta-cifra .de { color: var(--texto-tenue); }
.tarjeta-pct { margin-left: auto; font-weight: 700; color: var(--marca); }

/* Ojo con el nombre: '.barra' ya es la cabecera. Llamar igual a esto le
   imponía a la cabecera height:7px y overflow:hidden, y le cortaba el texto. */
.progreso {
  height: 7px; border-radius: 999px; background: var(--divisor);
  overflow: hidden; margin-bottom: .8rem;
}
.progreso span { display: block; height: 100%; background: var(--marca); border-radius: 999px; }

.tarjeta-datos { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.tarjeta-datos .movimiento { font-size: .78rem; color: var(--texto-tenue); }

/* --- protocolos que no aplican: al final, plegados, pero presentes --- */
.no-aplican {
  border: 1px solid var(--divisor); border-radius: 10px;
  background: var(--neutro-fondo); padding: .8rem 1rem; margin-top: 1.5rem;
}
.no-aplican summary { color: var(--texto-tenue); font-size: .9rem; }
.no-aplica-fila {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .7rem 0; border-top: 1px solid var(--divisor);
}
.no-aplica-fila:first-of-type { margin-top: .6rem; }
.no-aplica-fila > div { flex: 1; }
.no-aplica-fila p { margin: 0; }
.no-aplica-fila .tarjeta-icono { color: var(--texto-tenue); }
.justificacion { font-size: .82rem; color: var(--texto-tenue); margin-top: .15rem !important; }

/* =====================================================================
   CHECKLIST de un protocolo
   ===================================================================== */
.checklist-cabecera {
  display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap;
  padding-bottom: 1rem; border-bottom: 1px solid var(--divisor); margin-bottom: .8rem;
}
.checklist-cabecera h1 { margin: 0; }
.checklist-cabecera > div { flex: 1; min-width: 12rem; }
.vencimiento { margin: 0; text-align: right; }
.vencimiento dt {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-tenue); margin-bottom: .25rem;
}
.vencimiento dd { margin: 0; display: flex; gap: .5rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.checklist-avance { color: var(--texto-tenue); }

.boton-secundario { background: var(--superficie); color: var(--marca); }
.boton-secundario:hover { background: var(--marca-suave); }

.boton-enlace {
  display: inline-block; padding: .4rem .9rem; border-radius: 4px;
  border: 1px solid var(--marca); background: var(--marca); color: #fff;
  text-decoration: none; font-size: .92rem; font-weight: 600;
}
.boton-enlace:hover { background: #0C3E4B; }

/* ---------- carga de evidencia dentro del checklist ---------- */
/* Al pie del bloque del ítem: el enlace a la izquierda y la carga alineada a
   la derecha, en la misma línea. La divisoria que separa del ítem siguiente es
   el borde superior del siguiente, así que esto queda dentro del ítem. */
.item-acciones {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  justify-content: space-between;
  margin-top: .6rem;
}
.subir { display: flex; align-items: center; gap: .5rem; margin: 0 0 0 auto; }
.subir input[type="file"] {
  font-size: .82rem; max-width: 15rem; padding: .2rem;
  border: 1px dashed var(--divisor-firme); background: var(--fondo);
}
.subir input[type="file"]::file-selector-button {
  font: inherit; font-size: .8rem; margin-right: .5rem; padding: .18rem .55rem;
  border: 1px solid var(--divisor-firme); border-radius: 4px;
  background: var(--superficie); color: var(--marca); cursor: pointer;
}
.subir button { padding: .25rem .8rem; font-size: .85rem; }
.item-acciones > a { font-size: .85rem; }

@media (max-width: 34rem) {
  /* En pantalla angosta no caben en una línea: la carga baja completa. */
  .item-acciones { justify-content: flex-start; }
  .subir { width: 100%; margin-left: 0; }
  .subir input[type="file"] { flex: 1; min-width: 0; }
}

/* =====================================================================
   FICHA DEL ÍTEM
   Etiqueta ARRIBA del campo, no al costado: puesta al lado, el texto
   quedaba flotando a media altura del cuadro de texto.
   ===================================================================== */
.ficha-cabecera { margin-bottom: 1.4rem; }
.ficha-cabecera h1 { margin: 0 0 .4rem; }
.ficha-estado { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0; }

.bloque {
  background: var(--superficie);
  border: 1px solid var(--divisor);
  border-radius: 8px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.1rem;          /* separación entre secciones */
}
.bloque > :last-child { margin-bottom: 0; }

.bloque h2 {
  margin: 0 0 .7rem;
  font-size: .82rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--texto-tenue);
}

/* Aviso de corrección pendiente del vencimiento.
   Va despues de '.bloque h2' y no antes: tienen la misma especificidad, asi
   que manda el orden en el archivo. Puesto antes, el titulo volvia a salir en
   versalitas y el aviso se leia gritado.
   Lleva fondo, borde grueso a la izquierda y un titulo propio, no solo color:
   la senal tiene que seguir ahi en escala de grises. */
.aviso-correccion {
  background: var(--pendiente-fondo);
  border-color: var(--pendiente-borde);
  border-left: 4px solid var(--pendiente);
}
.aviso-correccion h2 {
  color: var(--pendiente); text-transform: none;
  font-size: .95rem; letter-spacing: 0;
}
.aviso-inline { color: var(--pendiente); display: inline-block; margin-top: .25rem; }

/* Todo al mismo margen izquierdo: etiqueta, campo y botones. */
.campo { display: block; margin: 0; }
.campo > label {
  display: block; margin: 0 0 .3rem;
  font-size: .82rem; font-weight: 600; color: var(--texto);
}
.campo > textarea,
.campo > input[type="text"] {
  display: block; width: 100%; max-width: 44rem; margin: 0;
  font: inherit; padding: .5rem .6rem;
  border: 1px solid var(--divisor-firme); border-radius: 6px;
  background: var(--superficie); color: var(--texto);
  resize: vertical;
}
.campo .campo-control {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-top: .6rem;
}
.campo .ayuda { margin: .45rem 0 0; }

.evidencias { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .35rem; }
.evidencias li { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }

/* ---------- pestañas del protocolo ---------- */
.pestanas {
  display: flex; gap: .3rem; margin: .8rem 0 1rem;
  border-bottom: 1px solid var(--divisor);
}
.pestanas a {
  padding: .45rem .9rem; text-decoration: none; font-size: .92rem; font-weight: 600;
  color: var(--texto-tenue); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pestanas a:hover { color: var(--marca); }
.pestanas a.activa { color: var(--marca); border-bottom-color: var(--marca); }

/* Último movimiento del ítem, sin entrar a la ficha. */
.ultimo-movimiento {
  margin: .4rem 0 0; font-size: .8rem; color: var(--texto-tenue);
}