/*
 * ══════════════════════════════════════════════════════════════════
 *  GRANJA SIN FIN — Tema CSS para Hesk
 *  Paleta: pergamino #efe2bd · tierra #9a5039 · naranja #d65d31
 *           verde #4a7c3f · oscuro #3b2a1a · claro #fdf6e3
 *  Fuentes: DM Serif Display (títulos) · Nunito Sans (cuerpo)
 * ══════════════════════════════════════════════════════════════════
 */

/* ── 1. Importar fuentes ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Nunito+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap');

/* ── 2. Variables de marca ───────────────────────────────────────── */
:root {
  --gsf-pergamino  : #efe2bd;
  --gsf-tierra     : #9a5039;
  --gsf-naranja    : #d65d31;
  --gsf-verde      : #4a7c3f;
  --gsf-oscuro     : #3b2a1a;
  --gsf-claro      : #fdf6e3;
  --gsf-borde      : #c9b48a;
  --gsf-sombra     : rgba(59, 42, 26, .12);
  --gsf-radius     : 7px;
}

/* ── 3. Base global ──────────────────────────────────────────────── */
html, body {
  font-family : 'Nunito Sans', sans-serif;
  background  : var(--gsf-claro);
  color       : var(--gsf-oscuro);
  font-size   : 15px;
  line-height : 1.6;
}

/* ── 4. Tipografía ───────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.hesk_title, .hesk_h1, .hesk_h2, .hesk_h3,
.hesk_pageTitle {
  font-family : 'DM Serif Display', serif;
  color       : var(--gsf-tierra);
  line-height : 1.2;
}

h1 { font-size: 1.9rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }

/* ── 5. Cabecera de página ───────────────────────────────────────── */
#hesk_header,
.hesk_header,
header {
  background  : linear-gradient(135deg, var(--gsf-tierra) 0%, var(--gsf-naranja) 65%, #c8a96e 100%);
  border-bottom: 3px solid var(--gsf-pergamino);
  box-shadow  : 0 3px 8px var(--gsf-sombra);
  padding     : 14px 24px;
}

/* ── 6. Navegación / menú superior ──────────────────────────────── */
#hesk_nav, .hesk_nav, nav {
  background : var(--gsf-oscuro);
  padding    : 0 24px;
}

#hesk_nav a, .hesk_nav a, nav a {
  color       : var(--gsf-pergamino);
  font-weight : 600;
  padding     : 10px 14px;
  display     : inline-block;
  text-decoration: none;
  transition  : background .18s, color .18s;
}

#hesk_nav a:hover, .hesk_nav a:hover, nav a:hover,
#hesk_nav a.active, .hesk_nav a.active {
  background : var(--gsf-naranja);
  color      : #ffffff !important;
  text-decoration: none;
}

/* ── 7. Contenedor principal ─────────────────────────────────────── */
#hesk_content, .hesk_content,
.hesk_wrap, #hesk_wrap {
  max-width  : 860px;
  margin     : 28px auto;
  padding    : 0 16px;
}

/* ── 8. Tarjetas / paneles ───────────────────────────────────────── */
.hesk_box, .hesk_panel,
.hesk_ticket_box, .hesk_form_box,
.hesk_knowledgebase_box {
  background    : #fff;
  border        : 1px solid var(--gsf-borde);
  border-radius : var(--gsf-radius);
  box-shadow    : 0 2px 8px var(--gsf-sombra);
  padding       : 24px 28px;
  margin-bottom : 20px;
}

/* ── 9. Formularios ──────────────────────────────────────────────── */
label {
  font-weight : 600;
  color       : var(--gsf-oscuro);
  margin-bottom: 4px;
  display     : block;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
  width         : 100%;
  border        : 1px solid var(--gsf-borde);
  border-radius : var(--gsf-radius);
  background    : #fffdf5;
  color         : var(--gsf-oscuro);
  font-family   : 'Nunito Sans', sans-serif;
  font-size     : .95rem;
  padding       : 9px 12px;
  box-sizing    : border-box;
  transition    : border-color .18s, box-shadow .18s;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color : var(--gsf-naranja);
  outline      : none;
  box-shadow   : 0 0 0 3px rgba(214,93,49,.18);
}

/* ── 10. Botones ─────────────────────────────────────────────────── */
input[type="submit"],
input[type="button"],
button,
.hesk_btn,
.btn, .btn-primary, .btn-default {
  font-family   : 'Nunito Sans', sans-serif;
  font-weight   : 700;
  font-size     : .95rem;
  border-radius : var(--gsf-radius);
  padding       : 9px 22px;
  cursor        : pointer;
  transition    : background .18s, transform .1s;
  border        : none;
}

/* Botón principal */
input[type="submit"],
.hesk_btn, .btn-primary {
  background : var(--gsf-naranja);
  color      : #fff;
  box-shadow : 0 2px 6px rgba(214,93,49,.35);
}
input[type="submit"]:hover,
.hesk_btn:hover, .btn-primary:hover {
  background : var(--gsf-tierra);
  transform  : translateY(-1px);
}
input[type="submit"]:active,
.hesk_btn:active, .btn-primary:active {
  transform  : translateY(0);
}

/* Botón secundario */
input[type="button"],
.btn-default, button.secondary {
  background : var(--gsf-pergamino);
  color      : var(--gsf-oscuro);
  border     : 1px solid var(--gsf-borde);
}
input[type="button"]:hover,
.btn-default:hover {
  background : #e0d0a0;
}

/* ── 11. Tablas de tickets ───────────────────────────────────────── */
table {
  width           : 100%;
  border-collapse : collapse;
  font-size       : .93rem;
}

