:root{
  --bg:#f6f7f5; --card:#fff; --ink:#1e2a26; --muted:#62706b; --line:#e2e6e3;
  --pri:#2f7d62; --pri-d:#246049; --pri-l:#e4f2ec; --warn:#b26b00; --warn-l:#fff3dd;
  --err:#b3261e; --err-l:#fde8e6; --ok:#2f7d62; --radius:10px;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);line-height:1.45}
a{color:var(--pri-d)}
h1{font-size:1.5rem;margin:.2rem 0 1rem} h2{font-size:1.1rem;margin:0 0 .6rem}
.muted{color:var(--muted)} .small{font-size:.85rem}
/* Barra superior */
.top{background:var(--ink);color:#fff;display:flex;align-items:center;gap:1rem;padding:.55rem 1rem;flex-wrap:wrap}
.top .marca{font-weight:700;color:#fff;text-decoration:none;margin-right:auto}
.top nav{display:flex;gap:.2rem;flex-wrap:wrap}
.top nav a{color:#dfe7e3;text-decoration:none;padding:.35rem .6rem;border-radius:6px;font-size:.92rem}
.top nav a:hover,.top nav a.act{background:#ffffff1f;color:#fff}
.top form{margin:0} .top button.link{background:none;border:0;color:#dfe7e3;cursor:pointer;font:inherit}
main{max-width:1280px;margin:0 auto;padding:1.2rem 1rem 3rem}
/* Tarjetas y rejilla */
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.kpis{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin-bottom:1rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1rem}
.kpi .n{font-size:1.7rem;font-weight:700} .kpi .l{color:var(--muted);font-size:.85rem}
.kpi.alerta{border-color:#f0c889;background:var(--warn-l)}
.barra{height:8px;background:var(--line);border-radius:4px;overflow:hidden;margin-top:.4rem}
.barra span{display:block;height:100%;background:var(--pri)}
table.t{width:100%;border-collapse:collapse;font-size:.92rem}
table.t th,table.t td{text-align:left;padding:.4rem .3rem;border-bottom:1px solid var(--line);vertical-align:top}
table.t th{color:var(--muted);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.02em}
.tag{display:inline-block;padding:.05rem .45rem;border-radius:99px;font-size:.78rem;background:var(--pri-l);color:var(--pri-d)}
.tag.warn{background:var(--warn-l);color:var(--warn)} .tag.err{background:var(--err-l);color:var(--err)}
.btn{display:inline-block;background:var(--pri);color:#fff;border:0;border-radius:8px;padding:.5rem .9rem;
  font:inherit;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--pri-d)} .btn.sec{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.peq{padding:.25rem .6rem;font-size:.85rem}
.msgs{list-style:none;padding:0;margin:0 0 1rem} .msgs li{padding:.6rem .9rem;border-radius:8px;margin-bottom:.4rem;background:var(--pri-l)}
.msgs li.error{background:var(--err-l);color:var(--err)} .msgs li.warning{background:var(--warn-l)}
.acciones{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
/* Formularios */
form.f p{margin:.2rem 0 .8rem} form.f label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.2rem}
form.f input:not([type=checkbox]),form.f select,form.f textarea{width:100%;padding:.5rem;border:1px solid #cdd5d1;border-radius:8px;font:inherit}
form.f input[type=checkbox]{margin-right:.4rem} .errorlist{color:var(--err);padding-left:1rem;margin:.2rem 0}
.trampa{position:absolute;left:-9999px}
/* Portal */
.hero{background:linear-gradient(120deg,#2f7d62,#3f9a7c);color:#fff;padding:2rem 1rem}
.hero .in{max-width:1180px;margin:0 auto} .hero h1{font-size:1.9rem;margin:0 0 .3rem}
.filtros{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0}
.filtros select,.filtros input{padding:.45rem;border:1px solid #cdd5d1;border-radius:8px;font:inherit}
.animales{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.ficha{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;transition:transform .12s}
.ficha:hover{transform:translateY(-2px);box-shadow:0 6px 18px #0000000f}
.foto{aspect-ratio:4/3;background:#dfe9e4;display:flex;align-items:center;justify-content:center;
  font-size:2.6rem;font-weight:700;color:#8fb3a4;overflow:hidden;position:relative}
.foto img{width:100%;height:100%;object-fit:cover}
.foto .urg{position:absolute;top:.5rem;left:.5rem;background:var(--err);color:#fff;font-size:.75rem;padding:.1rem .5rem;border-radius:99px}
.ficha .cuerpo{padding:.7rem .8rem} .ficha h3{margin:0;font-size:1.1rem}
.detalle{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.galeria{display:grid;gap:.4rem;grid-template-columns:repeat(4,1fr);margin-top:.4rem}
.galeria img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px}
dl.datos{display:grid;grid-template-columns:auto 1fr;gap:.3rem .8rem;margin:0} dl.datos dt{color:var(--muted)}
footer.pie{text-align:center;color:var(--muted);font-size:.85rem;padding:2rem 1rem}
/* Plano */
.plano-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:1rem}
.plano{width:100%;height:auto;background:#fbfcfb;border:1px solid var(--line);border-radius:var(--radius);touch-action:none}
.plano .zona rect{stroke:#b9c4bf;stroke-width:1}
.plano .zona text{font-size:13px;font-weight:700;fill:#44524d}
.plano .ub rect{stroke:#7d8b86;stroke-width:1;cursor:pointer;rx:5}
.plano .ub text{font-size:11px;fill:#1e2a26;pointer-events:none}
.plano .ub.sel rect{stroke:#1e2a26;stroke-width:3}
.plano .ub.drop rect{stroke:var(--pri);stroke-width:3;stroke-dasharray:4 3}
.plano.editando .zona rect,.plano.editando .ub rect{cursor:move}
.plano .asa{fill:#1e2a26;cursor:nwse-resize}
.leyenda{display:flex;gap:.8rem;flex-wrap:wrap;font-size:.82rem;margin:.5rem 0}
.leyenda i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:.3rem;vertical-align:-1px;border:1px solid #0002}
.lista-animales{list-style:none;padding:0;margin:0}
.lista-animales li{display:flex;gap:.5rem;align-items:center;padding:.35rem;border-radius:8px;border:1px solid var(--line);margin-bottom:.35rem;background:#fff}
.lista-animales li[draggable=true]{cursor:grab}
.lista-animales .mini{width:34px;height:34px;border-radius:6px;background:#dfe9e4;object-fit:cover;flex:none;display:flex;align-items:center;justify-content:center;font-weight:700;color:#7aa391}
/* Impresión (facturas, contratos, certificados) */
.doc{max-width:820px;margin:1rem auto;background:#fff;padding:2.2rem;border:1px solid var(--line)}
.doc .cab{display:flex;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}
.doc .cab img{max-height:70px}
.doc table.t td.num,.doc table.t th.num{text-align:right}
.noimp{margin:1rem auto;max-width:820px;display:flex;gap:.5rem}
@media print{ .noimp,.top{display:none!important} body{background:#fff} .doc{border:0;margin:0;padding:0;max-width:none} }
@media (max-width:860px){ .plano-wrap,.detalle{grid-template-columns:1fr} }
[hidden]{display:none!important}
.card{min-width:0;overflow-x:auto}
table.t td{overflow-wrap:anywhere}
.doc table.t td.num,.doc table.t th.num{white-space:nowrap}

/* ---- medicación ---- */
.subnav{display:flex;gap:.3rem;flex-wrap:wrap;margin:0 0 1rem;border-bottom:1px solid var(--line);padding-bottom:.5rem}
.subnav a{padding:.4rem .7rem;border-radius:8px;text-decoration:none;color:var(--ink);font-size:.92rem}
.subnav a.on{background:var(--pri);color:#fff}
.subnav a:hover:not(.on){background:var(--pri-l)}
.subnav a.nuevo{margin-left:auto;border:1px solid var(--line)}
.filtros{display:flex;gap:.5rem;flex-wrap:wrap;align-items:end;margin-bottom:1rem}
.filtros label{display:flex;flex-direction:column;font-size:.8rem;color:var(--muted);gap:.15rem}
.filtros input,.filtros select{padding:.4rem .5rem;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff}
.chips-res{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.chips-res span{padding:.3rem .7rem;border-radius:99px;background:#fff;border:1px solid var(--line);font-size:.88rem}
.av{width:38px;height:38px;border-radius:50%;object-fit:cover;vertical-align:middle;background:#e4efe9;display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#6f9a88;flex:none}
.toma-est{display:flex;gap:.3rem}
.toma-est button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:.3rem .55rem;cursor:pointer;font:inherit}
.toma-est button.si.on{background:var(--pri);color:#fff;border-color:var(--pri)}
.toma-est button.no.on{background:#8a8f8c;color:#fff;border-color:#8a8f8c}
tr.dada td{background:#f1f8f4} tr.omitida td{background:#f4f4f4;color:#777} tr.atrasada td{background:#fdf0ef}
.grupo-cab td{background:var(--pri-l);font-weight:700}
@media print{ header.top,.subnav,.filtros,.no-print,.toma-est button{display:none!important} body{background:#fff} .card{border:0} }

/* arrastrar animales en el plano */
.plano .arrastrable{cursor:grab}
.plano.arrastrando, .plano.arrastrando *{cursor:grabbing!important}
.fantasma-animal{position:fixed;z-index:9999;pointer-events:none;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px}
.fantasma-animal img,.fantasma-animal span{width:48px;height:48px;border-radius:50%;object-fit:cover;border:3px solid var(--pri);background:#cfe8d9;display:flex;align-items:center;justify-content:center;font-weight:700;color:#2f5f4d;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.fantasma-animal b{font-size:.75rem;background:#fff;padding:0 .35rem;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.15)}

/* jaula ampliada (doble clic en el plano) */
.jaula-modal{position:fixed;inset:0;background:rgba(20,30,26,.55);z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem}
.jaula-modal[hidden]{display:none}
.jaula-caja{background:#fff;border-radius:14px;max-width:1100px;width:100%;max-height:92vh;overflow:auto;padding:1rem 1.2rem;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.jaula-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;position:sticky;top:-1rem;background:#fff;padding:.3rem 0 .6rem;border-bottom:1px solid var(--line);margin-bottom:.8rem}
.jaula-cab h2{margin:0}
.jaula-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1rem}
.jaula-animal{border:1px solid var(--line);border-radius:12px;padding:.7rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.25rem}
.jaula-animal .foto{display:block;width:160px;height:160px;border-radius:50%;overflow:hidden;background:#e4efe9;border:3px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.jaula-animal .foto img{width:100%;height:100%;object-fit:cover}
.jaula-animal .ini{display:flex;width:100%;height:100%;align-items:center;justify-content:center;font-size:4rem;font-weight:700;color:#8fb3a4}
.jaula-animal .nom{font-weight:700;font-size:1.05rem;margin-top:.3rem}
.jaula-animal select{margin-top:.4rem;padding:.3rem;border:1px solid var(--line);border-radius:8px;font:inherit;max-width:100%}

#capaUbic text{-webkit-user-select:none;user-select:none}
.fondo-barra{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;padding:.6rem .8rem;margin:.4rem 0}
.fondo-barra label{display:inline-flex;align-items:center;gap:.3rem;font-size:.9rem}
.fondo-barra input[type=range]{width:120px}
.plano.con-fondo .zona rect:not(.asa){fill-opacity:.25}
.plano.con-fondo .ub rect:not(.asa){fill-opacity:.82}
.plano.editando.con-fondo .ub rect:not(.asa){fill-opacity:.3;stroke:#1e2a26;stroke-width:1.5}
.plano.editando.con-fondo .zona rect:not(.asa){fill-opacity:.08}
.plano .ub polygon{stroke:#7d8b86;stroke-width:1;cursor:pointer;stroke-linejoin:round}
.plano .ub.sel polygon{stroke:#1e2a26;stroke-width:3}
.plano .ub.drop polygon{stroke:var(--pri);stroke-width:3;stroke-dasharray:4 3}
.plano.editando .ub polygon{cursor:move}
.plano.con-fondo .ub polygon{fill-opacity:.72}
.plano.editando.con-fondo .ub polygon{fill-opacity:.3;stroke:#1e2a26;stroke-width:1.5}