/* =========================================================
   PANEL BÁSICA
   Estructura: lateral fijo + área de trabajo.
   ========================================================= */
:root{
  --ink:#141412;
  --lateral:#3a3a36;          /* gris oscuro, no negro */
  --lateral-hover:#4a4a45;
  --lateral-linea:rgba(255,255,255,.12);
  --paper:#fff;
  --bg:#f6f6f4;
  --line:#e4e4e0;
  --linea-fuerte:#d6d6d1;
  --grey:#6b6b66;
  --arena:#f2f1ec;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Jost',Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

/* =========================================================
   LATERAL
   ========================================================= */
.con-panel{display:grid;grid-template-columns:258px 1fr;min-height:100vh}

.lateral{
  background:var(--lateral);color:#fff;
  padding:32px 0;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.lateral .marca{display:block;padding:0 26px 26px;margin-bottom:8px;border-bottom:1px solid var(--lateral-linea)}
.lateral .marca img{height:24px;width:auto;filter:invert(1) brightness(1.6);display:block;margin-bottom:10px}
.lateral .marca span{
  font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.5)
}

.lateral nav{display:flex;flex-direction:column;flex:1;padding-top:14px}
.lateral .grupo{
  font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.35);padding:0 26px;margin:22px 0 10px
}
.lateral .grupo:first-child{margin-top:0}
.lateral nav a{
  display:block;padding:12px 26px;
  font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
  border-left:3px solid transparent;
  transition:background .18s,color .18s,border-color .18s;
}
.lateral nav a:hover{background:var(--lateral-hover);color:#fff}
.lateral nav a.on{background:rgba(255,255,255,.1);color:#fff;border-left-color:#fff}

.pie-lateral{border-top:1px solid var(--lateral-linea);padding:20px 26px 0;margin-top:20px}
.pie-lateral .quien{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
.pie-lateral .rol{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:14px}
.pie-lateral .salir{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.pie-lateral .salir:hover{color:#fff}

/* =========================================================
   ÁREA DE TRABAJO
   ========================================================= */
.area{padding:0 0 90px;max-width:none}
.area > h1:first-child,
.area > .sub{padding-left:56px;padding-right:56px}

/* encabezado de página */
h1{
  font-size:1.55rem;font-weight:500;letter-spacing:.02em;
  padding:46px 56px 0;margin:0
}
.sub{
  color:var(--grey);font-size:.92rem;
  padding:6px 56px 28px;margin:0;
  border-bottom:1px solid var(--line);
}
.area > *:not(h1):not(.sub){margin-left:56px;margin-right:56px}
.area > form,.area > .tabs,.area > .resumen,.area > .grilla,.area > .tarjeta{margin-top:32px}

h2{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);
  font-weight:500;margin-bottom:22px;padding-bottom:12px;border-bottom:1px solid var(--line)}
h3{font-size:1.02rem;font-weight:500;margin-bottom:4px;letter-spacing:.01em}
.meta{color:var(--grey);font-size:.82rem}

/* =========================================================
   BLOQUES
   ========================================================= */
.tarjeta{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:30px 32px;margin-bottom:22px;display:block}
.tarjeta.destaque{border-color:var(--ink)}
a.tarjeta{transition:border-color .18s,box-shadow .18s}
a.tarjeta:hover{border-color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.05)}
.grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;margin-bottom:34px}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:22px}

.resumen{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-bottom:34px}
.dato{background:var(--paper);padding:26px 28px}
.dato .cifra{font-size:2.1rem;font-weight:400;line-height:1;letter-spacing:-.02em}
.dato .rotulo{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);margin-top:10px}
.dato.alerta{background:var(--ink);color:#fff}
.dato.alerta .rotulo{color:rgba(255,255,255,.55)}

/* =========================================================
   FORMULARIOS
   ========================================================= */
label{display:block;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);margin-bottom:8px}
input,textarea,select{
  width:100%;border:1px solid var(--line);border-radius:4px;padding:12px 14px;
  font:inherit;font-size:.94rem;background:#fff;margin-bottom:0
}
input:focus,textarea:focus{outline:none;border-color:var(--ink)}
button,.btn{
  display:inline-block;background:var(--ink);color:#fff;border:0;border-radius:3px;
  padding:14px 32px;font:inherit;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  cursor:pointer;text-align:center;transition:background .2s
}
button:hover,.btn:hover{background:#000}
button.ghost{background:none;color:var(--ink);border:1px solid var(--linea-fuerte)}
button.ghost:hover{background:var(--arena)}
.fila{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.fila input{flex:1;min-width:170px}
form .campo + .campo{margin-top:22px}

/* =========================================================
   LISTAS Y ESTADOS
   ========================================================= */
.lista{list-style:none}
.lista li{padding:18px 0;border-bottom:1px solid var(--line)}
.lista li:last-child{border-bottom:0;padding-bottom:0}
.lista .meta{display:block;margin-top:3px}
.chip{display:inline-block;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  padding:6px 13px;border-radius:2px;background:var(--arena);border:1px solid var(--line);margin-top:10px}
.chip.pendiente{background:#fbf3e4;border-color:#ecdcbb}
.chip.aprobada{background:#eef3ec;border-color:#d3e0cf}
.chip.cambios{background:#f9ecec;border-color:#e8cfcf}
.thumb{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;margin-bottom:14px}
.visor{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:16px;margin:22px 0}
.visor img,.visor video{width:100%;border-radius:4px;display:block}
.charla{list-style:none;display:flex;flex-direction:column;gap:14px;margin-bottom:24px}
.charla li{background:var(--arena);border-radius:4px;padding:14px 18px}
.charla li.equipo{background:var(--bg);border-left:2px solid var(--ink)}
.charla strong{font-size:.86rem;margin-right:10px}
.aviso{background:var(--arena);border-left:2px solid var(--ink);padding:14px 18px;
  border-radius:3px;margin:0 0 24px;font-size:.9rem}
.aviso.err{background:#f9ecec;border-color:#b44}
.volver{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);display:inline-block;margin-bottom:14px}
.volver:hover{color:var(--ink)}
.tip{font-size:.8rem;color:var(--grey);margin-top:14px}
.vacio{color:var(--grey);font-size:.92rem}

/* =========================================================
   CONTENIDO WEB
   ========================================================= */
.tabs{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--line);margin-bottom:0}
.tabs a{
  padding:14px 20px;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);border-bottom:2px solid transparent;margin-bottom:-1px
}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--ink);border-bottom-color:var(--ink)}

/* imágenes: una tarjeta por fila, con la miniatura a la izquierda */
.fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:0}
.foto{
  display:grid;grid-template-columns:132px 1fr;gap:22px;align-items:center;
  padding:22px 0;border-bottom:1px solid var(--line)
}
.foto img{width:132px;height:96px;object-fit:cover;border-radius:4px;background:var(--arena)}
.foto img.vacia{opacity:.2}
.foto strong{display:block;font-size:.95rem;font-weight:500;margin-bottom:2px}
.foto .meta{margin-bottom:12px}
.foto input[type=file]{font-size:.78rem;padding:8px;background:var(--bg);border-radius:3px}