table thead th,
.hesk_tableHead th {
  background  : var(--gsf-tierra);
  color       : #fff;
  font-family : 'DM Serif Display', serif;
  font-weight : normal;
  padding     : 10px 14px;
  text-align  : left;
  border-bottom: 2px solid var(--gsf-naranja);
}

table tbody tr:nth-child(even) { background : #f7edd8; }
table tbody tr:hover           { background : #fce8d0; }

table tbody td {
  padding      : 9px 14px;
  border-bottom: 1px solid #e8d9b8;
  vertical-align: middle;
}

/* ── 12. Estados de ticket ───────────────────────────────────────── */
.hesk_open,   .status_open   { color: var(--gsf-naranja); font-weight: 700; }
.hesk_closed, .status_closed { color: #888; }
.hesk_waiting,.status_waiting{ color: var(--gsf-verde);   font-weight: 700; }
.hesk_replied,.status_replied{ color: var(--gsf-tierra);  font-weight: 700; }

/* ── 13. Prioridades ─────────────────────────────────────────────── */
.hesk_critical, .priority_critical { color: #c0392b; font-weight: 700; }
.hesk_high,     .priority_high     { color: var(--gsf-naranja); font-weight: 700; }
.hesk_medium,   .priority_medium   { color: #e67e22; }
.hesk_low,      .priority_low      { color: var(--gsf-verde); }

/* ── 14. Alertas y avisos ────────────────────────────────────────── */
.hesk_notice, .notice, .alert-info {
  background    : #fdf3dc;
  border-left   : 4px solid var(--gsf-naranja);
  border-radius : 0 var(--gsf-radius) var(--gsf-radius) 0;
  padding       : 12px 16px;
  margin        : 14px 0;
  color         : var(--gsf-oscuro);
}

.hesk_success, .success, .alert-success {
  background    : #eaf4e8;
  border-left   : 4px solid var(--gsf-verde);
  border-radius : 0 var(--gsf-radius) var(--gsf-radius) 0;
  padding       : 12px 16px;
  margin        : 14px 0;
}

.hesk_error, .error, .alert-danger {
  background    : #fdecea;
  border-left   : 4px solid #c0392b;
  border-radius : 0 var(--gsf-radius) var(--gsf-radius) 0;
  padding       : 12px 16px;
  margin        : 14px 0;
}

/* ── 15. Base de conocimiento ────────────────────────────────────── */
.hesk_kb_category,
.hesk_kb_article {
  border        : 1px solid var(--gsf-borde);
  border-radius : var(--gsf-radius);
  padding       : 16px 20px;
  margin-bottom : 12px;
  background    : #fff;
  transition    : box-shadow .18s;
}
.hesk_kb_category:hover,
.hesk_kb_article:hover {
  box-shadow : 0 4px 14px var(--gsf-sombra);
}

.hesk_kb_category h3,
.hesk_kb_article h3 {
  margin : 0 0 6px;
  font-size: 1.05rem;
}

/* ── 16. Paginación ──────────────────────────────────────────────── */
.hesk_pagination a,
.pagination a, .page-link {
  color         : var(--gsf-tierra);
  border        : 1px solid var(--gsf-borde);
  border-radius : 5px;
  padding       : 5px 11px;
  margin        : 0 2px;
  text-decoration: none;
  transition    : background .15s;
}
.hesk_pagination a:hover,
.pagination a:hover, .page-link:hover {
  background : var(--gsf-pergamino);
}
.hesk_pagination .current,
.pagination .active .page-link {
  background : var(--gsf-naranja);
  color      : #fff;
  border-color: var(--gsf-naranja);
}

/* ── 17. Pie de página ───────────────────────────────────────────── */
#hesk_footer, .hesk_footer, footer {
  background  : linear-gradient(135deg, var(--gsf-oscuro) 0%, var(--gsf-tierra) 100%);
  color       : rgba(255,255,255,.8);
  font-size   : .85rem;
  padding     : 20px 24px;
  text-align  : center;
  margin-top  : 40px;
}
#hesk_footer a, .hesk_footer a, footer a {
  color       : var(--gsf-pergamino);
  text-decoration: none;
}
#hesk_footer a:hover, .hesk_footer a:hover, footer a:hover {
  color       : #fff;
  text-decoration: underline;
}

/* ── 18. Franja decorativa de rayas ─────────────────────────────── */
.gsf-stripe {
  height     : 4px;
  background : repeating-linear-gradient(
    90deg,
    var(--gsf-pergamino) 0, var(--gsf-pergamino) 12px,
    var(--gsf-naranja)   12px, var(--gsf-naranja)   24px
  );
}

/* ── 19. Ocultar enlace al panel de administración ──────────────── */
a[href*="admin_index"],
a[href*="admin.php"],
a[href*="/admin/"],
.hesk_admin_link,
#hesk_admin_link {
  display : none !important;
}

/* ── 20. Responsive básico ───────────────────────────────────────── */
@media (max-width: 600px) {
  #hesk_content, .hesk_content,
  .hesk_wrap, #hesk_wrap { padding: 0 10px; }

  .hesk_box, .hesk_panel { padding: 16px 14px; }

  table thead { display: none; }
  table tbody tr {
    display       : block;
    border        : 1px solid var(--gsf-borde);
    border-radius : var(--gsf-radius);
    margin-bottom : 10px;
    background    : #fff;
  }
  table tbody td {
    display     : flex;
    justify-content: space-between;
    border-bottom: 1px solid #f0e4c8;
    padding     : 8px 12px;
  }
  table tbody td:last-child { border-bottom: none; }
}