/* ==========================================================================
   Hazteunsitio Email Marketing — customer app custom theme (login/guest)
   Se carga automaticamente por MailWizz (customer/assets/css/style-custom.css)
   ========================================================================== */

:root {
  --hz-primary: #6d28d9;
  --hz-primary-dark: #4c1d95;
  --hz-primary-light: #a78bfa;
  --hz-accent: #0ea5b7;
  --hz-accent-2: #f472b6;
  --hz-ink: #14122b;
  --hz-ink-soft: #5b5a72;
  --hz-bg: #ffffff;
  --hz-bg-soft: #f6f5fb;
  --hz-bg-tint: #efeafc;
  --hz-dark: #14102b;
  --hz-border: #e7e4f3;
  --hz-radius: 20px;
  --hz-shadow-lg: 0 30px 70px rgba(45, 20, 110, 0.18);
}

body.login-page {
  background: radial-gradient(900px 520px at 10% -10%, rgba(109,40,217,.10), transparent 60%),
              radial-gradient(700px 460px at 100% 10%, rgba(14,165,183,.08), transparent 55%),
              var(--hz-bg-soft) !important;
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
body.login-page footer { text-align: center; margin-top: 18px; color: var(--hz-ink-soft); font-size: 12.5px; }

.login-box {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--hz-radius);
  box-shadow: var(--hz-shadow-lg);
  overflow: hidden;
}
.login-box #notify-container { padding: 0 40px; }
.login-box #notify-container:empty { padding: 0; }

.login-box .login-flex { display: flex; align-items: stretch; min-height: 560px; }
.login-box .login-flex-col { flex: 1 1 50%; min-width: 0; }

/* ---- Left: form column --------------------------------------------------- */
.login-box .login-form { display: flex; align-items: center; }
.login-box .login-box-body {
  width: 100%;
  padding: 56px 48px;
}
.hz-login-logo { display: block; height: 40px; width: auto; margin-bottom: 34px; }
.login-box .login-box-msg {
  font-size: 26px;
  font-weight: 800;
  color: var(--hz-ink);
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  text-align: left;
}
.hz-login-sub {
  font-size: 14px;
  color: var(--hz-ink-soft);
  margin: 0 0 30px;
}

.login-box .form-group { margin-bottom: 18px; }
.login-box label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--hz-ink-soft);
  margin-bottom: 7px;
}
.login-box label.required .required { color: var(--hz-accent-2); margin-left: 2px; }
.hz-input-group { position: relative; }
.hz-input-group i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hz-ink-soft);
  font-size: 14px;
  pointer-events: none;
}
.login-box .form-control {
  width: 100%;
  border: 1.5px solid var(--hz-border);
  border-radius: 12px;
  padding: 12px 14px 12px 40px;
  font-size: 14.5px;
  color: var(--hz-ink);
  background: var(--hz-bg-soft);
  box-shadow: none;
  height: auto;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.login-box .form-control:focus {
  border-color: var(--hz-primary);
  box-shadow: 0 0 0 4px var(--hz-bg-tint);
  background: #fff;
  outline: none;
}
.login-box .form-control::placeholder { color: #a7a5b8; }

.login-box label[for] + .hz-input-group,
.login-box .form-group > label:not([for]) { }

.login-box .form-group label:not(.required):not([for]) {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hz-ink-soft);
  cursor: pointer;
  text-transform: none;
}
.login-box .form-group input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--hz-primary); }

.login-box .pull-left,
.login-box .pull-right { margin-top: 10px; }
.login-box .btn.btn-default.btn-flat {
  background: transparent;
  border: none;
  color: var(--hz-primary);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 0;
  box-shadow: none;
}
.login-box .btn.btn-default.btn-flat:hover { color: var(--hz-primary-dark); text-decoration: underline; }
.login-box .btn.btn-primary.btn-flat {
  background: linear-gradient(90deg, var(--hz-primary), var(--hz-accent));
  border: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14.5px;
  padding: 12px 30px;
  box-shadow: 0 12px 26px rgba(109,40,217,.3);
  transition: transform .15s ease, filter .15s ease;
}
.login-box .btn.btn-primary.btn-flat:hover { filter: brightness(1.08); transform: translateY(-1px); }
.login-box hr { border-color: var(--hz-border); margin: 22px 0; }
.login-box .btn-facebook, .login-box .btn-twitter {
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  margin-right: 8px;
}

