/* variables base tokens */
:root{
  --panel:#0c0c0f; --panel-2:#09090b; --text:#f3f4f6; --muted:#9ca3af;
  --accent:#ef4444; --accent-2:#b91c1c; --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.45);
}

/* botón contáctanos */
.btn-quejas{
  margin-left:365px; display:flex; align-items:center; gap:12px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  border:none; color:#fff; font-weight:600; padding:10px 12px; border-radius:999px; cursor:pointer;
  box-shadow:var(--shadow);
}
.btn-quejas:focus-visible{ outline:3px solid #ffffff44; outline-offset:2px; }

/* modal overlay + tarjeta */
.modal{ position:fixed; inset:0; display:none; place-items:center; background:#0008; z-index:9999; padding:16px; }
.modal[aria-hidden="false"]{ display:grid; }

.modal-card{
  width:min(720px,100%); background:var(--panel); color:var(--text);
  border:1px solid #1f2937; border-radius:var(--radius); box-shadow:var(--shadow);
}
.modal-header{
  padding:14px 16px; border-bottom:1px solid #1f2937; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.modal-title{ font-weight:700; font-size:18px; }
.modal-close{ background:transparent; border:0; color:var(--muted); cursor:pointer; padding:8px; border-radius:10px; }
.modal-close:hover{ background:#ffffff10; }

.modal-body{ padding:16px; display:grid; gap:14px; background:var(--panel-2); border-radius:0 0 var(--radius) var(--radius); }

/* layout del formulario */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width: 700px){ .grid-2{ grid-template-columns:1fr; } }

label{ font-size:12px; color:var(--muted); display:block; margin-bottom:6px; }
input[type="text"], input[type="email"], select, textarea{
  width:100%; color:var(--text); background:#0f1115; border:1px solid #242634;
  border-radius:12px; padding:10px 12px; font-size:14px;
}
textarea{ min-height:120px; resize:vertical; }
input[type="file"]{
  width:100%; color:var(--muted); background:#0f1115; border:1px dashed #2b2e3f;
  border-radius:12px; padding:10px 12px; font-size:14px;
}

.row-between{ display:flex; justify-content:space-between; align-items:center; }
.counter,.help{ font-size:12px; color:var(--muted); }
.error{ color:#ef4444; font-size:12px; }
.status-msg{ font-size:13px; }

.consent-wrap{ display:flex; align-items:center; }
.actions{ display:flex; justify-content:flex-end; gap:10px; }

.btn{ border:1px solid #2a2f3f; background:#141827; color:#e5e7eb; border-radius:12px; padding:10px 14px; font-weight:600; cursor:pointer; }
.btn:hover{ background:#182034; }
.btn.primary{ background:linear-gradient(120deg,var(--accent),var(--accent-2)); border:none; }
.btn[disabled]{ opacity:.6; cursor:not-allowed; }

/* toast notificación flotante */
.toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:#0f172a; border:1px solid #1f2937; color:#fff; padding:10px 14px; border-radius:10px; box-shadow:var(--shadow); display:none;
}
.toast[show]{ display:block; }

/* tema claro overrides por variable + componentes */
body.light,
body[data-theme="light"] {
  --panel: #ffffff;
  --panel-2: #f8fafc;
  --text: #0f172a;
  --muted: #475569;
  --accent: #ef4444;
  --accent-2: #dc2626;
  --shadow: 0 10px 30px rgba(0,0,0,.15);
}

body.light .modal-card,
body[data-theme="light"] .modal-card { background: var(--panel); color: var(--text); border-color:#e5e7eb; }
body.light .modal-header,
body[data-theme="light"] .modal-header { border-bottom-color:#e5e7eb; }
body.light .modal-body,
body[data-theme="light"] .modal-body { background: var(--panel-2); }

body.light label,
body.light .help,
body.light .counter,
body[data-theme="light"] label,
body[data-theme="light"] .help,
body[data-theme="light"] .counter { color: var(--muted); }

body.light input[type="text"],
body.light input[type="email"],
body.light select,
body.light textarea,
body[data-theme="light"] input[type="text"],
body[data-theme="light"] input[type="email"],
body[data-theme="light"] select,
body[data-theme="light"] textarea {
  background:#ffffff;
  color:var(--text);
  border-color:#d1d5db;
}

body.light input[type="file"],
body[data-theme="light"] input[type="file"] {
  background:#ffffff;
  color:var(--muted);
  border-color:#cbd5e1;
}

body.light .btn,
body[data-theme="light"] .btn { background:#f8fafc; color:#111827; border-color:#e5e7eb; }
body.light .btn:hover,
body[data-theme="light"] .btn:hover { background:#eef2f7; }

body.light .btn.primary,
body[data-theme="light"] .btn.primary { background:linear-gradient(180deg,var(--accent),var(--accent-2)); color:#fff; border:none; }

body.light .modal-close,
body[data-theme="light"] .modal-close { color:var(--muted); }
body.light .modal-close:hover,
body[data-theme="light"] .modal-close:hover { background:#00000010; }
body.light .toast,
body[data-theme="light"] .toast { background:#ffffff; color:#111827; border-color:#e5e7eb; box-shadow:0 10px 30px rgba(0,0,0,.15); }

.modal { background: rgba(0,0,0,0.45); }

/* overrides duros del modal en light */
:is(body.light, body[data-theme="light"], html[data-theme="light"], .card.light)
  #complaintsModal .modal-card {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.15) !important;
}

:is(body.light, body[data-theme="light"], html[data-theme="light"], .card.light)
  #complaintsModal .modal-header {
  border-bottom-color: #e5e7eb !important;
}

:is(body.light, body[data-theme="light"], html[data-theme="light"], .card.light)
  #complaintsModal .modal-body {
  background: #f8fafc !important;
}

:is(body.light, body[data-theme="light"], html[data-theme="light"], .card.light)
  #complaintsModal input[type="text"],
:is(body.light, body[data-theme="light"], html[data-theme="light"], .card.light)
  #complaintsModal input[type="email"],
:is(body.light, body[data-theme="light"], html[data-theme="light"], .card.light)
  #complaintsModal select,
:is(body.light, body[data-theme="light"], html[data-theme="light"], .card.light)
  #complaintsModal textarea {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #d1d5db !important;
}

:is(body.light, body[data-theme="light"], html[data-theme="light"], .card.light)
  #complaintsModal input[type="file"] {
  background: #ffffff !important;
  color: #475569 !important;
  border-color: #cbd5e1 !important;
}

:is(body.light, body[data-theme="light"], html[data-theme="light"], .card.light)
  #complaintsModal label,
:is(body.light, body[data-theme="light"], html[data-theme="light"], .card.light)
  #complaintsModal .help,
:is(body.light, body[data-theme="light"], html[data-theme="light"], .card.light)
  #complaintsModal .counter {
  color: #475569 !important;
}

:is(body.light, body[data-theme="light"], html[data-theme="light"], .card.light)
  #complaintsModal .btn {
  background: #f8fafc !important;
  color: #111827 !important;
  border-color: #e5e7eb !important;
}
:is(body.light, body[data-theme="light"], html[data-theme="light"], .card.light)
  #complaintsModal .btn:hover {
  background: #eef2f7 !important;
}
:is(body.light, body[data-theme="light"], html[data-theme="light"], .card.light)
  #complaintsModal .btn.primary {
  background: linear-gradient(180deg, var(--accent), var(--accent-2)) !important;
  color: #fff !important;
  border: none !important;
}

:is(body.light, body[data-theme="light"], html[data-theme="light"], .card.light)
  #complaintsModal .modal-close { color: #475569 !important; }
:is(body.light, body[data-theme="light"], html[data-theme="light"], .card.light)
  #complaintsModal .modal-close:hover { background: #00000010 !important; }

:is(body.light, body[data-theme="light"], html[data-theme="light"], .card.light)
  .toast {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.15) !important;
}

/* reposición del botón de contáctanos */
.header { position: relative; }
.btn-quejas{
  margin: 0 !important;

  position: absolute;
  right: 168px;
  top: 10px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 999px;
}

.btn-quejas:focus-visible{ outline:3px solid #ffffff44; outline-offset:2px; }

:root[data-theme="light"] .btn-quejas{
  color: white;
  border: 1px solid #e5e7eb;
}

/* estilo responsive */
@media (max-width:820px){
  .btn-quejas{
    position: static;
    order: 3;
    margin-left: auto;
  }
  #themeToggleBtn{ order: 4; position: static; margin-left: 8px; }
  #langToggleBtn { order: 5; position: static; margin-left: 8px; }
}

/* modal alto máximo y scroll interno */
.modal-card{
  max-height: 92svh;
  overflow: auto;
  width: min(720px, 96vw);
}

/* responsive en mobile pequeño */
@media (max-width:480px){
  .actions{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .actions .btn{
    width: 100%;
  }
  .consent-wrap{
    align-items: flex-start;
  }
}