/* =========================================================
   WIRTZ MAYORISTA · PERFIL COMERCIAL
   ========================================================= */

:root {
  --customer-bg:
    #f5f5f4;

  --customer-surface:
    #ffffff;

  --customer-surface-soft:
    #fafafa;

  --customer-text:
    #171717;

  --customer-muted:
    #737373;

  --customer-muted-light:
    #a3a3a3;

  --customer-border:
    rgba(23, 23, 23, 0.12);

  --customer-border-strong:
    rgba(23, 23, 23, 0.2);

  --customer-black:
    #171717;

  --customer-white:
    #ffffff;

  --customer-danger:
    #b91c1c;

  --customer-success:
    #15803d;

  --customer-warning:
    #a16207;

  --customer-radius:
    14px;

  --customer-radius-small:
    9px;

  --customer-shadow:
    0 16px 40px rgba(23, 23, 23, 0.08);

  --customer-topbar-height:
    70px;
}

/* =========================================================
   RESET
   ========================================================= */

* {
  box-sizing:
    border-box;
}

html {
  min-height:
    100%;

  scroll-behavior:
    smooth;
}

body {
  min-width:
    320px;

  min-height:
    100vh;

  margin:
    0;

  color:
    var(--customer-text);

  background:
    var(--customer-bg);

  font-family:
    "DM Sans",
    Arial,
    sans-serif;

  font-size:
    14px;

  line-height:
    1.5;

  -webkit-font-smoothing:
    antialiased;
}

button,
input,
select,
textarea {
  font:
    inherit;
}

button,
a {
  -webkit-tap-highlight-color:
    transparent;
}

button {
  color:
    inherit;
}

a {
  color:
    inherit;

  text-decoration:
    none;
}

img,
svg {
  display:
    block;
}

button,
select {
  cursor:
    pointer;
}

button:disabled {
  cursor:
    not-allowed;

  opacity:
    0.6;
}

[hidden] {
  display:
    none !important;
}

/* =========================================================
   APP
   ========================================================= */

.customer-profile-app {
  min-height:
    100vh;
}

/* =========================================================
   TOPBAR
   ========================================================= */

.customer-topbar {
  position:
    sticky;

  top:
    0;

  z-index:
    100;

  height:
    var(--customer-topbar-height);

  color:
    #ffffff;

  background:
    #171717;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.1);
}

.customer-topbar__inner {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  width:
    min(1480px, calc(100% - 40px));

  height:
    100%;

  margin:
    0 auto;
}

.customer-brand {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    14px;

  min-width:
    0;
}

.customer-brand__logo {
  display:
    grid;

  place-items:
    center;

  width:
    42px;

  height:
    42px;

  overflow:
    hidden;

  background:
    #ffffff;

  border:
    1px solid rgba(255, 255, 255, 0.18);

  border-radius:
    50%;
}

.customer-brand__logo img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}

.customer-brand__divider {
  width:
    1px;

  height:
    28px;

  background:
    rgba(255, 255, 255, 0.18);
}

.customer-brand__text {
  color:
    rgba(255, 255, 255, 0.82);

  font-size:
    13px;

  font-weight:
    700;

  letter-spacing:
    0.03em;
}

.customer-topbar__actions {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}

