:root{
  --verde:#2e7d32; --verde-osc:#1b5e20; --rojo:#b3282d;
  --gris:#f4f6f5; --borde:#d8ddd9; --texto:#243029; --muted:#6b756e;
  --radio:12px; --sombra:0 2px 10px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
body{
  margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--gris); color:var(--texto); line-height:1.45;
}
.vista{min-height:100vh}
h1,h2{margin:0 0 .2em}
button{font:inherit; cursor:pointer}
input,select,textarea{font:inherit}
label{display:block; font-size:.9rem; color:var(--muted); margin-bottom:.7rem}
input,select,textarea{
  width:100%; margin-top:.25rem; padding:.6rem .7rem;
  border:1px solid var(--borde); border-radius:8px; background:#fff; color:var(--texto);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--verde); border-color:var(--verde)}
input[readonly]{background:#eef1ef; color:var(--muted)}

/* ---------- Login ---------- */
#vista-login{display:flex; align-items:center; justify-content:center; padding:1.2rem}
.login-card{
  background:#fff; border-radius:var(--radio); box-shadow:var(--sombra);
  padding:1.8rem; width:100%; max-width:380px; text-align:center;
}
.logos{display:flex; align-items:center; justify-content:center; gap:.6rem; margin-bottom:1rem; flex-wrap:wrap}
.logos img{height:38px; width:auto}
.logos .logo-principal{height:54px}
.login-card h1{color:var(--verde-osc); font-size:1.4rem}
.login-card .sub{margin:0 0 1.2rem; color:var(--muted); font-size:.9rem}
#form-login label{text-align:left}
#btn-login{
  width:100%; margin-top:.4rem; padding:.75rem; border:0; border-radius:8px;
  background:var(--verde); color:#fff; font-weight:600; font-size:1rem;
}
#btn-login:hover{background:var(--verde-osc)}

/* ---------- Barra superior ---------- */
.barra{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--verde-osc); color:#fff; padding:.6rem 1rem;
}
.barra-logos{display:flex; align-items:center; gap:.5rem}
.barra-logos img{height:32px; background:#fff; border-radius:6px; padding:2px}
.barra-user{display:flex; align-items:center; gap:.8rem; font-size:.9rem}
.btn-link{background:none; border:1px solid rgba(255,255,255,.6); color:#fff; padding:.3rem .7rem; border-radius:6px}
.btn-link:hover{background:rgba(255,255,255,.15)}

/* ---------- Contenido ---------- */
.contenido{max-width:880px; margin:0 auto; padding:1rem}
.tarjeta{background:#fff; border-radius:var(--radio); box-shadow:var(--sombra); padding:1.2rem; margin-bottom:1.2rem}
.tarjeta h2{color:var(--verde-osc); font-size:1.15rem; margin-bottom:1rem}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0 1rem}
.campo-num{max-width:none}
.campo[hidden]{display:none}

#btn-guardar{
  margin-top:.5rem; padding:.75rem 1.4rem; border:0; border-radius:8px;
  background:var(--verde); color:#fff; font-weight:600; font-size:1rem;
}
#btn-guardar:hover{background:var(--verde-osc)}
#btn-guardar:disabled{opacity:.6; cursor:default}

/* ---------- Fotos ---------- */
.fotos-preview{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.6rem}
.foto-item{position:relative; width:90px; text-align:center}
.foto-item img{width:90px; height:90px; object-fit:cover; border-radius:8px; border:1px solid var(--borde)}
.foto-item small{display:block; font-size:.7rem; color:var(--muted)}

/* ---------- Tabla ---------- */
.tabla-wrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:.9rem}
th,td{padding:.55rem .5rem; text-align:left; border-bottom:1px solid var(--borde)}
th{color:var(--muted); font-weight:600; white-space:nowrap}
tbody tr:hover{background:var(--gris)}

/* ---------- Mensajes ---------- */
.error{color:var(--rojo); font-size:.88rem; margin:.6rem 0 0}
.msg{font-size:.9rem; margin:.6rem 0 0}
.msg.ok{color:var(--verde-osc)} .msg.err{color:var(--rojo)}
.vacia{color:var(--muted); font-size:.9rem; text-align:center; padding:1rem 0}

@media (max-width:480px){
  .logos .logo-principal{height:46px}
  .contenido{padding:.7rem}
}