/* ============================================================
   VISTA DE NOTAS de una carta (ficha.js)
   ============================================================ */
dialog.ficha-notas {
  width: min(800px, 94vw); max-height: min(90vh, 900px); padding: 0; overflow: hidden;
  border-radius: 10px; border-color: var(--linea-fuerte);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .75), 0 0 0 1px rgba(92, 242, 154, .06);
}
dialog.ficha-notas[open] { display: flex; }
/* el tablero se difumina y oscurece detrás */
dialog.ficha-notas::backdrop { background: rgba(3, 6, 8, .6); backdrop-filter: blur(6px) saturate(.85); }
dialog.ficha-notas.llama { animation: fn-llama .45s ease; }
@keyframes fn-llama { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
#form-ficha { display: flex; flex-direction: column; width: 100%; min-height: 0; }

/* cabecera: número de fila, papel y lo que dice el Intérprete */
.fn-cab {
  display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px 14px 22px;
  border-bottom: 1px solid var(--linea); background: rgba(0, 0, 0, .18);
}
.fn-fila {
  flex: none; min-width: 34px; height: 34px; padding: 0 6px; box-sizing: border-box; display: grid; place-items: center;
  border: 1px solid var(--linea-fuerte); border-radius: 6px; font-size: .95rem; font-variant-numeric: tabular-nums; color: var(--texto);
}
.fn-titulos { flex: 1; min-width: 0; }
dialog .fn-titulos h3 { margin: 0 0 4px; font-size: 1rem; }
.fn-estado { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: .76rem; line-height: 1.5; color: var(--texto-suave); }
.fn-estado i { flex: none; width: 9px; height: 9px; margin-top: 4px; border-radius: 50%; background: var(--gris); }
.fn-estado[data-estado="verde"] i { background: var(--verde); box-shadow: 0 0 8px var(--verde); }
.fn-estado[data-estado="ambar"] i { background: var(--ambar); box-shadow: 0 0 8px var(--ambar); }
.fn-estado[data-estado="rojo"] i { background: var(--rojo); box-shadow: 0 0 8px var(--rojo); }
.fn-cerrar { flex: none; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border-color: transparent; }
.fn-cerrar svg, .fn-ref-quitar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.fn-cerrar:hover { border-color: var(--linea-fuerte); }

/* cuerpo: secciones separadas por una línea fina; sólo esto se desplaza */
.fn-cuerpo { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 4px 22px 8px; }
.fn-seccion { padding: 16px 0 18px; border-bottom: 1px solid var(--linea); }
.fn-seccion:last-child { border-bottom: 0; }
dialog .fn-seccion h4, dialog .fn-seccion h4 label {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; padding: 0;
  font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-suave);
}
.fn-seccion h4 small { margin-left: auto; font-size: .68rem; font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--texto-apagado); font-variant-numeric: tabular-nums; }
.fn-ayuda { margin: 8px 0 0; font-size: .72rem; line-height: 1.5; color: var(--texto-apagado); }
.fn-dos { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 26px; }
@media (max-width: 640px) { .fn-dos { grid-template-columns: 1fr; gap: 18px; } }

/* la carta: la misma que en el tablero, sin mandos ni sangría */
.fn-carta .carta { margin: 0; padding: 12px 60px 12px 24px; cursor: default; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
.fn-carta .carta .icono { opacity: .1; }
.fn-conjuntos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; max-height: 132px; overflow: auto; padding: 2px; }
.fn-conjuntos .ficha { font-size: .82rem; cursor: pointer; }
.fn-conjuntos .polo { cursor: pointer; }
.fn-conjuntos .polo:hover, .fn-conjuntos .polo:focus-visible { background: rgba(3, 6, 8, .3); color: var(--t); outline: none; }
.fn-conjuntos .polo.elegido { outline: 1px solid var(--fosforo); outline-offset: -1px; background: rgba(92, 242, 154, .14); color: var(--t); }

