/* Styles/quejasreclamos.css */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: radial-gradient(900px 300px at 20% 0%, rgba(37,99,235,.10), transparent 55%),
              radial-gradient(900px 300px at 80% 0%, rgba(16,185,129,.10), transparent 55%),
              #f5f7fc;
  color:#0f172a;
}

/* Layout */
.wrap{ max-width:1100px; margin:28px auto; padding:0 16px; }

/* Header */
.header{
  background:#fff;
  border:1px solid #e7ecf5;
  border-radius:18px;
  padding:16px 18px;
  box-shadow: 0 12px 28px rgba(15,23,42,.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
}
.brand img{ height:56px; width:auto; display:block; }
.brand h1{ margin:0; font-size:22px; font-weight:900; letter-spacing:.2px; }
.brand p{ margin:6px 0 0; color:#64748b; font-size:13px; }

.progress{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid #eef2f8;
  background:#fafbff;
  color:#64748b;
  font-size:12px;
  white-space:nowrap;
}
.pill-dot{
  width:10px;height:10px;border-radius:999px;
  background:#2563eb;
  box-shadow:0 0 0 4px rgba(37,99,235,.14);
}

/* Cards / Secciones */
.module{
  margin-top:24px; /* + aire entre cards */
  background:#fff;
  border:1px solid #e7ecf5;
  border-radius:18px;
  overflow:hidden;
  box-shadow: 0 14px 28px rgba(15,23,42,.06);
}

.module-head{
  padding:16px 16px 14px;
  border-bottom:1px solid #eef2f8;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

/* Título más formal + subrayado */
.m-title{
  margin:0;
  font-weight:950;
  font-size:16px;
  letter-spacing:.2px;
  color:#0f172a;
}
.m-title::after{
  content:"";
  display:block;
  width:76px;
  height:3px;
  margin-top:10px;
  border-radius:999px;
  background:#2563eb; /* línea azul institucional */
  opacity:.85;
}

.m-desc{
  margin:8px 0 0;
  color:#64748b;
  font-size:12.5px;
  line-height:1.35;
}

/* Tag más discreto */
.tag{
  font-size:11px;
  color:#475569;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #e7ecf5;
  background:#ffffff;
}

/* Grid */
.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
  padding:16px;
}
.col-12{ grid-column: span 12; }
.col-8{ grid-column: span 8; }
.col-6{ grid-column: span 6; }
.col-4{ grid-column: span 4; }

@media(max-width:920px){
  .col-8,.col-6,.col-4{ grid-column: span 12; }
  .header{ align-items:flex-start; }
  .progress{ display:none; }
  .brand img{ height:48px; }
}

/* Fields */
.field label{
  display:block;
  margin:0 0 6px;
  font-size:12px;
  font-weight:800;
  color:#334155;
}
.req{ color:#ef4444; }

.input, select, textarea{
  width:100%;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid #dbe4f1;
  background:#fff;
  outline:none;
  transition:.15s ease;
  color:#0f172a;
}
.input:focus, select:focus, textarea:focus{
  border-color:#2563eb;
  box-shadow: 0 0 0 4px rgba(37,99,235,.14);
}
.help{ margin-top:6px; font-size:11px; color:#64748b; }

/* Radio */
.radio-row{
  display:flex;
  gap:18px;
  align-items:center;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid #dbe4f1;
  background:#fff;
}
.radio-row label{ font-weight:700; color:#0f172a; }

/* Textarea Motivo más cómodo */
textarea, .input[rows]{
  min-height:140px;
}

/* Errors */
.error{
  color:#ef4444;
  font-size:12px;
  margin-top:6px;
  display:block;
}

/* Actions: centrado y más institucional */
.actions{
  padding:16px;
  border-top:1px solid #eef2f8;
  display:flex;
  justify-content:center; /* centrado */
  gap:12px;
  background:#fafbff;
  flex-wrap:wrap;
}

.btn{
  padding:11px 18px;
  border-radius:14px;
  border:1px solid #dbe4f1;
  background:#fff;
  color:#0f172a;
  font-weight:900;
  cursor:pointer;
  transition:.15s ease;
  min-width:150px;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(15,23,42,.10);
}

.btn.primary{
  background:#2563eb;
  border-color:#2563eb;
  color:#fff;
  min-width:220px; /* “Enviar” más sólido */
}
.btn.primary:hover{
  box-shadow: 0 14px 26px rgba(37,99,235,.22);
}

/* Banner de mensajes */
.notice{
  margin-top:16px;
  border-radius:16px;
  border:1px solid #e7ecf5;
  background:#ffffff;
  box-shadow: 0 12px 24px rgba(15,23,42,.06);
  overflow:hidden;
}

.notice-inner{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px 16px;
}

.notice-icon{
  width:36px;
  height:36px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  flex: 0 0 auto;
}

.notice h4{
  margin:0;
  font-size:14px;
  font-weight:950;
}

.notice p{
  margin:6px 0 0;
  color:#475569;
  font-size:12.5px;
  line-height:1.45;
}

.notice.success{
  border-color: rgba(16,185,129,.25);
  background: rgba(16,185,129,.06);
}
.notice.success .notice-icon{
  background: rgba(16,185,129,.14);
  color:#047857;
}

.notice.error{
  border-color: rgba(239,68,68,.25);
  background: rgba(239,68,68,.06);
}
.notice.error .notice-icon{
  background: rgba(239,68,68,.14);
  color:#b91c1c;
}