/* =========================================================
   NAI HUB · CLIENTES
   NEURO APRENDIZAJE INFANTIL

   UBICACIÓN:
   frontend/src/pages/clientes/clientes.css

   PARTE 1 DE 3

   - VARIABLES
   - ESTRUCTURA
   - HERO
   - BOTONES
   - MÉTRICAS
   - TOOLBAR
   - FILTROS
   - TABLA
   - ESTADOS
   - MENÚ ACCIONES
   - PAGINACIÓN
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

#clientesPage,
.clientes-page {

  --cli-bg:
    var(
      --global-bg,
      #f4f4f1
    );

  --cli-surface:
    var(
      --global-surface,
      #ffffff
    );

  --cli-surface-soft:
    var(
      --global-surface-soft,
      #f7f7f4
    );

  --cli-surface-hover:
    var(
      --global-surface-hover,
      #f0f0ec
    );

  --cli-border:
    var(
      --global-border,
      #deded7
    );

  --cli-border-strong:
    var(
      --global-border-strong,
      #c8c8bf
    );

  --cli-text:
    var(
      --global-text,
      #11120f
    );

  --cli-text-strong:
    var(
      --global-text-strong,
      #050505
    );

  --cli-muted:
    var(
      --global-muted,
      #74756e
    );

  --cli-muted-strong:
    var(
      --global-muted-strong,
      #53554e
    );

  --cli-primary:
    #24261f;

  --cli-primary-hover:
    #151713;

  --cli-success:
    #2c6a49;

  --cli-warning:
    #8b641c;

  --cli-danger:
    #9f3131;

  --cli-info:
    #345f87;

  --cli-radius-sm:
    8px;

  --cli-radius:
    12px;

  --cli-radius-lg:
    16px;

  --cli-shadow:
    0 10px 28px rgba(
      0,
      0,
      0,
      .045
    );

  --cli-transition:
    130ms ease;

}


/* =========================================================
   DARK
   ========================================================= */

html[data-theme="dark"] #clientesPage,
html[data-theme="dark"] .clientes-page {

  --cli-bg:
    #0b0c0a;

  --cli-surface:
    #11120f;

  --cli-surface-soft:
    #151713;

  --cli-surface-hover:
    #1a1c18;

  --cli-border:
    #2a2d26;

  --cli-border-strong:
    #383c33;

  --cli-text:
    #e7e8e2;

  --cli-text-strong:
    #ffffff;

  --cli-muted:
    #9b9e94;

  --cli-muted-strong:
    #b6b9ae;

  --cli-primary:
    #e7e8e2;

  --cli-primary-hover:
    #ffffff;

  --cli-shadow:
    none;

}


/* =========================================================
   PAGE
   ========================================================= */

.clientes-page {

  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    16px;

  color:
    var(
      --cli-text
    );

}


/* =========================================================
   HERO
   ========================================================= */

.clientes-hero {

  width:
    100%;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    24px;

  padding:
    18px 20px;

  background:
    var(
      --cli-surface
    );

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

  border-radius:
    var(
      --cli-radius-lg
    );

}


.clientes-hero__copy {

  min-width:
    0;

  flex:
    1;

}


.clientes-hero__eyebrow {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  margin-bottom:
    7px;

  color:
    var(
      --cli-muted-strong
    );

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    .08em;

}


.clientes-hero__eyebrow svg {

  width:
    14px;

  height:
    14px;

  stroke-width:
    2;

}


.clientes-hero h1 {

  margin:
    0;

  color:
    var(
      --cli-text-strong
    );

  font-size:
    26px;

  line-height:
    1.05;

  font-weight:
    800;

  letter-spacing:
    -.035em;

}


.clientes-hero p {

  max-width:
    760px;

  margin:
    8px 0 0;

  color:
    var(
      --cli-muted
    );

  font-size:
    13px;

  line-height:
    1.5;

  font-weight:
    500;

}


.clientes-hero__actions {

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    8px;

  flex:
    0 0 auto;

}


/* =========================================================
   BUTTONS
   ========================================================= */

.clientes-btn {

  min-height:
    36px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    0 13px;

  border:
    1px solid
    transparent;

  border-radius:
    9px;

  font-size:
    12px;

  font-weight:
    700;

  line-height:
    1;

  cursor:
    pointer;

  transition:
    background
    var(
      --cli-transition
    ),
    border-color
    var(
      --cli-transition
    ),
    color
    var(
      --cli-transition
    ),
    transform
    var(
      --cli-transition
    );

}


.clientes-btn svg {

  width:
    15px;

  height:
    15px;

  stroke-width:
    2;

}


.clientes-btn:active {

  transform:
    translateY(
      1px
    );

}


.clientes-btn:disabled {

  opacity:
    .55;

  cursor:
    not-allowed;

  transform:
    none;

}


.clientes-btn--primary {

  color:
    var(
      --cli-surface
    );

  background:
    var(
      --cli-primary
    );

  border-color:
    var(
      --cli-primary
    );

}


html[data-theme="dark"]
.clientes-btn--primary {

  color:
    #0b0c0a;

}


.clientes-btn--primary:hover:not(:disabled) {

  background:
    var(
      --cli-primary-hover
    );

  border-color:
    var(
      --cli-primary-hover
    );

}


.clientes-btn--ghost {

  color:
    var(
      --cli-text
    );

  background:
    var(
      --cli-surface
    );

  border-color:
    var(
      --cli-border
    );

}


.clientes-btn--ghost:hover:not(:disabled) {

  background:
    var(
      --cli-surface-hover
    );

  border-color:
    var(
      --cli-border-strong
    );

}


.clientes-btn--soft {

  color:
    var(
      --cli-text-strong
    );

  background:
    var(
      --cli-surface-soft
    );

  border-color:
    var(
      --cli-border
    );

}


.clientes-btn--soft:hover:not(:disabled) {

  background:
    var(
      --cli-surface-hover
    );

  border-color:
    var(
      --cli-border-strong
    );

}


/* =========================================================
   ICON BUTTON
   ========================================================= */

.clientes-icon-btn {

  width:
    32px;

  height:
    32px;

  padding:
    0;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --cli-muted-strong
    );

  background:
    transparent;

  border:
    1px solid
    transparent;

  border-radius:
    8px;

  cursor:
    pointer;

  transition:
    all
    var(
      --cli-transition
    );

}


.clientes-icon-btn svg {

  width:
    15px;

  height:
    15px;

}


.clientes-icon-btn:hover {

  color:
    var(
      --cli-text-strong
    );

  background:
    var(
      --cli-surface-hover
    );

  border-color:
    var(
      --cli-border
    );

}


.clientes-icon-btn--danger:hover {

  color:
    var(
      --cli-danger
    );

  background:
    color-mix(
      in srgb,
      var(
        --cli-danger
      )
      8%,
      transparent
    );

  border-color:
    color-mix(
      in srgb,
      var(
        --cli-danger
      )
      22%,
      transparent
    );

}


/* =========================================================
   METRICS
   ========================================================= */

.clientes-metrics {

  display:
    grid;

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

  gap:
    10px;

}


.clientes-metric {

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  padding:
    14px;

  background:
    var(
      --cli-surface
    );

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

  border-radius:
    var(
      --cli-radius
    );

}


.clientes-metric__icon {

  width:
    36px;

  height:
    36px;

  flex:
    0 0 36px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --cli-muted-strong
    );

  background:
    var(
      --cli-surface-soft
    );

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

  border-radius:
    9px;

}


.clientes-metric__icon svg {

  width:
    17px;

  height:
    17px;

  stroke-width:
    2;

}


.clientes-metric__content {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

}


.clientes-metric__label {

  color:
    var(
      --cli-muted
    );

  font-size:
    10px;

  font-weight:
    700;

  line-height:
    1.2;

}


.clientes-metric__value {

  margin-top:
    2px;

  color:
    var(
      --cli-text-strong
    );

  font-size:
    21px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    -.025em;

}


.clientes-metric__helper {

  margin-top:
    4px;

  color:
    var(
      --cli-muted
    );

  font-size:
    9px;

  font-weight:
    500;

  line-height:
    1.3;

}


/* =========================================================
   METRIC TONES
   ========================================================= */

.clientes-metric--success
.clientes-metric__icon {

  color:
    var(
      --cli-success
    );

}


.clientes-metric--primary
.clientes-metric__icon {

  color:
    var(
      --cli-text-strong
    );

}


.clientes-metric--info
.clientes-metric__icon {

  color:
    var(
      --cli-info
    );

}


/* =========================================================
   TOOLBAR
   ========================================================= */

.clientes-toolbar {

  width:
    100%;

  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;

  padding:
    12px;

  background:
    var(
      --cli-surface
    );

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

  border-radius:
    var(
      --cli-radius
    );

}


.clientes-search {

  position:
    relative;

  width:
    100%;

  min-width:
    0;

}


.clientes-search__icon {

  position:
    absolute;

  top:
    50%;

  left:
    11px;

  width:
    15px;

  height:
    15px;

  color:
    var(
      --cli-muted
    );

  transform:
    translateY(
      -50%
    );

  pointer-events:
    none;

}


.clientes-search__input {

  width:
    100%;

  height:
    38px;

  padding:
    0 40px 0 35px;

  color:
    var(
      --cli-text-strong
    );

  background:
    var(
      --cli-surface-soft
    );

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

  border-radius:
    9px;

  outline:
    none;

  font-size:
    12px;

  font-weight:
    600;

  transition:
    border-color
    var(
      --cli-transition
    ),
    background
    var(
      --cli-transition
    );

}


.clientes-search__input::placeholder {

  color:
    var(
      --cli-muted
    );

  font-weight:
    500;

}


.clientes-search__input:focus {

  background:
    var(
      --cli-surface
    );

  border-color:
    var(
      --cli-border-strong
    );

}


.clientes-search__clear {

  position:
    absolute;

  top:
    50%;

  right:
    7px;

  width:
    28px;

  height:
    28px;

  display:
    none;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --cli-muted
    );

  background:
    transparent;

  border:
    0;

  border-radius:
    7px;

  cursor:
    pointer;

  transform:
    translateY(
      -50%
    );

}


.clientes-search__clear.is-visible {

  display:
    flex;

}


.clientes-search__clear:hover {

  color:
    var(
      --cli-text-strong
    );

  background:
    var(
      --cli-surface-hover
    );

}


.clientes-search__clear svg {

  width:
    14px;

  height:
    14px;

}


/* =========================================================
   FILTERS
   ========================================================= */

.clientes-toolbar__filters {

  display:
    grid;

  grid-template-columns:
    repeat(
      8,
      minmax(
        120px,
        1fr
      )
    )
    auto;

  gap:
    8px;

  align-items:
    end;

}


.clientes-filter {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

}


.clientes-filter > span {

  padding-left:
    1px;

  color:
    var(
      --cli-muted
    );

  font-size:
    9px;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    .045em;

}


.clientes-filter select {

  width:
    100%;

  height:
    34px;

  padding:
    0 28px 0 9px;

  color:
    var(
      --cli-text
    );

  background:
    var(
      --cli-surface-soft
    );

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

  border-radius:
    8px;

  outline:
    none;

  font-size:
    11px;

  font-weight:
    650;

  cursor:
    pointer;

}


.clientes-filter select:focus {

  border-color:
    var(
      --cli-border-strong
    );

}


.clientes-filter--limit {

  min-width:
    86px;

}


.clientes-toolbar__clear {

  min-height:
    34px;

  white-space:
    nowrap;

}


/* =========================================================
   TABLE SECTION
   ========================================================= */

.clientes-table-section {

  position:
    relative;

  width:
    100%;

  min-width:
    0;

  background:
    var(
      --cli-surface
    );

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

  border-radius:
    var(
      --cli-radius-lg
    );

  overflow:
    visible;

}


.clientes-table-head {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  padding:
    14px 16px;

  border-bottom:
    1px solid
    var(
      --cli-border
    );

}


.clientes-table-head__eyebrow {

  display:
    block;

  margin-bottom:
    3px;

  color:
    var(
      --cli-muted
    );

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    .08em;

}


.clientes-table-head h2 {

  margin:
    0;

  color:
    var(
      --cli-text-strong
    );

  font-size:
    16px;

  font-weight:
    800;

  letter-spacing:
    -.02em;

}


.clientes-table-head__count {

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  color:
    var(
      --cli-muted
    );

  font-size:
    10px;

  font-weight:
    700;

}


