@font-face { font-family: 'League Spartan'; font-weight: 400; src: url(/fonts/LeagueSpartan-Regular.ttf) format('truetype'); font-display: swap; }
@font-face { font-family: 'League Spartan'; font-weight: 600; src: url(/fonts/LeagueSpartan-SemiBold.ttf) format('truetype'); font-display: swap; }
@font-face { font-family: 'League Spartan'; font-weight: 700; src: url(/fonts/LeagueSpartan-Bold.ttf) format('truetype'); font-display: swap; }
@font-face { font-family: 'League Spartan'; font-weight: 800; src: url(/fonts/LeagueSpartan-ExtraBold.ttf) format('truetype'); font-display: swap; }
@font-face { font-family: 'Pinyon Script'; src: url(/fonts/PinyonScript-Regular.ttf) format('truetype'); font-display: swap; }

:root {
  --hueso: #EDE4D3;
  --hueso-claro: #F6F0E4;
  --tinta: #2A2D22;
  --tinta-suave: #5C5F52;
  --verde: #4B5531;
  --mostaza: #E3A21A;
  --linea: #D6CCB8;
  /* Color por etapa: solo tonos de la paleta (sin naranja). */
  --st-guion: #E3A21A;
  --st-grabacion: #EFCB78;
  --st-insumos: #D9C9A3;
  --st-edicion: #A3AB84;
  --st-revision: #6E7A4A;
  --st-aprobado: #4B5531;
  --st-publicado: #2A2D22;
  --radio: 14px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: var(--hueso); color: var(--tinta);
  font: 17px/1.5 'League Spartan', system-ui, sans-serif;
}
button, input { font: inherit; color: inherit; }
a { color: var(--verde); }
[hidden] { display: none !important; }
.cursiva { font-family: 'Pinyon Script', cursive; font-weight: 400; color: var(--verde); }

/* ---------- arriba ---------- */
.top {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px; background: var(--hueso);
  border-bottom: 1px solid var(--linea);
}
.logo-slot { width: 140px; height: 44px; flex: none; display: flex; align-items: center; }
.logo-slot img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tabs { display: flex; gap: 4px; flex: 1; justify-content: center; }
.tabs a {
  text-decoration: none; color: var(--tinta); font-weight: 600;
  padding: 8px 14px; border-radius: 999px;
}
.tabs a.on { background: var(--verde); color: var(--hueso-claro); }
.link { background: none; border: 0; padding: 8px; cursor: pointer; color: var(--tinta-suave); text-decoration: underline; }
@media (max-width: 860px) {
  .top { flex-wrap: wrap; gap: 8px; padding: 8px 16px; }
  .logo-slot { width: 110px; height: 36px; }
  .top .link { margin-left: auto; }
  .tabs { order: 3; width: 100%; justify-content: space-between; }
  .tabs a { flex: 1; text-align: center; padding: 8px 6px; font-size: 15px; }
}

main { max-width: 1040px; margin: 0 auto; padding: 24px 16px 64px; }
.loading, .vacio { color: var(--tinta-suave); }
h1, h2, h3 { line-height: 1.15; margin: 0; }
h1 { font-size: clamp(30px, 6vw, 44px); font-weight: 800; }
h2 { font-size: 22px; font-weight: 700; margin-bottom: 12px; }
.saludo .cursiva { font-size: 1.35em; display: block; line-height: .9; }
.sub { color: var(--tinta-suave); margin: 6px 0 0; }

/* ---------- entrada ---------- */
.entrada { max-width: 420px; margin: 8vh auto 0; }
.entrada form { margin-top: 28px; }
.entrada label { display: block; font-weight: 700; margin-bottom: 6px; }
.entrada input {
  width: 100%; padding: 14px; border-radius: 12px;
  border: 2px solid var(--verde); background: var(--hueso-claro);
}
.entrada input:focus { outline: 3px solid var(--mostaza); outline-offset: 1px; }
.btn {
  display: inline-block; border: 0; cursor: pointer; text-decoration: none;
  background: var(--mostaza); color: var(--tinta); font-weight: 700;
  padding: 14px 22px; border-radius: 12px;
}
.btn:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }
.btn.lleno { width: 100%; margin-top: 16px; }
.btn.verde { background: var(--verde); color: var(--hueso-claro); }
.error { color: #7a1f1f; font-weight: 600; margin: 12px 0 0; }

/* ---------- tablero ---------- */
.mes-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 22px 0 18px; }
.mes-nav strong { white-space: nowrap; }
.mes-nav strong { font-size: 20px; min-width: 9ch; text-align: center; }
.mes-nav button {
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--verde);
  background: transparent; cursor: pointer; font-weight: 700; color: var(--verde); font-size: 20px; line-height: 1;
}
.mes-nav .hoy { width: auto; padding: 0 14px; border-radius: 999px; font-size: 15px; }

