/* ============================================================
   demo-frame.css — el marco de Angel alrededor de cada demo.

   Todo aquí lleva prefijo .df- para no chocar con los estilos
   del negocio que el demo representa. El demo manda en su
   diseño; esto solo lo enmarca.
   ============================================================ */

@import url("../fonts/fuentes.css");

:root{
  --df-navy:#12152B;
  --df-navy-2:#1B1F3B;
  --df-amber:#FFB238;
  --df-borde:#2C3157;
  --df-lienzo:430px;
}

/* ---------- Barra superior ---------------------------------- */

.df-barra{
  position:sticky; top:0; z-index:100;
  background:var(--df-navy);
  color:#F7F5F0;
  font-family:'Work Sans', system-ui, sans-serif;
  border-bottom:1px solid var(--df-borde);
}

.df-fila{
  display:flex; align-items:center; gap:10px;
  max-width:var(--df-lienzo); margin:0 auto; padding:8px 12px;
}

.df-volver{
  display:inline-flex; align-items:center; gap:6px;
  color:#F7F5F0; text-decoration:none; flex-shrink:0;
  font-size:.78rem; font-weight:600;
  border:1px solid var(--df-borde); border-radius:100px;
  padding:6px 12px 6px 9px;
}
.df-volver:hover{background:var(--df-navy-2);}

.df-etiqueta{
  font-family:'Space Mono', ui-monospace, Menlo, monospace;
  font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--df-amber); flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.df-lapiz{
  flex-shrink:0; background:var(--df-amber); color:var(--df-navy);
  border:0; border-radius:100px; cursor:pointer;
  font:700 .74rem/1 'Work Sans', system-ui, sans-serif;
  padding:8px 13px;
}

/* Cajón de personalización — se abre con el lápiz */

.df-cajon{
  display:none;
  border-top:1px solid var(--df-borde);
  background:var(--df-navy-2);
}
.df-cajon[data-abierto]{display:block;}
.df-cajon .df-fila{padding-top:11px; padding-bottom:13px; flex-wrap:wrap;}

.df-cajon label{
  width:100%; font-family:'Space Mono', ui-monospace, monospace;
  font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:#9BA0C4;
}
.df-cajon input{
  flex:1; min-width:0;
  background:var(--df-navy); border:1px solid var(--df-borde); border-radius:10px;
  color:#F7F5F0; font:600 .92rem/1.2 'Work Sans', system-ui, sans-serif;
  padding:11px 13px;
}
.df-cajon input:focus{outline:2px solid var(--df-amber); outline-offset:1px;}
.df-cajon input::placeholder{color:#6B7099; font-weight:400;}

.df-borrar{
  flex-shrink:0; background:transparent; color:#9BA0C4; cursor:pointer;
  border:1px solid var(--df-borde); border-radius:10px;
  font:600 .8rem/1 'Work Sans', system-ui, sans-serif; padding:11px 13px;
}
.df-borrar:hover{color:#F7F5F0;}

/* Botón de idioma dentro del cajón (los demos no cargan marca.css) */
.df-cajon .idioma{
  display:flex; border:1px solid var(--df-borde); border-radius:100px; overflow:hidden;
  font-family:'Space Mono', ui-monospace, monospace; font-size:.68rem; font-weight:700;
}
.df-cajon .idioma button{
  background:transparent; border:0; color:#9BA0C4; cursor:pointer;
  padding:6px 13px; font:inherit; letter-spacing:.06em;
}
.df-cajon .idioma button[aria-pressed="true"]{background:var(--df-amber); color:var(--df-navy);}

/* ---------- Lienzo: ancho de teléfono ----------------------- */

/* El demo está diseñado para celular. En el celular de Angel va a
   pantalla completa; en una laptop se muestra como un teléfono
   sobre fondo neutro, para que no se estire y se vea raro. */

.df-lienzo{
  max-width:var(--df-lienzo);
  margin:0 auto;
  min-height:100vh;
}

@media (min-width:520px){
  /* .df-demo (no solo body) para ganarle al <style> del demo,
     que se carga después de esta hoja. */
  body.df-demo{background:#E8E5DD;}
  .df-lienzo{
    min-height:auto;
    margin:22px auto 40px;
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 0 0 9px #14172B, 0 22px 54px rgba(18,21,43,.34);
  }
  .df-pie-nota{
    max-width:var(--df-lienzo); margin:0 auto 34px; padding:0 20px;
    text-align:center; font-size:.78rem; color:#6E6A5F;
    font-family:'Work Sans', system-ui, sans-serif;
  }
}
@media (max-width:519px){
  .df-pie-nota{display:none;}
}