/* Centro de Soporte de Lab CCK
   Colores y movimiento de la identidad LAB IA (azul noche con destellos azules, azul Lab,
   celeste, botones pildora), sobre la estructura original del sistema. */
:root {
  --lab-blue: #087bff;
  --lab-blue-dark: #0058c4;
  --lab-blue-glow: #0079ff;
  --lab-navy: #050e19;
  --lab-navy-2: #061323;
  --lab-ink: #070409;
  --lab-sky: #cfe0f7;
  --lab-sky-2: #9bc5f9;
  --lab-sky-soft: #eaf3ff;
  --cck-red: #ff3c2d;
  --cck-orange: #ff9600;
  --cck-orange-2: #ffae00;

  /* Tokens semanticos usados por todas las paginas */
  --color-primary: var(--lab-blue);
  --color-primary-dark: var(--lab-blue-dark);
  --color-primary-light: var(--lab-sky-soft);
  --color-accent: var(--lab-blue);

  --color-bg: #f4f8fd;
  --color-surface: #ffffff;
  --color-border: #d9e5f4;
  --color-text: #14202e;
  --color-text-muted: #55657a;
  --color-text-faint: #8a99ab;

  --color-success: #00869e;
  --color-success-bg: #e2f8fb;
  --color-warning: #c86a00;
  --color-warning-bg: #fff2e0;
  --color-danger: #e5321f;
  --color-danger-bg: #ffeceb;
  --color-info: var(--lab-blue);
  --color-info-bg: var(--lab-sky-soft);
  --color-neutral-bg: #eef3f9;

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 48px;
  --shadow-sm: 0 1px 2px rgba(5, 14, 25, 0.05);
  --shadow-md: 0 10px 30px rgba(8, 123, 255, 0.10);
  --shadow-lg: 0 24px 60px rgba(5, 14, 25, 0.25);
  --ease-out: cubic-bezier(.2, .7, .2, 1);

  font-family: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(155, 197, 249, .35), transparent 45%),
    radial-gradient(ellipse at 0% 100%, rgba(207, 224, 247, .6), transparent 50%),
    var(--color-bg);
  background-attachment: fixed;
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.5;
  overflow-x: hidden;
}

a { color: var(--lab-blue); }

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}