.clientes-table-head__count strong {

  min-width:
    28px;

  padding:
    4px 7px;

  color:
    var(
      --cli-text-strong
    );

  background:
    var(
      --cli-surface-soft
    );

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

  border-radius:
    7px;

  text-align:
    center;

}


/* =========================================================
   TABLE WRAP
   ========================================================= */

.clientes-table-wrap {

  position:
    relative;

  width:
    100%;

  overflow-x:
    auto;

  overflow-y:
    visible;

  scrollbar-width:
    thin;

  scrollbar-color:
    var(
      --cli-border-strong
    )
    transparent;

}


.clientes-table-wrap::-webkit-scrollbar {

  height:
    7px;

}


.clientes-table-wrap::-webkit-scrollbar-thumb {

  background:
    var(
      --cli-border-strong
    );

  border-radius:
    999px;

}


/* =========================================================
   TABLE
   ========================================================= */

.clientes-table {

  width:
    100%;

  min-width:
    1180px;

  border-collapse:
    separate;

  border-spacing:
    0;

  table-layout:
    fixed;

}


.clientes-table thead th {

  position:
    sticky;

  top:
    0;

  z-index:
    2;

  padding:
    9px 10px;

  color:
    var(
      --cli-muted-strong
    );

  background:
    var(
      --cli-surface-soft
    );

  border-bottom:
    1px solid
    var(
      --cli-border
    );

  font-size:
    9px;

  font-weight:
    800;

  text-align:
    left;

  text-transform:
    uppercase;

  letter-spacing:
    .035em;

}


.clientes-table tbody td {

  position:
    relative;

  padding:
    10px;

  color:
    var(
      --cli-text
    );

  background:
    var(
      --cli-surface
    );

  border-bottom:
    1px solid
    var(
      --cli-border
    );

  font-size:
    11px;

  vertical-align:
    middle;

}


.clientes-table tbody tr:last-child td {

  border-bottom:
    0;

}


.clientes-table tbody tr:hover td {

  background:
    var(
      --cli-surface-soft
    );

}


/* =========================================================
   COLUMN WIDTHS
   ========================================================= */

.clientes-table th:nth-child(1),
.clientes-table td:nth-child(1) {

  width:
    220px;

}


.clientes-table th:nth-child(2),
.clientes-table td:nth-child(2) {

  width:
    110px;

}


.clientes-table th:nth-child(3),
.clientes-table td:nth-child(3) {

  width:
    130px;

}


.clientes-table th:nth-child(4),
.clientes-table td:nth-child(4) {

  width:
    145px;

}


.clientes-table th:nth-child(5),
.clientes-table td:nth-child(5) {

  width:
    165px;

}


.clientes-table th:nth-child(6),
.clientes-table td:nth-child(6) {

  width:
    140px;

}


.clientes-table th:nth-child(7),
.clientes-table td:nth-child(7) {

  width:
    135px;

}


.clientes-table th:nth-child(8),
.clientes-table td:nth-child(8) {

  width:
    75px;

}


.clientes-table th:nth-child(9),
.clientes-table td:nth-child(9) {

  width:
    100px;

}


.clientes-table th:nth-child(10),
.clientes-table td:nth-child(10) {

  width:
    54px;

}


/* =========================================================
   IDENTITY
   ========================================================= */

.clientes-identity {

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

}


.clientes-identity__avatar {

  width:
    34px;

  height:
    34px;

  flex:
    0 0 34px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --cli-text-strong
    );

  background:
    var(
      --cli-surface-soft
    );

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

  border-radius:
    9px;

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    -.02em;

}


.clientes-identity__content {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

}


.clientes-identity__content strong {

  max-width:
    165px;

  overflow:
    hidden;

  color:
    var(
      --cli-text-strong
    );

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


.clientes-identity__content span {

  max-width:
    165px;

  overflow:
    hidden;

  color:
    var(
      --cli-muted
    );

  font-size:
    9px;

  font-weight:
    550;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


/* =========================================================
   SECONDARY CELL
   ========================================================= */

.clientes-main-secondary,
.clientes-contact-cell {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

}


.clientes-main-secondary strong,
.clientes-contact-cell strong {

  overflow:
    hidden;

  color:
    var(
      --cli-text-strong
    );

  font-size:
    10px;

  font-weight:
    750;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


.clientes-main-secondary span,
.clientes-contact-cell span {

  overflow:
    hidden;

  color:
    var(
      --cli-muted
    );

  font-size:
    9px;

  font-weight:
    500;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


/* =========================================================
   TYPE
   ========================================================= */

.clientes-type {

  display:
    inline-flex;

  align-items:
    center;

  min-height:
    24px;

  padding:
    0 8px;

  color:
    var(
      --cli-muted-strong
    );

  background:
    var(
      --cli-surface-soft
    );

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

  border-radius:
    999px;

  font-size:
    9px;

  font-weight:
    750;

  white-space:
    nowrap;

}


/* =========================================================
   BOOK COUNT
   ========================================================= */

.clientes-books-count {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  min-width:
    46px;

  height:
    28px;

  padding:
    0 8px;

  color:
    var(
      --cli-text-strong
    );

  background:
    var(
      --cli-surface-soft
    );

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

  border-radius:
    8px;

  cursor:
    pointer;

  transition:
    all
    var(
      --cli-transition
    );

}


.clientes-books-count:hover {

  background:
    var(
      --cli-surface-hover
    );

  border-color:
    var(
      --cli-border-strong
    );

}


.clientes-books-count svg {

  width:
    13px;

  height:
    13px;

}


.clientes-books-count strong {

  font-size:
    10px;

  font-weight:
    800;

}


/* =========================================================
   STATUS
   ========================================================= */

.clientes-status {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  min-height:
    24px;

  padding:
    0 8px;

  color:
    var(
      --cli-muted-strong
    );

  background:
    var(
      --cli-surface-soft
    );

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

  border-radius:
    999px;

  font-size:
    9px;

  font-weight:
    750;

  white-space:
    nowrap;

}


.clientes-status__dot {

  width:
    6px;

  height:
    6px;

  flex:
    0 0 6px;

  border-radius:
    50%;

  background:
    currentColor;

}


.clientes-status--activo {

  color:
    var(
      --cli-success
    );

}


.clientes-status--potencial {

  color:
    var(
      --cli-info
    );

}


.clientes-status--pausado {

  color:
    var(
      --cli-warning
    );

}


.clientes-status--bloqueado,
.clientes-status--inactivo {

  color:
    var(
      --cli-danger
    );

}


/* =========================================================
   ACTIONS
   ========================================================= */

.clientes-col--actions {

  text-align:
    right;

}


.clientes-actions {

  position:
    relative;

  display:
    inline-flex;

  justify-content:
    flex-end;

}


.clientes-actions__trigger,
.clientes-mobile-card__menu {

  width:
    30px;

  height:
    30px;

  padding:
    0;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --cli-muted-strong
    );

  background:
    transparent;

  border:
    1px solid
    transparent;

  border-radius:
    8px;

  cursor:
    pointer;

  transition:
    all
    var(
      --cli-transition
    );

}


.clientes-actions__trigger:hover,
.clientes-actions.is-open
.clientes-actions__trigger,
.clientes-mobile-card__menu:hover {

  color:
    var(
      --cli-text-strong
    );

  background:
    var(
      --cli-surface-hover
    );

  border-color:
    var(
      --cli-border
    );

}


.clientes-actions__trigger svg,
.clientes-mobile-card__menu svg {

  width:
    16px;

  height:
    16px;

}


.clientes-actions__menu {

  position:
    absolute;

  top:
    calc(
      100% +
      5px
    );

  right:
    0;

  z-index:
    50;

  width:
    180px;

  padding:
    5px;

  display:
    none;

  flex-direction:
    column;

  gap:
    2px;

  background:
    var(
      --cli-surface
    );

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

  border-radius:
    10px;

  box-shadow:
    var(
      --cli-shadow
    );

}


.clientes-actions.is-open
.clientes-actions__menu {

  display:
    flex;

}


.clientes-actions__menu button {

  width:
    100%;

  min-height:
    34px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    0 9px;

  color:
    var(
      --cli-text
    );

  background:
    transparent;

  border:
    0;

  border-radius:
    7px;

  font-size:
    10px;

  font-weight:
    650;

  text-align:
    left;

  cursor:
    pointer;

}


.clientes-actions__menu button:hover {

  color:
    var(
      --cli-text-strong
    );

  background:
    var(
      --cli-surface-hover
    );

}


.clientes-actions__menu svg {

  width:
    14px;

  height:
    14px;

}


/* =========================================================
   TABLE EMPTY
   ========================================================= */

.clientes-table__empty {

  padding:
    0 !important;

}


.clientes-empty {

  min-height:
    260px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  padding:
    24px;

  text-align:
    center;

}


.clientes-empty__icon {

  width:
    46px;

  height:
    46px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --cli-muted-strong
    );

  background:
    var(
      --cli-surface-soft
    );

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

  border-radius:
    12px;

}


.clientes-empty__icon svg {

  width:
    20px;

  height:
    20px;

}


.clientes-empty strong {

  margin-top:
    3px;

  color:
    var(
      --cli-text-strong
    );

  font-size:
    13px;

  font-weight:
    800;

}


.clientes-empty p {

  max-width:
    360px;

  margin:
    0 0 5px;

  color:
    var(
      --cli-muted
    );

  font-size:
    11px;

  line-height:
    1.45;

}


/* =========================================================
   SKELETON
   ========================================================= */

.clientes-skeleton {

  display:
    inline-block;

  height:
    10px;

  background:
    var(
      --cli-surface-hover
    );

  border-radius:
    999px;

  animation:
    clientesSkeletonPulse
    .9s
    ease-in-out
    infinite
    alternate;

}


.clientes-skeleton--avatar {

  width:
    34px;

  height:
    34px;

  border-radius:
    9px;

}


.clientes-skeleton--wide {

  width:
    130px;

}


.clientes-skeleton--medium {

  width:
    90px;

}


.clientes-skeleton--short {

  width:
    58px;

}


.clientes-skeleton--button {

  width:
    28px;

  height:
    28px;

  border-radius:
    8px;

}


@keyframes clientesSkeletonPulse {

  from {

    opacity:
      .55;

  }

  to {

    opacity:
      1;

  }

}


/* =========================================================
   PAGINATION
   ========================================================= */

.clientes-pagination {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  padding:
    11px 14px;

  background:
    var(
      --cli-surface
    );

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

  border-radius:
    var(
      --cli-radius
    );

}


.clientes-pagination__info,
.clientes-pagination__current {

  color:
    var(
      --cli-muted
    );

  font-size:
    10px;

  font-weight:
    600;

}


.clientes-pagination__info strong,
.clientes-pagination__current strong {

  color:
    var(
      --cli-text-strong
    );

  font-weight:
    800;

}


.clientes-pagination__controls {

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

}


.clientes-pagination__btn {

  width:
    31px;

  height:
    31px;

  padding:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --cli-text
    );

  background:
    var(
      --cli-surface-soft
    );

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

  border-radius:
    8px;

  cursor:
    pointer;

  transition:
    all
    var(
      --cli-transition
    );

}


.clientes-pagination__btn:hover:not(:disabled) {

  background:
    var(
      --cli-surface-hover
    );

  border-color:
    var(
      --cli-border-strong
    );

}


.clientes-pagination__btn:disabled {

  opacity:
    .38;

  cursor:
    not-allowed;

}


.clientes-pagination__btn svg {

  width:
    14px;

  height:
    14px;

}


/* =========================================================
   MOBILE LIST BASE
   ========================================================= */

.clientes-mobile-list {

  display:
    none;

}


/* =========================================================
   SPINNER
   ========================================================= */

.clientes-spinner {

  width:
    16px;

  height:
    16px;

  display:
    inline-block;

  border:
    2px solid
    currentColor;

  border-right-color:
    transparent;

  border-radius:
    50%;

  animation:
    clientesSpin
    .65s
    linear
    infinite;

}


@keyframes clientesSpin {

  to {

    transform:
      rotate(
        360deg
      );

  }

}


/* =========================================================
   FOCUS
   ========================================================= */

.clientes-page button:focus-visible,
.clientes-page input:focus-visible,
.clientes-page select:focus-visible,
.clientes-page textarea:focus-visible {

  outline:
    2px solid
    color-mix(
      in srgb,
      var(
        --cli-text-strong
      )
      24%,
      transparent
    );

  outline-offset:
    2px;

}


/* =========================================================
   LARGE SCREEN TUNING
   ========================================================= */

@media (
  min-width:
    1600px
) {

  .clientes-toolbar__filters {

    grid-template-columns:
      repeat(
        8,
        minmax(
          135px,
          1fr
        )
      )
      auto;

  }


  .clientes-table {

    min-width:
      100%;

  }

}


/* =========================================================
   MID SCREEN
   ========================================================= */

@media (
  max-width:
    1450px
) {

  .clientes-metrics {

    grid-template-columns:
      repeat(
        5,
        minmax(
          145px,
          1fr
        )
      );

    overflow-x:
      auto;

    padding-bottom:
      2px;

  }


  .clientes-toolbar__filters {

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

  }


  .clientes-toolbar__clear {

    width:
      100%;

  }

}/* =========================================================
   NAI HUB · CLIENTES
   NEURO APRENDIZAJE INFANTIL

   UBICACIÓN:
   frontend/src/pages/clientes/clientes.css

   PARTE 2 DE 3

   - MODALES
   - FORMULARIOS
   - DETALLE
   - TABS
   - CARDS INTERNAS
   - CONTACTOS
   - FORMAS DE PAGO
   - FORMAS DE ENVÍO
   ========================================================= */


/* =========================================================
   BODY MODAL
   ========================================================= */

body.clientes-modal-open {

  overflow:
    hidden;

}


/* =========================================================
   MODAL ROOT
   ========================================================= */

#clientesModalRoot,
#clientesSubmodalRoot {

  position:
    relative;

  z-index:
    1000;

}


