/* /calculadora-vida (01/11/2026, docs/calculadora-vida/v2): el mundo del HUD TDS1 — roble, pergamino y oro — con la
   barra de vida del juego como pieza central y los números con el Caption del TDS1. Todo adentro de .cv para no tocar
   el resto del sitio. La gótica es UnifrakturMaguntia (OFL, public/fonts/OFL-UnifrakturMaguntia.txt). */
@font-face { font-family: "Gotica Arduz"; src: url(/s/fonts/unifraktur-maguntia.ttf) format("truetype"); font-display: swap; }
.cv {
  --cv-roble: #1d130b;
  --cv-roble2: #2a1b10;
  --cv-veta: #352214;
  --cv-pergamino: #ead9b8;
  --cv-tinta: #b9a27c;
  --cv-sangre: #c8281e;
  --cv-sangre-osc: #6e0f0a;
  --cv-oro: #d7a64e;
  --cv-cobre: #5fae78;
  --cv-borde: #4a3220;
  max-width: 760px; margin: 0 auto 48px; padding: 28px 22px 32px; display: grid; gap: 24px;
  color: var(--cv-pergamino); font: 16px/1.55 Tahoma, "Segoe UI", Verdana, sans-serif;
  background: var(--cv-roble);
  background-image: repeating-linear-gradient(176deg, rgba(255,255,255,.012) 0 2px, transparent 2px 9px),
                    repeating-linear-gradient(4deg, rgba(0,0,0,.18) 0 1px, transparent 1px 23px);
  border: 1px solid var(--cv-borde); border-radius: 6px;
}
.cv * { box-sizing: border-box; }
.cv h1 { font: 400 clamp(38px, 8vw, 60px)/1 "Gotica Arduz", "Old English Text MT", serif; color: var(--cv-oro); margin: 0;
  text-shadow: 0 2px 0 #000, 0 0 18px rgba(215,166,78,.18); letter-spacing: 0; text-transform: none; }
.cv .cv-bajada { color: var(--cv-tinta); max-width: 60ch; margin: 6px 0 0; }
.cv .cv-pj { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, .9fr); gap: 10px; background: var(--cv-roble2);
  border: 1px solid var(--cv-borde); border-top-color: #6b4a2a; padding: 14px; border-radius: 4px; }
.cv .cv-pj label { display: grid; gap: 4px; font-size: 13px; color: var(--cv-tinta); text-transform: none; letter-spacing: 0; }
.cv .cv-pj select, .cv .cv-pj input { font: 700 16px/1.2 Tahoma, "Segoe UI", sans-serif; color: var(--cv-pergamino); background: #120b06;
  border: 1px solid var(--cv-borde); border-radius: 3px; padding: 10px; width: 100%; min-width: 0; box-shadow: inset 0 2px 4px rgba(0,0,0,.6); }   /* app.css le pone min-width 180 a los select */
.cv .cv-pj select:focus-visible, .cv .cv-pj input:focus-visible { outline: 2px solid var(--cv-oro); outline-offset: 1px; }
.cv .cv-vida { display: grid; gap: 10px; }
.cv .cv-quien { font-size: 18px; margin: 0; }
.cv .cv-quien b { color: var(--cv-oro); }
.cv .cv-barra { position: relative; height: 46px; background: #0d0704; border: 2px solid #000; outline: 1px solid var(--cv-borde);
  border-radius: 3px; overflow: hidden; box-shadow: inset 0 3px 8px rgba(0,0,0,.8); }
.cv .cv-relleno { position: absolute; inset: 0 auto 0 0; width: 0;
  background: linear-gradient(180deg, #ff6b5c 0%, var(--cv-sangre) 45%, var(--cv-sangre-osc) 100%);
  transition: width .45s cubic-bezier(.2,.7,.2,1); }
.cv .cv-sobra { position: absolute; top: 0; bottom: 0;
  background: repeating-linear-gradient(135deg, rgba(95,174,120,.85) 0 6px, rgba(60,130,85,.85) 6px 12px);
  transition: left .45s cubic-bezier(.2,.7,.2,1), width .45s cubic-bezier(.2,.7,.2,1); }
.cv .cv-marca { position: absolute; top: -2px; bottom: -2px; width: 3px; background: var(--cv-oro);
  box-shadow: 0 0 6px rgba(215,166,78,.9); transition: left .45s cubic-bezier(.2,.7,.2,1); }
.cv .cv-cap { font: 700 22px/1 Tahoma, "Segoe UI", sans-serif; color: #fff;
  text-shadow: 3px 3px 0 #808080, -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, -1px 0 0 #000, 1px 0 0 #000,
               -1px 1px 0 #000, 0 1px 0 #000, 1px 1px 0 #000; }
.cv .cv-barra .cv-cap { position: absolute; inset: 0; display: grid; place-items: center; }
.cv .cv-escala { position: relative; height: 18px; font-size: 13px; color: var(--cv-tinta); }
.cv .cv-escala span { position: absolute; transform: translateX(-50%); white-space: nowrap; transition: left .45s cubic-bezier(.2,.7,.2,1); }
.cv .cv-escala .cv-j { color: var(--cv-oro); }
.cv .cv-veredicto { font-size: 17px; margin: 0; }
.cv .cv-veredicto.bien { color: var(--cv-cobre); }
.cv .cv-veredicto.mal { color: #ef7a64; }
.cv .cv-veredicto.justo { color: var(--cv-oro); }
.cv .cv-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--cv-borde); border-bottom: 1px solid var(--cv-borde); }
.cv .cv-num { padding: 14px 4px; display: grid; gap: 6px; }
.cv .cv-num + .cv-num { border-left: 1px solid var(--cv-borde); padding-left: 16px; }
.cv .cv-num small { color: var(--cv-tinta); font-size: 13px; }
.cv .cv-num .cv-cap { font-size: 30px; }
.cv .cv-cap.bien { color: #b9f0c8; }
.cv .cv-cap.mal { color: #ffc3b8; }
.cv .cv-dado { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--cv-tinta); font-size: 15px; }
.cv .cv-caras { display: flex; gap: 6px; }
.cv .cv-cara { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--cv-borde); border-radius: 6px;
  background: #140c07; font: 700 15px/1 Tahoma, sans-serif; color: var(--cv-pergamino); }
.cv details { border: 1px solid var(--cv-borde); border-radius: 4px; background: var(--cv-roble2); }
.cv summary { cursor: pointer; padding: 12px 14px; color: var(--cv-pergamino); }
.cv summary:focus-visible { outline: 2px solid var(--cv-oro); outline-offset: 2px; }
.cv .cv-tabla { overflow-x: auto; padding: 0 14px 14px; }
.cv table { border-collapse: collapse; width: 100%; font-size: 15px; font-variant-numeric: tabular-nums; }
.cv th, .cv td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--cv-veta); }
.cv th:first-child, .cv td:first-child { text-align: left; }
.cv th { color: var(--cv-tinta); font-weight: 400; font-size: 13px; text-transform: none; letter-spacing: 0; }
.cv tr.yo td { color: var(--cv-oro); font-weight: 700; }
.cv .cv-nota { color: var(--cv-tinta); font-size: 14px; max-width: 64ch; margin: 0; }
.cv .cv-nota b { color: var(--cv-pergamino); }
/* el link de la ficha del personaje */
.cv-link { font-size: .85rem; margin-left: 8px; }
@media (max-width: 600px) {
  .cv { padding: 22px 14px 26px; }
  .cv .cv-pj { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cv .cv-nums { grid-template-columns: 1fr; }
  .cv .cv-num + .cv-num { border-left: 0; border-top: 1px solid var(--cv-borde); padding-left: 4px; }
  .cv .cv-cap { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .cv .cv-relleno, .cv .cv-sobra, .cv .cv-marca, .cv .cv-escala span { transition: none; } }