.container-narrow {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ============ Barra superior: azul noche con destellos en movimiento ============ */
.app-header {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  padding: 16px 0;
  background: linear-gradient(130deg, var(--lab-navy-2), var(--lab-ink));
}
.app-header::before,
.app-header::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.app-header::before {
  width: 520px; height: 520px;
  top: -330px; right: -120px;
  background: radial-gradient(circle, var(--lab-blue-glow) 0%, rgba(0, 121, 255, .35) 32%, transparent 62%);
  animation: glow-drift 16s ease-in-out infinite;
}
.app-header::after {
  width: 440px; height: 440px;
  bottom: -320px; left: -140px;
  background: radial-gradient(circle, #007bff 0%, rgba(0, 123, 255, .3) 34%, transparent 64%);
  animation: glow-drift 19s ease-in-out infinite reverse;
}
@keyframes glow-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  35% { transform: translate(-60px, 30px) scale(1.08); }
  70% { transform: translate(40px, -20px) scale(.95); }
}

.app-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Particulas que suben (se generan en js/lab-motion.js) */
.lab-particles { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.lab-particles span {
  position: absolute;
  bottom: -10px;
  width: var(--size, 4px);
  height: var(--size, 4px);
  border-radius: 50%;
  background: rgba(155, 197, 249, .6);
  box-shadow: 0 0 10px rgba(8, 123, 255, .8);
  animation: particle-rise var(--dur, 8s) linear infinite;
  animation-delay: var(--delay, 0s);
  opacity: 0;
}
@keyframes particle-rise {
  0% { transform: translate(0, 0); opacity: 0; }
  15% { opacity: .9; }
  80% { opacity: .5; }
  100% { transform: translate(var(--drift, 20px), -90px); opacity: 0; }
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #fff;
}
.brand img { display: block; }
.brand > img { animation: float 9s ease-in-out infinite; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-title { font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.brand-subtitle { font-size: 12px; color: #a9bfdc; }

.header-nav { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.header-nav a {
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, .25);
  transition: background .2s, border-color .2s, transform .2s;
}
.header-nav a:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .6); transform: translateY(-1px); }

@keyframes hero-enter { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes float {
  0%, 100% { transform: translate(0, 0); }
  30% { transform: translate(2px, -3px); }
  65% { transform: translate(-2px, 2px); }
}

/* Hero (pagina de inicio antigua) */
.hero { padding: 56px 0 40px; text-align: center; }
.hero h1 { font-size: 30px; margin: 0 0 12px; color: var(--color-primary-dark); }
.hero p { color: var(--color-text-muted); font-size: 16px; max-width: 560px; margin: 0 auto 28px; }

.hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============ Botones pildora ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 40px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, border-color .2s, transform .2s var(--ease-out), box-shadow .2s, opacity .2s;
}
.btn:hover:not(:disabled) { transform: translateY(-1px) scale(1.02); }
.btn:active:not(:disabled) { transform: scale(.98); }

.btn-primary {
  background: var(--lab-blue);
  color: #fff;
  box-shadow: 0 8px 22px rgba(8, 123, 255, .28);
}
.btn-primary:hover:not(:disabled) { background: #2a8cff; box-shadow: 0 12px 28px rgba(8, 123, 255, .38); }

.btn-secondary {
  background: #fff;
  color: var(--lab-blue);
  border-color: color-mix(in srgb, var(--lab-blue) 35%, transparent);
}
.btn-secondary:hover:not(:disabled) { background: var(--lab-sky-soft); border-color: var(--lab-blue); }

.btn-danger { background: var(--cck-red); color: #fff; }
.btn-danger:hover:not(:disabled) { opacity: .92; }

.btn-sm { padding: 8px 16px; font-size: 12.5px; }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn-block { width: 100%; }

/* ============ Tarjetas ============ */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 32px;
}
.card + .card { margin-top: 20px; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 36px;
}
.feature-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: left;
}
.feature-card h3 { margin: 0 0 6px; font-size: 15px; color: var(--lab-blue); }
.feature-card p { margin: 0; font-size: 13px; color: var(--color-text-muted); }

/* ============ Formularios ============ */
.form-group { margin-bottom: 20px; }

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

label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 7px;
}

.hint { font-size: 12px; color: var(--color-text-faint); margin-top: 4px; }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="password"],
select,
textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--color-text);
  background: #f9fbfe;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
input:hover, select:hover, textarea:hover { border-color: #b9cfea; }
input:focus, select:focus, textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--lab-blue);
  box-shadow: 0 0 0 4px rgba(8, 123, 255, .14);
}
textarea { resize: vertical; min-height: 130px; }

.required::after { content: ' *'; color: var(--cck-red); }

.radio-group { display: flex; gap: 18px; }
.radio-option { display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: 14px; }
.radio-option input { width: auto; }

.priority-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 640px) {
  .priority-options { grid-template-columns: repeat(2, 1fr); }
}
.priority-option {
  border: 1px solid var(--color-border);
  border-radius: 40px;
  padding: 11px 8px;
  text-align: center;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
  background: #f9fbfe;
  margin: 0;
  transition: all .2s var(--ease-out);
}
.priority-option:hover { border-color: var(--lab-blue); color: var(--lab-blue); transform: translateY(-1px); }
.priority-option input { display: none; }
.priority-option.selected-Baja { border-color: var(--color-success); background: var(--color-success-bg); color: var(--color-success); }
.priority-option.selected-Media { border-color: var(--lab-blue); background: var(--lab-sky-soft); color: var(--lab-blue); }
.priority-option.selected-Alta { border-color: var(--cck-orange); background: var(--color-warning-bg); color: var(--color-warning); }
.priority-option.selected-Critica { border-color: var(--cck-red); background: var(--color-danger-bg); color: var(--color-danger); }
.priority-option[class*="selected-"] { animation: pop .3s var(--ease-out); }
@keyframes pop { 50% { transform: scale(1.06); } }

