/* Zona de clientes (clientes.sadalasmara.com): mismo estilo que la web corporativa (verde noche, papel claro,
   naranja corporativo, filas y reglas finas, titulares en minúscula con la idea clave en cursiva naranja).
   Sin letras de Google: Avenir / Angie Sans si están instaladas y, si no, las del sistema. */
:root {
  color-scheme: light;
  --noche: #3D3B0C;
  --oliva: #33320D;
  --verde: #716C16;
  --naranja: #BE7327;
  --naranja-claro: #E7A862;
  --naranja-texto: #8E520D;
  --sobre-naranja: #1F1E0A;
  --papel: #F4F1E6;
  --blanco: #FFFFFF;
  --tinta: #24231A;
  --tinta-suave: #5B5947;
  --linea: #D8D2BD;
  --crema: #EFEAD8;
  --crema-suave: #C8C3AA;
  --ok: #3F6B1F;
  --aviso: #8E520D;
  --display: 'Angie Sans Std', 'Alegreya Sans', 'Gill Sans', 'Trebuchet MS', sans-serif;
  --texto: 'Avenir Next', Avenir, 'Nunito Sans', 'Segoe UI', system-ui, Arial, sans-serif;
  --radio: 6px;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--texto); font-size: 1.0625rem; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--naranja-texto); }
h1, h2, h3 { font-family: var(--display); color: var(--oliva); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 500; line-height: 1.05; letter-spacing: -.015em; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 500; line-height: 1.1; margin-bottom: 18px; }
h3 { font-size: 1.25rem; font-weight: 700; }
h1 em, h2 em { font-style: italic; color: var(--naranja-texto); }
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 3px; border-radius: 4px; }
.mono { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; }
.zc-cont { width: min(1040px, 100% - 32px); margin-inline: auto; }