/* =========================================================
   BACKDROP
   ========================================================= */

.clientes-modal-backdrop {

  position:
    fixed;

  inset:
    0;

  z-index:
    1000;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    center;

  padding:
    78px 18px 24px;

  overflow-y:
    auto;

  background:
    rgba(
      5,
      6,
      5,
      .58
    );

  overscroll-behavior:
    contain;

}


html[data-theme="dark"]
.clientes-modal-backdrop {

  background:
    rgba(
      0,
      0,
      0,
      .72
    );

}


/* =========================================================
   MODAL
   ========================================================= */

.clientes-modal {

  position:
    relative;

  width:
    min(
      100%,
      760px
    );

  max-height:
    calc(
      100vh -
      102px
    );

  display:
    flex;

  flex-direction:
    column;

  color:
    var(
      --cli-text
    );

  background:
    var(
      --cli-surface
    );

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

  border-radius:
    14px;

  box-shadow:
    0 20px 60px rgba(
      0,
      0,
      0,
      .16
    );

  opacity:
    0;

  transform:
    translateY(
      6px
    );

  transition:
    opacity
    120ms
    ease,
    transform
    120ms
    ease;

  overflow:
    hidden;

}


html[data-theme="dark"]
.clientes-modal {

  box-shadow:
    0 20px 70px rgba(
      0,
      0,
      0,
      .5
    );

}


.clientes-modal.is-visible {

  opacity:
    1;

  transform:
    translateY(
      0
    );

}


.clientes-modal--md {

  width:
    min(
      100%,
      700px
    );

}


.clientes-modal--lg {

  width:
    min(
      100%,
      980px
    );

}


.clientes-modal--xl {

  width:
    min(
      calc(
        100vw -
        48px
      ),
      1320px
    );

}


.clientes-modal--detail {

  width:
    min(
      calc(
        100vw -
        40px
      ),
      1380px
    );

}


/* =========================================================
   MODAL HEADER
   ========================================================= */

.clientes-modal__header {

  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  padding:
    14px 16px;

  background:
    var(
      --cli-surface
    );

  border-bottom:
    1px solid
    var(
      --cli-border
    );

}


.clientes-modal__heading {

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

}


.clientes-modal__heading-icon {

  width:
    34px;

  height:
    34px;

  flex:
    0 0 34px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --cli-text-strong
    );

  background:
    var(
      --cli-surface-soft
    );

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

  border-radius:
    9px;

}


.clientes-modal__heading-icon svg {

  width:
    16px;

  height:
    16px;

}


.clientes-modal__heading h2 {

  margin:
    0;

  color:
    var(
      --cli-text-strong
    );

  font-size:
    15px;

  line-height:
    1.2;

  font-weight:
    800;

  letter-spacing:
    -.015em;

}


.clientes-modal__heading p {

  margin:
    3px 0 0;

  overflow:
    hidden;

  color:
    var(
      --cli-muted
    );

  font-size:
    10px;

  font-weight:
    550;

  line-height:
    1.3;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


.clientes-modal__close {

  width:
    32px;

  height:
    32px;

  flex:
    0 0 32px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --cli-muted-strong
    );

  background:
    transparent;

  border:
    1px solid
    transparent;

  border-radius:
    8px;

  cursor:
    pointer;

  transition:
    all
    var(
      --cli-transition
    );

}


.clientes-modal__close:hover {

  color:
    var(
      --cli-text-strong
    );

  background:
    var(
      --cli-surface-hover
    );

  border-color:
    var(
      --cli-border
    );

}


.clientes-modal__close svg {

  width:
    16px;

  height:
    16px;

}


/* =========================================================
   MODAL BODY
   ========================================================= */

.clientes-modal__body {

  min-height:
    0;

  flex:
    1 1 auto;

  padding:
    14px;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  scrollbar-width:
    thin;

  scrollbar-color:
    var(
      --cli-border-strong
    )
    transparent;

}


.clientes-modal__body::-webkit-scrollbar {

  width:
    7px;

}


.clientes-modal__body::-webkit-scrollbar-thumb {

  background:
    var(
      --cli-border-strong
    );

  border-radius:
    999px;

}


/* =========================================================
   MODAL FOOTER
   ========================================================= */

.clientes-modal__footer {

  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  padding:
    11px 14px;

  background:
    var(
      --cli-surface-soft
    );

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

}


/* =========================================================
   FORM
   ========================================================= */

.clientes-form {

  width:
    100%;

  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;

}


/* =========================================================
   FORM SECTION
   ========================================================= */

.clientes-form-section {

  padding:
    12px;

  background:
    var(
      --cli-surface
    );

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

  border-radius:
    11px;

}


.clientes-form-section__head {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  margin-bottom:
    10px;

  padding-bottom:
    8px;

  border-bottom:
    1px solid
    var(
      --cli-border
    );

}


.clientes-form-section__head > div {

  min-width:
    0;

}


.clientes-form-section__head span {

  display:
    block;

  margin-bottom:
    2px;

  color:
    var(
      --cli-muted
    );

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .08em;

}


.clientes-form-section__head h3 {

  margin:
    0;

  color:
    var(
      --cli-text-strong
    );

  font-size:
    13px;

  font-weight:
    800;

  letter-spacing:
    -.015em;

}


.clientes-form-section__head > svg {

  width:
    16px;

  height:
    16px;

  color:
    var(
      --cli-muted
    );

}


/* =========================================================
   FORM GRID
   ========================================================= */

.clientes-form-grid {

  display:
    grid;

  gap:
    9px;

}


.clientes-form-grid--2 {

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

}


.clientes-form-grid--3 {

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

}


.clientes-form-grid--4 {

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

}


.clientes-field--span-2 {

  grid-column:
    span 2;

}


.clientes-field--span-3 {

  grid-column:
    span 3;

}


/* =========================================================
   FIELDS
   ========================================================= */

.clientes-field {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

}


.clientes-field > span {

  color:
    var(
      --cli-muted-strong
    );

  font-size:
    9px;

  font-weight:
    750;

  line-height:
    1.25;

}


.clientes-field > span b {

  color:
    var(
      --cli-danger
    );

  font-weight:
    800;

}


.clientes-field input,
.clientes-field select,
.clientes-field textarea {

  width:
    100%;

  color:
    var(
      --cli-text-strong
    );

  background:
    var(
      --cli-surface-soft
    );

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

  border-radius:
    8px;

  outline:
    none;

  font-size:
    11px;

  font-weight:
    600;

  transition:
    background
    var(
      --cli-transition
    ),
    border-color
    var(
      --cli-transition
    );

}


.clientes-field input,
.clientes-field select {

  height:
    35px;

  padding:
    0 9px;

}


.clientes-field select {

  padding-right:
    28px;

  cursor:
    pointer;

}


.clientes-field textarea {

  min-height:
    74px;

  padding:
    8px 9px;

  line-height:
    1.45;

  resize:
    vertical;

}


.clientes-field input::placeholder,
.clientes-field textarea::placeholder {

  color:
    var(
      --cli-muted
    );

  font-weight:
    500;

}


.clientes-field input:focus,
.clientes-field select:focus,
.clientes-field textarea:focus {

  background:
    var(
      --cli-surface
    );

  border-color:
    var(
      --cli-border-strong
    );

}


/* =========================================================
   INPUT ADDON
   ========================================================= */

.clientes-input-addon {

  display:
    flex;

  align-items:
    stretch;

}


.clientes-input-addon input {

  min-width:
    0;

  flex:
    1;

  border-radius:
    8px 0 0 8px;

}


.clientes-input-addon > span {

  min-width:
    48px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 8px;

  color:
    var(
      --cli-muted-strong
    );

  background:
    var(
      --cli-surface-hover
    );

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

  border-left:
    0;

  border-radius:
    0 8px 8px 0;

  font-size:
    9px;

  font-weight:
    750;

}


.clientes-input-addon--money > span {

  min-width:
    34px;

  order:
    0;

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

  border-right:
    0;

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

  border-radius:
    8px 0 0 8px;

}


.clientes-input-addon--money input {

  order:
    1;

  border-radius:
    0 8px 8px 0;

}


/* =========================================================
   CHECKS
   ========================================================= */

.clientes-check-grid {

  display:
    grid;

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

  gap:
    8px;

}


.clientes-check {

  min-height:
    34px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    7px 9px;

  color:
    var(
      --cli-text
    );

  background:
    var(
      --cli-surface-soft
    );

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

  border-radius:
    8px;

  cursor:
    pointer;

}


.clientes-check input {

  width:
    15px;

  height:
    15px;

  margin:
    0;

  accent-color:
    var(
      --cli-primary
    );

}


html[data-theme="dark"]
.clientes-check input {

  accent-color:
    #ffffff;

}


.clientes-check span {

  font-size:
    10px;

  font-weight:
    650;

}


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

.clientes-detail-loading {

  min-height:
    240px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  color:
    var(
      --cli-muted
    );

}


.clientes-detail-loading strong {

  font-size:
    11px;

  font-weight:
    700;

}


/* =========================================================
   DETAIL HERO
   ========================================================= */

.clientes-detail-hero {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  margin-bottom:
    12px;

  padding:
    13px 14px;

  background:
    var(
      --cli-surface-soft
    );

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

  border-radius:
    12px;

}


.clientes-detail-hero__identity {

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

}


.clientes-detail-hero__avatar {

  width:
    46px;

  height:
    46px;

  flex:
    0 0 46px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --cli-text-strong
    );

  background:
    var(
      --cli-surface
    );

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

  border-radius:
    11px;

  font-size:
    14px;

  font-weight:
    800;

}


.clientes-detail-hero__identity > div:last-child {

  min-width:
    0;

}


.clientes-detail-hero__topline {

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    7px;

  margin-bottom:
    3px;

}


.clientes-detail-hero__code {

  color:
    var(
      --cli-muted
    );

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    .05em;

}


