/* Estilos propios del panel. */
.app .cabecera .nav a { font-size: .92rem; }
.marcador-creditos {
  background: var(--fondo-alt); border: 1px solid var(--linea); border-radius: 99px;
  padding: 5px 13px; font-size: .84rem; font-weight: 600; color: var(--tinta); white-space: nowrap;
}
.marcador-creditos.poco { background: var(--ambar-fondo); border-color: #eeddb6; color: var(--ambar); }
.marcador-creditos.nada { background: var(--rojo-fondo); border-color: #f3c8c5; color: var(--rojo); }

.fila-titulo { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.filtros { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 18px; align-items: center; }
.filtros input, .filtros select { width: auto; min-width: 155px; padding: 8px 11px; font-size: .88rem; }
.filtros #f-q { min-width: 240px; flex: 1; }

.soltar {
  border: 2px dashed #c9d1dc; border-radius: 10px; padding: 26px 18px; text-align: center;
  background: var(--fondo-alt); transition: border-color .15s, background .15s;
}
.soltar.encima { border-color: var(--acento); background: #eef4fb; }

.fichero { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 8px; margin-top: 9px; font-size: .89rem; }
.fichero .nombre { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fichero .peso { color: var(--gris-claro); font-size: .82rem; white-space: nowrap; }
.fichero select { width: auto; min-width: 140px; padding: 5px 9px; font-size: .82rem; }
.fichero button { background: none; border: 0; color: var(--gris-claro); cursor: pointer; font-size: 1.15rem; line-height: 1; padding: 0 4px; }
.fichero button:hover { color: var(--rojo); }

.cabecera-veredicto { border-radius: 12px; padding: 24px 26px; color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.cabecera-veredicto.sin_indicios { background: #17663f; }
.cabecera-veredicto.revisar { background: #8a5f0a; }
.cabecera-veredicto.indicios_manipulacion { background: #8f211b; }
.cabecera-veredicto h2 { color: #fff; margin: 0; font-size: 1.55rem; }
.cabecera-veredicto .riesgo { text-align: right; }
.cabecera-veredicto .riesgo strong { font-size: 2rem; display: block; line-height: 1; }
.cabecera-veredicto .riesgo span { font-size: .82rem; opacity: .85; }

.conteos { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; margin: 18px 0; }
.conteos div { background: #fff; padding: 14px; text-align: center; }
.conteos strong { display: block; font-size: 1.5rem; color: var(--tinta); line-height: 1.1; }
.conteos span { font-size: .78rem; color: var(--gris); }

.vista-previa { position: relative; display: inline-block; max-width: 100%; border: 1px solid var(--linea); border-radius: 8px; overflow: hidden; background: #fff; }
.vista-previa img { display: block; max-width: 100%; }
.marca-zona { position: absolute; border: 2.5px solid #d1332a; background: rgba(209,51,42,.13); border-radius: 3px; box-shadow: 0 0 0 9999px rgba(15,26,48,.28); pointer-events: none; }
.marca-zona::after {
  /* A la derecha del recuadro, no encima: encima taparía la línea de al lado,
     que es justamente el dato con el que hay que comparar. */
  content: attr(data-nota); position: absolute; top: 50%; left: 100%; transform: translateY(-50%);
  margin-left: 7px; white-space: nowrap;
  background: #d1332a; color: #fff; font-size: .7rem; font-weight: 700; padding: 2px 7px; border-radius: 4px;
}

.acciones-hallazgo { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; align-items: center; }
.acciones-hallazgo button { padding: 5px 11px; font-size: .8rem; border: 1px solid var(--linea); background: #fff; border-radius: 6px; cursor: pointer; font-family: inherit; color: var(--gris); }
.acciones-hallazgo button.activo { background: var(--tinta); color: #fff; border-color: var(--tinta); font-weight: 600; }
.acciones-hallazgo button:hover:not(.activo) { background: var(--fondo-alt); color: var(--tinta); }

.clave-nueva { background: #0f1a30; color: #e6ebf4; padding: 13px 15px; border-radius: 8px; font-family: ui-monospace, monospace; font-size: .85rem; word-break: break-all; margin: 10px 0; }

.cargando { display: inline-block; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: girar .7s linear infinite; vertical-align: -2px; }
.boton.claro .cargando { border-color: rgba(20,33,61,.25); border-top-color: var(--tinta); }
@keyframes girar { to { transform: rotate(360deg); } }

@media (max-width: 700px) {
  .filtros input, .filtros select { min-width: 0; width: 100%; }
  .cabecera-veredicto .riesgo { text-align: left; }
}

/* ── El dictamen: la respuesta corta ──────────────────────────────────────
   Prioridad absoluta en la página. El análisis completo va debajo, plegado. */
.dictamen-resumen {
  margin: 8px 0 0;
  font-size: 1.02rem;
  line-height: 1.5;
  opacity: .95;
  max-width: 62ch;
}
.motivos {
  list-style: none;
  counter-reset: motivo;
  margin: 18px 0 0;
  padding: 0;
}
.motivos li {
  counter-increment: motivo;
  position: relative;
  padding: 14px 16px 14px 46px;
  border: 1px solid #e3e6ea;
  border-left: 3px solid #a8261f;
  border-radius: 6px;
  margin-bottom: 10px;
  background: #fff;
}
.motivos li::before {
  content: counter(motivo);
  position: absolute;
  left: 15px; top: 14px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #a8261f; color: #fff;
  font-size: .74rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.motivos li strong { display: block; font-size: .98rem; margin-bottom: 4px; }
.motivos li span   { display: block; color: #4a5058; font-size: .9rem; line-height: 1.5; }
.motivos li em     { display: block; margin-top: 6px; color: #7a828b; font-size: .8rem; font-style: normal; }

.cabecera-veredicto.revisar ~ .motivos li,
.cabecera-veredicto.revisar ~ .motivos li::before { border-left-color: #9a6b0b; }
.cabecera-veredicto.revisar ~ .motivos li::before { background: #9a6b0b; }

.accion-dictamen {
  margin: 16px 0 0;
  padding: 13px 16px;
  background: #f4f6f8;
  border-radius: 6px;
  font-size: .92rem;
  line-height: 1.55;
  color: #2c3138;
}

/* El análisis completo: disponible siempre, en primer plano nunca. */
.analisis-completo { margin-top: 30px; border-top: 1px solid #e3e6ea; padding-top: 6px; }
.analisis-completo > summary {
  cursor: pointer;
  padding: 13px 2px;
  font-weight: 600;
  font-size: .95rem;
  color: #2c3138;
  list-style: none;
}
.analisis-completo > summary::-webkit-details-marker { display: none; }
.analisis-completo > summary::before { content: '▸ '; color: #7a828b; }
.analisis-completo[open] > summary::before { content: '▾ '; }
.analisis-completo > summary:hover { color: #12326b; }
