/* TYNDYN web — estilos de interfaz real (formularios, paneles, avisos).
   Complementa a styles.css (base del esqueleto). Se carga en las páginas
   que ya tienen contenido funcional. */

.intro{max-width:60ch;text-align:justify;margin:0 0 2rem}

/* ---- formularios ---- */
.form-card{
  max-width:460px;display:flex;flex-direction:column;gap:1.15rem;
}
.form-card fieldset{
  border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:1.15rem;
}
.form-card legend{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;
  font-weight:700;color:var(--ambar-osc);padding:0;margin:0 0 .2rem;
}
.field{display:flex;flex-direction:column;gap:.35rem}
.field label{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;
  font-weight:700;color:var(--gris-cl);
}
.field label .req{color:var(--ambar-osc)}
.field input,.field textarea,.field select{
  font:inherit;padding:.6rem .7rem;border:1px solid var(--linea);
  border-radius:4px;background:var(--fondo);color:var(--gris);width:100%;
}
.field textarea{min-height:5rem;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:2px solid var(--ambar);outline-offset:1px;border-color:var(--ambar);
}
.field .hint{font-size:.74rem;color:var(--gris-cl)}

.btn{
  font-family:inherit;font-weight:700;font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer;
  padding:.7rem 1.4rem;border:2px solid var(--tinta);background:var(--tinta);
  color:#fff;border-radius:4px;align-self:flex-start;
  transition:background .15s ease,border-color .15s ease;
}
.btn:hover{background:var(--ambar-osc);border-color:var(--ambar-osc)}
.btn[disabled]{opacity:.55;cursor:progress}
.btn-sec{background:transparent;color:var(--tinta)}
.btn-sec:hover{background:transparent;color:var(--ambar-osc);border-color:var(--ambar-osc)}

.form-foot{font-size:.85rem;color:var(--gris-cl)}
.form-foot a{color:var(--ambar-osc)}

/* filas de campos en paralelo (fechas, plazas) */
.field-row{display:flex;flex-wrap:wrap;gap:1.15rem}
.field-row .field{flex:1;min-width:130px}
.btn-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.4rem}

