/* =========================
   RESET GENERAL
   ========================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background-color: #f4f6f8;
  color: #333;
  line-height: 1.5;
}

/* =========================
   LOGIN
   ========================= */
body.login-body {
  display: flex; justify-content: center; align-items: center;
  min-height: 100vh; padding: 15px;
}
.login-container {
  background:#fff; padding:40px 30px; border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
  width:100%; max-width:420px; transition:transform .3s, box-shadow .3s;
}
.login-container:hover { transform: translateY(-3px); }
.login-container h2 { text-align:center; margin-bottom:25px; color:#222; font-size:28px; font-weight:700; }
.login-input-group { position:relative; margin-bottom:22px; }
.login-input-group input{
  width:100%; padding:14px 45px 14px 14px; border:2px solid #ccc; border-radius:12px; font-size:16px;
  background:#f9fbfd; transition:border-color .3s, box-shadow .3s;
}
.login-input-group input:focus{ border-color:#007BFF; box-shadow:0 0 8px rgba(0,123,255,.3); outline:none; }
.login-input-group i{ position:absolute; right:15px; top:50%; transform:translateY(-50%); color:#007BFF; font-size:18px; }
.login-button{
  width:100%; padding:14px; background:#007BFF; color:#fff; border:none;
  font-size:16px; font-weight:600; border-radius:12px; cursor:pointer; transition: background .3s, transform .2s;
}
.login-button:hover{ background:#0056b3; transform: translateY(-2px); }
.login-button:active{ transform: scale(.98); }
.login-error-message{ text-align:center; color:red; font-weight:bold; margin-top:12px; font-size:14px; }
.logo-login{ max-width:100%; height:auto; display:block; margin:0 auto 20px; }

/* =========================
   PANEL
   ========================= */
body.panel-body { margin:0; padding:0; }
.panel-container{
  background:#fff; width:95%; margin:30px auto; padding:30px;
  border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.1);
  overflow-x:auto;
}
.panel-title{ text-align:center; margin-bottom:20px; color:#222; font-size:26px; font-weight:700; }
.panel-buttons{ display:flex; justify-content:center; gap:15px; margin-bottom:20px; flex-wrap:wrap; }
.panel-btn{
  background:#007BFF; color:#fff; padding:10px 18px; border-radius:8px;
  text-decoration:none; font-weight:600; transition: background-color .3s, transform .2s;
  text-align:center; display:inline-block; border: none;
}
.panel-btn:hover{ background:#0056b3; transform: translateY(-2px); }
.panel-btn:active{ transform: scale(.98); }
.panel-btn-logout{ background:#dc3545; }
.panel-btn-logout:hover{ background:#c82333; }
.logo-panel{ max-width:150px; height:auto; display:block; margin:0 auto 20px; }

/* Filtros */
.panel-filtros{
  display:flex; gap:15px; flex-wrap:wrap; margin-bottom:20px; align-items:center; justify-content:center;
}
.panel-filtros label{ font-weight:600; color:#333; display:flex; flex-direction:column; font-size:14px; }
.panel-filtros input, .panel-filtros select{
  padding:6px 10px; border:1px solid #ccc; border-radius:6px; font-size:14px; min-width:120px;
}

/* =========================
   TABLA: BASE (desktop)
   ========================= */
.panel-table{
  width:100%;
  border-collapse: separate; border-spacing:0;
  font-size:15px; background:#fff;
  min-width:800px;
}
.panel-table th, .panel-table td{ color:#0f172a; padding:12px 14px; border:none; }
.panel-table thead th{
  background:#0a66c2; color:#fff; font-weight:700; text-align:left;
  letter-spacing:.2px; border-bottom:1px solid rgba(255,255,255,.2);
}
.panel-table tbody tr{ background:#fff; }
.panel-table tbody tr:nth-child(even){ background:#f7f9fc; }
.panel-table tbody tr:hover{ background:#eef3fb; }
.panel-table a{ color:#0a66c2; text-decoration:none; font-weight:600; }
.panel-table a:hover{ text-decoration:underline; }

/* =========================
   ESTADISTICAS
   ========================= */
body.estadisticas-body{ background:#f4f6f8; padding:15px; }
.estadisticas-container{
  background:#fff; width:95%; max-width:1300px; margin:30px auto; padding:30px;
  border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.1); overflow-x:auto;
}
.estadisticas-title{ text-align:center; margin-bottom:25px; color:#222; font-size:28px; font-weight:700; }
.estadisticas-buttons{ display:flex; justify-content:center; gap:15px; margin-bottom:20px; flex-wrap:wrap; }
.estadisticas-btn{
  background:#007BFF; color:#fff; padding:10px 18px; border-radius:8px;
  text-decoration:none; font-weight:600; transition: background-color .3s, transform .2s; text-align:center;
}
.estadisticas-btn:hover{ background:#0056b3; transform: translateY(-2px); }
.estadisticas-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }
.estadisticas-card{ background:#fff; padding:20px; border-radius:14px; box-shadow:0 4px 12px rgba(0,0,0,.1); }
.estadisticas-card h3{ margin-bottom:15px; font-weight:600; color:#333; text-align:center; }
.estadisticas-card canvas{ width:100% !important; height:auto !important; max-height:350px; }

/* =========================
   FORMULARIO
   ========================= */
body.form-body{ display:flex; justify-content:center; align-items:center; min-height:100vh; padding:15px; }
.form-container{
  background:#fff; padding:35px; border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.1); width:100%; max-width:500px;
}
.form-container h2{ text-align:center; margin-bottom:25px; color:#222; font-size:26px; font-weight:700; }
.form-group{ margin-bottom:18px; }
.form-group label{ display:block; margin-bottom:6px; font-weight:600; color:#333; }
.form-group input, .form-group select, .form-group textarea{
  width:100%; padding:12px; border:1.5px solid #ccc; border-radius:10px; font-size:16px;
  background:#f9fbfd; color:#333; transition:border-color .3s, box-shadow .3s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  border-color:#007BFF; box-shadow:0 0 8px rgba(0,123,255,.3); outline:none;
}
.form-group textarea{ resize:vertical; min-height:100px; }
.form-container button{
  width:100%; padding:14px; background:#007BFF; color:#fff; border:none; font-size:16px; font-weight:600;
  border-radius:10px; cursor:pointer; transition: background-color .3s, transform .2s;
}
.form-container button:hover{ background:#0056b3; transform: translateY(-2px); }
.form-container button:active{ transform: scale(.98); }
.form-container p.error{ color:red; } .form-container p.success{ color:green; }
.logo{ max-width:100%; height:auto; display:block; margin:0 auto 20px; }

/* =========================
   TICKET
   ========================= */
.ticket-container{
  position:relative; background:#fff; padding:28px; border-radius:18px;
  width:95%; max-width:640px; margin:24px auto;
  border:1px solid #e6edf6; box-shadow:0 12px 28px rgba(16,38,84,.12); overflow:hidden;
}
.ticket-container::before{
  content:""; position:absolute; inset:0 0 auto 0; height:6px;
  background:linear-gradient(90deg,#007BFF,#00C2FF,#5EEAD4);
}
.ticket-container::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(1200px 240px at 80% -10%,rgba(0,123,255,.08),transparent 60%),
             radial-gradient(800px 200px at 10% 110%,rgba(94,234,212,.10),transparent 60%);
  pointer-events:none;
}
.ticket-container h2{ text-align:center; color:#0f172a; font-size:24px; font-weight:800; margin-bottom:14px; letter-spacing:.2px; }
.ticket-container p{ font-size:15px; color:#334155; margin-bottom:10px; }
.ticket-container p strong, .ticket-container p b{ color:#0f172a; }
.ticket-container button{
  width:100%; padding:14px; background:linear-gradient(180deg,#28a745,#1f8f39);
  color:#fff; border:none; font-size:16px; font-weight:700; border-radius:12px; cursor:pointer;
  transition: transform .2s, filter .2s;
}
.ticket-container button:hover{ transform: translateY(-2px); filter: brightness(1.05); }
.ticket-container button:active{ transform: scale(.98); }
.ticket-container .success{ color:#0ea5a0; text-align:center; font-weight:800; margin-top:18px; }

/* =========================
   TIPOGRAFÍA RESPONSIVA
   ========================= */
:root{
  --fs-base: clamp(14px, 1.3vw, 16px);
  --fs-sm: clamp(12px, 1.1vw, 14px);
}
body{ font-size: var(--fs-base); }
.panel-table{ font-size: var(--fs-sm); }

/* =========================================================
   MÓVIL HIPER COMPACTO (sin cards) — título | dato pegados
   ========================================================= */
@media (max-width: 768px){

  .panel-container{ padding: 12px; }

  /* Evita scroll horizontal heredado del min-width desktop */
  .panel-table{ min-width: 0; }

  /* tabla como bloques, sin "cards" */
  .panel-table, .panel-table thead, .panel-table tbody, .panel-table tr {
    display:block; width:100%;
  }
  .panel-table thead{ display:none; }
  .panel-table tr{
    margin:0; padding:0; border:0; border-radius:0; box-shadow:none; background:transparent;
  }
  .panel-table tr + tr{ border-top:1px solid #e9edf3; }

  /* cada celda = una fila (Etiqueta | Valor) */
  .panel-table td{
    display:grid;
    grid-template-columns: minmax(120px, 42%) 1fr; /* más flexible */
    align-items:center;
    gap:2px;
    padding:3px 6px;
    border:0;
    line-height:1.1;
    background:transparent;
    font-size:13px; /* fallback si no se usa .val */
    overflow-wrap: break-word; /* validación-friendly */
    word-break: break-word;
  }
  .panel-table td::before{
    content: attr(data-label);
    color:#0a66c2; font-weight:600; font-size:12px;
    margin:0; white-space:nowrap;
  }
  .panel-table td .val{
    display:block; color:#0f172a; font-weight:500; font-size:13px;
    margin:0; white-space:normal; word-break:break-word; overflow-wrap:break-word;
  }

  /* botones pequeños en columna Acción */
  .panel-table td a.panel-btn{
    display:inline-block;
    min-height:36px;
    padding:6px 10px; border-radius:6px; font-size:12.5px; line-height:1.1;
    white-space:normal;
  }

  /* filtros compactos */
  .panel-buttons{ gap:8px; margin-bottom:8px; }
  .panel-btn{ padding:8px 10px; font-size:14px; }
  .panel-filtros{ gap:8px; margin-bottom:10px; }
  .panel-filtros input, .panel-filtros select{
    padding:8px 10px; border-radius:8px; font-size:14px; width:100%;
  }
  .panel-filtros .panel-btn, .panel-filtros button{ min-height:36px; width:100%; }
}

@media (max-width: 400px){
  .panel-table td{ grid-template-columns: minmax(110px, 40%) 1fr; padding:2px 5px; gap:2px; }
  .panel-table td::before{ font-size:11.5px; }
  .panel-table td .val{ font-size:12.5px; }
}

/* ====== FIX universal de scroll y compatibilidad móvil ====== */

/* 1) Fuerza que la página SIEMPRE pueda desplazarse verticalmente */
html, body{
  min-height: 100%;
  height: auto;
  overflow-y: auto;     /* scroll vertical garantizado */
  overflow-x: hidden;   /* evita arrastre lateral accidental */
}

/* 2) iOS/Safari: activa inercia de scroll en contenedores si el UA lo soporta */
@supports (-webkit-overflow-scrolling: touch) {
  .panel-container,
  .panel-table{
    -webkit-overflow-scrolling: touch;
  }
}

/* 3) Robustez móvil: evita que <tbody> se convierta en “caja” sin scroll */
@media (max-width: 768px){
  .panel-container{ overflow-x: hidden; }            /* en móvil no necesitamos barra horizontal */
  .panel-table{ min-width: 0 !important; width:100%; }
  .panel-table tbody{ display:block; overflow: visible !important; }
  .panel-table tr{ display:block; }
  /* por si hay navegadores sin grid, que no rompan el flujo */
  @supports not (display: grid){
    .panel-table td{ display:flex; align-items:center; }
    .panel-table td::before{ flex:0 0 42%; }
    .panel-table td .val{ flex:1 1 58%; }
  }
}

/* 4) Extra: textos muy largos nunca bloquean el scroll */
@media (max-width: 768px){
  .panel-table td,
  .panel-table td .val,
  .panel-table td a.panel-btn{
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
  }
}

/* =========================
   Laptops pequeñas (11–13") — 769–1024px
   ========================= */
@media (min-width: 769px) and (max-width: 1024px){
  .panel-container{
    width: 98%;
    padding: 18px;
    overflow: auto;            /* asegura scroll cuando se necesite */
  }

  .panel-title{ font-size: 24px; }

  .panel-buttons{ gap: 10px; }
  .panel-btn{ padding: 8px 12px; font-size: 14px; }

  .panel-filtros{ gap: 10px; }
  .panel-filtros input,
  .panel-filtros select{
    font-size: 13px;
    padding: 6px 8px;
    min-width: 110px;
  }

  /* Tabla más compacta, mantiene min-width:800px heredado */
  .panel-table{ font-size: 14px; }
  .panel-table th,
  .panel-table td{ padding: 8px 10px; }

  /* Encabezado pegado arriba al hacer scroll */
  .panel-table thead th{
    position: sticky;
    top: 0;
    z-index: 2;
  }
}
/* Botones dentro de la tabla: forzar texto blanco */
.panel-table a.panel-btn,
.panel-table a.panel-btn:hover,
.panel-table a.panel-btn:visited {
  color: #fff !important;
}

/* (Opcional) variantes con buen contraste */
.panel-btn--assign { background:#0A66C2; }
.panel-btn--assign:hover { background:#084e96; }

.panel-btn--resolve { background:#1F8F39; }
.panel-btn--resolve:hover { background:#176c2c; }