/* ── VARIABLES Y RESET ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:     #006E38;
  --navy-l:   #E0F0E8;
  --cyan:     #00AFEF;
  --cyan-d:   #0093CB;
  --cyan-l:   #E1F5FE;
  --green:    #00A859;
  --green-d:  #006E38;
  --green-l:  #E8F5E9;
  --yellow:   #FFF212;
  --yellow-d: #FBCC0D;
  --yellow-l: #FFFDE7;
  --red:      #ED3237;
  --red-d:    #F80C28;
  --red-l:    #FFEBEE;
  --teal:     #24AA95;
  --teal-l:   #E0F5F2;
  --white:    #FFFFFF;
  --off:      #FAFAFC;
  --gray:     #ECEFF4;
  --text:     #1A1C24;
  --muted:    #626775;
  --border:   #E2E4E9;
  --sem-verde:    #00A859;
  --sem-amarillo: #FBCC0D;
  --sem-rojo:     #ED3237;
  --sh:  0 2px 10px rgba(62,64,149,.10);
  --shl: 0 8px 28px rgba(62,64,149,.14);
  --r:  10px;
  --rl: 16px;
}

[data-theme="dark"] {
  --navy:     #006E38;
  --navy-l:   #0d2d1a;
  --cyan:     #00AFEF;
  --cyan-d:   #00c4ff;
  --cyan-l:   #0a2a3a;
  --green:    #00A859;
  --green-d:  #00d470;
  --green-l:  #0a2e1a;
  --yellow:   #FFF212;
  --yellow-d: #FBCC0D;
  --yellow-l: #2a2500;
  --red:      #ED3237;
  --red-d:    #ff5555;
  --red-l:    #2a0a0a;
  --teal:     #24AA95;
  --teal-l:   #0a2520;
  --white:    #0f1117;
  --off:      #0a0d12;
  --gray:     #161b24;
  --text:     #e8eaf0;
  --muted:    #7a8099;
  --border:   #1e2535;
  --sh:  0 2px 10px rgba(0,0,0,.4);
  --shl: 0 8px 28px rgba(0,0,0,.6);
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--gray);
  color: var(--text);
  border-color: var(--border);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--muted);
}

[data-theme="dark"] .gm-body,
[data-theme="dark"] .generalModalCard,
[data-theme="dark"] #generalModalCard {
  background: var(--white);
  color: var(--text);
}

[data-theme="dark"] .gm-head {
  background: var(--navy);
  color: white;
}

[data-theme="dark"] button:not(.da-btn):not(.btn):not(.s-item):not(.hdr-btn):not(.cat-pill):not(.add-btn):not(.modal-close):not(.hamburger):not(.stoggle):not(.logout-btn) {
  background: var(--gray);
  color: var(--text);
  border-color: var(--border);
}

[data-theme="dark"] .chk-grid label,
[data-theme="dark"] .causas-chips button,
[data-theme="dark"] #causasSeleccionadas span {
  background: var(--gray) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--off);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  font-size: 20px;
}

h1, h2, h3 { font-family: 'DM Serif Display', serif; font-weight: 400; }

/* ── UTILIDADES ─────────────────────────────────────────────────── */
.hidden { display: none !important; }

.loading {
  text-align: center;
  padding: 2rem;
  color: var(--muted);
  font-size: 19px;
}
.loading i {
  font-size: 25px;
  display: block;
  margin-bottom: .5rem;
  color: var(--cyan);
  animation: spin 1s linear infinite;
}
@keyframes spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }

.empty-st {
  text-align: center;
  padding: 2.5rem;
  color: var(--muted);
}
.empty-st i {
  font-size: 41px;
  display: block;
  margin-bottom: .875rem;
  color: var(--cyan);
}

/* ── TOAST ──────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--navy);
  color: var(--white);
  padding: 9px 16px;
  border-radius: var(--r);
  font-size: 15px;
  font-weight: 500;
  box-shadow: var(--shl);
  z-index: 9999;
  transform: translateY(60px);
  opacity: 0;
  transition: all .3s;
  border-left: 4px solid var(--green);
  max-width: 320px;
}
.toast.show { transform: translateY(0); opacity: 1; }

/* ── INPUTS GLOBALES ────────────────────────────────────────────── */
input[type=text],
input[type=email],
input[type=tel],
input[type=date],
input[type=datetime-local],
input[type=password],
select,
textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  color: var(--text);
  background: var(--white);
  transition: border .2s, box-shadow .2s;
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0,174,239,.12);
}
input:disabled, textarea:disabled, select:disabled {
  background: #f4f6f9;
  color: var(--muted);
  cursor: not-allowed;
}
textarea { resize: vertical; min-height: 90px; line-height: 1.6; }