/* textos: dos columnas en pantallas anchas */
.campos{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:26px 34px}
.campo textarea{min-height:96px;resize:vertical}
.guardar{
  position:sticky;bottom:0;background:var(--bg);
  border-top:1px solid var(--line);padding:20px 0;margin-top:34px
}

/* =========================================================
   ACCESO
   ========================================================= */
.sin-panel{display:grid;place-items:center;min-height:100vh;background:var(--lateral)}
.login{width:100%;max-width:400px;padding:20px}
.login-caja{background:var(--paper);padding:46px 42px;border-radius:6px}
.login-logo{height:28px;width:auto;display:block;margin-bottom:12px}
.login-tag{font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--grey);margin-bottom:34px}
.login-caja label{margin-top:18px}
.login-caja label:first-of-type{margin-top:0}
.login-caja button{width:100%;margin-top:28px}
.login-pie{text-align:center;color:rgba(255,255,255,.3);font-size:.66rem;
  letter-spacing:.24em;text-transform:uppercase;margin-top:22px}

@media(max-width:900px){
  .con-panel{grid-template-columns:1fr}
  .lateral{position:static;height:auto;padding:20px 0}
  .lateral nav{flex-direction:row;flex-wrap:wrap;padding:0 14px}
  .lateral nav a{border-left:0;border-bottom:2px solid transparent;padding:10px 12px}
  .lateral nav a.on{border-left:0;border-bottom-color:#fff}
  .lateral .grupo{display:none}
  h1,.sub{padding-left:22px;padding-right:22px}
  .area > *:not(h1):not(.sub){margin-left:22px;margin-right:22px}
  .dos,.fotos{grid-template-columns:1fr}
}