.clientes-detail-hero h3 {

  margin:
    0;

  overflow:
    hidden;

  color:
    var(
      --cli-text-strong
    );

  font-size:
    18px;

  line-height:
    1.15;

  font-weight:
    800;

  letter-spacing:
    -.025em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


.clientes-detail-hero p {

  margin:
    4px 0 0;

  overflow:
    hidden;

  color:
    var(
      --cli-muted
    );

  font-size:
    10px;

  font-weight:
    550;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


.clientes-detail-hero__actions {

  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

}


/* =========================================================
   DETAIL TABS
   ========================================================= */

.clientes-detail-tabs {

  width:
    100%;

  display:
    flex;

  align-items:
    center;

  gap:
    4px;

  margin-bottom:
    12px;

  padding:
    4px;

  overflow-x:
    auto;

  background:
    var(
      --cli-surface-soft
    );

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

  border-radius:
    10px;

  scrollbar-width:
    none;

}


.clientes-detail-tabs::-webkit-scrollbar {

  display:
    none;

}


.clientes-detail-tab {

  min-height:
    32px;

  flex:
    0 0 auto;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  padding:
    0 10px;

  color:
    var(
      --cli-muted-strong
    );

  background:
    transparent;

  border:
    1px solid
    transparent;

  border-radius:
    7px;

  font-size:
    10px;

  font-weight:
    700;

  cursor:
    pointer;

  white-space:
    nowrap;

  transition:
    all
    var(
      --cli-transition
    );

}


.clientes-detail-tab:hover {

  color:
    var(
      --cli-text-strong
    );

  background:
    var(
      --cli-surface-hover
    );

}


.clientes-detail-tab.is-active {

  color:
    var(
      --cli-text-strong
    );

  background:
    var(
      --cli-surface
    );

  border-color:
    var(
      --cli-border
    );

}


.clientes-detail-tab svg {

  width:
    14px;

  height:
    14px;

}


.clientes-detail-tab b {

  min-width:
    18px;

  height:
    18px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 5px;

  color:
    var(
      --cli-muted-strong
    );

  background:
    var(
      --cli-surface-hover
    );

  border-radius:
    999px;

  font-size:
    8px;

  font-weight:
    800;

}


/* =========================================================
   DETAIL PANELS
   ========================================================= */

.clientes-detail-panel {

  display:
    none;

}


.clientes-detail-panel.is-active {

  display:
    block;

}


/* =========================================================
   DETAIL STATS
   ========================================================= */

.clientes-detail-stat-grid {

  display:
    grid;

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

  gap:
    8px;

  margin-bottom:
    10px;

}


.clientes-detail-stat {

  min-width:
    0;

  padding:
    11px;

  background:
    var(
      --cli-surface
    );

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

  border-radius:
    10px;

}


.clientes-detail-stat span {

  display:
    block;

  margin-bottom:
    4px;

  color:
    var(
      --cli-muted
    );

  font-size:
    8px;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    .045em;

}


.clientes-detail-stat strong {

  display:
    block;

  overflow:
    hidden;

  color:
    var(
      --cli-text-strong
    );

  font-size:
    14px;

  font-weight:
    800;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


/* =========================================================
   DETAIL SECTION
   ========================================================= */

.clientes-detail-section {

  margin-bottom:
    10px;

  padding:
    12px;

  background:
    var(
      --cli-surface
    );

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

  border-radius:
    11px;

}


.clientes-detail-section:last-child {

  margin-bottom:
    0;

}


.clientes-detail-section__head {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  margin-bottom:
    10px;

  padding-bottom:
    8px;

  border-bottom:
    1px solid
    var(
      --cli-border
    );

}


.clientes-detail-section__head > div {

  min-width:
    0;

}


.clientes-detail-section__head span {

  display:
    block;

  margin-bottom:
    2px;

  color:
    var(
      --cli-muted
    );

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .08em;

}


.clientes-detail-section__head h4 {

  margin:
    0;

  color:
    var(
      --cli-text-strong
    );

  font-size:
    13px;

  font-weight:
    800;

  letter-spacing:
    -.015em;

}


/* =========================================================
   DETAIL GRID
   ========================================================= */

.clientes-detail-grid {

  display:
    grid;

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

  gap:
    1px;

  overflow:
    hidden;

  background:
    var(
      --cli-border
    );

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

  border-radius:
    9px;

}


.clientes-detail-item {

  min-width:
    0;

  padding:
    9px;

  background:
    var(
      --cli-surface
    );

}


.clientes-detail-item__label {

  display:
    flex;

  align-items:
    center;

  gap:
    5px;

  margin-bottom:
    4px;

  color:
    var(
      --cli-muted
    );

  font-size:
    8px;

  font-weight:
    750;

}


.clientes-detail-item__label svg {

  width:
    12px;

  height:
    12px;

}


.clientes-detail-item strong {

  display:
    block;

  overflow:
    hidden;

  color:
    var(
      --cli-text-strong
    );

  font-size:
    10px;

  font-weight:
    700;

  line-height:
    1.35;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


/* =========================================================
   DETAIL TWO COLUMNS
   ========================================================= */

.clientes-detail-two-columns {

  display:
    grid;

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

  gap:
    8px;

  margin-bottom:
    10px;

}


/* =========================================================
   DETAIL CARD
   ========================================================= */

.clientes-detail-card {

  min-width:
    0;

  padding:
    11px;

  background:
    var(
      --cli-surface
    );

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

  border-radius:
    10px;

}


.clientes-detail-card__head {

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    10px;

  margin-bottom:
    9px;

  padding-bottom:
    7px;

  border-bottom:
    1px solid
    var(
      --cli-border
    );

}


.clientes-detail-card__head span {

  display:
    block;

  margin-bottom:
    2px;

  color:
    var(
      --cli-muted
    );

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .06em;

}


.clientes-detail-card__head h4 {

  margin:
    0;

  color:
    var(
      --cli-text-strong
    );

  font-size:
    12px;

  font-weight:
    800;

}


.clientes-detail-card__head > svg {

  width:
    16px;

  height:
    16px;

  color:
    var(
      --cli-muted
    );

}


.clientes-detail-card__rows {

  display:
    flex;

  flex-direction:
    column;

}


.clientes-detail-card__rows > div {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    6px 0;

  border-bottom:
    1px solid
    var(
      --cli-border
    );

}


.clientes-detail-card__rows > div:last-child {

  border-bottom:
    0;

}


.clientes-detail-card__rows span {

  color:
    var(
      --cli-muted
    );

  font-size:
    9px;

  font-weight:
    600;

}


.clientes-detail-card__rows strong {

  max-width:
    62%;

  overflow:
    hidden;

  color:
    var(
      --cli-text-strong
    );

  font-size:
    9px;

  font-weight:
    750;

  text-align:
    right;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


.clientes-detail-card__empty {

  padding:
    12px 2px;

  color:
    var(
      --cli-muted
    );

  font-size:
    9px;

  font-weight:
    550;

  text-align:
    center;

}


/* =========================================================
   DETAIL NOTES PREVIEW
   ========================================================= */

.clientes-detail-notes-preview {

  display:
    grid;

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

  gap:
    8px;

}


.clientes-detail-notes-preview article {

  padding:
    9px;

  background:
    var(
      --cli-surface-soft
    );

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

  border-radius:
    8px;

}


.clientes-detail-notes-preview span {

  display:
    block;

  margin-bottom:
    4px;

  color:
    var(
      --cli-muted
    );

  font-size:
    8px;

  font-weight:
    800;

  text-transform:
    uppercase;

}


.clientes-detail-notes-preview p {

  margin:
    0;

  color:
    var(
      --cli-text
    );

  font-size:
    9px;

  font-weight:
    550;

  line-height:
    1.45;

  white-space:
    pre-wrap;

}


/* =========================================================
   GENERIC LIST
   ========================================================= */

.clientes-list {

  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;

}


.clientes-list-card {

  display:
    grid;

  grid-template-columns:
    minmax(
      210px,
      1.2fr
    )
    minmax(
      260px,
      1.4fr
    )
    minmax(
      100px,
      auto
    )
    auto;

  align-items:
    center;

  gap:
    12px;

  padding:
    9px;

  background:
    var(
      --cli-surface-soft
    );

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

  border-radius:
    9px;

}


.clientes-list-card__main {

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

}


.clientes-list-card__icon {

  width:
    32px;

  height:
    32px;

  flex:
    0 0 32px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --cli-muted-strong
    );

  background:
    var(
      --cli-surface
    );

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

  border-radius:
    8px;

}


.clientes-list-card__icon svg {

  width:
    15px;

  height:
    15px;

}


.clientes-list-card__main > div:last-child {

  min-width:
    0;

}


.clientes-list-card__title-row {

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    6px;

}


.clientes-list-card__title-row strong {

  overflow:
    hidden;

  color:
    var(
      --cli-text-strong
    );

  font-size:
    10px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


.clientes-list-card__main > div:last-child > span {

  display:
    block;

  margin-top:
    2px;

  overflow:
    hidden;

  color:
    var(
      --cli-muted
    );

  font-size:
    9px;

  font-weight:
    550;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


/* =========================================================
   LIST DATA
   ========================================================= */

.clientes-list-card__data {

  min-width:
    0;

  display:
    grid;

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

  gap:
    8px;

}


.clientes-list-card__data > div {

  min-width:
    0;

}


.clientes-list-card__data span {

  display:
    block;

  margin-bottom:
    2px;

  color:
    var(
      --cli-muted
    );

  font-size:
    8px;

  font-weight:
    700;

}


.clientes-list-card__data strong {

  display:
    block;

  overflow:
    hidden;

  color:
    var(
      --cli-text-strong
    );

  font-size:
    9px;

  font-weight:
    700;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


/* =========================================================
   LIST FLAGS
   ========================================================= */

.clientes-list-card__flags {

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    4px;

}


.clientes-list-card__flags span {

  padding:
    4px 6px;

  color:
    var(
      --cli-muted-strong
    );

  background:
    var(
      --cli-surface
    );

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

  border-radius:
    999px;

  font-size:
    8px;

  font-weight:
    700;

  white-space:
    nowrap;

}


/* =========================================================
   LIST ACTIONS
   ========================================================= */

.clientes-list-card__actions {

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    3px;

}


/* =========================================================
   BADGES
   ========================================================= */

.clientes-badge {

  min-height:
    20px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 7px;

  color:
    var(
      --cli-muted-strong
    );

  background:
    var(
      --cli-surface
    );

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

  border-radius:
    999px;

  font-size:
    8px;

  font-weight:
    750;

  white-space:
    nowrap;

}


.clientes-badge--primary {

  color:
    var(
      --cli-info
    );

}


.clientes-badge--success {

  color:
    var(
      --cli-success
    );

}


/* =========================================================
   PANEL EMPTY
   ========================================================= */

.clientes-panel-empty {

  min-height:
    180px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    20px;

  text-align:
    center;

}


.clientes-panel-empty > svg {

  width:
    24px;

  height:
    24px;

  color:
    var(
      --cli-muted
    );

}


.clientes-panel-empty strong {

  color:
    var(
      --cli-text-strong
    );

  font-size:
    11px;

  font-weight:
    800;

}


.clientes-panel-empty p {

  max-width:
    360px;

  margin:
    0;

  color:
    var(
      --cli-muted
    );

  font-size:
    9px;

  font-weight:
    550;

  line-height:
    1.45;

}


.clientes-panel-empty--compact {

  min-height:
    150px;

}


/* =========================================================
   SEARCH INSIDE MODAL
   ========================================================= */

.clientes-search--modal {

  margin-bottom:
    10px;

}


/* =========================================================
   SUMMARY GRID
   ========================================================= */

.clientes-summary-grid {

  display:
    grid;

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

  gap:
    8px;

  margin-bottom:
    10px;

}


.clientes-summary-grid
.clientes-metric {

  padding:
    11px;

}


/* =========================================================
   SUMMARY LIST
   ========================================================= */

.clientes-summary-list {

  overflow:
    hidden;

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

  border-radius:
    9px;

}


.clientes-summary-list > div {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  padding:
    8px 9px;

  background:
    var(
      --cli-surface
    );

  border-bottom:
    1px solid
    var(
      --cli-border
    );

}


.clientes-summary-list > div:last-child {

  border-bottom:
    0;

}


.clientes-summary-list span {

  color:
    var(
      --cli-muted-strong
    );

  font-size:
    9px;

  font-weight:
    650;

}


.clientes-summary-list strong {

  color:
    var(
      --cli-text-strong
    );

  font-size:
    10px;

  font-weight:
    800;

}


/* =========================================================
   MODAL MID RESPONSIVE
   ========================================================= */

@media (
  max-width:
    1100px
) {

  .clientes-form-grid--4 {

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

  }


  .clientes-form-grid--3 {

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

  }


  .clientes-field--span-3 {

    grid-column:
      span 2;

  }


  .clientes-detail-grid {

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

  }


  .clientes-list-card {

    grid-template-columns:
      minmax(
        190px,
        1fr
      )
      minmax(
        230px,
        1.2fr
      )
      auto;

  }


  .clientes-list-card__flags {

    grid-column:
      1 /
      -1;

    justify-content:
      flex-start;

  }

}


/* =========================================================
   MODAL TABLET
   ========================================================= */

@media (
  max-width:
    820px
) {

  .clientes-modal-backdrop {

    padding:
      62px 10px 14px;

  }


  .clientes-modal,
  .clientes-modal--md,
  .clientes-modal--lg,
  .clientes-modal--xl,
  .clientes-modal--detail {

    width:
      100%;

    max-height:
      calc(
        100vh -
        76px
      );

    border-radius:
      12px;

  }


  .clientes-modal__header {

    padding:
      12px;

  }


  .clientes-modal__body {

    padding:
      10px;

  }


  .clientes-modal__footer {

    padding:
      9px 10px;

  }


  .clientes-detail-hero {

    align-items:
      flex-start;

    flex-direction:
      column;

  }


  .clientes-detail-hero__actions {

    width:
      100%;

  }


  .clientes-detail-hero__actions
  .clientes-btn {

    flex:
      1;

  }


  .clientes-detail-stat-grid {

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

  }


  .clientes-detail-two-columns {

    grid-template-columns:
      1fr;

  }


  .clientes-list-card {

    grid-template-columns:
      1fr
      auto;

  }


  .clientes-list-card__data {

    grid-column:
      1 /
      -1;

  }


  .clientes-list-card__flags {

    grid-column:
      1 /
      -1;

  }


  .clientes-summary-grid {

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

  }

}/* =========================================================
   NAI HUB · CLIENTES
   NEURO APRENDIZAJE INFANTIL

   UBICACIÓN:
   frontend/src/pages/clientes/clientes.css

   PARTE 3 DE 3

   - LIBROS
   - BUSCADOR DE LIBROS
   - NOTAS
   - TIMELINE
   - TOAST
   - MOBILE CARDS
   - RESPONSIVE
   - DARK / LIGHT AJUSTES
   ========================================================= */


/* =========================================================
   BOOKS GRID
   ========================================================= */

.clientes-books-grid {

  display:
    grid;

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

  gap:
    8px;

}


/* =========================================================
   BOOK CARD
   ========================================================= */

.clientes-book-card {

  position:
    relative;

  min-width:
    0;

  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

  padding:
    9px;

  background:
    var(
      --cli-surface-soft
    );

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

  border-radius:
    10px;

}


.clientes-book-card__image {

  width:
    54px;

  height:
    68px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

  color:
    var(
      --cli-muted
    );

  background:
    var(
      --cli-surface
    );

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

  border-radius:
    8px;

}


.clientes-book-card__image img {

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

}


.clientes-book-card__image svg {

  width:
    20px;

  height:
    20px;

}


.clientes-book-card__content {

  min-width:
    0;

}


.clientes-book-card__sku {

  display:
    block;

  margin-bottom:
    3px;

  overflow:
    hidden;

  color:
    var(
      --cli-muted
    );

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .03em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


.clientes-book-card__content > strong {

  display:
    block;

  overflow:
    hidden;

  color:
    var(
      --cli-text-strong
    );

  font-size:
    10px;

  font-weight:
    800;

  line-height:
    1.3;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


.clientes-book-card__content > p {

  margin:
    3px 0 0;

  overflow:
    hidden;

  color:
    var(
      --cli-muted
    );

  font-size:
    9px;

  font-weight:
    550;

  line-height:
    1.3;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


.clientes-book-card__meta {

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-top:
    7px;

}


.clientes-book-card__meta span {

  color:
    var(
      --cli-muted-strong
    );

  font-size:
    8px;

  font-weight:
    700;

}


/* =========================================================
   BOOK SEARCH RESULTS
   ========================================================= */

.clientes-book-search-results {

  min-height:
    180px;

  max-height:
    420px;

  overflow-y:
    auto;

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

  border-radius:
    10px;

  background:
    var(
      --cli-surface
    );

  scrollbar-width:
    thin;

  scrollbar-color:
    var(
      --cli-border-strong
    )
    transparent;

}


.clientes-book-search-row {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    9px 10px;

  border-bottom:
    1px solid
    var(
      --cli-border
    );

}


.clientes-book-search-row:last-child {

  border-bottom:
    0;

}


.clientes-book-search-row:hover {

  background:
    var(
      --cli-surface-soft
    );

}


.clientes-book-search-row__content {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

}


.clientes-book-search-row__content strong {

  overflow:
    hidden;

  color:
    var(
      --cli-text-strong
    );

  font-size:
    10px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


.clientes-book-search-row__content span {

  overflow:
    hidden;

  color:
    var(
      --cli-muted
    );

  font-size:
    8px;

  font-weight:
    550;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


/* =========================================================
   NOTES LIST
   ========================================================= */

.clientes-notes-list {

  display:
    grid;

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

  gap:
    8px;

}


/* =========================================================
   NOTE CARD
   ========================================================= */

.clientes-note-card {

  min-width:
    0;

  padding:
    10px;

  background:
    var(
      --cli-surface-soft
    );

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

  border-radius:
    10px;

}


.clientes-note-card.is-important {

  border-color:
    color-mix(
      in srgb,
      var(
        --cli-warning
      )
      38%,
      var(
        --cli-border
      )
    );

}


.clientes-note-card__head {

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    10px;

  margin-bottom:
    7px;

}


.clientes-note-card__head span {

  display:
    block;

  margin-bottom:
    2px;

  color:
    var(
      --cli-muted
    );

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .06em;

}


.clientes-note-card__head strong {

  display:
    block;

  color:
    var(
      --cli-text-strong
    );

  font-size:
    10px;

  font-weight:
    800;

}


.clientes-note-card__important {

  width:
    15px;

  height:
    15px;

  flex:
    0 0 15px;

  color:
    var(
      --cli-warning
    );

}


.clientes-note-card > p {

  margin:
    0;

  color:
    var(
      --cli-text
    );

  font-size:
    9px;

  font-weight:
    550;

  line-height:
    1.5;

  white-space:
    pre-wrap;

  word-break:
    break-word;

}


.clientes-note-card footer {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  margin-top:
    9px;

  padding-top:
    7px;

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

}


.clientes-note-card footer > span {

  color:
    var(
      --cli-muted
    );

  font-size:
    8px;

  font-weight:
    600;

}


.clientes-note-card footer > div {

  display:
    flex;

  align-items:
    center;

  gap:
    2px;

}


/* =========================================================
   TIMELINE
   ========================================================= */

.clientes-timeline {

  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  gap:
    0;

}


.clientes-timeline::before {

  content:
    "";

  position:
    absolute;

  top:
    13px;

  bottom:
    13px;

  left:
    6px;

  width:
    1px;

  background:
    var(
      --cli-border
    );

}


.clientes-timeline-item {

  position:
    relative;

  display:
    grid;

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

  gap:
    10px;

  padding:
    0 0 12px;

}


.clientes-timeline-item:last-child {

  padding-bottom:
    0;

}


.clientes-timeline-item__dot {

  position:
    relative;

  z-index:
    2;

  width:
    9px;

  height:
    9px;

  margin-top:
    4px;

  background:
    var(
      --cli-surface
    );

  border:
    2px solid
    var(
      --cli-border-strong
    );

  border-radius:
    50%;

}


.clientes-timeline-item__content {

  min-width:
    0;

  padding:
    8px 9px;

  background:
    var(
      --cli-surface-soft
    );

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

  border-radius:
    9px;

}


.clientes-timeline-item__head {

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    10px;

}


.clientes-timeline-item__head strong {

  color:
    var(
      --cli-text-strong
    );

  font-size:
    9px;

  font-weight:
    800;

}


.clientes-timeline-item__head span {

  flex:
    0 0 auto;

  color:
    var(
      --cli-muted
    );

  font-size:
    8px;

  font-weight:
    600;

}


.clientes-timeline-item__content p {

  margin:
    5px 0 0;

  color:
    var(
      --cli-muted-strong
    );

  font-size:
    9px;

  font-weight:
    550;

  line-height:
    1.45;

}


/* =========================================================
   TOAST ROOT
   ========================================================= */

.clientes-toast-root {

  position:
    fixed;

  top:
    76px;

  right:
    18px;

  z-index:
    3000;

  width:
    min(
      360px,
      calc(
        100vw -
        36px
      )
    );

  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;

  pointer-events:
    none;

}


/* =========================================================
   TOAST
   ========================================================= */

.clientes-toast {

  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

  padding:
    9px;

  color:
    var(
      --cli-text
    );

  background:
    var(
      --cli-surface
    );

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

  border-radius:
    10px;

  box-shadow:
    0 10px 30px rgba(
      0,
      0,
      0,
      .1
    );

  opacity:
    1;

  transform:
    translateX(
      0
    );

  transition:
    opacity
    150ms
    ease,
    transform
    150ms
    ease;

  pointer-events:
    auto;

}


html[data-theme="dark"]
.clientes-toast {

  box-shadow:
    0 12px 34px rgba(
      0,
      0,
      0,
      .4
    );

}


.clientes-toast.is-leaving {

  opacity:
    0;

  transform:
    translateX(
      8px
    );

}


/* =========================================================
   TOAST ICON
   ========================================================= */

.clientes-toast__icon {

  width:
    30px;

  height:
    30px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --cli-success
    );

  background:
    var(
      --cli-surface-soft
    );

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

  border-radius:
    8px;

}


.clientes-toast--error
.clientes-toast__icon {

  color:
    var(
      --cli-danger
    );

}


.clientes-toast--warning
.clientes-toast__icon {

  color:
    var(
      --cli-warning
    );

}


.clientes-toast__icon svg {

  width:
    15px;

  height:
    15px;

}


/* =========================================================
   TOAST BODY
   ========================================================= */

.clientes-toast__body {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

}


.clientes-toast__body strong {

  color:
    var(
      --cli-text-strong
    );

  font-size:
    9px;

  font-weight:
    800;

}


.clientes-toast__body span {

  color:
    var(
      --cli-muted-strong
    );

  font-size:
    9px;

  font-weight:
    550;

  line-height:
    1.35;

}


/* =========================================================
   TOAST CLOSE
   ========================================================= */

.clientes-toast__close {

  width:
    28px;

  height:
    28px;

  padding:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --cli-muted
    );

  background:
    transparent;

  border:
    0;

  border-radius:
    7px;

  cursor:
    pointer;

}


.clientes-toast__close:hover {

  color:
    var(
      --cli-text-strong
    );

  background:
    var(
      --cli-surface-hover
    );

}


.clientes-toast__close svg {

  width:
    13px;

  height:
    13px;

}


/* =========================================================
   MOBILE CARD
   ========================================================= */

.clientes-mobile-card {

  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;

  padding:
    12px;

  background:
    var(
      --cli-surface
    );

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

  border-radius:
    11px;

}


/* =========================================================
   MOBILE CARD HEADER
   ========================================================= */

.clientes-mobile-card__header {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

}


/* =========================================================
   MOBILE STATUS
   ========================================================= */

.clientes-mobile-card__status {

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    6px;

}


/* =========================================================
   MOBILE GRID
   ========================================================= */

.clientes-mobile-card__grid {

  display:
    grid;

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

  gap:
    8px;

  padding:
    9px;

  background:
    var(
      --cli-surface-soft
    );

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

  border-radius:
    9px;

}


.clientes-mobile-card__grid > div {

  min-width:
    0;

}


.clientes-mobile-card__grid span {

  display:
    block;

  margin-bottom:
    2px;

  color:
    var(
      --cli-muted
    );

  font-size:
    8px;

  font-weight:
    700;

}


.clientes-mobile-card__grid strong {

  display:
    block;

  overflow:
    hidden;

  color:
    var(
      --cli-text-strong
    );

  font-size:
    9px;

  font-weight:
    750;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


/* =========================================================
   MOBILE FOOTER
   ========================================================= */

.clientes-mobile-card__footer {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;

}


.clientes-mobile-card__books {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  padding:
    0;

  color:
    var(
      --cli-muted-strong
    );

  background:
    transparent;

  border:
    0;

  font-size:
    9px;

  font-weight:
    700;

  cursor:
    pointer;

}


.clientes-mobile-card__books svg {

  width:
    14px;

  height:
    14px;

}


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

.clientes-mobile-loading {

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

}


.clientes-mobile-loading span {

  height:
    104px;

  background:
    var(
      --cli-surface-hover
    );

  border-radius:
    10px;

  animation:
    clientesSkeletonPulse
    .9s
    ease-in-out
    infinite
    alternate;

}


/* =========================================================
   SUBMODAL ABOVE MAIN MODAL
   ========================================================= */

#clientesSubmodalRoot {

  position:
    fixed;

  inset:
    0;

  z-index:
    2200;

}


#clientesSubmodalRoot
.clientes-modal-backdrop {

  z-index:
    2200;

  background:
    rgba(
      4,
      5,
      4,
      .68
    );

}


/* =========================================================
   SELECT / FORM DARK
   ========================================================= */

html[data-theme="dark"]
.clientes-page select,
html[data-theme="dark"]
.clientes-modal select {

  color-scheme:
    dark;

}


html[data-theme="light"]
.clientes-page select,
html[data-theme="light"]
.clientes-modal select {

  color-scheme:
    light;

}


/* =========================================================
   SCROLLBARS
   ========================================================= */

.clientes-page *,
.clientes-modal * {

  scrollbar-width:
    thin;

  scrollbar-color:
    var(
      --cli-border-strong
    )
    transparent;

}


.clientes-page *::-webkit-scrollbar,
.clientes-modal *::-webkit-scrollbar {

  width:
    7px;

  height:
    7px;

}


.clientes-page *::-webkit-scrollbar-thumb,
.clientes-modal *::-webkit-scrollbar-thumb {

  background:
    var(
      --cli-border-strong
    );

  border-radius:
    999px;

}


/* =========================================================
   RESPONSIVE DESKTOP SMALL
   ========================================================= */

@media (
  max-width:
    1280px
) {

  .clientes-hero {

    align-items:
      stretch;

  }


  .clientes-metrics {

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

    overflow:
      visible;

  }


  .clientes-toolbar__filters {

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

  }


  .clientes-toolbar__clear {

    width:
      100%;

  }


  .clientes-books-grid {

    grid-template-columns:
      1fr;

  }

}


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

@media (
  max-width:
    900px
) {

  .clientes-page {

    gap:
      12px;

  }


  .clientes-hero {

    flex-direction:
      column;

    padding:
      14px;

  }


  .clientes-hero__actions {

    justify-content:
      flex-start;

  }


  .clientes-metrics {

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

  }


  .clientes-toolbar__filters {

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

  }


  .clientes-table-wrap {

    display:
      none;

  }


  .clientes-mobile-list {

    display:
      flex;

    flex-direction:
      column;

    gap:
      8px;

    padding:
      10px;

  }


  .clientes-table-head {

    padding:
      12px;

  }


  .clientes-pagination {

    padding:
      10px 12px;

  }


  .clientes-notes-list {

    grid-template-columns:
      1fr;

  }


  .clientes-books-grid {

    grid-template-columns:
      1fr;

  }

}


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

@media (
  max-width:
    620px
) {

  .clientes-page {

    gap:
      10px;

  }


  .clientes-hero {

    padding:
      12px;

    border-radius:
      12px;

  }


  .clientes-hero h1 {

    font-size:
      22px;

  }


  .clientes-hero p {

    font-size:
      11px;

  }


  .clientes-hero__actions {

    width:
      100%;

    display:
      grid;

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

  }


  .clientes-hero__actions
  .clientes-btn {

    width:
      100%;

  }


  .clientes-hero__actions
  .clientes-btn--primary {

    grid-column:
      1 /
      -1;

  }


  .clientes-metrics {

    grid-template-columns:
      1fr;

    gap:
      7px;

  }


  .clientes-metric {

    padding:
      11px;

  }


  .clientes-metric__value {

    font-size:
      18px;

  }


  .clientes-toolbar {

    padding:
      10px;

  }


  .clientes-toolbar__filters {

    grid-template-columns:
      1fr
      1fr;

    gap:
      7px;

  }


  .clientes-filter--limit,
  .clientes-toolbar__clear {

    grid-column:
      span 1;

  }


  .clientes-table-head {

    align-items:
      flex-start;

  }


  .clientes-table-head h2 {

    font-size:
      14px;

  }


  .clientes-pagination {

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      9px;

  }


  .clientes-pagination__info {

    text-align:
      center;

  }


  .clientes-pagination__controls {

    justify-content:
      center;

  }


  .clientes-modal-backdrop {

    align-items:
      stretch;

    padding:
      54px 6px 8px;

  }


  .clientes-modal,
  .clientes-modal--md,
  .clientes-modal--lg,
  .clientes-modal--xl,
  .clientes-modal--detail {

    width:
      100%;

    max-height:
      calc(
        100vh -
        62px
      );

    border-radius:
      10px;

  }


  .clientes-modal__header {

    padding:
      10px;

  }


  .clientes-modal__heading-icon {

    width:
      30px;

    height:
      30px;

    flex-basis:
      30px;

  }


  .clientes-modal__heading h2 {

    font-size:
      13px;

  }


  .clientes-modal__heading p {

    max-width:
      215px;

    font-size:
      9px;

  }


  .clientes-modal__body {

    padding:
      8px;

  }


  .clientes-modal__footer {

    display:
      grid;

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

    gap:
      6px;

    padding:
      8px;

  }


  .clientes-modal__footer
  .clientes-btn {

    width:
      100%;

  }


  .clientes-form-grid--2,
  .clientes-form-grid--3,
  .clientes-form-grid--4 {

    grid-template-columns:
      1fr;

  }


  .clientes-field--span-2,
  .clientes-field--span-3 {

    grid-column:
      span 1;

  }


  .clientes-check-grid {

    grid-template-columns:
      1fr;

  }


  .clientes-detail-hero {

    padding:
      10px;

  }


  .clientes-detail-hero__avatar {

    width:
      40px;

    height:
      40px;

    flex-basis:
      40px;

    font-size:
      12px;

  }


  .clientes-detail-hero h3 {

    font-size:
      15px;

  }


  .clientes-detail-hero__actions {

    display:
      grid;

    grid-template-columns:
      1fr
      1fr;

  }


  .clientes-detail-tabs {

    justify-content:
      flex-start;

  }


  .clientes-detail-stat-grid {

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

    gap:
      6px;

  }


  .clientes-detail-stat {

    padding:
      9px;

  }


  .clientes-detail-stat strong {

    font-size:
      12px;

  }


  .clientes-detail-grid {

    grid-template-columns:
      1fr;

  }


  .clientes-detail-two-columns {

    grid-template-columns:
      1fr;

  }


  .clientes-detail-notes-preview {

    grid-template-columns:
      1fr;

  }


  .clientes-list-card {

    grid-template-columns:
      1fr;

    gap:
      9px;

  }


  .clientes-list-card__data {

    grid-column:
      auto;

    grid-template-columns:
      1fr
      1fr;

  }


  .clientes-list-card__flags {

    grid-column:
      auto;

    justify-content:
      flex-start;

  }


  .clientes-list-card__actions {

    justify-content:
      flex-start;

  }


  .clientes-book-card {

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

  }


  .clientes-book-card__image {

    width:
      46px;

    height:
      58px;

  }


  .clientes-book-search-row {

    align-items:
      flex-start;

    flex-direction:
      column;

  }


  .clientes-book-search-row
  .clientes-btn {

    width:
      100%;

  }


  .clientes-notes-list {

    grid-template-columns:
      1fr;

  }


  .clientes-summary-grid {

    grid-template-columns:
      1fr
      1fr;

  }


  .clientes-toast-root {

    top:
      auto;

    right:
      8px;

    bottom:
      8px;

    left:
      8px;

    width:
      auto;

  }


  .clientes-toast {

    width:
      100%;

  }


  .clientes-mobile-card__grid {

    grid-template-columns:
      1fr
      1fr;

  }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (
  max-width:
    430px
) {

  .clientes-toolbar__filters {

    grid-template-columns:
      1fr;

  }


  .clientes-hero__actions {

    grid-template-columns:
      1fr;

  }


  .clientes-hero__actions
  .clientes-btn--primary {

    grid-column:
      auto;

  }


  .clientes-summary-grid {

    grid-template-columns:
      1fr;

  }


  .clientes-detail-stat-grid {

    grid-template-columns:
      1fr
      1fr;

  }


  .clientes-mobile-card__grid {

    grid-template-columns:
      1fr;

  }


  .clientes-modal__footer {

    grid-template-columns:
      1fr;

  }


  .clientes-detail-hero__actions {

    grid-template-columns:
      1fr;

  }


  .clientes-list-card__data {

    grid-template-columns:
      1fr;

  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion:
    reduce
) {

  .clientes-btn,
  .clientes-icon-btn,
  .clientes-actions__trigger,
  .clientes-pagination__btn,
  .clientes-modal,
  .clientes-toast {

    transition:
      none;

  }


  .clientes-skeleton,
  .clientes-spinner,
  .clientes-mobile-loading span {

    animation:
      none;

  }

}


/* =========================================================
   PRINT
   ========================================================= */

@media print {

  .clientes-hero__actions,
  .clientes-toolbar,
  .clientes-pagination,
  .clientes-actions,
  .clientes-col--actions,
  .clientes-toast-root {

    display:
      none !important;

  }


  .clientes-page {

    color:
      #000000;

  }


  .clientes-table-section {

    border:
      1px solid
      #cccccc;

  }


  .clientes-table-wrap {

    overflow:
      visible;

  }


  .clientes-table {

    min-width:
      0;

  }

}.clientes-detail-section__head .clientes-btn--primary,
.clientes-detail-section__head .clientes-btn--primary span,
.clientes-detail-section__head .clientes-btn--primary i,
.clientes-detail-section__head .clientes-btn--primary svg {
  color: #ffffff !important;
}

.clientes-detail-section__head .clientes-btn--primary {
  background: #24261f !important;
  border-color: #24261f !important;
}

.clientes-detail-section__head .clientes-btn--primary:hover:not(:disabled) {
  background: #151713 !important;
  border-color: #151713 !important;
}

.clientes-detail-section__head .clientes-btn--primary svg,
.clientes-detail-section__head .clientes-btn--primary i {
  stroke: currentColor !important;
}/* =========================================================
   FIX · SUBMODALES CLIENTES
   Fondo sólido + variables propias
   ========================================================= */

#clientesSubmodalRoot {
  --cli-bg: #f4f4f1;
  --cli-surface: #ffffff;
  --cli-surface-soft: #f7f7f4;
  --cli-surface-hover: #f0f0ec;

  --cli-border: #deded7;
  --cli-border-strong: #c8c8bf;

  --cli-text: #11120f;
  --cli-text-strong: #050505;
  --cli-muted: #74756e;
  --cli-muted-strong: #53554e;

  --cli-primary: #24261f;
  --cli-primary-hover: #151713;

  --cli-success: #2c6a49;
  --cli-warning: #8b641c;
  --cli-danger: #9f3131;
  --cli-info: #345f87;

  --cli-shadow:
    0 20px 60px rgba(0, 0, 0, .18);
}


html[data-theme="dark"] #clientesSubmodalRoot {
  --cli-bg: #0b0c0a;
  --cli-surface: #11120f;
  --cli-surface-soft: #151713;
  --cli-surface-hover: #1a1c18;

  --cli-border: #2a2d26;
  --cli-border-strong: #383c33;

  --cli-text: #e7e8e2;
  --cli-text-strong: #ffffff;
  --cli-muted: #9b9e94;
  --cli-muted-strong: #b6b9ae;

  --cli-primary: #e7e8e2;
  --cli-primary-hover: #ffffff;

  --cli-shadow:
    0 20px 70px rgba(0, 0, 0, .55);
}


#clientesSubmodalRoot .clientes-modal-backdrop {
  background:
    rgba(5, 6, 5, .72) !important;
}


#clientesSubmodalRoot .clientes-modal {
  color:
    var(--cli-text) !important;

  background:
    var(--cli-surface) !important;

  border:
    1px solid var(--cli-border-strong) !important;

  opacity:
    1;
}


#clientesSubmodalRoot .clientes-modal__header {
  background:
    var(--cli-surface) !important;

  border-bottom:
    1px solid var(--cli-border) !important;
}


#clientesSubmodalRoot .clientes-modal__body {
  background:
    var(--cli-surface) !important;
}


#clientesSubmodalRoot .clientes-modal__footer {
  background:
    var(--cli-surface-soft) !important;

  border-top:
    1px solid var(--cli-border) !important;
}


#clientesSubmodalRoot .clientes-search__input,
#clientesSubmodalRoot .clientes-field input,
#clientesSubmodalRoot .clientes-field select,
#clientesSubmodalRoot .clientes-field textarea {
  color:
    var(--cli-text-strong) !important;

  background:
    var(--cli-surface-soft) !important;

  border-color:
    var(--cli-border) !important;
}


#clientesSubmodalRoot .clientes-panel-empty,
#clientesSubmodalRoot .clientes-book-search-results {
  color:
    var(--cli-text);

  background:
    var(--cli-surface) !important;
}/* =========================================================
   CLIENTES · FULL WIDTH / FULL HEIGHT
   SOLO SEPARACIÓN EXTERIOR MÍNIMA
   ========================================================= */

.app-content:has(#clientesPageMount) {
  width:
    100%;

  max-width:
    none;

  min-width:
    0;

  min-height:
    100%;

  margin:
    0;

  padding:
    10px;
}


#clientesPageMount {
  width:
    100%;

  max-width:
    none;

  min-width:
    0;

  min-height:
    100%;

  display:
    flex;

  flex:
    1 1 auto;
}


#clientesPage,
.clientes-page {
  width:
    100%;

  max-width:
    none;

  min-width:
    0;

  min-height:
    100%;

  flex:
    1 1 auto;

  margin:
    0;

  padding:
    0;
}


/* =========================================================
   TABLA · USAR TODO EL ANCHO DISPONIBLE
   ========================================================= */

#clientesPage .clientes-table-section {
  width:
    100%;

  max-width:
    none;

  min-width:
    0;

  flex:
    1 1 auto;
}


#clientesPage .clientes-table-wrap {
  width:
    100%;

  max-width:
    none;

  min-width:
    0;
}