.file-drop {
  border: 1.5px dashed #b9cfea;
  border-radius: var(--radius-md);
  padding: 28px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13px;
  cursor: pointer;
  background: linear-gradient(180deg, #f9fbfe, var(--lab-sky-soft));
  transition: border-color .2s, background .2s, transform .2s;
}
.file-drop:hover { border-color: var(--lab-blue); transform: translateY(-1px); }

.file-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-neutral-bg);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  font-size: 13px;
  animation: hero-enter .35s ease-out both;
}
.file-item button { background: none; border: none; color: var(--color-danger); cursor: pointer; font-size: 13px; font-weight: 700; }

/* ============ Badges ============ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.badge-status-Abierto { background: var(--lab-sky-soft); color: var(--lab-blue); }
.badge-status-En_revision { background: #e3ecff; color: #2a4bd1; }
.badge-status-En_proceso { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-status-Esperando_informacion { background: var(--color-neutral-bg); color: var(--color-text-muted); }
.badge-status-Resuelto { background: var(--color-success-bg); color: var(--color-success); }
.badge-status-Cerrado { background: #e6eaf0; color: #5b6472; }

.badge-priority-Baja { background: var(--color-success-bg); color: var(--color-success); }
.badge-priority-Media { background: var(--lab-sky-soft); color: var(--lab-blue); }
.badge-priority-Alta { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-priority-Critica { background: var(--color-danger-bg); color: var(--color-danger); }

/* ============ Alertas ============ */
.alert {
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-size: 13px;
  margin-bottom: 16px;
  animation: hero-enter .35s ease-out both;
}
.alert-success { background: var(--color-success-bg); color: var(--color-success); }
.alert-error { background: var(--color-danger-bg); color: var(--color-danger); }
.alert-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.alert-info { background: var(--lab-sky-soft); color: var(--lab-blue); }
.alert ul { margin: 6px 0 0; padding-left: 18px; }

/* ============ Utilidades ============ */
.text-center { text-align: center; }
.text-muted { color: var(--color-text-muted); }
.text-faint { color: var(--color-text-faint); }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; }
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-2 { gap: 12px; }
.hidden { display: none !important; }

.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.page-section { padding: 40px 0 64px; }

.section-title {
  font-size: clamp(22px, 2.4vw, 28px);
  color: var(--lab-blue);
  letter-spacing: -.04em;
  font-weight: 700;
  margin: 0 0 6px;
}
.section-subtitle {
  color: var(--color-text-muted);
  font-size: 15px;
  margin: 0 0 28px;
}
.ticket-number-tag {
  font-family: 'Consolas', 'SFMono-Regular', monospace;
  font-weight: 700;
  color: var(--lab-blue);
  letter-spacing: .3px;
}

.timeline { border-left: 2px solid var(--color-border); margin-left: 6px; padding-left: 22px; }
.timeline-item { position: relative; padding-bottom: 18px; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: -29px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--lab-blue);
  box-shadow: 0 0 0 4px var(--lab-sky-soft);
}
.timeline-item .timeline-meta { font-size: 12px; color: var(--color-text-faint); }
.timeline-item .timeline-body { font-size: 14px; margin-top: 2px; white-space: pre-wrap; }

/* Pantalla de exito */
.success-check {
  width: 72px; height: 72px;
  margin: 0 auto 8px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--lab-blue);
  color: #fff;
  box-shadow: 0 0 0 10px var(--lab-sky-soft);
  animation: hero-enter .6s var(--ease-out) both;
}
.success-check svg { width: 34px; height: 34px; }

/* ============ Aparicion al hacer scroll ============ */
.js .reveal {
  opacity: 0;
  transform: translateY(24px) scale(.96);
  transition: transform .9s var(--ease-out), opacity .7s;
}
.js .reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .1s !important; }
.reveal-delay-2 { transition-delay: .2s !important; }