/* ── BOTONES GLOBALES ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 50px;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 19px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.btn-primary   { background: var(--red);   color: var(--white); }
.btn-primary:hover  { background: var(--red-d); transform: translateY(-1px); }
.btn-secondary { background: var(--cyan);  color: var(--white); }
.btn-secondary:hover { background: var(--cyan-d); }
.btn-success   { background: var(--green); color: var(--white); }
.btn-success:hover   { background: var(--green-d); }
.btn-outline {
  background: none;
  border: 1.5px solid var(--border);
  color: var(--muted);
  border-radius: var(--r);
}
.btn-outline:hover { border-color: var(--text); color: var(--text); }
.btn:disabled { background: var(--muted); cursor: not-allowed; transform: none; }

/* ── MODAL BASE ─────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 600;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-overlay.show { display: flex; }
.modal-box {
  background: var(--white);
  border-radius: var(--rl);
  box-shadow: var(--shl);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-head {
  background: var(--navy);
  color: var(--white);
  padding: 1.1rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 3px solid var(--red);
  border-radius: var(--rl) var(--rl) 0 0;
}
.modal-head h3 { font-size: .95rem; }
.modal-body { padding: 1.25rem; }
.modal-close {
  background: none;
  border: none;
  color: rgba(255,255,255,.55);
  font-size: 21px;
  cursor: pointer;
  line-height: 1;
}
.modal-close:hover { color: var(--white); }

/* ── SEMÁFORO ───────────────────────────────────────────────────── */
.semaforo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 17px;
  font-weight: 700;
}
.semaforo.verde   { background: var(--green-l); color: var(--green-d); }
.semaforo.amarillo { background: var(--yellow-l); color: var(--yellow-d); }
.semaforo.rojo    { background: var(--red-l);   color: var(--red-d); }
.semaforo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}
.verde   .semaforo-dot { background: var(--green); }
.amarillo .semaforo-dot { background: var(--yellow-d); }
.rojo    .semaforo-dot { background: var(--red); }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}

/* ── STATUS BADGES ──────────────────────────────────────────────── */
.sb {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
}
.s-pend { background: var(--yellow-l); color: var(--yellow-d); }
.s-proc { background: var(--cyan-l);   color: var(--cyan-d); }
.s-cerr { background: var(--green-l);  color: var(--green-d); }
.s-rech    { background: var(--red-l);    color: var(--red-d); }

.s-pendiente { background: #EFEBE9;        color: #795548;        }
.s-proceso   { background: var(--cyan-l);  color: var(--cyan-d);  }
.s-cerrado   { background: var(--green-l); color: var(--green-d); }
.s-rechazado { background: var(--red-l);   color: var(--red-d);   }
.s-standby   { background: #FFF3E0;        color: #E65100;        }

/* ── CATEGORY TAGS ──────────────────────────────────────────────── */
.ct { display: inline-block; padding: 2px 7px; border-radius: 6px; font-size: 16px; font-weight: 600; }
.t-pet { background: var(--cyan-l);   color: var(--cyan-d); }
.t-que { background: var(--red-l);    color: var(--red-d); }
.t-rec { background: var(--yellow-l); color: var(--yellow-d); }
.t-sug { background: var(--green-l);  color: var(--green-d); }
.t-fel { background: #F3E5F5;         color: #4A148C; }

/* ── TABLA BASE ─────────────────────────────────────────────────── */
.tw { background: var(--white); border-radius: var(--rl); border: 1px solid var(--border); overflow: hidden; }
.tw-head {
  display: flex;
  align-items: center;
  padding: .75rem 1.1rem;
  border-bottom: 1px solid var(--border);
  gap: .65rem;
  flex-wrap: wrap;
}
.tw-head h3 { font-size: 19px; font-weight: 600; color: var(--cyan-d); font-family: 'DM Sans', sans-serif; flex: 1; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
th {
  background: var(--cyan-l);
  font-size: 17px;
  font-weight: 700;
  color: var(--cyan-d);
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 8px 9px;
  text-align: left;
  border-bottom: 1px solid rgba(0,174,239,.2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
td {
  padding: 8px 9px;
  font-size: 17px;
  border-bottom: .5px solid var(--gray);
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--cyan-l); }

/* ── FORM HELPERS ───────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: .875rem; }
.form-label { font-size: 17px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.req { color: var(--red); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .875rem; }
.form-row.single { grid-template-columns: 1fr; }
.divider { height: 1px; background: var(--border); margin: .875rem 0; }

/* ── CHAT / COMUNICACIONES ──────────────────────────────────────── */
.chat-wrap { display: flex; flex-direction: column; gap: 10px; padding: .875rem 0; max-height: 350px; overflow-y: auto; }
.chat-msg {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 85%;
}
.chat-msg.interna { align-self: flex-start; }
.chat-msg.cliente { align-self: flex-end; }
.chat-bubble {
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 18px;
  line-height: 1.6;
}
.interna .chat-bubble {
  background: var(--gray);
  color: var(--text);
  border-radius: 4px 12px 12px 12px;
}
.cliente .chat-bubble {
  background: var(--cyan);
  color: var(--white);
  border-radius: 12px 4px 12px 12px;
}
.chat-meta {
  font-size: 16px;
  color: var(--muted);
  padding: 0 4px;
}
.chat-adjunto {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,.06);
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 17px;
  text-decoration: none;
  color: inherit;
  margin-top: 4px;
}

/* ── MÉTRICAS ───────────────────────────────────────────────────── */
.metric-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 10px; margin-bottom: 1.5rem; }
.metric-card { background: var(--white); border-radius: var(--r); padding: 1rem; border: 1px solid var(--border); text-align: center; }
.metric-val { font-size: 1.8rem; font-weight: 700; line-height: 1; }
.metric-lbl { font-size: 17px; color: var(--muted); margin-top: .25rem; }
.metric-pct { font-size: 18px; font-weight: 600; margin-top: .25rem; }

.donut-wrap { position: relative; width: 120px; height: 120px; margin: 0 auto 8px; }
.donut-wrap svg { transform: rotate(-90deg); }
.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
}

@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
}