/* Cabecera y pie */
.zc-cab { background: var(--noche); color: var(--crema); }
.zc-cab .zc-cont { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.zc-marca { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.zc-marca span { font: 700 .95rem/1 var(--texto); letter-spacing: .2em; color: #fff; }
.zc-zona { font: italic 500 1.05rem/1 var(--display); color: var(--naranja-claro); }
.zc-preview { background: var(--naranja); color: var(--sobre-naranja); text-align: center; font-weight: 700; font-size: .9rem; padding: 8px 16px; }
.zc-main { padding-block: clamp(28px, 6vw, 56px) 48px; display: flex; flex-direction: column; gap: clamp(28px, 5vw, 44px); }
.zc-pie { border-top: 1px solid var(--linea); color: var(--tinta-suave); font-size: .9rem; padding: 22px 0 30px; }

/* Textos */
.zc-rotulo { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: italic 500 1.1rem/1.2 var(--display); color: var(--naranja-texto); }
.zc-rotulo::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--naranja); flex: none; }
.zc-entrada { color: var(--tinta-suave); font-size: 1.12rem; max-width: 56ch; margin: 14px 0 0; }
.zc-nota { color: var(--tinta-suave); font-size: .95rem; margin: 0; }
.zc-error { background: #F6E3CF; border-left: 4px solid var(--naranja); padding: 10px 14px; margin: 18px 0 0; color: var(--sobre-naranja); }

/* Entrar */
.zc-entrar { max-width: 520px; margin-inline: auto; padding-top: clamp(6px, 4vw, 30px); }
.zc-form { display: flex; flex-direction: column; gap: 16px; margin: 26px 0 16px; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 22px; }
.zc-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: .95rem; color: var(--oliva); }
.zc-form input { font: inherit; font-weight: 400; padding: 12px 14px; border: 1.5px solid var(--linea); border-radius: var(--radio); background: var(--papel); color: var(--tinta); }
.zc-form input:focus { border-color: var(--naranja); outline: none; background: #fff; }
.zc-boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 800 1rem/1 var(--texto); padding: 15px 22px; border-radius: var(--radio); border: 2px solid var(--oliva); background: var(--oliva); color: #fff; text-decoration: none; cursor: pointer; }
.zc-boton:hover { background: var(--verde); border-color: var(--verde); }

/* Cabeza del pedido */
.zc-head { position: relative; border-bottom: 1.5px solid var(--oliva); padding-bottom: 24px; }
.zc-estado { font: 500 clamp(1.15rem, 2.6vw, 1.4rem)/1.35 var(--display); color: var(--tinta); margin: 14px 0 16px; }
.zc-barra { height: 8px; background: var(--linea); border-radius: 99px; overflow: hidden; }
.zc-barra span { display: block; height: 100%; background: var(--naranja); }
.zc-datos { display: flex; flex-wrap: wrap; gap: 10px 36px; margin: 18px 0 0; }
.zc-datos dt { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }
.zc-datos dd { margin: 2px 0 0; font-weight: 700; }
.zc-salir { position: absolute; top: 0; right: 0; }
.zc-salir button { font: 700 .88rem var(--texto); background: none; border: 1.5px solid var(--linea); color: var(--tinta-suave); border-radius: var(--radio); padding: 7px 14px; cursor: pointer; }
.zc-salir button:hover { border-color: var(--oliva); color: var(--oliva); }

/* Aviso de aprobación pendiente */
.zc-aviso { display: flex; align-items: center; justify-content: space-between; gap: 18px; background: var(--noche); color: var(--crema); border-radius: var(--radio); padding: 20px 22px; }
.zc-aviso strong { color: #fff; font-size: 1.1rem; }
.zc-aviso p { margin: 4px 0 0; color: var(--crema-suave); font-size: .95rem; }
.zc-aviso .zc-boton { background: var(--naranja); border-color: var(--naranja); color: var(--sobre-naranja); flex: none; }
.zc-aviso .zc-boton:hover { background: var(--naranja-claro); border-color: var(--naranja-claro); }

/* Pasos */
.zc-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; border-top: 1px solid var(--linea); }
.zc-pasos li { display: flex; gap: 12px; align-items: flex-start; padding: 16px 12px 16px 0; border-bottom: 1px solid var(--linea); color: var(--tinta-suave); }
.zc-pasos b { display: block; color: var(--tinta); }
.zc-pasos small { font-size: .85rem; }
.zc-num { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--crema-suave); display: grid; place-items: center; font-weight: 800; font-size: .9rem; background: var(--blanco); }
.zc-pasos li.done .zc-num { background: var(--verde); border-color: var(--verde); color: #fff; }
.zc-pasos li.current .zc-num { background: var(--naranja); border-color: var(--naranja); color: var(--sobre-naranja); }
.zc-pasos li.current b { color: var(--naranja-texto); }

/* Diseños */
.zc-disenos { display: flex; flex-direction: column; gap: 18px; }
.zc-diseno { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px; }
.zc-meta { color: var(--tinta-suave); font-size: .92rem; margin: 4px 0 14px; }
.zc-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.zc-fotos figure { margin: 0; }
.zc-fotos img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--papel); border-radius: 4px; border: 1px solid var(--linea); }
.zc-fotos figcaption { margin-top: 8px; font-size: .9rem; font-weight: 700; color: var(--oliva); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.zc-vacio { aspect-ratio: 1; display: grid; place-items: center; background: var(--papel); border: 1.5px dashed var(--linea); border-radius: 4px; color: var(--tinta-suave); font-size: .95rem; }
.zc-chip { font-size: .78rem; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--crema); color: var(--tinta-suave); }
.zc-chip.ok { background: #E3EBD3; color: var(--ok); }
.zc-chip.wait { background: #F6E3CF; color: var(--aviso); }
.zc-chip.warn { background: #F3DDD5; color: #8A3A1C; }

@media (max-width: 640px) {
  .zc-marca span { display: none; }
  .zc-aviso { flex-direction: column; align-items: stretch; }
  .zc-salir { position: static; margin-top: 18px; }
  .zc-pasos { grid-template-columns: 1fr; }
  .zc-fotos { grid-template-columns: 1fr 1fr; }
}