/* ============ Pie ============ */
.app-footer { text-align: center; padding: 24px 0; color: var(--color-text-faint); font-size: 12px; }

/* ============ Responsive ============ */
@media (max-width: 560px) {
  .app-header .container { flex-direction: column; align-items: flex-start; }
  .header-nav { justify-content: flex-start; }
  .card { padding: 22px; border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ============ Ticket como conversacion ============ */
.ticket-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 28px;
  align-items: start;
}
.ticket-kicker { margin: 0 0 4px; font-size: 13px; }
.ticket-subject {
  margin: 0 0 18px;
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -.03em;
  color: var(--color-text);
}
.ticket-side { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 16px; }
.ticket-side.card, .ticket-side .card { padding: 22px 24px; margin: 0; }

.thread { display: flex; flex-direction: column; gap: 22px; }
.thread-msg { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; animation: hero-enter .4s ease-out both; }
.thread-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #9bb3d1, #6f88a8);
}
.thread-msg-staff .thread-avatar { background: linear-gradient(135deg, var(--lab-blue), var(--lab-blue-dark)); }
.thread-msg-internal .thread-avatar { background: linear-gradient(135deg, #ffb347, var(--cck-orange)); }
.thread-msg-main {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 0 18px 18px 18px;
  padding: 14px 18px 16px;
  box-shadow: var(--shadow-sm);
}
.thread-msg-staff .thread-msg-main { border-color: #b9d6ff; background: #f6faff; }
.thread-msg-internal .thread-msg-main { border-style: dashed; border-color: #ffc98a; background: #fffaf2; }
.thread-msg-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 8px; }
.thread-msg-head strong { font-size: 15px; }
.thread-msg-head time { font-size: 12.5px; color: var(--color-text-faint); }
.thread-role {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.thread-msg-staff .thread-role { color: var(--lab-blue); }
.thread-msg-internal .thread-role { color: var(--color-warning); }
.thread-msg-body { white-space: pre-wrap; word-break: break-word; font-size: 15px; line-height: 1.6; }
.thread-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.thread-file {
  font-size: 13px;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 40px;
  border: 1px solid var(--color-border);
  background: var(--color-neutral-bg);
  color: var(--color-text);
  transition: border-color .2s, color .2s;
}
.thread-file:hover { border-color: var(--lab-blue); color: var(--lab-blue); }
.thread-event {
  margin-left: 58px;
  font-size: 13px;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.thread-event time { color: var(--color-text-faint); }

.reply-box { margin-top: 26px; padding: 22px 24px; }
.reply-box textarea { min-height: 110px; }
.reply-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.reply-actions .btn { margin-left: auto; }

.detail-list { margin: 0; }
.detail-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
}
.detail-row:first-child { padding-top: 0; }
.detail-row:last-child { border-bottom: 0; padding-bottom: 0; }
.detail-row dt { color: var(--color-text-muted); }
.detail-row dd { margin: 0; word-break: break-word; }

/* Aviso de exito (arriba a la derecha) */
.toast-success {
  position: fixed;
  top: 84px;
  right: 20px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 40px);
  padding: 16px 18px 16px 20px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  color: var(--color-success);
  font-weight: 700;
  font-size: 15px;
  animation: hero-enter .4s var(--ease-out) both;
}
.toast-success svg { width: 24px; height: 24px; flex-shrink: 0; }
.toast-success button {
  margin-left: 14px;
  background: none;
  border: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--color-text-faint);
  cursor: pointer;
}

@media (max-width: 860px) {
  .ticket-layout { grid-template-columns: 1fr; }
  .ticket-side { position: static; }
}
@media (max-width: 560px) {
  .thread-msg { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
  .thread-avatar { width: 34px; height: 34px; font-size: 12px; }
  .thread-event { margin-left: 44px; }
  .detail-row { grid-template-columns: 96px minmax(0, 1fr); }
}