.customer-topbar__back {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  height:
    40px;

  padding:
    0 14px;

  color:
    rgba(255, 255, 255, 0.84);

  border:
    1px solid rgba(255, 255, 255, 0.14);

  border-radius:
    9px;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.customer-topbar__back:hover {
  color:
    #ffffff;

  background:
    rgba(255, 255, 255, 0.08);

  border-color:
    rgba(255, 255, 255, 0.25);
}

.customer-topbar__back svg {
  width:
    17px;

  height:
    17px;
}

/* =========================================================
   MENÚ DE USUARIO
   ========================================================= */

.customer-user-menu {
  position:
    relative;
}

.customer-user-menu__button {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  min-width:
    190px;

  height:
    46px;

  padding:
    5px 11px 5px 6px;

  color:
    #ffffff;

  background:
    transparent;

  border:
    1px solid rgba(255, 255, 255, 0.16);

  border-radius:
    10px;
}

.customer-user-menu__button:hover {
  background:
    rgba(255, 255, 255, 0.07);

  border-color:
    rgba(255, 255, 255, 0.26);
}

.customer-user-menu__avatar {
  display:
    grid;

  flex:
    0 0 auto;

  place-items:
    center;

  width:
    34px;

  height:
    34px;

  color:
    #171717;

  background:
    #ffffff;

  border-radius:
    50%;

  font-size:
    11px;

  font-weight:
    800;
}

.customer-user-menu__information {
  display:
    flex;

  flex:
    1;

  min-width:
    0;

  flex-direction:
    column;

  align-items:
    flex-start;

  line-height:
    1.2;
}

.customer-user-menu__information small {
  color:
    rgba(255, 255, 255, 0.56);

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    0.09em;
}

.customer-user-menu__information strong {
  max-width:
    110px;

  overflow:
    hidden;

  font-size:
    12px;

  font-weight:
    700;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.customer-user-menu__button > svg {
  width:
    16px;

  height:
    16px;

  color:
    rgba(255, 255, 255, 0.58);
}

.customer-user-menu__dropdown {
  position:
    absolute;

  top:
    calc(100% + 10px);

  right:
    0;

  z-index:
    120;

  width:
    270px;

  overflow:
    hidden;

  color:
    var(--customer-text);

  background:
    #ffffff;

  border:
    1px solid var(--customer-border);

  border-radius:
    12px;

  box-shadow:
    var(--customer-shadow);
}

.customer-user-menu__dropdown::before {
  position:
    absolute;

  top:
    -6px;

  right:
    20px;

  width:
    12px;

  height:
    12px;

  content:
    "";

  background:
    #ffffff;

  border-top:
    1px solid var(--customer-border);

  border-left:
    1px solid var(--customer-border);

  transform:
    rotate(45deg);
}

.customer-user-menu__header {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  padding:
    16px;

  border-bottom:
    1px solid var(--customer-border);
}

.customer-user-menu__header strong {
  font-size:
    14px;
}

.customer-user-menu__header span {
  overflow:
    hidden;

  color:
    var(--customer-muted);

  font-size:
    12px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.customer-user-menu__dropdown > a,
.customer-user-menu__dropdown > button {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  width:
    100%;

  min-height:
    44px;

  padding:
    0 16px;

  text-align:
    left;

  background:
    transparent;

  border:
    0;
}

.customer-user-menu__dropdown > a:hover,
.customer-user-menu__dropdown > button:hover {
  background:
    #f5f5f5;
}

.customer-user-menu__dropdown svg {
  width:
    17px;

  height:
    17px;
}

.customer-user-menu__logout {
  color:
    var(--customer-danger);
}

/* =========================================================
   MAIN
   ========================================================= */

.customer-main {
  width:
    min(1480px, calc(100% - 40px));

  margin:
    0 auto;

  padding:
    34px 0 60px;
}

/* =========================================================
   ENCABEZADO
   ========================================================= */

.customer-page-header {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    30px;

  padding:
    0 0 28px;

  border-bottom:
    1px solid var(--customer-border);
}

.customer-page-header__content {
  max-width:
    760px;
}

.customer-page-header__eyebrow,
.customer-profile-panel__eyebrow {
  display:
    block;

  margin-bottom:
    6px;

  color:
    var(--customer-muted);

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.13em;
}

.customer-page-header h1 {
  margin:
    0;

  font-size:
    clamp(28px, 3vw, 42px);

  font-weight:
    800;

  letter-spacing:
    -0.04em;

  line-height:
    1.1;
}

.customer-page-header p {
  max-width:
    700px;

  margin:
    10px 0 0;

  color:
    var(--customer-muted);

  font-size:
    14px;
}

.customer-page-header__status {
  display:
    flex;

  flex:
    0 0 auto;

  align-items:
    center;

  gap:
    12px;

  min-width:
    210px;

  padding:
    13px 15px;

  background:
    var(--customer-surface);

  border:
    1px solid var(--customer-border);

  border-radius:
    12px;
}

.customer-page-header__status-icon {
  display:
    grid;

  place-items:
    center;

  width:
    38px;

  height:
    38px;

  background:
    #f4f4f4;

  border:
    1px solid var(--customer-border);

  border-radius:
    9px;
}

.customer-page-header__status-icon svg {
  width:
    18px;

  height:
    18px;
}

.customer-page-header__status > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    1px;
}

.customer-page-header__status span {
  color:
    var(--customer-muted);

  font-size:
    11px;
}

.customer-page-header__status strong {
  font-size:
    14px;
}

.customer-page-header__status strong[data-status="ACTIVO"] {
  color:
    var(--customer-success);
}

.customer-page-header__status strong[data-status="PENDIENTE"] {
  color:
    var(--customer-warning);
}

.customer-page-header__status strong[data-status="BLOQUEADO"],
.customer-page-header__status strong[data-status="INACTIVO"] {
  color:
    var(--customer-danger);
}

/* =========================================================
   ERROR
   ========================================================= */

.customer-profile-error {
  display:
    grid;

  grid-template-columns:
    auto 1fr auto;

  align-items:
    center;

  gap:
    14px;

  margin-top:
    22px;

  padding:
    15px 17px;

  color:
    #991b1b;

  background:
    #fff7f7;

  border:
    1px solid rgba(185, 28, 28, 0.22);

  border-radius:
    12px;
}

.customer-profile-error__icon {
  display:
    grid;

  place-items:
    center;

  width:
    38px;

  height:
    38px;

  background:
    rgba(185, 28, 28, 0.08);

  border-radius:
    9px;
}

.customer-profile-error svg {
  width:
    19px;

  height:
    19px;
}

.customer-profile-error p {
  margin:
    3px 0 0;

  color:
    #7f1d1d;

  font-size:
    12px;
}

.customer-profile-error button {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  height:
    38px;

  padding:
    0 13px;

  color:
    #991b1b;

  background:
    transparent;

  border:
    1px solid rgba(185, 28, 28, 0.25);

  border-radius:
    8px;
}

/* =========================================================
   LAYOUT
   ========================================================= */

.customer-profile-form {
  margin-top:
    24px;
}

.customer-profile-layout {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr) 320px;

  align-items:
    start;

  gap:
    22px;
}

.customer-profile-main {
  display:
    flex;

  min-width:
    0;

  flex-direction:
    column;

  gap:
    18px;
}

.customer-profile-sidebar {
  position:
    sticky;

  top:
    calc(var(--customer-topbar-height) + 22px);

  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;
}

/* =========================================================
   PANELES
   ========================================================= */

.customer-profile-panel {
  padding:
    22px;

  background:
    var(--customer-surface);

  border:
    1px solid var(--customer-border);

  border-radius:
    var(--customer-radius);
}

.customer-profile-panel__header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    20px;

  margin-bottom:
    22px;

  padding-bottom:
    17px;

  border-bottom:
    1px solid var(--customer-border);
}

