:root {
  --tinta: #1b1c1f;
  --tinta-2: #4a4d55;
  --tinta-3: #7a7f89;
  --linea: #e3e4e8;
  --fondo: #f5f5f3;
  --papel: #ffffff;
  --marca: #a20b51;
  --marca-osc: #7d083e;
  --marca-suave: #f7e8ef;
  --cab: #1c1c1e;
  --verde: #1f7a4d; --verde-s: #e5f3ec;
  --ambar: #9a6200; --ambar-s: #fbf1dc;
  --gris-s: #eceef1;
  --r: 10px;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 15px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--tinta); background: var(--fondo);
  min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
main { flex: 1; }
a { color: inherit; }
code { font-family: var(--mono); font-size: .86em; }
h1, h2, h3 { letter-spacing: -.01em; }

/* cabecera */
.cab { background: var(--cab); color: #fff; display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; height: 60px; border-bottom: 3px solid var(--marca); position: sticky; top: 0; z-index: 20; }
.cab-marca { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.cab-marca img { height: 30px; }
.cab-marca span { font-weight: 600; font-size: 14px; padding-left: 14px; border-left: 1px solid #ffffff33; color: #ffffffcc; letter-spacing: .02em; }
.cab-nav { display: flex; align-items: center; gap: 4px; font-size: 14px; }
.cab-nav a { text-decoration: none; color: #ffffffb3; padding: 8px 12px; border-radius: 8px; }
.cab-nav a:hover { color: #fff; background: #ffffff14; }
.cab-nav a.activo { color: #fff; background: #ffffff1f; }
.cab-usuario { color: #ffffff80; margin-left: 14px; padding-left: 14px; border-left: 1px solid #ffffff26; }

/* pie */
.pie { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 28px; font-size: 12px;
  color: var(--tinta-3); border-top: 1px solid var(--linea); background: var(--papel); }
.pie em { font-style: normal; color: var(--marca); font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: .08em; }
.powered { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: var(--tinta-3); opacity: .75; font-size: 11px; }
.powered:hover { opacity: 1; }
.powered img { height: 15px; }

/* botones y formularios */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 600; font-size: 14px;
  padding: 9px 16px; border-radius: 8px; border: 1px solid var(--linea); background: var(--papel); color: var(--tinta);
  text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: #c9cbd1; }
.btn-principal { background: var(--marca); border-color: var(--marca); color: #fff; }
.btn-principal:hover { background: var(--marca-osc); border-color: var(--marca-osc); }
.btn:disabled { opacity: .7; cursor: wait; }
input, select, textarea { font: inherit; color: inherit; }
label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--tinta-2); }
label input, label select, label textarea { font-weight: 400; font-size: 14px; padding: 9px 11px; border: 1px solid var(--linea); border-radius: 8px; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--marca); outline-offset: -1px; border-color: transparent; }
.aviso-error { background: #fdecec; color: #9b1c1c; padding: 10px 12px; border-radius: 8px; font-size: 14px; }

/* buscador */
.buscador { padding: 28px 28px 8px; }
.buscador-inicio { padding: 11vh 28px 40px; max-width: 900px; margin: 0 auto; text-align: center; }
.buscador h1 { font-size: 34px; margin: 0 0 8px; font-weight: 700; }
.buscador .sub { color: var(--tinta-2); margin: 0 0 26px; font-size: 16px; }
.buscador:not(.buscador-inicio) h1 { font-size: 26px; }
.form-busqueda { width: 100%; }
.caja-busqueda { display: flex; gap: 8px; background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; padding: 6px;
  box-shadow: 0 1px 2px #0000000a, 0 8px 24px #0000000d; }
.caja-busqueda:focus-within { border-color: var(--marca); }
.caja-busqueda input { flex: 1; border: 0; padding: 10px 12px; font-size: 17px; background: transparent; min-width: 0; }
.caja-busqueda input:focus { outline: none; }
.caja-busqueda .btn { padding: 10px 22px; font-size: 15px; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.buscador-inicio .filtros { justify-content: center; }
.filtros select { padding: 7px 10px; border: 1px solid var(--linea); border-radius: 8px; background: var(--papel); font-size: 13px; color: var(--tinta-2); max-width: 260px; }
.ejemplos { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; font-size: 13px; }
.ejemplos span { color: var(--tinta-3); }
.ejemplos a { text-decoration: none; padding: 6px 12px; border-radius: 999px; background: var(--papel); border: 1px solid var(--linea); color: var(--tinta-2); }
.ejemplos a:hover { border-color: var(--marca); color: var(--marca); }
.cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--linea); border: 1px solid var(--linea);
  border-radius: var(--r); overflow: hidden; margin-top: 48px; }
.cifras div { background: var(--papel); padding: 16px; display: flex; flex-direction: column; }
.cifras b { font-size: 24px; font-weight: 700; }
.cifras span { font-size: 12px; color: var(--tinta-3); }

/* resultados */
.resultados { padding: 8px 28px 40px; }
.meta-resultados { color: var(--tinta-2); font-size: 14px; margin: 14px 0 16px; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.tarjeta { display: flex; flex-direction: column; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r);
  overflow: hidden; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.tarjeta:hover { border-color: var(--marca); box-shadow: 0 10px 28px #00000014; transform: translateY(-1px); }
.tarjeta-img { position: relative; background: #fff; border-bottom: 1px solid var(--linea); aspect-ratio: 16 / 10;
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tarjeta-img img { width: 100%; height: 100%; object-fit: contain; }
.match { position: absolute; top: 10px; left: 10px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; letter-spacing: .02em; }
.match-3 { background: var(--marca); color: #fff; }
.match-2 { background: #fff; color: var(--marca); border: 1px solid var(--marca); }
.tarjeta-cuerpo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tipo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--marca); }
.tarjeta h3 { margin: 0; font-size: 16px; line-height: 1.35; font-weight: 600; }
.motivo { margin: 0; font-size: 13.5px; color: var(--tinta-2); background: var(--fondo); border-left: 3px solid var(--marca); padding: 7px 10px; border-radius: 0 6px 6px 0; }
.desc { margin: 0; font-size: 13.5px; color: var(--tinta-2); }
.tarjeta-pie { margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--tinta-2); }
.proy b, .plano code { color: var(--tinta); }
.pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; margin-left: 2px; background: var(--gris-s); color: var(--tinta-2); }
.pill-construccion { background: var(--verde-s); color: var(--verde); }
.pill-aprobacion { background: var(--ambar-s); color: var(--ambar); }
.pill-propuesta { background: var(--gris-s); color: var(--tinta-2); }
.pill-sustituido { background: #fdecec; color: #9b1c1c; }
.vacio { color: var(--tinta-3); font-size: 14px; }
body.cargando .resultados { opacity: .45; transition: opacity .2s; }

/* ficha del plano */
.ficha { display: grid; grid-template-columns: minmax(0, 1fr) 440px; height: calc(100vh - 63px); }
.visor { display: flex; flex-direction: column; min-width: 0; background: #e9e9e6; }
.visor-barra { display: flex; align-items: center; gap: 18px; padding: 10px 16px; background: var(--papel); border-bottom: 1px solid var(--linea); font-size: 13px; }
.volver { text-decoration: none; color: var(--tinta-2); font-weight: 600; }
.hojas { display: flex; align-items: center; gap: 4px; color: var(--tinta-3); }
.hojas a { text-decoration: none; min-width: 26px; text-align: center; padding: 3px 6px; border-radius: 6px; color: var(--tinta-2); border: 1px solid var(--linea); }
.hojas a.activo { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.zoom { margin-left: auto; display: flex; gap: 4px; }
.zoom button { font: inherit; font-weight: 600; min-width: 34px; padding: 4px 10px; border: 1px solid var(--linea); border-radius: 6px; background: #fff; cursor: pointer; }
.visor-lienzo { flex: 1; overflow: auto; padding: 20px; cursor: grab; }
.visor-lienzo.arrastrando { cursor: grabbing; user-select: none; }
.visor-hoja { position: relative; width: 100%; margin: 0 auto; background: #fff; box-shadow: 0 2px 12px #0000001f; }
.visor-hoja img { width: 100%; height: 100%; display: block; pointer-events: none; user-select: none; }
.zona { position: absolute; border: 2px solid #a20b5166; background: #a20b510a; border-radius: 4px; transition: all .15s; }
.zona span { position: absolute; top: -11px; left: -11px; width: 22px; height: 22px; border-radius: 50%; background: var(--marca);
  color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.zona:hover { border-color: var(--marca); background: #a20b5114; }
.zona-activa { border: 3px solid var(--marca); background: #a20b511a; box-shadow: 0 0 0 9999px #1b1c1f26; z-index: 2; }

.lateral { background: var(--papel); border-left: 1px solid var(--linea); overflow-y: auto; }
.bloque { padding: 18px 22px; border-bottom: 1px solid var(--linea); }
.ruta-proy { margin: 0 0 6px; font-size: 13px; color: var(--tinta-2); }
.ruta-proy span { color: var(--tinta-3); }
.lateral h1 { font-size: 20px; margin: 0 0 6px; line-height: 1.3; }
.lateral h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); margin: 0 0 12px; }
.lateral h2 small { background: var(--gris-s); color: var(--tinta-2); padding: 1px 7px; border-radius: 999px; font-size: 11px; margin-left: 4px; }
.linea-plano { margin: 0 0 4px; font-size: 14px; }
.obra { margin: 0; font-size: 13px; color: var(--tinta-2); }
.dato { font-size: 13px; color: var(--tinta-2); margin: 10px 0 0; }
.acciones { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.elementos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.elemento { border: 1px solid var(--linea); border-radius: var(--r); padding: 12px 14px; scroll-margin-top: 12px; }
.elemento-activo { border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave); }
.elemento-cab { display: flex; gap: 10px; cursor: pointer; }
.elemento-cab .num { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--marca); color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.elemento h3 { margin: 2px 0 0; font-size: 15px; line-height: 1.35; }
.en-hoja { font-size: 11px; color: var(--tinta-3); }
.elemento > p { margin: 8px 0 0; font-size: 13.5px; color: var(--tinta-2); }
.atributos { display: grid; grid-template-columns: minmax(80px, 38%) 1fr; gap: 3px 12px; margin: 10px 0 0; font-size: 12.5px; }
.atributos dt { color: var(--tinta-3); }
.atributos dd { margin: 0; color: var(--tinta); }
.editar { margin-top: 10px; font-size: 13px; }
.editar summary { cursor: pointer; color: var(--tinta-3); }
.editar form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.nota { margin: 0; font-size: 12px; color: var(--tinta-3); }
.revs, .enlaces { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.revs li { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; border-radius: 6px; }
.revs li.actual { background: var(--fondo); }
.revs a, .enlaces a { text-decoration: none; }
.revs a:hover, .enlaces a:hover { color: var(--marca); }
.enlaces li { padding: 5px 0; border-bottom: 1px dashed var(--linea); }
.enlaces small { color: var(--tinta-3); }
.tabla-revs { margin-top: 10px; font-size: 13px; }
.tabla-revs summary { cursor: pointer; color: var(--tinta-3); }
.tabla-revs table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.tabla-revs td { padding: 4px 6px; border-bottom: 1px solid var(--linea); vertical-align: top; }

/* subir */
.subida { display: flex; gap: 10px; align-items: stretch; }
.soltar { flex: 1; flex-direction: row; align-items: center; justify-content: center; border: 2px dashed #c9cbd1; border-radius: 12px; padding: 22px;
  background: var(--papel); cursor: pointer; font-weight: 500; color: var(--tinta-2); position: relative; }
.soltar:hover { border-color: var(--marca); }
.soltar input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.subida-hoja { margin-bottom: 30px; }
.parecido { display: grid; grid-template-columns: 300px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--linea); }
.parecido-origen h3 { margin: 4px 0; font-size: 16px; }
.parecido-origen p { margin: 0; font-size: 13.5px; color: var(--tinta-2); }
.parecido-refs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.tarjeta-mini h3 { font-size: 14px; }
.tarjeta-mini .tarjeta-cuerpo { padding: 10px 12px; gap: 3px; font-size: 12.5px; color: var(--tinta-2); }

/* login */
body.login { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100vh; background: var(--papel); }
.login-marca { background: var(--cab); color: #fff; padding: 8vh 7vw; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; border-right: 4px solid var(--marca); }
.login-marca img { width: 260px; margin-bottom: 48px; position: relative; z-index: 1; }
.login-marca h1 { font-size: 36px; line-height: 1.2; margin: 0 0 18px; position: relative; z-index: 1; }
.login-marca p { color: #ffffffa6; font-size: 16px; max-width: 520px; position: relative; z-index: 1; }
.login-rejilla { position: absolute; inset: 0; background-image: linear-gradient(#ffffff0b 1px, transparent 1px), linear-gradient(90deg, #ffffff0b 1px, transparent 1px);
  background-size: 40px 40px; mask-image: radial-gradient(ellipse at 80% 90%, #000 0%, transparent 70%); }
.login-form { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; gap: 40px; }
.login-form form { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 16px; }
.login-form h2 { margin: 0 0 6px; font-size: 26px; }
.login-form .btn { padding: 11px; margin-top: 6px; }

@media (max-width: 900px) {
  .ficha { grid-template-columns: 1fr; height: auto; }
  .visor-lienzo { height: 60vh; }
  .lateral { border-left: 0; }
  body.login { grid-template-columns: 1fr; }
  .login-marca { padding: 40px 24px; }
  .cifras { grid-template-columns: repeat(2, 1fr); }
  .parecido { grid-template-columns: 1fr; }
  .cab { padding: 0 16px; } .cab-marca span, .cab-usuario { display: none; }
  .buscador, .resultados { padding-left: 16px; padding-right: 16px; }
}

.excel { margin-top: 28px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r); padding: 16px 20px; }
.excel h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); margin: 0 0 10px; }
.excel ul { margin: 0; padding: 0; list-style: none; font-size: 14px; }
.excel li { padding: 7px 0; border-bottom: 1px dashed var(--linea); }
.excel li:last-child { border-bottom: 0; }
.excel b { font-family: var(--mono); font-size: 13px; margin-right: 6px; }
.excel a { color: var(--marca); font-size: 13px; }
.excel .nota { color: var(--tinta-3); font-size: 12px; }

.sep-hoja { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); padding: 8px 2px 0; }
.sep-hoja a { color: var(--tinta-3); }

.cab-idioma { font-size: 12px !important; font-weight: 700; letter-spacing: .06em; border: 1px solid #ffffff33; margin-left: 6px; padding: 4px 8px !important; }
.login-idioma { font-size: 13px; color: var(--tinta-3); text-decoration: none; }
.login-idioma:hover { color: var(--marca); }