/* ---- avisos ---- */
.alert{padding:.8rem 1rem;border-radius:4px;font-size:.88rem;margin:0 0 1.2rem}
.alert[hidden]{display:none}
.alert-error{background:#fbeae5;border:1px solid #e0a48c;color:#8a3d21}
.alert-ok{background:#eef6ec;border:1px solid #9cc79a;color:#356b32}
.alert-info{background:var(--fondo-cl);border:1px solid var(--linea);color:var(--gris)}

/* ---- panel ---- */
.panel-head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1rem;margin-bottom:.4rem;
}
.pill{
  display:inline-block;padding:.2rem .6rem;border-radius:999px;font-size:.66rem;
  text-transform:uppercase;letter-spacing:.1em;border:1px solid var(--linea);
  color:var(--gris-cl);
}
.pill-pendiente{border-color:#e0a233;color:#a9741a}
.pill-validada{border-color:#9cc79a;color:#356b32}
.pill-suspendida{border-color:#e0a48c;color:#8a3d21}

.stat-row{display:flex;flex-wrap:wrap;gap:2px;background:var(--linea);margin:1.6rem 0 2rem}
.stat{background:var(--fondo);padding:1rem 1.2rem;flex:1;min-width:120px}
.stat .n{font-size:1.6rem;font-weight:700;color:var(--tinta);line-height:1}
.stat .k{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gris-cl);margin-top:.3rem}

.meta-list{list-style:none;padding:0;margin:1.2rem 0 0;display:flex;flex-direction:column}
.meta-list li{
  display:flex;justify-content:space-between;gap:1rem;
  border-top:1px solid var(--linea);padding:.55rem 0;font-size:.88rem;
}
.meta-list li:last-child{border-bottom:1px solid var(--linea)}
.meta-list .k{color:var(--gris-cl)}

/* listas de publicaciones (agencia y admin) */
.lista-pub{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;background:var(--linea)}
.lista-pub li{background:var(--fondo);padding:1rem 1.1rem}
.pub-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1rem}
.pub-nombre{font-weight:700;color:var(--tinta);text-decoration:none}
.pub-nombre:hover{color:var(--ambar-osc)}
.pub-meta{margin:.35rem 0 0;font-size:.85rem;color:var(--gris-cl)}
.pub-nota{margin:.5rem 0 0;font-size:.85rem;color:var(--ambar-osc);border-left:2px solid var(--ambar);padding-left:.6rem}
.pill-borrador{border-color:var(--gris-cl);color:var(--gris-cl)}
.pill-en_revision{border-color:#e0a233;color:#a9741a}
.pill-publicado{border-color:#9cc79a;color:#356b32}
.pill-cerrado{border-color:var(--gris-cl);color:var(--gris-cl)}
.pill-cancelado{border-color:#e0a48c;color:#8a3d21}

.galeria{display:flex;flex-wrap:wrap;gap:8px;margin:1.4rem 0}
.galeria img{width:150px;height:110px;object-fit:cover;border:1px solid var(--linea)}

.quick-links{display:flex;flex-wrap:wrap;gap:1.4rem 2rem;margin-top:2rem}
.cta{
  font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinta);text-decoration:none;border-bottom:2px solid var(--tinta);
  padding-bottom:.25rem;
}
.cta:hover{color:var(--ambar-osc);border-color:var(--ambar-osc)}

/* miniaturas de foto con botón de borrar (editar publicación) */
.foto-edit{ position:relative; display:inline-block; }
.foto-edit img{ width:150px; height:110px; object-fit:cover; border:1px solid var(--linea); display:block; }
.foto-x{
  position:absolute; top:4px; right:4px; width:22px; height:22px; border:none;
  border-radius:50%; background:rgba(20,20,20,.75); color:#fff; font-size:15px;
  line-height:1; cursor:pointer;
}
.foto-x:hover{ background:#8a3d21; }

/* botones de reordenar fotos (editar publicación) */
.foto-orden{ position:absolute; left:4px; bottom:4px; display:flex; gap:3px }
.foto-mov{
  width:20px; height:20px; padding:0; border:none; border-radius:4px;
  background:rgba(20,20,20,.72); color:#fff; font-size:13px; line-height:1; cursor:pointer;
}
.foto-mov:hover:not(:disabled){ background:var(--ambar-osc) }
.foto-mov:disabled{ opacity:.35; cursor:default }

/* zona de subida de fotos: arrastrar o seleccionar (dropzone.js) */
.dropzone-input-oculto{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;
}
.dropzone{
  border:2px dashed var(--linea); border-radius:6px; padding:1.1rem;
  background:var(--fondo); cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.dropzone:focus{ outline:2px solid var(--ambar); outline-offset:2px; }
.dropzone:hover{ border-color:var(--ambar); }
.dropzone.dropzone-activa{ border-color:var(--ambar-osc); background:var(--crema, #fdf6ec); }
.dropzone-prompt{ margin:0; font-size:.82rem; color:var(--gris-cl); text-align:center; }
.dropzone.tiene-archivos .dropzone-prompt{ margin-bottom:.7rem; }
.dropzone-lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.dropzone-lista li{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  background:var(--fondo); border:1px solid var(--linea); border-radius:4px;
  padding:.4rem .55rem; font-size:.8rem; color:var(--gris);
}
.dropzone-nombre{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dropzone-quitar{
  flex:0 0 auto; width:22px; height:22px; border:none; border-radius:50%;
  background:rgba(20,20,20,.72); color:#fff; font-size:15px; line-height:1; cursor:pointer;
}
.dropzone-quitar:hover{ background:#8a3d21; }

/* paginación de listas largas (paginacion.js) */
.paginacion{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  margin:1.6rem 0 0;
}
.paginacion-btn{
  font:inherit; font-size:.78rem; font-weight:700; letter-spacing:.06em;
  padding:.45rem .9rem; border:1px solid var(--linea); border-radius:4px;
  background:var(--fondo); color:var(--tinta); cursor:pointer;
}
.paginacion-btn:hover:not(:disabled){ border-color:var(--ambar); color:var(--ambar-osc); }
.paginacion-btn:disabled{ opacity:.4; cursor:default; }
.paginacion-info{ font-size:.78rem; color:var(--gris-cl); }