.customer-profile-panel__header h2 {
  margin:
    0;

  font-size:
    19px;

  font-weight:
    800;

  letter-spacing:
    -0.02em;
}

.customer-profile-panel__header p {
  margin:
    4px 0 0;

  color:
    var(--customer-muted);

  font-size:
    12px;
}

.customer-profile-panel__icon {
  display:
    grid;

  flex:
    0 0 auto;

  place-items:
    center;

  width:
    40px;

  height:
    40px;

  background:
    #f5f5f5;

  border:
    1px solid var(--customer-border);

  border-radius:
    10px;
}

.customer-profile-panel__icon svg {
  width:
    18px;

  height:
    18px;
}

/* =========================================================
   SOLO LECTURA
   ========================================================= */

.customer-profile-readonly-grid {
  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    1px;

  overflow:
    hidden;

  background:
    var(--customer-border);

  border:
    1px solid var(--customer-border);

  border-radius:
    10px;
}

.customer-profile-readonly-grid article {
  display:
    flex;

  min-height:
    84px;

  min-width:
    0;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    5px;

  padding:
    15px;

  background:
    #ffffff;
}

.customer-profile-readonly-grid article span {
  color:
    var(--customer-muted);

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    0.05em;

  text-transform:
    uppercase;
}

.customer-profile-readonly-grid article strong {
  overflow:
    hidden;

  font-size:
    13px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

/* =========================================================
   FORMULARIO
   ========================================================= */

.customer-form-grid {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    17px;
}

.customer-field {
  display:
    flex;

  min-width:
    0;

  flex-direction:
    column;

  gap:
    7px;
}

.customer-field--full {
  grid-column:
    1 / -1;
}

.customer-field > span {
  color:
    #404040;

  font-size:
    12px;

  font-weight:
    700;
}

.customer-field input,
.customer-field select,
.customer-field textarea {
  width:
    100%;

  color:
    var(--customer-text);

  background:
    #ffffff;

  border:
    1px solid var(--customer-border-strong);

  border-radius:
    var(--customer-radius-small);

  outline:
    none;

  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.customer-field input,
.customer-field select {
  height:
    43px;

  padding:
    0 12px;
}

.customer-field textarea {
  min-height:
    130px;

  padding:
    12px;

  resize:
    vertical;
}

.customer-field input::placeholder,
.customer-field textarea::placeholder {
  color:
    var(--customer-muted-light);
}

.customer-field input:hover,
.customer-field select:hover,
.customer-field textarea:hover {
  border-color:
    rgba(23, 23, 23, 0.32);
}

.customer-field input:focus,
.customer-field select:focus,
.customer-field textarea:focus {
  border-color:
    #171717;

  box-shadow:
    0 0 0 3px rgba(23, 23, 23, 0.08);
}

.customer-field.is-invalid input,
.customer-field.is-invalid select,
.customer-field.is-invalid textarea {
  border-color:
    var(--customer-danger);

  box-shadow:
    0 0 0 3px rgba(185, 28, 28, 0.08);
}

.customer-field__error {
  min-height:
    16px;

  color:
    var(--customer-danger);

  font-size:
    11px;
}

.customer-field__footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;
}

.customer-field__footer > small:last-child {
  flex:
    0 0 auto;

  color:
    var(--customer-muted);

  font-size:
    10px;
}

/* =========================================================
   SIDEBAR
   ========================================================= */

.customer-summary-card,
.customer-security-card,
.customer-actions-card {
  background:
    var(--customer-surface);

  border:
    1px solid var(--customer-border);

  border-radius:
    var(--customer-radius);
}

.customer-summary-card {
  padding:
    22px;
}

.customer-summary-card__avatar {
  display:
    grid;

  place-items:
    center;

  width:
    58px;

  height:
    58px;

  margin-bottom:
    15px;

  color:
    #ffffff;

  background:
    #171717;

  border-radius:
    50%;

  font-size:
    16px;

  font-weight:
    800;
}

.customer-summary-card__identity > span {
  color:
    var(--customer-muted);

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.1em;
}

.customer-summary-card__identity h2 {
  margin:
    4px 0 0;

  font-size:
    20px;

  line-height:
    1.2;
}

.customer-summary-card__identity p {
  margin:
    5px 0 0;

  overflow:
    hidden;

  color:
    var(--customer-muted);

  font-size:
    12px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.customer-summary-card__status {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  margin-top:
    18px;

  padding:
    11px 0;

  border-top:
    1px solid var(--customer-border);

  border-bottom:
    1px solid var(--customer-border);
}

.customer-summary-card__status span {
  color:
    var(--customer-muted);

  font-size:
    11px;
}

.customer-summary-card__status strong {
  font-size:
    12px;
}

.customer-summary-card__status strong[data-status="ACTIVO"] {
  color:
    var(--customer-success);
}

.customer-summary-card__status strong[data-status="PENDIENTE"] {
  color:
    var(--customer-warning);
}

.customer-summary-card__status strong[data-status="BLOQUEADO"],
.customer-summary-card__status strong[data-status="INACTIVO"] {
  color:
    var(--customer-danger);
}

.customer-summary-card__information {
  display:
    flex;

  flex-direction:
    column;

  margin-top:
    4px;
}

.customer-summary-card__information article {
  display:
    grid;

  grid-template-columns:
    30px minmax(0, 1fr);

  align-items:
    center;

  gap:
    10px;

  padding:
    12px 0;

  border-bottom:
    1px solid var(--customer-border);
}

.customer-summary-card__information article:last-child {
  border-bottom:
    0;
}

.customer-summary-card__information article > svg {
  width:
    17px;

  height:
    17px;

  color:
    var(--customer-muted);
}

.customer-summary-card__information article div {
  display:
    flex;

  min-width:
    0;

  flex-direction:
    column;

  gap:
    2px;
}

.customer-summary-card__information article span {
  color:
    var(--customer-muted);

  font-size:
    10px;
}

.customer-summary-card__information article strong {
  overflow:
    hidden;

  font-size:
    12px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.customer-security-card {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    12px;

  padding:
    17px;
}

.customer-security-card__icon {
  display:
    grid;

  flex:
    0 0 auto;

  place-items:
    center;

  width:
    36px;

  height:
    36px;

  background:
    #f5f5f5;

  border:
    1px solid var(--customer-border);

  border-radius:
    9px;
}

.customer-security-card__icon svg {
  width:
    17px;

  height:
    17px;
}

.customer-security-card strong {
  font-size:
    12px;
}

.customer-security-card p {
  margin:
    3px 0 0;

  color:
    var(--customer-muted);

  font-size:
    11px;

  line-height:
    1.5;
}

.customer-actions-card {
  display:
    flex;

  flex-direction:
    column;

  gap:
    9px;

  padding:
    15px;
}

/* =========================================================
   BOTONES
   ========================================================= */

.customer-primary-button,
.customer-secondary-button,
.customer-link-button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  min-height:
    42px;

  padding:
    0 15px;

  border-radius:
    9px;

  font-size:
    12px;

  font-weight:
    700;

  transition:
    transform 0.15s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}

.customer-primary-button {
  color:
    #ffffff;

  background:
    #171717;

  border:
    1px solid #171717;
}

.customer-primary-button:hover {
  background:
    #000000;

  transform:
    translateY(-1px);
}

.customer-secondary-button,
.customer-link-button {
  color:
    #171717;

  background:
    #ffffff;

  border:
    1px solid var(--customer-border-strong);
}

.customer-secondary-button:hover,
.customer-link-button:hover {
  background:
    #f5f5f5;

  border-color:
    rgba(23, 23, 23, 0.32);
}

.customer-primary-button svg,
.customer-secondary-button svg,
.customer-link-button svg {
  width:
    16px;

  height:
    16px;
}

.customer-button-spinner {
  width:
    16px;

  height:
    16px;

  border:
    2px solid rgba(255, 255, 255, 0.35);

  border-top-color:
    #ffffff;

  border-radius:
    50%;

  animation:
    customer-spin 0.7s linear infinite;
}

/* =========================================================
   LOADING
   ========================================================= */

.customer-profile-loading {
  position:
    fixed;

  inset:
    0;

  z-index:
    500;

  display:
    grid;

  place-items:
    center;

  padding:
    20px;

  background:
    rgba(245, 245, 244, 0.96);

  backdrop-filter:
    blur(4px);
}

.customer-profile-loading__content {
  display:
    flex;

  width:
    min(340px, 100%);

  flex-direction:
    column;

  align-items:
    center;

  gap:
    6px;

  padding:
    28px;

  text-align:
    center;

  background:
    #ffffff;

  border:
    1px solid var(--customer-border);

  border-radius:
    14px;
}

.customer-profile-loading__spinner {
  width:
    30px;

  height:
    30px;

  margin-bottom:
    9px;

  border:
    3px solid rgba(23, 23, 23, 0.14);

  border-top-color:
    #171717;

  border-radius:
    50%;

  animation:
    customer-spin 0.7s linear infinite;
}

.customer-profile-loading__content strong {
  font-size:
    14px;
}

.customer-profile-loading__content small {
  color:
    var(--customer-muted);

  font-size:
    11px;
}

/* =========================================================
   DIÁLOGO
   ========================================================= */

.customer-dialog {
  width:
    min(440px, calc(100% - 30px));

  padding:
    0;

  color:
    var(--customer-text);

  background:
    transparent;

  border:
    0;
}

.customer-dialog::backdrop {
  background:
    rgba(0, 0, 0, 0.55);

  backdrop-filter:
    blur(3px);
}

.customer-dialog__content {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  padding:
    28px;

  text-align:
    center;

  background:
    #ffffff;

  border:
    1px solid var(--customer-border);

  border-radius:
    15px;

  box-shadow:
    var(--customer-shadow);
}

.customer-dialog__icon {
  display:
    grid;

  place-items:
    center;

  width:
    48px;

  height:
    48px;

  margin-bottom:
    14px;

  background:
    #f5f5f5;

  border:
    1px solid var(--customer-border);

  border-radius:
    50%;
}

.customer-dialog__icon svg {
  width:
    21px;

  height:
    21px;
}

.customer-dialog h2 {
  margin:
    0;

  font-size:
    20px;
}

.customer-dialog p {
  margin:
    8px 0 0;

  color:
    var(--customer-muted);

  font-size:
    12px;
}

.customer-dialog__actions {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    10px;

  width:
    100%;

  margin-top:
    24px;
}

/* =========================================================
   TOASTS
   ========================================================= */

.customer-toast-container {
  position:
    fixed;

  right:
    22px;

  bottom:
    22px;

  z-index:
    600;

  display:
    flex;

  width:
    min(380px, calc(100% - 44px));

  flex-direction:
    column;

  gap:
    10px;

  pointer-events:
    none;
}

.customer-toast {
  display:
    grid;

  grid-template-columns:
    auto 1fr auto;

  align-items:
    center;

  gap:
    11px;

  min-height:
    54px;

  padding:
    12px 13px;

  color:
    #ffffff;

  background:
    #171717;

  border:
    1px solid rgba(255, 255, 255, 0.12);

  border-radius:
    11px;

  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.18);

  pointer-events:
    auto;

  animation:
    customer-toast-in 0.2s ease;
}

.customer-toast--error {
  background:
    #991b1b;
}

.customer-toast--warning {
  background:
    #854d0e;
}

.customer-toast__icon {
  display:
    grid;

  place-items:
    center;
}

.customer-toast__icon svg {
  width:
    18px;

  height:
    18px;
}

.customer-toast p {
  margin:
    0;

  font-size:
    12px;

  font-weight:
    600;
}

.customer-toast button {
  display:
    grid;

  place-items:
    center;

  width:
    30px;

  height:
    30px;

  padding:
    0;

  color:
    #ffffff;

  background:
    transparent;

  border:
    0;

  border-radius:
    7px;
}

.customer-toast button:hover {
  background:
    rgba(255, 255, 255, 0.12);
}

.customer-toast button svg {
  width:
    15px;

  height:
    15px;
}

.customer-toast.is-leaving {
  opacity:
    0;

  transform:
    translateY(8px);

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

/* =========================================================
   ANIMACIONES
   ========================================================= */

@keyframes customer-spin {
  to {
    transform:
      rotate(360deg);
  }
}

@keyframes customer-toast-in {
  from {
    opacity:
      0;

    transform:
      translateY(10px);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0);
  }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
  .customer-profile-layout {
    grid-template-columns:
      minmax(0, 1fr) 280px;
  }

  .customer-profile-readonly-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .customer-main,
  .customer-topbar__inner {
    width:
      min(100% - 28px, 1480px);
  }

  .customer-profile-layout {
    grid-template-columns:
      1fr;
  }

  .customer-profile-sidebar {
    position:
      static;

    display:
      grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .customer-summary-card {
    grid-row:
      span 2;
  }
}

@media (max-width: 700px) {
  :root {
    --customer-topbar-height:
      62px;
  }

  .customer-topbar__inner {
    width:
      calc(100% - 20px);
  }

  .customer-brand__divider,
  .customer-brand__text,
  .customer-topbar__back span,
  .customer-user-menu__information,
  .customer-user-menu__button > svg {
    display:
      none;
  }

  .customer-brand__logo {
    width:
      38px;

    height:
      38px;
  }

  .customer-topbar__back {
    width:
      40px;

    padding:
      0;

    justify-content:
      center;
  }

  .customer-user-menu__button {
    min-width:
      44px;

    width:
      44px;

    padding:
      4px;
  }

  .customer-user-menu__avatar {
    width:
      34px;

    height:
      34px;
  }

  .customer-user-menu__dropdown {
    right:
      0;

    width:
      min(280px, calc(100vw - 20px));
  }

  .customer-main {
    width:
      calc(100% - 20px);

    padding-top:
      22px;
  }

  .customer-page-header {
    align-items:
      stretch;

    flex-direction:
      column;

    gap:
      18px;
  }

  .customer-page-header__status {
    min-width:
      0;

    width:
      100%;
  }

  .customer-profile-panel {
    padding:
      17px;
  }

  .customer-profile-panel__header {
    margin-bottom:
      17px;
  }

  .customer-profile-panel__icon {
    width:
      36px;

    height:
      36px;
  }

  .customer-form-grid,
  .customer-profile-readonly-grid,
  .customer-profile-sidebar {
    grid-template-columns:
      1fr;
  }

  .customer-field--full {
    grid-column:
      auto;
  }

  .customer-profile-readonly-grid article {
    min-height:
      72px;
  }

  .customer-summary-card {
    grid-row:
      auto;
  }

  .customer-profile-error {
    grid-template-columns:
      auto 1fr;
  }

  .customer-profile-error button {
    grid-column:
      1 / -1;

    justify-content:
      center;
  }

  .customer-toast-container {
    right:
      10px;

    bottom:
      10px;

    width:
      calc(100% - 20px);
  }
}

@media (max-width: 420px) {
  .customer-page-header h1 {
    font-size:
      29px;
  }

  .customer-profile-panel__header h2 {
    font-size:
      17px;
  }

  .customer-dialog__actions {
    grid-template-columns:
      1fr;
  }
}