/* ---- Right: branded billboard -------------------------------------------- */
.login-box .login-billboard {
  background-size: cover !important;
  background-position: center !important;
  background-color: var(--hz-dark);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 48px;
}
.login-box .login-billboard::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(150deg, rgba(20,16,43,.94) 0%, rgba(35,21,94,.9) 55%, rgba(76,29,149,.88) 100%),
    radial-gradient(420px 320px at 15% 10%, rgba(109,40,217,.5), transparent 60%),
    radial-gradient(360px 300px at 100% 90%, rgba(14,165,183,.35), transparent 60%);
}
.login-box .login-billboard::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 24px 24px;
}
.hz-billboard-content { position: relative; z-index: 1; color: #fff; }
.hz-billboard-logo { height: 34px; width: auto; margin-bottom: 36px; }
.hz-billboard-content h3 {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.hz-billboard-content p {
  font-size: 14.5px;
  color: rgba(255,255,255,.72);
  line-height: 1.6;
  margin: 0 0 28px;
}
.hz-billboard-list { list-style: none; padding: 0; margin: 0; }
.hz-billboard-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.9);
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.hz-billboard-list li:last-child { border-bottom: none; }
.hz-billboard-list li i {
  width: 30px; height: 30px; min-width: 30px; border-radius: 9px;
  background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  color: var(--hz-accent); font-size: 13px;
}

/* ---- Neutralize AdminLTE's hardcoded full-viewport login layout ----------
   adminlte.css targets body.ctrl-guest.act-index (and similar) with
   position:absolute / height:100vh / fixed % widths that fight our
   centered-card design. We override with matching+exceeding specificity. */
body.ctrl-guest.act-index .login-flex .login-billboard,
body.ctrl-guest .login-flex .login-billboard,
.login-box .login-flex .login-billboard {
  position: relative !important;
  right: auto !important;
  top: auto !important;
  height: auto !important;
  min-height: auto !important;
  width: auto !important;
}
body.ctrl-guest.act-index .login-flex .login-form,
body.ctrl-guest .login-flex .login-form,
.login-box .login-flex .login-form {
  height: auto !important;
  width: auto !important;
}
body.ctrl-guest.act-index .login-flex .login-form .login-box-body,
body.ctrl-guest .login-flex .login-form .login-box-body,
.login-box .login-flex .login-form .login-box-body {
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 56px 48px !important;
  border-radius: 0 !important;
}
body.ctrl-guest.act-index .login-flex,
.login-box .login-flex {
  position: relative;
}

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 767px) {
  .login-box .login-flex { flex-direction: column; min-height: 0; }
  .login-box .login-billboard { display: none; }
  .login-box .login-box-body { padding: 42px 28px !important; }
  body.login-page { padding: 24px 16px; }
}

/* ==========================================================================
   App shell — header, sidebar, cards (dashboard and every inner page)
   ========================================================================== */
