/* ============================================================================
   ADMIN.CSS — ESTILOS DEL PANEL DE ADMINISTRACIÓN
   ----------------------------------------------------------------------------
   Los colores llegan desde config.php / la tabla de ajustes como variables CSS.
   ============================================================================ */

:root{
  --tipo: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --radio: 6px;
  --sombra: 0 1px 2px rgba(20,18,15,.05), 0 10px 30px -14px rgba(20,18,15,.18);
  /* Respaldo si config.php no cargara */
  --fondo:#FAF7F2; --fondo-alt:#F1EAE0; --texto:#1C1A17; --texto-suave:#5C554B;
  --acento:#C0603A; --acento-osc:#9E4B2B; --secundario:#8A9A82;
  --oscuro:#221F1B; --borde:#DDD3C6;
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0; font-family:var(--tipo); font-size:15px; line-height:1.6;
  background:var(--fondo-alt); color:var(--texto);
}
img{ max-width:100%; display:block; }
code{ background:rgba(0,0,0,.06); padding:.1rem .35rem; border-radius:3px; font-size:.9em; }
a{ color:var(--acento); }

/* ---------------- CABECERA ---------------- */
.admin-top{ background:var(--oscuro); color:#fff; }
.admin-top__fila{
  max-width:1200px; margin:0 auto; padding:1rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.admin-marca{ display:inline-flex; align-items:center; gap:.6rem; color:#fff; text-decoration:none; font-weight:700; letter-spacing:.02em; }
.admin-marca svg{ width:28px; height:28px; }
.admin-marca em{ font-style:normal; font-weight:400; opacity:.6; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; margin-left:.35rem; }
.admin-top__acciones{ display:flex; gap:1.2rem; align-items:center; font-size:.9rem; }
.admin-top__acciones a{ color:rgba(255,255,255,.8); text-decoration:none; }
.admin-top__acciones a:hover{ color:#fff; }
.admin-top__acciones .salir{ border:1px solid rgba(255,255,255,.3); padding:.4rem .9rem; border-radius:var(--radio); }

.admin-nav{
  background:rgba(0,0,0,.22); display:flex; gap:.2rem; overflow-x:auto;
  padding:0 1.5rem; max-width:1200px; margin:0 auto;
}
.admin-nav a{
  color:rgba(255,255,255,.72); text-decoration:none; padding:.85rem 1.1rem;
  font-size:.92rem; white-space:nowrap; border-bottom:2px solid transparent;
}
.admin-nav a:hover{ color:#fff; }
.admin-nav a.activo{ color:#fff; border-bottom-color:var(--acento); background:rgba(255,255,255,.05); }
.chapa{
  display:inline-block; background:var(--acento); color:#fff; font-size:.72rem; font-weight:700;
  min-width:18px; text-align:center; border-radius:9px; padding:.05rem .35rem; margin-left:.4rem;
}

/* ---------------- CUERPO ---------------- */
.admin-cuerpo{ max-width:1200px; margin:0 auto; padding:2rem 1.5rem 4rem; }
.admin-encabezado{ margin-bottom:2rem; }
.admin-encabezado h1{ font-size:1.75rem; margin:0 0 .4rem; }
.admin-encabezado p{ margin:0; color:var(--texto-suave); max-width:75ch; }

.admin-subtitulo{ font-size:1.2rem; margin:0 0 1rem; }
.admin-subtitulo--peq{ font-size:1.02rem; margin-top:2.5rem; }
.pista{ font-size:.85rem; color:var(--texto-suave); margin:.35rem 0 0; display:block; }
/* Cuando la pista introduce un bloque completo, deja aire antes de los campos */
.bloque > .pista, .admin-subtitulo + .pista{ margin-bottom:1.4rem; }

.bloque{
  background:#fff; border:1px solid var(--borde); border-radius:10px;
  padding:1.8rem; margin-bottom:1.8rem; box-shadow:var(--sombra);
}

/* ---------------- AVISOS ---------------- */
.aviso{ padding:1rem 1.2rem; border-radius:var(--radio); border-left:3px solid; margin-bottom:1.5rem; }
.aviso p{ margin:0; }
.aviso--ok{ background:#eef5ea; border-color:#6f9161; color:#31462c; }
.aviso--error{ background:#fdeeea; border-color:var(--acento); color:#7d3419; }
.aviso--alerta{ background:#fff8e6; border-color:#d9a520; color:#6b4e05; }

/* ---------------- PESTAÑAS ---------------- */
.pestanas{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.8rem; }
.pestanas a{
  background:#fff; border:1px solid var(--borde); border-radius:100px;
  padding:.5rem 1.1rem; text-decoration:none; color:var(--texto-suave); font-size:.9rem; font-weight:500;
}
.pestanas a:hover{ border-color:var(--texto); color:var(--texto); }
.pestanas a.activo{ background:var(--texto); border-color:var(--texto); color:#fff; }

/* ---------------- FORMULARIOS ---------------- */
.campo{ margin-bottom:1.1rem; }
.campo label{ display:block; font-size:.82rem; font-weight:700; margin-bottom:.35rem; }
.campo input[type=text], .campo input[type=email], .campo input[type=url],
.campo input[type=password], .campo input[type=number], .campo input[type=tel],
.campo select, .campo textarea{
  width:100%; font:inherit; font-size:.95rem; color:var(--texto);
  background:var(--fondo); border:1px solid var(--borde); border-radius:var(--radio);
  padding:.65rem .8rem;
}
.campo input[type=file]{
  width:100%; font:inherit; font-size:.88rem; background:var(--fondo);
  border:1px dashed var(--borde); border-radius:var(--radio); padding:.6rem;
}
.campo textarea{ resize:vertical; min-height:90px; line-height:1.55; }
.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline:none; border-color:var(--acento); box-shadow:0 0 0 3px rgba(192,96,58,.16);
}
.campo--casilla{ display:flex; align-items:flex-end; }
.campo--casilla label{ display:flex; align-items:center; gap:.5rem; font-weight:500; font-size:.9rem; margin:0 0 .7rem; }
.campo--casilla input{ width:18px; height:18px; accent-color:var(--acento); }
.campo--ancho{ grid-column:1 / -1; }
.clave-tecnica{
  display:block; font-family:ui-monospace, Menlo, Consolas, monospace;
  font-size:.72rem; color:#9a9086; margin-top:.3rem;
}

.rejilla-2{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.rejilla-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }

.acciones-form{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.5rem; }

.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  background:var(--acento); color:#fff; border:1px solid var(--acento);
  border-radius:var(--radio); padding:.75rem 1.4rem;
  font:inherit; font-size:.93rem; font-weight:700; text-decoration:none; cursor:pointer;
}
.boton:hover{ background:var(--acento-osc); border-color:var(--acento-osc); }
.boton--linea{ background:#fff; color:var(--texto); border-color:var(--borde); }
.boton--linea:hover{ background:var(--fondo-alt); color:var(--texto); border-color:var(--texto); }
.boton--peligro{ background:#fff; color:#a3341a; border-color:#e8c4b8; }
.boton--peligro:hover{ background:#a3341a; border-color:#a3341a; color:#fff; }
.boton--peq{ padding:.5rem 1rem; font-size:.85rem; }

/* ---------------- INICIO DEL PANEL ---------------- */
.cifras{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:2rem; }
.cifra{
  background:#fff; border:1px solid var(--borde); border-radius:10px;
  padding:1.3rem 1.4rem; font-size:.85rem; color:var(--texto-suave);
}
.cifra span{ display:block; font-size:1.9rem; font-weight:700; color:var(--acento); line-height:1.1; margin-bottom:.2rem; }

.tarjetas-admin{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.tarjeta-admin{
  background:#fff; border:1px solid var(--borde); border-radius:10px;
  padding:1.6rem; text-decoration:none; color:var(--texto);
  display:flex; flex-direction:column; gap:.5rem;
  transition:transform .2s ease, box-shadow .2s ease;
}
.tarjeta-admin:hover{ transform:translateY(-3px); box-shadow:var(--sombra); }
.tarjeta-admin h2{ font-size:1.1rem; margin:0; }
.tarjeta-admin p{ margin:0; font-size:.9rem; color:var(--texto-suave); flex:1; }
.tarjeta-admin span{ font-size:.85rem; font-weight:700; color:var(--acento); }

/* ---------------- FOTOS Y TRABAJOS ---------------- */
.previa-envoltura{
  background:var(--fondo); border:1px solid var(--borde); border-radius:var(--radio);
  overflow:hidden; margin:0 0 1.3rem; max-width:340px;
}
.previa-envoltura img{ width:100%; aspect-ratio:4/3; object-fit:cover; }

.fotos-admin, .trabajos-admin{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:1.2rem;
}
.foto-admin{
  background:#fff; border:1px solid var(--borde); border-radius:10px; overflow:hidden;
  box-shadow:var(--sombra); display:flex; flex-direction:column;
}
.foto-admin > img{ width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--fondo-alt); }
.foto-admin__cuerpo{ padding:1.2rem; }
.foto-admin__cuerpo .campo:last-child{ margin-bottom:0; }

.borrados{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2rem; }
.borrados form{ margin:0; }

.vacio{
  background:#fff; border:1px dashed var(--borde); border-radius:10px;
  padding:2.5rem; text-align:center; color:var(--texto-suave);
}
.vacio p{ margin:0; }

.nota{
  background:#fff; border:1px solid var(--borde); border-left:3px solid var(--secundario);
  border-radius:var(--radio); padding:1.4rem 1.6rem; margin-top:2rem;
}
.nota h3{ margin:0 0 .5rem; font-size:1rem; }
.nota p{ margin:0; color:var(--texto-suave); font-size:.92rem; }

/* ---------------- COLORES ---------------- */
.colores-rejilla{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1.2rem; }
.color-campo label{ display:block; font-size:.82rem; font-weight:700; margin-bottom:.4rem; }
.color-fila{ display:flex; align-items:center; gap:.7rem; }
.color-fila input[type=color]{
  width:52px; height:40px; border:1px solid var(--borde); border-radius:var(--radio);
  background:#fff; padding:3px; cursor:pointer;
}
.color-fila output{ font-family:ui-monospace, Menlo, Consolas, monospace; font-size:.85rem; color:var(--texto-suave); }

/* ---------------- TABLAS ---------------- */
.tabla-envoltura{ overflow-x:auto; background:#fff; border:1px solid var(--borde); border-radius:10px; margin-bottom:1.2rem; }
.tabla{ width:100%; border-collapse:collapse; font-size:.9rem; }
.tabla th, .tabla td{ text-align:left; padding:.85rem 1.1rem; border-bottom:1px solid var(--borde); }
.tabla th{ background:var(--fondo); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; }
.tabla tr:last-child td{ border-bottom:0; }
.tabla tr.sin-leer td{ font-weight:600; background:#fffaf3; }

/* ---------------- MENSAJES ---------------- */
.mensajes{ display:grid; gap:1rem; }
.mensaje{
  background:#fff; border:1px solid var(--borde); border-left:3px solid var(--borde);
  border-radius:10px; padding:1.4rem 1.6rem;
}
.mensaje--nuevo{ border-left-color:var(--acento); background:#fffdfa; }
.mensaje__cabecera{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; align-items:center; }
.mensaje__cabecera time{ font-size:.83rem; color:var(--texto-suave); }
.etiqueta{
  display:inline-block; background:var(--fondo-alt); color:var(--texto-suave);
  font-size:.74rem; font-weight:700; padding:.15rem .55rem; border-radius:4px; margin-left:.5rem;
}
.etiqueta--nuevo{ background:var(--acento); color:#fff; }
.mensaje__datos{ margin:.4rem 0 .9rem; font-size:.9rem; }
.mensaje__cuerpo{ background:var(--fondo); border-radius:var(--radio); padding:1rem 1.1rem; font-size:.94rem; }
.mensaje__pie{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; }
.mensaje__pie form{ margin:0; }

/* ---------------- PIE ---------------- */
.admin-pie{
  max-width:1200px; margin:0 auto; padding:1.5rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
  font-size:.83rem; color:var(--texto-suave); border-top:1px solid var(--borde);
}
.admin-pie p{ margin:0; }

/* ---------------- LOGIN ---------------- */
.pagina-login{ display:grid; place-items:center; min-height:100vh; background:var(--oscuro); padding:1.5rem; }
.login{
  background:#fff; border-radius:12px; padding:2.5rem; width:100%; max-width:410px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.5);
}
.login__marca{ display:flex; align-items:center; gap:.6rem; margin-bottom:1.8rem; color:var(--texto); }
.login__marca svg{ width:30px; height:30px; }
.login__marca strong{ font-size:1.25rem; letter-spacing:.06em; }
.login h1{ font-size:1.35rem; margin:0 0 .3rem; }
.login__sub{ margin:0 0 1.8rem; color:var(--texto-suave); font-size:.92rem; }
.login .boton{ width:100%; margin-top:.5rem; }
.login__pie{ margin:1.5rem 0 0; text-align:center; font-size:.87rem; }
.login__pie a{ color:var(--texto-suave); text-decoration:none; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:900px){
  .cifras{ grid-template-columns:repeat(2,1fr); }
  .tarjetas-admin{ grid-template-columns:repeat(2,1fr); }
  .rejilla-3{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .admin-cuerpo{ padding:1.5rem 1rem 3rem; }
  .bloque{ padding:1.3rem; }
  .cifras, .tarjetas-admin, .rejilla-2, .rejilla-3{ grid-template-columns:1fr; }
  .admin-top__fila{ padding:.9rem 1rem; }
  .admin-nav{ padding:0 .6rem; }
}