/* =============================================
   ZIYEGO — Libro de Reclamaciones v2.0
   Paleta: #5700ff · #ff2b69 · #110833 · #ffe600
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

:root{
  --zp:  #5700ff;
  --zp2: #7c3aed;
  --zf:  #ff2b69;
  --zf2: #cc1a50;
  --zn:  #110833;
  --zy:  #ffe600;
  --brd: #e5e7eb;
  --bg:  #f8f7ff;
  --wh:  #ffffff;
  --gray:#6b7280;
  --font:'Nunito',system-ui,sans-serif;
  --r:8px;--rl:14px;
}

.zr-wrap{font-family:var(--font);max-width:800px;margin:0 auto;color:#1a1033;line-height:1.6}

/* ── HEADER ── */
.zr-header{
  background:linear-gradient(140deg,var(--zn) 0%,#1e0c5e 55%,#2d1080 100%);
  border-radius:var(--rl) var(--rl) 0 0;
  padding:32px 36px 24px;
  color:var(--wh);
  position:relative;overflow:hidden;
}
.zr-header-waves{position:absolute;bottom:0;left:0;right:0;height:80px;opacity:.6}
.zr-header-waves svg{width:100%;height:100%}
.zr-header-inner{display:flex;align-items:flex-start;gap:20px;position:relative;z-index:1}

/* Logo texto */
.zr-logo{display:flex;align-items:center;gap:2px;flex-shrink:0;margin-top:2px}
.zr-logo-zi{font-size:32px;font-weight:900;color:var(--wh);letter-spacing:-1px}
.zr-logo-yego{font-size:32px;font-weight:900;color:var(--zf);letter-spacing:-1px}
.zr-logo-arrow{font-size:22px;color:var(--wh);margin-left:2px;opacity:.8}

.zr-titulo{margin:0 0 6px;font-size:20px;font-weight:800;letter-spacing:-.3px}
.zr-subtitulo{margin:0;font-size:13px;opacity:.8;line-height:1.55;max-width:520px}
.zr-header-text{flex:1}

.zr-indecopi-badge{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:6px;
  margin-top:20px;background:rgba(255,230,0,.15);
  border:1px solid rgba(255,230,0,.35);
  border-radius:50px;padding:5px 14px;
  font-size:12px;color:var(--zy);font-weight:700;letter-spacing:.3px;
}
.zr-badge-dot{width:7px;height:7px;border-radius:50%;background:var(--zy);flex-shrink:0}

/* ── FORM BODY ── */
.zr-form{
  background:var(--wh);
  border:1px solid var(--brd);border-top:none;
  border-radius:0 0 var(--rl) var(--rl);
  overflow:hidden;
  box-shadow:0 8px 40px rgba(87,0,255,.10);
}

/* ── SECCIÓN ── */
.zr-seccion{padding:32px 36px;border-bottom:1px solid #ede9ff}
.zr-sec-alt{background:#fdfcff}
.zr-sec-hd{display:flex;align-items:flex-start;gap:16px;margin-bottom:26px}

.zr-sec-num{
  width:44px;height:44px;border-radius:12px;
  background:linear-gradient(135deg,var(--zp),var(--zp2));
  color:var(--wh);font-weight:900;font-size:15px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;letter-spacing:-.5px;
}
.zr-sec-num-pink{background:linear-gradient(135deg,var(--zf),#d4185a)}
.zr-sec-titulo{margin:0 0 3px;font-size:17px;font-weight:800;color:var(--zn)}
.zr-sec-desc{margin:0;font-size:13px;color:var(--gray)}

/* ── FIELDS ── */
.zr-fila{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.zr-campo{margin-bottom:16px}
.zr-campo:last-child{margin-bottom:0}
.zr-campo-grupo{margin-bottom:20px}

.zr-label{display:block;font-size:13px;font-weight:700;color:#2d1a5e;margin-bottom:6px;letter-spacing:.1px}
.zr-req{color:var(--zf);margin-left:2px}
.zr-opt{color:var(--gray);font-weight:500;font-size:12px}

.zr-input,.zr-select,.zr-textarea{
  width:100%;padding:11px 15px;
  border:2px solid #e0d9ff;border-radius:var(--r);
  font-family:var(--font);font-size:14px;color:var(--zn);
  background:var(--bg);transition:border-color .2s,box-shadow .2s,background .2s;
  outline:none;appearance:none;-webkit-appearance:none;box-sizing:border-box;
}
.zr-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235700ff' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;cursor:pointer;
}
.zr-textarea{resize:vertical;min-height:90px;line-height:1.55}
.zr-input:focus,.zr-select:focus,.zr-textarea:focus{
  border-color:var(--zp);background:var(--wh);
  box-shadow:0 0 0 4px rgba(87,0,255,.10);
}
::placeholder{color:#b0a8cc}

/* ── TOGGLE MENOR ── */
.zr-toggle-group{display:flex;gap:10px}
.zr-toggle{
  display:flex;align-items:center;gap:8px;
  padding:10px 20px;border:2px solid #e0d9ff;border-radius:50px;
  cursor:pointer;font-size:14px;font-weight:600;background:var(--bg);
  transition:all .2s;user-select:none;color:var(--gray);
}
.zr-toggle input{display:none}
.zr-toggle.active{border-color:var(--zp);background:#ede9ff;color:var(--zp)}
.zr-tog-ico{font-size:16px}

/* ── TUTOR ── */
.zr-tutor{
  background:#f5f3ff;border:2px solid #d8d0ff;
  border-radius:var(--r);margin-bottom:16px;overflow:hidden;
}
.zr-tutor-hd{
  background:linear-gradient(135deg,var(--zp),var(--zp2));
  color:var(--wh);padding:10px 18px;
  font-size:13.5px;font-weight:800;display:flex;align-items:center;gap:8px;
}
.zr-tutor-body{padding:18px}

/* ── BIEN CARDS ── */
.zr-bien-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.zr-radio-hidden{display:none}
.zr-bien-card{cursor:pointer}
.zr-bien-inner{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:20px;border:2px solid #e0d9ff;border-radius:var(--r);
  background:var(--bg);transition:all .2s;text-align:center;
}
.zr-bien-ico{font-size:28px}
.zr-bien-inner strong{font-size:15px;color:var(--zn);font-weight:800}
.zr-bien-inner small{font-size:12px;color:var(--gray)}
.zr-bien-card:hover .zr-bien-inner{border-color:var(--zp);background:#ede9ff}
.zr-bien-card:has(input:checked) .zr-bien-inner{
  border-color:var(--zp);background:#ede9ff;
  box-shadow:0 0 0 3px rgba(87,0,255,.12);
}

/* ── TIPO RECLAMO ── */
.zr-tipo-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.zr-tipo-card{cursor:pointer}
.zr-tipo-inner{
  padding:18px 20px;border:2px solid #e0d9ff;border-radius:var(--r);
  background:var(--bg);transition:all .2s;
}
.zr-tipo-badge{
  display:inline-block;padding:4px 14px;border-radius:50px;
  font-size:13px;font-weight:800;margin-bottom:10px;letter-spacing:.2px;
}
.zr-badge-purple{background:#ede9ff;color:var(--zp)}
.zr-badge-pink{background:#ffe0e8;color:var(--zf)}
.zr-tipo-desc{margin:0;font-size:13px;color:var(--gray);line-height:1.5}
.zr-tipo-card:hover .zr-tipo-inner,.zr-tipo-card.active .zr-tipo-inner{
  border-color:var(--zp);box-shadow:0 0 0 3px rgba(87,0,255,.10);
}
.zr-tipo-card.active-pink .zr-tipo-inner{
  border-color:var(--zf);box-shadow:0 0 0 3px rgba(255,43,105,.10);
}

/* ── DROPZONE ── */
.zr-drop{
  border:2px dashed #c4b8ff;border-radius:var(--r);
  padding:28px 20px;text-align:center;cursor:pointer;
  background:var(--bg);transition:all .2s;position:relative;
}
.zr-drop:hover,.zr-drop.drag{border-color:var(--zp);background:#ede9ff}
.zr-file-hidden{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.zr-drop-ico{font-size:30px;margin-bottom:8px}
.zr-drop-txt{font-size:14px;font-weight:700;color:#2d1a5e;margin-bottom:4px}
.zr-drop-info{font-size:12px;color:var(--gray)}
#zr-file-list{margin-top:12px;text-align:left}
.zr-file-item{
  display:flex;align-items:center;gap:8px;background:var(--wh);
  border:1.5px solid #e0d9ff;border-radius:6px;padding:7px 12px;
  margin-top:6px;font-size:13px;
}
.zr-file-nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--zn);font-weight:600}
.zr-file-sz{color:var(--gray);font-size:12px;white-space:nowrap}

/* ── PRIVACIDAD ── */
.zr-privacidad{padding:22px 36px;border-top:1px solid #ede9ff}
.zr-check-row{display:flex;align-items:flex-start;gap:12px;cursor:pointer;font-size:13.5px;color:#374151}
.zr-check-box{
  flex-shrink:0;width:22px;height:22px;border:2px solid #c4b8ff;
  border-radius:6px;background:var(--wh);display:flex;
  align-items:center;justify-content:center;margin-top:1px;
  transition:all .2s;font-size:13px;color:var(--wh);font-weight:900;
}
.zr-check-box.on{background:var(--zp);border-color:var(--zp)}
.zr-link{color:var(--zp);text-decoration:underline;font-weight:700}

/* ── ERROR ── */
.zr-error{
  margin:0 36px 16px;padding:14px 18px;
  background:#fff0f4;border:2px solid #ffb3c6;
  border-radius:var(--r);display:flex;align-items:flex-start;gap:12px;
}
.zr-error-icon{
  width:24px;height:24px;border-radius:50%;
  background:var(--zf);color:var(--wh);
  font-weight:900;font-size:14px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
#zr-error-msg{font-size:13.5px;color:#991b3a;line-height:1.55}

/* ── SUBMIT ── */
.zr-submit-wrap{padding:24px 36px;text-align:center}
.zr-btn-enviar{
  background:linear-gradient(135deg,var(--zp),var(--zf));
  color:var(--wh);border:none;padding:15px 52px;
  border-radius:50px;font-size:16px;font-weight:900;
  cursor:pointer;font-family:var(--font);letter-spacing:.3px;
  transition:all .2s;
  box-shadow:0 6px 24px rgba(87,0,255,.35);
}
.zr-btn-enviar:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(87,0,255,.42)}
.zr-btn-enviar:active{transform:translateY(0)}
.zr-btn-enviar:disabled{opacity:.7;cursor:not-allowed;transform:none}
.zr-btn-outline{
  background:transparent;border:2px solid var(--zp);color:var(--zp);
  padding:12px 32px;border-radius:50px;font-size:14px;font-weight:800;
  cursor:pointer;font-family:var(--font);transition:all .2s;
}
.zr-btn-outline:hover{background:var(--zp);color:var(--wh)}

/* ── LEGAL ── */
.zr-legal{
  padding:18px 36px 26px;background:#f8f7ff;
  border-top:1px solid #ede9ff;
}
.zr-legal-item{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;color:var(--gray);margin-bottom:6px;line-height:1.55}
.zr-legal-item:last-child{margin-bottom:0}
.zr-legal-dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--zp);opacity:.5;margin-top:4px}

/* ── ÉXITO ── */
.zr-success{
  background:var(--wh);border:1px solid var(--brd);border-top:none;
  border-radius:0 0 var(--rl) var(--rl);
  box-shadow:0 8px 40px rgba(87,0,255,.10);
}
.zr-success-inner{padding:60px 40px;text-align:center}
.zr-success-check{
  width:72px;height:72px;border-radius:50%;
  background:linear-gradient(135deg,var(--zp),var(--zf));
  color:var(--wh);font-size:32px;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;
}
.zr-success h3{font-size:24px;font-weight:900;color:var(--zn);margin:0 0 8px}
.zr-success p{font-size:15px;color:var(--gray);margin:0 0 8px}
.zr-numero{
  display:inline-block;font-size:28px;font-weight:900;
  background:linear-gradient(135deg,var(--zp),var(--zf));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  border:2px solid #e0d9ff;border-radius:var(--r);
  padding:12px 32px;margin:12px 0;letter-spacing:2px;
}
.zr-success-nota{font-size:13px;color:var(--gray);max-width:440px;margin:10px auto 24px;line-height:1.6}

/* ── ANIMACIONES ── */
@keyframes zrFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.zr-tutor{animation:zrFadeIn .3s ease}

/* ── RESPONSIVE ── */
@media(max-width:600px){
  .zr-header{padding:20px 18px}
  .zr-logo-zi,.zr-logo-yego{font-size:26px}
  .zr-titulo{font-size:16px}
  .zr-seccion{padding:22px 18px}
  .zr-fila{grid-template-columns:1fr;gap:0}
  .zr-tipo-grid,.zr-bien-grid{grid-template-columns:1fr}
  .zr-submit-wrap,.zr-privacidad,.zr-legal{padding-left:18px;padding-right:18px}
  .zr-error{margin:0 18px 16px}
  .zr-btn-enviar{width:100%;padding:15px}
  .zr-toggle-group{flex-direction:column}
  .zr-success-inner{padding:40px 20px}
}