body.app-customer:not(.login-page) {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
body.app-customer:not(.login-page) .content-wrapper,
body.app-customer:not(.login-page) .right-side {
  background: var(--hz-bg-soft) !important;
}

/* ---- Top header ----------------------------------------------------------- */
.skin-black .main-header {
  background: #fff;
  box-shadow: 0 1px 0 var(--hz-border);
}
.skin-black .main-header > .logo {
  background: var(--hz-dark) !important;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transition: background .15s ease;
}
.skin-black .main-header > .logo:hover { background: #1c1640 !important; }
.hz-header-logo { height: 30px; width: auto; display: block; }
.skin-black .main-header .navbar {
  background: #fff !important;
  box-shadow: none;
}
.skin-black .main-header .navbar .sidebar-toggle {
  color: var(--hz-ink-soft) !important;
  background: transparent !important;
}
.skin-black .main-header .navbar .sidebar-toggle:hover { color: var(--hz-primary) !important; }
.skin-black .main-header .navbar .navbar-nav > li > a,
.skin-black .main-header .navbar .navbar-custom-menu .navbar-nav > li > a {
  color: var(--hz-ink-soft) !important;
}
.skin-black .main-header .navbar .navbar-nav > li > a:hover {
  color: var(--hz-primary) !important;
  background: var(--hz-bg-tint) !important;
}
.skin-black .main-header .navbar .nav > li > a .label {
  background: var(--hz-accent-2) !important;
}
.skin-black .main-header li.user-header {
  background: var(--hz-dark) !important;
}

/* ---- Sidebar ---------------------------------------------------------------- */
.skin-black .main-sidebar,
.skin-black .left-side {
  background: var(--hz-dark) !important;
}
.skin-black .sidebar a { color: rgba(255,255,255,.78); }
.skin-black .user-panel { padding: 18px 15px; border-bottom: 1px solid rgba(255,255,255,.08); }
.skin-black .user-panel .image img {
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,.15);
}
.skin-black .user-panel .info p {
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
}
.skin-black .sidebar-menu > li > a {
  color: rgba(255,255,255,.72) !important;
  font-weight: 600;
  font-size: 13.5px;
  padding: 13px 16px;
  border-left: 3px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.skin-black .sidebar-menu > li > a > i:first-child,
.skin-black .sidebar-menu > li > a .glyphicon {
  width: 22px;
  color: rgba(255,255,255,.5);
  transition: color .15s ease;
}
.skin-black .sidebar-menu > li:hover > a,
.skin-black .sidebar-menu > li.active > a {
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
  border-left-color: var(--hz-accent);
}
.skin-black .sidebar-menu > li:hover > a i:first-child,
.skin-black .sidebar-menu > li.active > a i:first-child,
.skin-black .sidebar-menu > li:hover > a .glyphicon,
.skin-black .sidebar-menu > li.active > a .glyphicon {
  color: var(--hz-accent) !important;
}
.skin-black .sidebar-menu > li.active > a { font-weight: 800; }
.skin-black .sidebar-menu .treeview-menu > li > a {
  color: rgba(255,255,255,.55) !important;
  font-size: 12.5px;
  padding: 9px 16px 9px 40px;
}
.skin-black .sidebar-menu .treeview-menu > li.active > a,
.skin-black .sidebar-menu .treeview-menu > li > a:hover {
  color: #fff !important;
}
.skin-black .sidebar-menu .treeview-menu > li.active > a i {
  color: var(--hz-accent) !important;
}

/* ---- Content boxes / cards -------------------------------------------------- */
.content-header { background: transparent; }
.content-header > h1 {
  font-size: 22px;
  font-weight: 800;
  color: var(--hz-ink);
}
.content-header .breadcrumb {
  background: transparent;
  padding: 0;
}
.box {
  border-radius: 16px !important;
  border-top: none !important;
  box-shadow: 0 10px 30px rgba(20, 15, 60, 0.06) !important;
  border: 1px solid var(--hz-border);
}
.box.borderless { border: none; box-shadow: none !important; }
.box-header {
  padding: 20px 22px;
}
.box-header .box-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--hz-ink);
}
.box-body { padding: 22px; }

