/* Panel interno del portal de propuestas. */

:root {
  color-scheme: dark;
  --fondo: #070B12;
  --panel: #0F1626;
  --panel2: #0B111D;
  --borde: #26324B;
  --borde-suave: rgba(122,162,255,.14);
  --texto: #E8EDF6;
  --apagado: #94A3BE;
  --tenue: #7C8AA8;
  --azul: #7AA2FF;
  --verde: #5BD6A0;
  --rojo: #FF8A8A;
  --ambar: #FFC96B;
}

* { box-sizing: border-box; margin: 0; }

body {
  min-height: 100dvh;
  background: radial-gradient(1200px 700px at 50% -20%, #16203A 0%, #0A0F1A 55%, #070B12 100%);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--azul); }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ── Estructura ─────────────────────────────────────────────────────────── */

.barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 20px;
  padding: 14px 24px;
  background: rgba(10,15,26,.86); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde-suave);
}
.marca { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.marca span { color: var(--azul); }
.barra nav { display: flex; gap: 4px; margin-left: 8px; }
.barra .derecha { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.tab {
  padding: 7px 14px; border-radius: 9px; border: 1px solid transparent;
  background: none; color: var(--apagado); font: inherit; font-weight: 600; cursor: pointer;
}
.tab:hover { color: var(--texto); }
.tab[aria-selected=true] { background: rgba(122,162,255,.12); border-color: var(--borde-suave); color: var(--texto); }

main { max-width: 1000px; margin: 0 auto; padding: 24px; }

.aviso {
  display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 20px; padding: 12px 16px; border-radius: 12px;
  background: rgba(255,201,107,.10); border: 1px solid rgba(255,201,107,.35); color: var(--ambar);
}
.aviso p { color: inherit; }

.cabecera-seccion {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.cabecera-seccion h2 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.cabecera-seccion .derecha { margin-left: auto; display: flex; gap: 8px; }

/* ── Tarjetas ───────────────────────────────────────────────────────────── */

.tarjetas { display: grid; gap: 12px; }

.tarjeta {
  background: var(--panel); border: 1px solid var(--borde-suave); border-radius: 14px;
  padding: 16px 18px;
}
.tarjeta.inactiva { opacity: .55; }
.tarjeta > summary { list-style: none; cursor: pointer; }
.tarjeta > summary::-webkit-details-marker { display: none; }

.fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fila .crece { flex: 1 1 auto; min-width: 0; }

.titulo { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.sub { font-size: 12.5px; color: var(--tenue); }
.sub .mono { color: var(--apagado); }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  background: rgba(122,162,255,.12); color: var(--azul); border: 1px solid var(--borde-suave);
}
.chip.gris { background: rgba(148,163,190,.10); color: var(--apagado); border-color: var(--borde); }
.chip.verde { background: rgba(91,214,160,.12); color: var(--verde); border-color: rgba(91,214,160,.3); }
.chip.roja { background: rgba(255,138,138,.12); color: var(--rojo); border-color: rgba(255,138,138,.3); }
.chip.ambar { background: rgba(255,201,107,.12); color: var(--ambar); border-color: rgba(255,201,107,.3); }

.detalle { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--borde); display: grid; gap: 16px; }
.bloque > h3 {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tenue); margin-bottom: 10px;
}

.lista { display: grid; gap: 8px; }
.item {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; background: var(--panel2); border: 1px solid var(--borde); border-radius: 10px;
}
.vacio { color: var(--tenue); font-size: 13px; padding: 10px 0; }

/* ── Controles ──────────────────────────────────────────────────────────── */

button, .boton {
  padding: 8px 14px; border-radius: 9px; border: 1px solid var(--borde);
  background: var(--panel2); color: var(--texto); font: inherit; font-weight: 600; font-size: 13px;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
button:hover, .boton:hover { border-color: var(--azul); }
button:disabled { opacity: .5; cursor: default; }
button.primario {
  background: linear-gradient(135deg, #9DBBFF, #7AA2FF); color: #0A0F1A; border-color: transparent;
}
button.primario:hover { filter: brightness(1.06); }
button.peligro { color: var(--rojo); }
button.peligro:hover { border-color: var(--rojo); }
button.chico { padding: 5px 10px; font-size: 12px; }
button.icono { padding: 5px 9px; font-size: 13px; line-height: 1; }

input, select, textarea {
  padding: 9px 12px; border-radius: 9px; border: 1px solid var(--borde);
  background: var(--panel2); color: var(--texto); font: inherit; font-size: 14px; outline: none;
  width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(122,162,255,.18); }
input[type=date] { color-scheme: dark; }
label.campo { display: grid; gap: 6px; }
label.campo > span {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue);
}
.rejilla { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ── Zona de arrastre ───────────────────────────────────────────────────── */

.zona {
  border: 1.5px dashed var(--borde); border-radius: 14px; padding: 28px 20px; text-align: center;
  color: var(--tenue); background: rgba(15,22,38,.5); cursor: pointer; transition: .12s;
}
.zona:hover { border-color: var(--azul); color: var(--apagado); }
.zona.encima { border-color: var(--azul); background: rgba(122,162,255,.10); color: var(--texto); }
.zona strong { display: block; color: var(--texto); font-size: 14px; margin-bottom: 4px; }
.zona.chica { padding: 14px; font-size: 12.5px; }

/* ── Modal ──────────────────────────────────────────────────────────────── */

dialog {
  /* margin:auto lo centra; hay que reponerlo porque el reset de arriba lo pisa. */
  margin: auto;
  border: 1px solid var(--borde-suave); border-radius: 16px; padding: 0;
  background: var(--panel); color: var(--texto); max-width: 440px; width: calc(100% - 32px);
  box-shadow: 0 40px 100px -30px rgba(0,0,0,.8);
}
dialog::backdrop { background: rgba(5,8,14,.7); backdrop-filter: blur(3px); }
dialog .cuerpo { padding: 24px; display: grid; gap: 16px; }
dialog h2 { font-size: 16px; font-weight: 600; }
dialog .acciones { display: flex; gap: 8px; justify-content: flex-end; }

.codigo-grande {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 22px; font-weight: 700; letter-spacing: .1em; text-align: center;
  padding: 16px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--borde);
  color: var(--azul); user-select: all;
}

/* ── Notificaciones ─────────────────────────────────────────────────────── */

#avisos {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 60; display: grid; gap: 8px; justify-items: center; pointer-events: none;
}
.notif {
  padding: 10px 18px; border-radius: 10px; font-size: 13px; font-weight: 600;
  background: #16203A; border: 1px solid var(--borde-suave); color: var(--texto);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.8);
}
.notif.mala { border-color: rgba(255,138,138,.45); color: var(--rojo); }

/* ── Pantallas de acceso ────────────────────────────────────────────────── */

.centrado { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.caja {
  width: 100%; max-width: 420px; background: rgba(16,23,38,.88);
  border: 1px solid var(--borde-suave); border-radius: 16px; padding: 36px 32px 28px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.7);
}
.caja h1 { font-size: 16px; font-weight: 600; margin: 22px 0 6px; }
.caja p.nota { font-size: 13.5px; color: var(--apagado); }
.caja form { margin-top: 20px; display: grid; gap: 12px; }
.caja button { width: 100%; justify-content: center; padding: 12px; font-size: 15px; }
.error {
  padding: 10px 12px; font-size: 13px; border-radius: 10px;
  color: var(--rojo); background: rgba(147,20,47,.18); border: 1px solid rgba(147,20,47,.45);
}

@media (max-width: 620px) {
  .barra { flex-wrap: wrap; gap: 10px; }
  main { padding: 16px; }
}