.pide {
  background: var(--verde); color: var(--hueso-claro);
  border-radius: var(--radio); padding: 22px; margin-bottom: 18px;
}
.pide h2 { color: var(--hueso-claro); }
.pide h2 .cursiva { color: var(--mostaza); font-size: 1.6em; margin-left: 4px; }
.pide ul { list-style: none; padding: 0; margin: 0 0 16px; }
.pide li { padding: 8px 0; border-bottom: 1px solid rgba(246, 240, 228, .2); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.pide li:last-child { border-bottom: 0; }
.pide .tipo { font-size: 14px; background: var(--mostaza); color: var(--tinta); border-radius: 6px; padding: 1px 8px; font-weight: 700; }
.pide.tranqui { background: var(--hueso-claro); color: var(--tinta); }
.pide.tranqui h2 { color: var(--tinta); }

.tarjetas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 18px; }
.tarjeta { background: var(--hueso-claro); border-radius: var(--radio); padding: 18px; }
.tarjeta .num { font-size: 48px; font-weight: 800; line-height: 1; }
.tarjeta .num small { font-size: 18px; font-weight: 600; color: var(--tinta-suave); }
.tarjeta p { margin: 6px 0 0; color: var(--tinta-suave); }
.barra { height: 12px; background: var(--linea); border-radius: 99px; overflow: hidden; margin-top: 12px; }
.barra span { display: block; height: 100%; background: var(--verde); }

.etapas { background: var(--hueso-claro); border-radius: var(--radio); padding: 18px; }
.etapa { display: grid; grid-template-columns: 110px 1fr 32px; gap: 10px; align-items: center; padding: 6px 0; }
.etapa .pista { height: 14px; background: var(--hueso); border-radius: 99px; overflow: hidden; }
.etapa .pista span { display: block; height: 100%; border-radius: 99px; }
.etapa b { text-align: right; }

.punto { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; }