/* ---- Dashboard glance stat cards -------------------------------------------- */
.small-box {
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(20, 15, 60, 0.07);
  border: 1px solid var(--hz-border);
  background: #fff;
  overflow: hidden;
  position: relative;
  padding: 4px 0 0;
}
.small-box .inner { padding: 20px 22px 18px; position: relative; z-index: 1; }
.small-box .inner h3 {
  font-size: 30px;
  font-weight: 800;
  color: var(--hz-ink);
  margin: 0 0 4px;
}
.small-box .inner h3 a { color: inherit; }
.small-box .inner p {
  font-size: 13px;
  font-weight: 600;
  color: var(--hz-ink-soft);
  margin: 0;
}
.small-box .icon {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  color: #fff;
  background: linear-gradient(135deg, var(--hz-primary), var(--hz-accent));
  box-shadow: 0 10px 20px rgba(109,40,217,.28);
  opacity: 1 !important;
}
.small-box .icon i, .small-box .icon .glyphicon { color: #fff; font-size: 19px; }
.boxes-mw-wrapper > div:nth-child(4n+2) .small-box .icon { background: linear-gradient(135deg, var(--hz-accent), #0891b2); box-shadow: 0 10px 20px rgba(14,165,183,.28); }
.boxes-mw-wrapper > div:nth-child(4n+3) .small-box .icon { background: linear-gradient(135deg, var(--hz-accent-2), #db2777); box-shadow: 0 10px 20px rgba(219,39,119,.28); }
.boxes-mw-wrapper > div:nth-child(4n+4) .small-box .icon { background: linear-gradient(135deg, #f59e0b, var(--hz-primary)); box-shadow: 0 10px 20px rgba(245,158,11,.28); }
.small-box:hover { box-shadow: 0 16px 34px rgba(20,15,60,.12); transform: translateY(-2px); transition: all .2s ease; }
.small-box > .small-box-footer { display: none; }

/* ---- Buttons / tables / misc ------------------------------------------------ */
.btn-primary, .bg-light-blue {
  background: linear-gradient(90deg, var(--hz-primary), var(--hz-accent)) !important;
  border-color: transparent !important;
}
.btn-primary:hover, .btn-primary:focus { filter: brightness(1.08); }
.btn.btn-flat { border-radius: 10px; font-weight: 700; }
.table > thead > tr > th {
  border-bottom: 2px solid var(--hz-border);
  color: var(--hz-ink-soft);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 800;
}
a { color: var(--hz-primary); }
a:hover, a:focus { color: var(--hz-primary-dark); }
.pagination > .active > a, .pagination > .active > span {
  background: var(--hz-primary) !important;
  border-color: var(--hz-primary) !important;
}
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--hz-border); border-radius: 999px; }

/* ==========================================================================
   Email templates & gallery — card grid (turns the CGridView table into
   a responsive card grid without touching its filtering/paging/actions)
   ========================================================================== */
.hz-template-grid-wrap { overflow: visible !important; }
table.hz-template-grid,
table.hz-template-grid > thead,
table.hz-template-grid > tbody,
table.hz-template-grid > tbody > tr,
table.hz-template-grid > tbody > tr > td {
  display: block;
}
table.hz-template-grid { width: 100%; border: none; border-collapse: separate; }
table.hz-template-grid > thead { display: none; }
table.hz-template-grid > tbody {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 22px;
  align-items: start;
}

/* filter row: full-width toolbar above the cards */
table.hz-template-grid > tbody > tr.grid-filter-cell {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  background: var(--hz-bg-soft);
  border: 1px solid var(--hz-border);
  border-radius: 12px;
  padding: 12px 14px;
}
table.hz-template-grid > tbody > tr.grid-filter-cell > td {
  padding: 0 !important;
  border: none !important;
}
table.hz-template-grid > tbody > tr.grid-filter-cell > td.screenshot,
table.hz-template-grid > tbody > tr.grid-filter-cell > td.updated,
table.hz-template-grid > tbody > tr.grid-filter-cell > td.actions {
  display: none !important;
}
table.hz-template-grid > tbody > tr.grid-filter-cell input[type="text"],
table.hz-template-grid > tbody > tr.grid-filter-cell select {
  min-width: 200px;
  border: 1.5px solid var(--hz-border);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  background: #fff;
}

/* card body */
table.hz-template-grid > tbody > tr:not(.grid-filter-cell) {
  background: #fff;
  border: 1px solid var(--hz-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(20,15,60,.06);
  transition: box-shadow .2s ease, transform .2s ease;
  display: flex;
  flex-direction: column;
}
table.hz-template-grid > tbody > tr:not(.grid-filter-cell):hover {
  box-shadow: 0 16px 34px rgba(20,15,60,.13);
  transform: translateY(-3px);
}
table.hz-template-grid > tbody > tr:not(.grid-filter-cell) > td {
  border: none !important;
  padding: 0;
}
table.hz-template-grid td.screenshot { line-height: 0; background: var(--hz-bg-tint); }
.hz-template-thumb { width: 100% !important; height: 170px !important; object-fit: cover; display: block; }
.hz-template-thumb-link { display: block; }
table.hz-template-grid td.name {
  padding: 16px 18px 2px !important;
  font-size: 15px;
  font-weight: 800;
  color: var(--hz-ink);
  line-height: 1.4;
}
table.hz-template-grid td.name a { color: inherit; }
table.hz-template-grid td.name a:hover { color: var(--hz-primary); }
table.hz-template-grid td.category { padding: 6px 18px 0 !important; min-height: 10px; }
table.hz-template-grid td.updated {
  padding: 8px 18px 16px !important;
  font-size: 12px;
  color: var(--hz-ink-soft);
}
table.hz-template-grid td.updated:empty,
table.hz-template-grid td.category:empty { display: none; padding: 0 !important; }
.hz-badge {
  display: inline-block;
  background: var(--hz-bg-tint);
  color: var(--hz-primary);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}
table.hz-template-grid td.actions {
  margin-top: auto;
  padding: 12px 14px !important;
  border-top: 1px solid var(--hz-border) !important;
  display: flex !important;
  flex-wrap: nowrap;
  gap: 8px;
  background: var(--hz-bg-soft);
}
table.hz-template-grid td.actions a.btn {
  flex: 1 1 auto;
  text-align: center;
  padding: 7px 8px;
  font-size: 12px;
  white-space: nowrap;
}
table.hz-template-grid td.actions a.delete {
  flex: 0 0 auto;
  background: transparent !important;
  color: #dc2626 !important;
  box-shadow: none !important;
  padding: 7px 10px;
}
table.hz-template-grid td.actions a.delete:hover { background: #fef2f2 !important; }