#clientesPage .clientes-table {
  width:
    100%;

  min-width:
    100%;

  max-width:
    none;
}


/* =========================================================
   HERO / MÉTRICAS / TOOLBAR / PAGINACIÓN
   ========================================================= */

#clientesPage .clientes-hero,
#clientesPage .clientes-metrics,
#clientesPage .clientes-toolbar,
#clientesPage .clientes-table-section,
#clientesPage .clientes-pagination,
#clientesPage #clientesPaginationRoot {
  width:
    100%;

  max-width:
    none;

  min-width:
    0;
}


/* =========================================================
   DESKTOP GRANDE
   ========================================================= */

@media (
  min-width: 901px
) {

  .app-content:has(#clientesPageMount) {
    padding:
      10px 12px;
  }


  #clientesPage {
    min-height:
      calc(
        100dvh -
        74px
      );
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (
  max-width: 900px
) {

  .app-content:has(#clientesPageMount) {
    padding:
      8px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (
  max-width: 620px
) {

  .app-content:has(#clientesPageMount) {
    padding:
      6px;
  }

}/* =========================================================
   CLIENTES · DARK MODE NEGRO REAL
   ========================================================= */

html[data-theme="dark"] #clientesPage,
html[data-theme="dark"] .clientes-page {

  --cli-bg:
    #000000;

  --cli-surface:
    #050505;

  --cli-surface-soft:
    #0a0a0a;

  --cli-surface-hover:
    #111111;

  --cli-border:
    #242424;

  --cli-border-strong:
    #3a3a3a;

  --cli-text:
    #f5f5f5;

  --cli-text-strong:
    #ffffff;

  --cli-muted:
    #a8a8a8;

  --cli-muted-strong:
    #d0d0d0;

  --cli-primary:
    #ffffff;

  --cli-primary-hover:
    #e8e8e8;

  --cli-shadow:
    none;
}


/* =========================================================
   FONDO GENERAL CLIENTES
   ========================================================= */

html[data-theme="dark"]
.app-content:has(#clientesPageMount) {
  background:
    #000000;
}


html[data-theme="dark"]
#clientesPageMount {
  background:
    #000000;
}


html[data-theme="dark"]
#clientesPage {
  background:
    #000000;
}


/* =========================================================
   SUPERFICIES
   ========================================================= */

html[data-theme="dark"]
#clientesPage .clientes-hero,

html[data-theme="dark"]
#clientesPage .clientes-metric,

html[data-theme="dark"]
#clientesPage .clientes-toolbar,

html[data-theme="dark"]
#clientesPage .clientes-table-section,

html[data-theme="dark"]
#clientesPage .clientes-pagination,

html[data-theme="dark"]
#clientesPage .clientes-mobile-card {
  background:
    #050505;
}