/* ---------- calendario ---------- */
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; color: var(--tinta-suave); margin-bottom: 14px; }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal .dia-sem { font-size: 13px; font-weight: 700; text-align: center; color: var(--tinta-suave); padding-bottom: 4px; }
.cal .dia { min-width: 0; min-height: 104px; background: var(--hueso-claro); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.cal .dia.fuera { background: transparent; }
.cal .dia.hoy { outline: 2px solid var(--mostaza); }
.cal .n { font-size: 13px; font-weight: 700; color: var(--tinta-suave); }
.chip {
  display: block; width: 100%; text-align: left; border: 0; cursor: pointer;
  border-radius: 6px; padding: 3px 6px; font-size: 13px; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chip b { font-weight: 700; }
.agenda { display: none; }
.sin-fecha { margin-top: 22px; }
.sin-fecha .chip { margin-bottom: 6px; white-space: normal; padding: 8px 10px; font-size: 15px; }

@media (max-width: 760px) {
  .cal { display: none; }
  .agenda { display: block; }
  .agenda .d { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
  .agenda .d.hoy .f { color: var(--verde); }
  .agenda .f { font-weight: 800; font-size: 22px; line-height: 1; text-align: center; }
  .agenda .f small { display: block; font-size: 12px; font-weight: 600; color: var(--tinta-suave); text-transform: uppercase; }
  .agenda .chip { white-space: normal; font-size: 15px; padding: 8px 10px; margin-bottom: 6px; }
}

/* ---------- lista por aprobar ---------- */
.lista { list-style: none; padding: 0; margin: 0; }
.lista li { margin-bottom: 8px; }
.lista button {
  width: 100%; text-align: left; cursor: pointer; border: 0;
  background: var(--hueso-claro); border-radius: 12px; padding: 14px 16px;
  display: flex; gap: 12px; align-items: center;
}
.lista .t { flex: 1; }
.lista .t small { display: block; color: var(--tinta-suave); }
.aviso { background: var(--hueso-claro); border-left: 6px solid var(--mostaza); border-radius: 10px; padding: 12px 16px; margin: 0 0 18px; }

/* ---------- detalle ---------- */
dialog {
  width: min(680px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  border: 0; border-radius: var(--radio); padding: 0;
  background: var(--hueso-claro); color: var(--tinta);
}
dialog::backdrop { background: rgba(42, 45, 34, .45); }
.det { padding: 22px; }
.det header { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.det .codigo { font-weight: 700; color: var(--verde); letter-spacing: .04em; }
.det h3 { font-size: 24px; margin: 4px 0 10px; }
.det .datos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.det .datos span { background: var(--hueso); border-radius: 8px; padding: 3px 10px; font-size: 15px; }
.det h4 { margin: 18px 0 6px; font-size: 16px; }
.det .texto { white-space: pre-wrap; background: #fff8ec; border-radius: 10px; padding: 14px; font-size: 16px; }
.cerrar { background: var(--hueso); border: 0; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; font-size: 22px; line-height: 1; flex: none; }
.cal .chip { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.det .texto.rico { white-space: normal; display: flex; flex-direction: column; gap: 4px; }
.det .rico .tt { font-weight: 700; color: var(--verde); margin-top: 10px; }
.det .rico .tt:first-child { margin-top: 0; }
.det .rico .li { padding-left: 16px; position: relative; }
.det .rico .li::before { content: ''; position: absolute; left: 4px; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--mostaza); }
.det .rico hr { border: 0; border-top: 1px solid var(--linea); width: 100%; }
main, .tarjetas, .etapas, .pide { min-width: 0; }
.etapa { grid-template-columns: 96px minmax(0, 1fr) 28px; }

/* ---------- revisar un guion ---------- */
.volver { display: inline-block; text-decoration: none; font-weight: 600; margin-bottom: 14px; }
.cuenta { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .05em; }
.codigo { font-weight: 700; color: var(--verde); letter-spacing: .04em; }
.t-guion { font-size: clamp(26px, 5vw, 36px); margin: 2px 0 10px; }
main > .datos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
main > .datos span { background: var(--hueso-claro); border-radius: 8px; padding: 3px 10px; font-size: 15px; }
label.campo { display: block; font-weight: 700; margin: 20px 0 6px; }
textarea {
  width: 100%; resize: vertical; min-height: 52px;
  font: 17px/1.55 'League Spartan', system-ui, sans-serif; color: var(--tinta);
  background: #fff8ec; border: 2px solid var(--linea); border-radius: 12px; padding: 14px;
}
textarea:focus { outline: none; border-color: var(--verde); }
textarea[readonly] { background: var(--hueso-claro); color: var(--tinta-suave); }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; position: sticky; bottom: 0; padding: 12px 0; background: var(--hueso); }
.acciones .btn { flex: 1 1 200px; }
.btn.borde { background: transparent; border: 2px solid var(--verde); color: var(--verde); }
.btn:disabled { opacity: .6; cursor: wait; }
.nota { font-size: 15px; }
.lista .ir { font-weight: 700; color: var(--verde); font-size: 15px; }
#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--tinta); color: var(--hueso-claro); padding: 12px 18px; border-radius: 12px; font-weight: 600;
  transition: .25s; z-index: 20; max-width: calc(100vw - 32px);
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }
.pide li > span:last-child { flex: 1 1 220px; min-width: 0; }

/* ---------- subir archivos ---------- */
.pide .btn.claro { background: var(--hueso-claro); }
.soltar {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  margin-top: 18px; padding: 34px 16px; border: 2px dashed var(--verde); border-radius: var(--radio);
  background: var(--hueso-claro); cursor: pointer;
}
.soltar.sobre { background: #fff8ec; border-color: var(--mostaza); }
.soltar input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.soltar strong { background: var(--mostaza); color: var(--tinta); padding: 14px 26px; border-radius: 12px; font-weight: 700; }
.soltar span { color: var(--tinta-suave); font-size: 15px; }
.soltar:focus-within { outline: 3px solid var(--mostaza); outline-offset: 2px; }
.subidas { list-style: none; padding: 0; margin: 14px 0 0; }
.subidas li { background: var(--hueso-claro); border-radius: 10px; padding: 10px 14px; margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.subidas li.vacio { background: none; padding: 0; }
.subidas .n { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.subidas small { color: var(--tinta-suave); }
.subidas .barra { flex-basis: 100%; margin-top: 4px; height: 8px; }
.subidas li.ok .estado { color: var(--verde); font-weight: 700; }
.subidas li.mal .estado { color: #7a1f1f; font-weight: 600; }