/* papel: tres opciones, cada una con el color de su marca en el tablero */
.fn-papel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--linea-fuerte); border-radius: 6px; overflow: hidden; }
.fn-papel label { position: relative; margin: 0; cursor: pointer; }
.fn-papel label + label { border-left: 1px solid var(--linea-fuerte); }
.fn-papel input { position: absolute; opacity: 0; pointer-events: none; }
.fn-papel span { display: block; padding: 8px 6px; text-align: center; font-size: .8rem; color: var(--texto-suave); transition: background .15s, color .15s; }
.fn-papel label:hover span { background: rgba(92, 242, 154, .05); color: var(--texto); }
.fn-papel input:focus-visible + span { outline: 1px solid var(--fosforo); outline-offset: -3px; }
.fn-papel .papel-premisa.puesto span { background: rgba(92, 242, 154, .14); color: var(--fosforo); font-weight: 600; }
.fn-papel .papel-supuesto.puesto span { background: color-mix(in srgb, var(--texto-suave) 26%, transparent); color: #e6f0ea; font-weight: 600; }
.fn-papel .papel-tesis.puesto span { background: rgba(232, 196, 106, .18); color: var(--oro); font-weight: 600; }
dialog.ficha-notas input:not([type="radio"]), dialog.ficha-notas textarea { margin: 0; }

/* referencias: una fila por referencia, cuatro campos y quitar */
.fn-refs { display: grid; gap: 6px; }
.fn-refs.vacia { display: none; }
.fn-ref-cab {
  display: grid; grid-template-columns: 1.1fr 1.9fr .55fr 1.2fr 28px; gap: 6px; margin-bottom: 4px;
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-apagado);
}
.fn-ref-cab.oculto { display: none; }
.fn-ref { display: grid; grid-template-columns: 1.1fr 1.9fr .55fr 1.2fr 28px; gap: 6px; align-items: center; }
dialog .fn-ref input { width: 100%; box-sizing: border-box; padding: 6px 8px; font-size: .8rem; }
.fn-ref-quitar { width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border-color: transparent; color: var(--texto-suave); }
.fn-ref-quitar:hover { color: var(--rojo); border-color: rgba(255, 92, 108, .4) !important; background: rgba(255, 92, 108, .1) !important; }
.fn-mas { margin-top: 10px; border-style: dashed; color: var(--texto-suave); }
.fn-mas:hover { color: var(--texto); }
@media (max-width: 640px) {
  .fn-ref-cab { display: none; }
  .fn-ref { grid-template-columns: 1fr 1fr 28px; padding: 8px; border: 1px solid var(--linea); border-radius: 6px; }
  .fn-ref input[data-campo="obra"] { grid-column: 1 / 3; grid-row: 1; }
  .fn-ref-quitar { grid-column: 3; grid-row: 1; }
}

/* notas */
dialog.ficha-notas textarea#ficha-notas { width: 100%; box-sizing: border-box; min-height: 8em; line-height: 1.55; font-size: .84rem; resize: vertical; }

/* pie: siempre a la vista */
.fn-pie { display: flex; align-items: center; gap: 8px; padding: 12px 20px 14px 22px; border-top: 1px solid var(--linea); background: rgba(0, 0, 0, .22); }
.fn-aviso { flex: 1; min-width: 0; font-size: .74rem; color: var(--ambar); opacity: 0; transition: opacity .2s; text-align: right; }
.fn-aviso.visible { opacity: 1; }
#ficha-duplicar { color: var(--texto-suave); }
#ficha-duplicar:hover { color: var(--texto); }

/* en el tablero: la carta que tiene notas o referencias lo dice en su botón □ */
.carta .mandos .maximizar.con-notas { position: relative; color: var(--oro); }
.carta .mandos .maximizar.con-notas::after {
  content: ""; position: absolute; right: 2px; top: 2px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--oro); box-shadow: 0 0 5px var(--oro);
}
.carta:not(:hover):not(:focus-within) .mandos.ventana:has(.con-notas) { opacity: .75; }
/* la sección calculada: una ficha técnica de sólo lectura */
.fn-calculada { background: linear-gradient(180deg, rgba(92, 242, 154, .035), transparent 70%); margin: 0 -22px; padding-left: 22px; padding-right: 22px; }
.fn-datos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 9px 18px; margin: 0; font-size: .8rem; line-height: 1.55; }
.fn-datos dt { color: var(--texto-apagado); font-size: .72rem; padding-top: 1px; }
.fn-datos dd { margin: 0; color: var(--texto); }
.fn-luz { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; background: var(--gris); }
.fn-luz[data-estado="verde"] { background: var(--verde); box-shadow: 0 0 6px var(--verde); }
.fn-luz[data-estado="ambar"] { background: var(--ambar); box-shadow: 0 0 6px var(--ambar); }
.fn-luz[data-estado="rojo"] { background: var(--rojo); box-shadow: 0 0 6px var(--rojo); }
.fn-condiciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.fn-condiciones li { padding-left: 10px; border-left: 2px solid var(--linea-fuerte); }
.fn-condiciones li.imprescindible { border-left-color: var(--fosforo); }
.fn-condiciones li.choque.imprescindible { border-left-color: var(--rojo); }
.fn-condiciones li.via { color: var(--texto-suave); }
dialog.ficha-notas .fila-cita {
  border: 1px solid var(--linea-fuerte); border-radius: 3px; background: rgba(0, 0, 0, .25); color: var(--texto);
  font: inherit; font-size: .72rem; font-variant-numeric: tabular-nums; line-height: 1.3; padding: 0 5px; margin: 0 1px; cursor: pointer; vertical-align: 1px;
}
dialog.ficha-notas .fila-cita:hover, dialog.ficha-notas .fila-cita:focus-visible { border-color: var(--fosforo); color: var(--fosforo); background: rgba(92, 242, 154, .08); }
@media (max-width: 640px) { .fn-datos { grid-template-columns: 1fr; gap: 2px; } .fn-datos dd { margin-bottom: 8px; } }
@media (prefers-reduced-motion: reduce) { dialog.ficha-notas.llama { animation: none; } }