/* =========================================================
   SUPERFICIES SECUNDARIAS
   ========================================================= */

html[data-theme="dark"]
#clientesPage .clientes-search__input,

html[data-theme="dark"]
#clientesPage .clientes-filter select,

html[data-theme="dark"]
#clientesPage .clientes-metric__icon,

html[data-theme="dark"]
#clientesPage .clientes-identity__avatar,

html[data-theme="dark"]
#clientesPage .clientes-type,

html[data-theme="dark"]
#clientesPage .clientes-books-count,

html[data-theme="dark"]
#clientesPage .clientes-status,

html[data-theme="dark"]
#clientesPage .clientes-mobile-card__grid,

html[data-theme="dark"]
#clientesPage .clientes-pagination__btn {
  background:
    #0a0a0a;
}


/* =========================================================
   HOVER
   ========================================================= */

html[data-theme="dark"]
#clientesPage .clientes-btn--ghost:hover,

html[data-theme="dark"]
#clientesPage .clientes-btn--soft:hover,

html[data-theme="dark"]
#clientesPage .clientes-books-count:hover,

html[data-theme="dark"]
#clientesPage .clientes-pagination__btn:hover:not(:disabled),

html[data-theme="dark"]
#clientesPage .clientes-icon-btn:hover,

html[data-theme="dark"]
#clientesPage .clientes-actions__trigger:hover {
  background:
    #111111;
}


/* =========================================================
   TABLA
   ========================================================= */

html[data-theme="dark"]
#clientesPage .clientes-table thead th {
  background:
    #0a0a0a;
}


html[data-theme="dark"]
#clientesPage .clientes-table tbody td {
  background:
    #050505;
}


html[data-theme="dark"]
#clientesPage .clientes-table tbody tr:hover td {
  background:
    #0d0d0d;
}


/* =========================================================
   ACTION MENU
   ========================================================= */

html[data-theme="dark"]
#clientesPage .clientes-actions__menu {
  background:
    #050505;

  border-color:
    #3a3a3a;
}


html[data-theme="dark"]
#clientesPage .clientes-actions__menu button:hover {
  background:
    #111111;
}


/* =========================================================
   MODALES
   ========================================================= */

html[data-theme="dark"]
.clientes-modal {
  background:
    #050505;

  border-color:
    #3a3a3a;
}


html[data-theme="dark"]
.clientes-modal__header {
  background:
    #050505;
}


html[data-theme="dark"]
.clientes-modal__body {
  background:
    #050505;
}


html[data-theme="dark"]
.clientes-modal__footer {
  background:
    #0a0a0a;
}


/* =========================================================
   SUBMODAL DARK
   ========================================================= */

html[data-theme="dark"]
#clientesSubmodalRoot {

  --cli-bg:
    #000000;

  --cli-surface:
    #050505;

  --cli-surface-soft:
    #0a0a0a;

  --cli-surface-hover:
    #111111;

  --cli-border:
    #242424;

  --cli-border-strong:
    #3a3a3a;

  --cli-text:
    #f5f5f5;

  --cli-text-strong:
    #ffffff;

  --cli-muted:
    #a8a8a8;

  --cli-muted-strong:
    #d0d0d0;

  --cli-primary:
    #ffffff;

  --cli-primary-hover:
    #e8e8e8;
}


/* =========================================================
   FORMULARIOS
   ========================================================= */

html[data-theme="dark"]
.clientes-field input,

html[data-theme="dark"]
.clientes-field select,

html[data-theme="dark"]
.clientes-field textarea {
  background:
    #0a0a0a;

  border-color:
    #242424;

  color:
    #ffffff;
}


html[data-theme="dark"]
.clientes-field input:focus,

html[data-theme="dark"]
.clientes-field select:focus,

html[data-theme="dark"]
.clientes-field textarea:focus {
  background:
    #050505;

  border-color:
    #3a3a3a;
}


/* =========================================================
   DETAIL
   ========================================================= */

html[data-theme="dark"]
.clientes-detail-hero,

html[data-theme="dark"]
.clientes-detail-tabs,

html[data-theme="dark"]
.clientes-detail-card,

html[data-theme="dark"]
.clientes-detail-section,

html[data-theme="dark"]
.clientes-detail-stat {
  background:
    #050505;
}


html[data-theme="dark"]
.clientes-detail-item,

html[data-theme="dark"]
.clientes-list-card,

html[data-theme="dark"]
.clientes-note-card,

html[data-theme="dark"]
.clientes-timeline-item__content,

html[data-theme="dark"]
.clientes-book-card {
  background:
    #0a0a0a;
}/* =========================================================
   CLIENTES · IMPORTACIÓN MASIVA
   AGREGAR AL FINAL DE:
   frontend/src/pages/clientes/clientes.css
   ========================================================= */


/* =========================================================
   MODAL IMPORT
   ========================================================= */

.clientes-modal--import {

  width:
    min(
      calc(
        100vw -
        48px
      ),
      1180px
    );

}


/* =========================================================
   IMPORT ROOT
   ========================================================= */

.clientes-import {

  width:
    100%;

  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;

}


/* =========================================================
   INTRO
   ========================================================= */

.clientes-import__intro {

  display:
    flex;

  align-items:
    flex-start;

  gap:
    11px;

  margin-bottom:
    10px;

  padding:
    11px;

  background:
    var(
      --cli-surface-soft
    );

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

  border-radius:
    10px;

}


.clientes-import__intro-icon {

  width:
    36px;

  height:
    36px;

  flex:
    0 0 36px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --cli-text-strong
    );

  background:
    var(
      --cli-surface
    );

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

  border-radius:
    9px;

}


.clientes-import__intro-icon svg {

  width:
    17px;

  height:
    17px;

  stroke-width:
    2;

}


.clientes-import__intro > div:last-child {

  min-width:
    0;

}


.clientes-import__intro strong {

  display:
    block;

  color:
    var(
      --cli-text-strong
    );

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1.25;

}


.clientes-import__intro p {

  max-width:
    720px;

  margin:
    4px 0 0;

  color:
    var(
      --cli-muted-strong
    );

  font-size:
    10px;

  font-weight:
    550;

  line-height:
    1.5;

}


/* =========================================================
   TEMPLATE
   ========================================================= */

.clientes-import__template {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  margin-bottom:
    10px;

  padding:
    11px;

  background:
    var(
      --cli-surface
    );

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

  border-radius:
    10px;

}


.clientes-import__template > div {

  min-width:
    0;

}


.clientes-import__template > div > span {

  display:
    block;

  margin-bottom:
    2px;

  color:
    var(
      --cli-muted
    );

  font-size:
    8px;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    .07em;

}


.clientes-import__template strong {

  display:
    block;

  color:
    var(
      --cli-text-strong
    );

  font-size:
    11px;

  font-weight:
    800;

}


.clientes-import__template p {

  margin:
    4px 0 0;

  color:
    var(
      --cli-muted
    );

  font-size:
    9px;

  font-weight:
    550;

  line-height:
    1.45;

}


/* =========================================================
   DROPZONE
   ========================================================= */

.clientes-import-dropzone {

  position:
    relative;

  min-height:
    180px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  padding:
    22px;

  color:
    var(
      --cli-text
    );

  background:
    var(
      --cli-surface-soft
    );

  border:
    1px dashed
    var(
      --cli-border-strong
    );

  border-radius:
    11px;

  text-align:
    center;

  cursor:
    pointer;

  transition:
    background
    var(
      --cli-transition
    ),
    border-color
    var(
      --cli-transition
    ),
    transform
    var(
      --cli-transition
    );

}


.clientes-import-dropzone:hover {

  background:
    var(
      --cli-surface-hover
    );

  border-color:
    var(
      --cli-text
    );

}


.clientes-import-dropzone.is-dragging {

  background:
    var(
      --cli-surface-hover
    );

  border-style:
    solid;

  border-color:
    var(
      --cli-text-strong
    );

  transform:
    translateY(
      -1px
    );

}


.clientes-import-dropzone__icon {

  width:
    44px;

  height:
    44px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin-bottom:
    3px;

  color:
    var(
      --cli-text-strong
    );

  background:
    var(
      --cli-surface
    );

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

  border-radius:
    11px;

}


.clientes-import-dropzone__icon svg {

  width:
    20px;

  height:
    20px;

  stroke-width:
    1.9;

}


.clientes-import-dropzone > strong {

  color:
    var(
      --cli-text-strong
    );

  font-size:
    12px;

  font-weight:
    800;

}


.clientes-import-dropzone > span {

  color:
    var(
      --cli-muted-strong
    );

  font-size:
    10px;

  font-weight:
    650;

}


.clientes-import-dropzone > small {

  color:
    var(
      --cli-muted
    );

  font-size:
    9px;

  font-weight:
    550;

}


/* =========================================================
   IMPORT STATUS
   ========================================================= */

.clientes-import__status {

  min-height:
    0;

}


/* =========================================================
   SELECTED FILE
   ========================================================= */

.clientes-import-file {

  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

  padding:
    10px 11px;

  background:
    var(
      --cli-surface-soft
    );

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

  border-radius:
    10px;

}


.clientes-import-file__icon {

  width:
    38px;

  height:
    38px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --cli-success
    );

  background:
    var(
      --cli-surface
    );

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

  border-radius:
    9px;

}


.clientes-import-file__icon svg {

  width:
    17px;

  height:
    17px;

}


.clientes-import-file__content {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

}


.clientes-import-file__content strong {

  overflow:
    hidden;

  color:
    var(
      --cli-text-strong
    );

  font-size:
    10px;

  font-weight:
    800;

  line-height:
    1.3;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


.clientes-import-file__content span {

  color:
    var(
      --cli-muted
    );

  font-size:
    8px;

  font-weight:
    700;

  text-transform:
    uppercase;

  letter-spacing:
    .04em;

}


/* =========================================================
   PREVIEW SUMMARY
   ========================================================= */

.clientes-import-summary {

  display:
    grid;

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

  gap:
    8px;

  margin-bottom:
    10px;

}


.clientes-import-summary article {

  min-width:
    0;

  padding:
    10px 11px;

  background:
    var(
      --cli-surface-soft
    );

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

  border-radius:
    9px;

}


.clientes-import-summary article span {

  display:
    block;

  margin-bottom:
    4px;

  color:
    var(
      --cli-muted
    );

  font-size:
    8px;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    .055em;

}


.clientes-import-summary article strong {

  color:
    var(
      --cli-text-strong
    );

  font-size:
    17px;

  font-weight:
    800;

  line-height:
    1;

}


.clientes-import-summary article.is-valid {

  border-color:
    color-mix(
      in srgb,
      var(
        --cli-success
      )
      28%,
      var(
        --cli-border
      )
    );

}


.clientes-import-summary article.is-valid strong {

  color:
    var(
      --cli-success
    );

}


.clientes-import-summary article.is-invalid {

  border-color:
    color-mix(
      in srgb,
      var(
        --cli-danger
      )
      28%,
      var(
        --cli-border
      )
    );

}


.clientes-import-summary article.is-invalid strong {

  color:
    var(
      --cli-danger
    );

}


/* =========================================================
   PREVIEW TABLE
   ========================================================= */

.clientes-import-preview-table {

  width:
    100%;

  max-height:
    390px;

  overflow:
    auto;

  background:
    var(
      --cli-surface
    );

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

  border-radius:
    10px;

}


.clientes-import-preview-table table {

  width:
    100%;

  min-width:
    720px;

  border-collapse:
    separate;

  border-spacing:
    0;

}


.clientes-import-preview-table thead th {

  position:
    sticky;

  top:
    0;

  z-index:
    2;

  padding:
    8px 10px;

  color:
    var(
      --cli-muted-strong
    );

  background:
    var(
      --cli-surface-soft
    );

  border-bottom:
    1px solid
    var(
      --cli-border
    );

  font-size:
    8px;

  font-weight:
    800;

  text-align:
    left;

  text-transform:
    uppercase;

  letter-spacing:
    .045em;

}


.clientes-import-preview-table tbody td {

  padding:
    9px 10px;

  color:
    var(
      --cli-text
    );

  background:
    var(
      --cli-surface
    );

  border-bottom:
    1px solid
    var(
      --cli-border
    );

  font-size:
    9px;

  font-weight:
    600;

  vertical-align:
    middle;

}


.clientes-import-preview-table tbody tr:last-child td {

  border-bottom:
    0;

}


.clientes-import-preview-table tbody tr:hover td {

  background:
    var(
      --cli-surface-soft
    );

}


.clientes-import-preview-table tbody tr.is-invalid td {

  background:
    color-mix(
      in srgb,
      var(
        --cli-danger
      )
      3%,
      var(
        --cli-surface
      )
    );

}


.clientes-import-preview-table td strong {

  display:
    block;

  max-width:
    250px;

  overflow:
    hidden;

  color:
    var(
      --cli-text-strong
    );

  font-size:
    9px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


.clientes-import-preview-table td > span {

  display:
    block;

  margin-top:
    2px;

  color:
    var(
      --cli-muted
    );

  font-size:
    8px;

  font-weight:
    550;

}


/* =========================================================
   IMPORT STATE
   ========================================================= */

.clientes-import-state {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  min-height:
    23px;

  padding:
    0 7px;

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

  border-radius:
    999px;

  font-size:
    8px;

  font-weight:
    800;

  white-space:
    nowrap;

}


.clientes-import-state svg {

  width:
    12px;

  height:
    12px;

}


.clientes-import-state.is-valid {

  color:
    var(
      --cli-success
    );

  background:
    color-mix(
      in srgb,
      var(
        --cli-success
      )
      5%,
      var(
        --cli-surface
      )
    );

  border-color:
    color-mix(
      in srgb,
      var(
        --cli-success
      )
      28%,
      var(
        --cli-border
      )
    );

}


.clientes-import-state.is-invalid {

  color:
    var(
      --cli-danger
    );

  background:
    color-mix(
      in srgb,
      var(
        --cli-danger
      )
      5%,
      var(
        --cli-surface
      )
    );

  border-color:
    color-mix(
      in srgb,
      var(
        --cli-danger
      )
      28%,
      var(
        --cli-border
      )
    );

}


/* =========================================================
   IMPORT ERRORS
   ========================================================= */

.clientes-import-errors {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    4px;

}


.clientes-import-errors small {

  max-width:
    360px;

  color:
    var(
      --cli-danger
    );

  font-size:
    8px;

  font-weight:
    650;

  line-height:
    1.4;

}


/* =========================================================
   IMPORT NOTICE
   ========================================================= */

.clientes-import-notice {

  display:
    flex;

  align-items:
    flex-start;

  gap:
    9px;

  margin-top:
    10px;

  padding:
    9px 10px;

  color:
    var(
      --cli-warning
    );

  background:
    color-mix(
      in srgb,
      var(
        --cli-warning
      )
      5%,
      var(
        --cli-surface
      )
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(
        --cli-warning
      )
      28%,
      var(
        --cli-border
      )
    );

  border-radius:
    9px;

}


.clientes-import-notice > svg {

  width:
    15px;

  height:
    15px;

  flex:
    0 0 15px;

  margin-top:
    1px;

}


.clientes-import-notice > div {

  min-width:
    0;

}


.clientes-import-notice strong {

  display:
    block;

  color:
    currentColor;

  font-size:
    9px;

  font-weight:
    800;

}


.clientes-import-notice span {

  display:
    block;

  margin-top:
    2px;

  color:
    var(
      --cli-muted-strong
    );

  font-size:
    8px;

  font-weight:
    550;

  line-height:
    1.45;

}


.clientes-import-notice.is-success {

  color:
    var(
      --cli-success
    );

  background:
    color-mix(
      in srgb,
      var(
        --cli-success
      )
      5%,
      var(
        --cli-surface
      )
    );

  border-color:
    color-mix(
      in srgb,
      var(
        --cli-success
      )
      28%,
      var(
        --cli-border
      )
    );

}


/* =========================================================
   IMPORT RESULT
   ========================================================= */

.clientes-import-result {

  min-height:
    390px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    26px;

  text-align:
    center;

}


.clientes-import-result__icon {

  width:
    52px;

  height:
    52px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin-bottom:
    4px;

  color:
    var(
      --cli-success
    );

  background:
    color-mix(
      in srgb,
      var(
        --cli-success
      )
      7%,
      var(
        --cli-surface
      )
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(
        --cli-success
      )
      25%,
      var(
        --cli-border
      )
    );

  border-radius:
    13px;

}


.clientes-import-result__icon svg {

  width:
    24px;

  height:
    24px;

}


.clientes-import-result > strong {

  color:
    var(
      --cli-text-strong
    );

  font-size:
    15px;

  font-weight:
    800;

}


.clientes-import-result > p {

  margin:
    0;

  color:
    var(
      --cli-muted-strong
    );

  font-size:
    10px;

  font-weight:
    600;

}


.clientes-import-result > p b {

  color:
    var(
      --cli-text-strong
    );

  font-weight:
    800;

}


.clientes-import-result > span,
.clientes-import-result > small {

  color:
    var(
      --cli-muted
    );

  font-size:
    9px;

  font-weight:
    550;

  line-height:
    1.45;

}


/* =========================================================
   RESULT LIST
   ========================================================= */

.clientes-import-result__list {

  width:
    min(
      100%,
      640px
    );

  max-height:
    220px;

  margin-top:
    8px;

  overflow-y:
    auto;

  background:
    var(
      --cli-surface
    );

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

  border-radius:
    10px;

}


.clientes-import-result__list > div {

  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

  padding:
    7px 9px;

  border-bottom:
    1px solid
    var(
      --cli-border
    );

  text-align:
    left;

}


.clientes-import-result__list > div:last-child {

  border-bottom:
    0;

}


.clientes-import-result__list span {

  overflow:
    hidden;

  color:
    var(
      --cli-muted
    );

  font-size:
    8px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


.clientes-import-result__list strong {

  overflow:
    hidden;

  color:
    var(
      --cli-text-strong
    );

  font-size:
    9px;

  font-weight:
    750;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


/* =========================================================
   IMPORT FOOTER
   ========================================================= */

.clientes-import-footer {

  width:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"]
.clientes-modal--import
.clientes-import-dropzone {

  background:
    #151713;

  border-color:
    #383c33;

}


html[data-theme="dark"]
.clientes-modal--import
.clientes-import-dropzone:hover,
html[data-theme="dark"]
.clientes-modal--import
.clientes-import-dropzone.is-dragging {

  background:
    #1a1c18;

  border-color:
    #b6b9ae;

}


html[data-theme="dark"]
.clientes-import-preview-table tbody tr.is-invalid td {

  background:
    rgba(
      159,
      49,
      49,
      .055
    );

}


/* =========================================================
   TABLET
   ========================================================= */

@media (
  max-width:
    820px
) {

  .clientes-modal--import {

    width:
      100%;

  }


  .clientes-import__template {

    align-items:
      stretch;

    flex-direction:
      column;

  }


  .clientes-import__template
  .clientes-btn {

    width:
      100%;

  }


  .clientes-import-dropzone {

    min-height:
      160px;

    padding:
      18px;

  }


  .clientes-import-preview-table {

    max-height:
      360px;

  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (
  max-width:
    620px
) {

  .clientes-import__intro {

    padding:
      9px;

  }


  .clientes-import__intro-icon {

    width:
      32px;

    height:
      32px;

    flex-basis:
      32px;

  }


  .clientes-import__template {

    padding:
      9px;

  }


  .clientes-import-dropzone {

    min-height:
      145px;

    padding:
      14px 10px;

  }


  .clientes-import-dropzone__icon {

    width:
      38px;

    height:
      38px;

  }


  .clientes-import-summary {

    grid-template-columns:
      1fr;

    gap:
      6px;

  }


  .clientes-import-summary article {

    display:
      flex;

    align-items:
      center;

    justify-content:
      space-between;

    gap:
      12px;

    padding:
      9px;

  }


  .clientes-import-summary article span {

    margin:
      0;

  }


  .clientes-import-summary article strong {

    font-size:
      14px;

  }


  .clientes-import-preview-table {

    max-height:
      330px;

  }


  .clientes-import-footer {

    display:
      grid;

    grid-template-columns:
      1fr;

  }


  .clientes-import-footer
  .clientes-btn {

    width:
      100%;

  }


  .clientes-import-result {

    min-height:
      300px;

    padding:
      18px 10px;

  }


  .clientes-import-result__list > div {

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

  }

}


/* =========================================================
   VERY SMALL
   ========================================================= */

@media (
  max-width:
    430px
) {

  .clientes-import-file {

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

  }


  .clientes-import-file__icon {

    width:
      34px;

    height:
      34px;

  }


  .clientes-import__intro {

    align-items:
      center;

  }


  .clientes-import__intro p {

    font-size:
      9px;

  }


  .clientes-import-dropzone > strong {

    font-size:
      11px;

  }


  .clientes-import-dropzone > span {

    font-size:
      9px;

  }

}