/* ==========================================

   KIK ART — PANEL DE ADMINISTRACIÓN

\========================================== */

/* COLORES DE LA MARCA */

:root {

  --rosa: #f4b6d2;

  --lila: #d9c3f1;

  --celeste: #bde9f4;

  --violeta: #773b7b;

  --violeta-oscuro: #452450;

  --fondo: #faf7fc;

  --blanco: #ffffff;

  --negro: #202027;

  --gris: #746a79;

  --borde: #eae0ee;

  --sombra: 0 10px 35px rgba(70, 35, 80, 0.07);

  --fuente: "Segoe UI", Arial, sans-serif;

}

/* ==========================================

   ESTILOS GENERALES

\========================================== */

* {

  box-sizing: border-box;

}

html {

  scroll-behavior: smooth;

  scroll-padding-top: 25px;

}

body {

  margin: 0;

  background: var(--fondo);

  color: var(--negro);

  font-family: var(--fuente);

  font-size: 14px;

  line-height: 1.6;

}

a {

  color: inherit;

  text-decoration: none;

}

button {

  font: inherit;

}

a:focus-visible,

button:focus-visible {

  outline: 3px solid var(--violeta);

  outline-offset: 3px;

}

h1,

h2,

h3,

p {

  margin-top: 0;

}

/* ==========================================

   ESTRUCTURA PRINCIPAL

\========================================== */

.admin-layout {

  display: grid;

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

  min-height: 100vh;

}

/* ==========================================

   MENÚ LATERAL

\========================================== */

.admin-sidebar {

  position: sticky;

  top: 0;

  display: flex;

  flex-direction: column;

  height: 100vh;

  height: 100dvh;

  padding: 30px 18px;

  background: var(--blanco);

  border-right: 1px solid var(--borde);

}

/* MARCA */

.admin-brand {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 0 10px 30px;

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

}

.admin-logo {

  width: 48px;

  height: 48px;

  object-fit: cover;

  border-radius: 50%;

  background: var(--lila);

}

.admin-brand strong {

  display: block;

  font-size: 21px;

  letter-spacing: -0.5px;

}

.admin-brand small {

  display: block;

  color: var(--gris);

  font-size: 11px;

}

/* ENLACES DEL MENÚ */

.admin-nav {

  display: flex;

  flex-direction: column;

  gap: 7px;

  margin-top: 28px;

}

.admin-nav a {

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 13px 15px;

  border-radius: 9px;

  color: #65576b;

  font-weight: 600;

  transition:

    background 0.2s,

    color 0.2s;

}

.admin-nav a span {

  width: 23px;

  font-size: 23px;

  line-height: 1;

  text-align: center;

}

.admin-nav a:hover {

  background: #f8eef9;

  color: var(--violeta);

}

.admin-nav a.active {

  background: #f2e3f6;

  color: var(--violeta-oscuro);

}

/* PIE DEL MENÚ */

.sidebar-footer {

  margin-top: auto;

  padding: 20px 10px 0;

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

}

.sidebar-footer p {

  margin-bottom: 8px;

  color: var(--gris);

  font-size: 11px;

}

.sidebar-footer a {

  color: var(--violeta);

  font-size: 12px;

  font-weight: 700;

}

.sidebar-footer a:hover {

  text-decoration: underline;

}

/* ==========================================

   CONTENIDO PRINCIPAL

\========================================== */

.admin-main {

  width: 100%;

  min-width: 0;

  max-width: 1500px;

  margin: 0 auto;

  padding: 42px 48px 25px;

}

/* ==========================================

   CABECERA DEL PANEL

\========================================== */

.admin-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;

  margin-bottom: 30px;

}

.admin-eyebrow {

  margin-bottom: 9px;

  color: var(--violeta);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.16em;

}

.admin-header h1 {

  margin-bottom: 5px;

  font-size: clamp(26px, 3vw, 38px);

  line-height: 1.2;

  letter-spacing: -1px;

}

.admin-header p:last-child {

  margin-bottom: 0;

  color: var(--gris);

}

/* PERFIL */

.admin-profile {

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 12px;

  font-weight: 700;

  white-space: nowrap;

}

.profile-avatar {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 42px;

  height: 42px;

  background: linear-gradient(

    135deg,

    var(--rosa),

    var(--lila),

    var(--celeste)

  );

  border-radius: 50%;

  color: var(--violeta-oscuro);

  font-size: 12px;

  font-weight: 800;

}

/* ==========================================

   AVISO DE DESARROLLO

\========================================== */

.development-notice {

  margin-bottom: 35px;

  padding: 18px 22px;

  background: #f4eefa;

  border: 1px solid #e6d5ed;

  border-left: 4px solid var(--violeta);

  border-radius: 9px;

}

.development-notice strong {

  display: block;

  margin-bottom: 4px;

  color: var(--violeta-oscuro);

  font-size: 13px;

}

.development-notice p {

  margin-bottom: 0;

  color: #685b70;

  font-size: 12px;

  line-height: 1.7;

}

/* ==========================================

   PANEL PRINCIPAL

\========================================== */

.dashboard-section {

  margin-bottom: 55px;

}

.section-heading {

  margin-bottom: 22px;

}

.section-heading h2 {

  margin-bottom: 5px;

  font-size: 24px;

  letter-spacing: -0.6px;

}

.section-heading p {

  margin-bottom: 0;

  color: var(--gris);

  font-size: 13px;

}

/* TARJETAS */

.dashboard-grid {

  display: grid;

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

  gap: 18px;

}

.dashboard-card {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  min-height: 215px;

  padding: 25px;

  background: var(--blanco);

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

  border-radius: 13px;

  box-shadow: var(--sombra);

  transition:

    transform 0.2s,

    border-color 0.2s,

    box-shadow 0.2s;

}

.dashboard-card:hover {

  transform: translateY(-3px);

  border-color: var(--lila);

  box-shadow: 0 16px 35px rgba(70, 35, 80, 0.1);

}

.card-icon {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 45px;

  height: 45px;

  margin-bottom: 15px;

  background: #f3e7f6;

  border-radius: 10px;

  color: var(--violeta);

  font-size: 29px;

}

.dashboard-card:nth-child(2) .card-icon {

  background: #edf8fc;

}

.dashboard-card:nth-child(3) .card-icon {

  background: #fff0f7;

}

.dashboard-card:nth-child(4) .card-icon {

  background: #f0eafa;

}

.dashboard-card h3 {

  margin-bottom: 4px;

  font-size: 18px;

}

.dashboard-card p {

  margin-bottom: 15px;

  color: var(--gris);

  font-size: 12px;

}

.card-arrow {

  margin-top: auto;

  color: var(--violeta);

  font-size: 12px;

  font-weight: 800;

}

/* ==========================================

   SECCIONES DE ADMINISTRACIÓN

\========================================== */

.management-section {

  margin-bottom: 42px;

  padding: 30px;

  background: var(--blanco);

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

  border-radius: 14px;

  box-shadow: var(--sombra);

}

.management-heading {

  margin-bottom: 23px;

}

.management-heading h2 {

  margin-bottom: 6px;

  font-size: 23px;

  letter-spacing: -0.5px;

}

.management-heading p:last-child {

  max-width: 650px;

  margin-bottom: 0;

  color: var(--gris);

  font-size: 13px;

}

/* ==========================================

   ESTADOS VACÍOS

\========================================== */

.empty-state {

  display: flex;

  flex-direction: column;

  align-items: center;

  padding: 38px 24px;

  background: #fcf9fd;

  border: 1px dashed #dacbde;

  border-radius: 11px;

  text-align: center;

}

.empty-icon {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 65px;

  height: 65px;

  margin-bottom: 17px;

  background: linear-gradient(

    135deg,

    #f8dbea,

    #e5daf8

  );

  border-radius: 16px;

  color: var(--violeta);

  font-size: 38px;

}

.empty-state h3 {

  margin-bottom: 6px;

  font-size: 17px;

}

.empty-state p {

  max-width: 420px;

  margin-bottom: 20px;

  color: var(--gris);

  font-size: 13px;

}

/* BOTONES PENDIENTES */

.empty-state button {

  padding: 12px 22px;

  background: #e8e1eb;

  border: none;

  border-radius: 8px;

  color: #746a79;

  font-size: 12px;

  font-weight: 700;

}

.empty-state button:disabled {

  cursor: not-allowed;

  opacity: 0.85;

}

.empty-state small {

  margin-top: 12px;

  color: var(--gris);

  font-size: 11px;

}

/* ==========================================

   TARJETAS DE SERVICIOS

\========================================== */

.service-admin-grid {

  display: grid;

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

  gap: 13px;

}

.admin-item {

  padding: 22px;

  background: #fdfafd;

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

  border-radius: 10px;

}

.admin-item > span {

  display: block;

  margin-bottom: 10px;

  color: var(--violeta);

  font-size: 30px;

}

.admin-item h3 {

  margin-bottom: 5px;

  font-size: 15px;

}

.admin-item p {

  margin-bottom: 0;

  color: var(--gris);

  font-size: 12px;

}

/* ==========================================

   PIE DEL PANEL

\========================================== */

.admin-footer {

  display: flex;

  justify-content: space-between;

  gap: 20px;

  padding: 20px 0;

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

}

.admin-footer p {

  margin: 0;

  color: var(--gris);

  font-size: 11px;

}

/* ==========================================

   TABLETS

\========================================== */

@media (max-width: 1050px) {

  .admin-layout {

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

  }

  .admin-main {

    padding: 30px 25px;

  }

  .dashboard-grid {

    gap: 13px;

  }

  .dashboard-card {

    padding: 20px;

  }

}

/* ==========================================

   CELULARES

\========================================== */

@media (max-width: 720px) {

  .admin-layout {

    display: block;

  }

  /* MENÚ SUPERIOR EN CELULAR */

  .admin-sidebar {

    position: relative;

    width: 100%;

    height: auto;

    padding: 15px 18px 0;

    border-right: none;

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

  }

  .admin-brand {

    padding: 0 0 13px;

  }

  .admin-logo {

    width: 43px;

    height: 43px;

  }

  .admin-brand strong {

    font-size: 20px;

  }

  .admin-nav {

    flex-direction: row;

    gap: 5px;

    margin-top: 10px;

    padding-bottom: 12px;

    overflow-x: auto;

    overscroll-behavior-x: contain;

  }

  .admin-nav a {

    flex: 0 0 auto;

    gap: 7px;

    padding: 10px 12px;

    font-size: 12px;

    white-space: nowrap;

  }

  .admin-nav a span {

    width: auto;

    font-size: 18px;

  }

  .sidebar-footer {

    display: none;

  }

  /* CONTENIDO */

  .admin-main {

    padding: 25px 18px;

  }

  .admin-header {

    align-items: flex-start;

    flex-direction: column;

    gap: 15px;

  }

  .admin-header h1 {

    font-size: 28px;

  }

  .admin-profile {

    font-size: 11px;

  }

  .profile-avatar {

    width: 35px;

    height: 35px;

  }

  .development-notice {

    padding: 15px;

  }

  .dashboard-grid {

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

    gap: 12px;

  }

  .dashboard-card {

    min-height: 185px;

    padding: 17px;

  }

  .dashboard-card h3 {

    font-size: 16px;

  }

  .management-section {

    padding: 22px 18px;

  }

  .service-admin-grid {

    grid-template-columns: 1fr;

  }

  .admin-footer {

    flex-direction: column;

    gap: 4px;

  }

}

/* ==========================================

   CELULARES PEQUEÑOS

\========================================== */

@media (max-width: 440px) {

  .admin-header h1 {

    font-size: 25px;

  }

  .dashboard-grid {

    grid-template-columns: 1fr;

  }

  .dashboard-card {

    min-height: 145px;

  }

  .card-icon {

    width: 39px;

    height: 39px;

    margin-bottom: 9px;

  }

  .dashboard-section {

    margin-bottom: 35px;

  }

  .empty-state {

    padding: 30px 13px;

  }

}

/* ==========================================

   ACCESIBILIDAD

\========================================== */

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

  html {

    scroll-behavior: auto;

  }

  *,

  *::before,

  *::after {

    transition-duration: 0.01ms !important;

    animation-duration: 0.01ms !important;

  }

}

/* ==========================================

   KIK ART — GESTIÓN DE FOTOGRAFÍAS

\========================================== */

.gallery-manager {

  display: grid;

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

  gap: 24px;

  align-items: start;

}

/* FORMULARIO */

.gallery-form,

.gallery-admin-list {

  min-width: 0;

  padding: 25px;

  background: #fff;

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

  border-radius: 13px;

}

.gallery-form h3,

.gallery-admin-list h3 {

  margin-bottom: 8px;

  font-size: 19px;

  font-weight: 700;

}

.gallery-form > p:first-of-type {

  margin-bottom: 25px;

  color: var(--gris);

  font-size: 13px;

}

/* CAMPOS */

.gallery-form .field {

  margin-bottom: 20px;

}

.gallery-form .field > label {

  display: block;

  margin-bottom: 8px;

  font-size: 13px;

  font-weight: 700;

}

.gallery-form input[type="text"],

.gallery-form select,

.gallery-form textarea {

  display: block;

  width: 100%;

  padding: 13px 15px;

  border: 1px solid #e2d3e8;

  border-radius: 9px;

  background: #fdfafd;

  color: var(--negro);

  font: inherit;

  font-size: 13px;

}

.gallery-form textarea {

  min-height: 110px;

  resize: vertical;

}

.gallery-form input:focus-visible,

.gallery-form select:focus-visible,

.gallery-form textarea:focus-visible {

  outline: 2px solid var(--violeta);

  outline-offset: 2px;

}

/* SELECCIONAR FOTOGRAFÍA */

.gallery-form input[type="file"] {

  display: block;

  width: 100%;

  padding: 15px;

  border: 2px dashed #d6bce2;

  border-radius: 10px;

  background: #fbf4fd;

  font-size: 12px;

}

.gallery-form input[type="file"]::file-selector-button {

  margin-right: 12px;

  padding: 10px 14px;

  border: none;

  border-radius: 7px;

  background: #efe0f4;

  color: var(--violeta-oscuro);

  font: inherit;

  font-weight: 700;

  cursor: pointer;

}

.gallery-form .field small {

  display: block;

  margin-top: 8px;

  color: var(--gris);

  font-size: 11px;

}

/* MOSTRAR EN LA WEB */

.gallery-form .field .gallery-check {

  display: flex;

  align-items: center;

  gap: 10px;

  margin: 0;

  padding: 14px;

  background: #f8eff9;

  border-radius: 9px;

  font-size: 12px;

  cursor: pointer;

}

.gallery-check input {

  width: 18px;

  height: 18px;

  margin: 0;

  accent-color: var(--violeta);

}

/* BOTÓN PUBLICAR */

.gallery-save {

  display: block;

  width: 100%;

  min-height: 48px;

  padding: 13px 20px;

  border: none;

  border-radius: 9px;

  background: var(--violeta);

  color: white;

  font: inherit;

  font-size: 13px;

  font-weight: 700;

  cursor: pointer;

}

.gallery-save:hover:not(:disabled) {

  background: var(--violeta-oscuro);

}

.gallery-save:disabled {

  background: #d8c9df;

  color: #685b70;

  cursor: not-allowed;

}

#gallery-status {

  margin: 13px 0 0;

  color: var(--gris);

  font-size: 12px;

  line-height: 1.6;

}

/* LISTADO DE FOTOGRAFÍAS */

.gallery-admin-list {

  min-height: 250px;

}

#gallery-list {

  margin-top: 22px;

  padding: 25px 15px;

  border: 1px dashed #dfd1e4;

  border-radius: 10px;

  background: #fcf9fd;

  color: var(--gris);

  text-align: center;

  font-size: 13px;

}

#gallery-list p {

  margin: 0;

}

/* TABLETS Y CELULARES */

@media (max-width: 1100px) {

  .gallery-manager {

    grid-template-columns: 1fr;

  }

}

@media (max-width: 720px) {

  .gallery-manager {

    gap: 15px;

  }

  .gallery-form,

  .gallery-admin-list {

    padding: 18px;

  }

  .gallery-form input[type="file"] {

    padding: 12px;

  }

  .gallery-save {

    min-height: 50px;

  }

}

/* ==========================================
   KIK ART — TARJETAS DE FOTOGRAFÍAS
========================================== */

#gallery-list {
  display: grid;
  gap: 14px;
  margin-top: 20px;
  padding: 0;
  border: none;
  background: transparent;
  text-align: left;
}

.gallery-uploaded-item {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: #fcf9fd;
}

.gallery-uploaded-item > img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 9px;
}

.gallery-uploaded-item > div {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.gallery-uploaded-item strong {
  flex-basis: 100%;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.gallery-uploaded-item p {
  flex-basis: 100%;
  margin: 0 0 5px;
  color: var(--gris);
  font-size: 12px;
}

/* BOTONES DE ADMINISTRACIÓN */

.gallery-edit-button,
.gallery-visibility-button {
  min-height: 40px;
  padding: 9px 13px;
  border: 1px solid #dcc5e5;
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.gallery-edit-button {
  background: #f2e7f7;
  color: var(--violeta-oscuro);
}

.gallery-visibility-button {
  background: var(--violeta);
  color: white;
}

.gallery-edit-button:hover {
  background: #e8d3ef;
}

.gallery-visibility-button:hover {
  background: var(--violeta-oscuro);
}

.gallery-edit-button:disabled,
.gallery-visibility-button:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* PANTALLAS PEQUEÑAS */

@media (max-width: 600px) {
  .gallery-uploaded-item {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }

  .gallery-uploaded-item > img {
    width: 80px;
    height: 80px;
  }

  .gallery-edit-button,
  .gallery-visibility-button {
    min-height: 44px;
  }
}

/* ==========================================
   KIK ART — EDITAR TRABAJO
========================================== */

.gallery-edit-form {
  display: grid;
  gap: 16px;
  margin-top: 24px;
  padding: 24px;
  border: 1px solid #dcc5e5;
  border-radius: 12px;
  background: #fcf7fd;
}

/* Mantener oculto hasta presionar Editar */

.gallery-edit-form[hidden] {
  display: none !important;
}

.gallery-edit-form h3 {
  margin: 0;
  color: var(--violeta-oscuro);
  font-size: 19px;
}

.gallery-edit-form > p {
  margin: 0;
  color: var(--gris);
  font-size: 12px;
}

/* Campos del formulario */

.gallery-edit-form .field {
  display: grid;
  gap: 8px;
}

.gallery-edit-form .field > label {
  font-size: 13px;
  font-weight: 700;
}

.gallery-edit-form input[type="text"],
.gallery-edit-form textarea,
.gallery-edit-form select {
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid #e2d3e8;
  border-radius: 9px;
  background: white;
  color: var(--negro);
  font: inherit;
}

.gallery-edit-form textarea {
  min-height: 100px;
  resize: vertical;
}

.gallery-edit-form .gallery-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #f2e7f7;
  border-radius: 9px;
  cursor: pointer;
}

.gallery-edit-form .gallery-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--violeta);
}

/* Botones */

.gallery-edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gallery-edit-actions button {
  flex: 1;
  min-height: 44px;
  padding: 11px 15px;
  border: 1px solid #dcc5e5;
  border-radius: 9px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

#gallery-edit-save {
  background: var(--violeta);
  color: white;
}

#gallery-edit-cancel {
  background: white;
  color: var(--violeta-oscuro);
}

.gallery-edit-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#gallery-edit-status {
  font-size: 12px;
}

/* Adaptación a celulares */

@media (max-width: 600px) {
  .gallery-edit-form {
    padding: 16px;
  }
}

/* ==========================================
   KIK ART — BOTÓN ELIMINAR FOTOGRAFÍA
========================================== */

.gallery-delete-button {
  min-height: 40px;
  padding: 9px 13px;

  border: 1px solid #e9b9c3;
  border-radius: 8px;

  background: #fff1f3;
  color: #a4314c;

  font: inherit;
  font-size: 12px;
  font-weight: 700;

  cursor: pointer;

  transition: background 0.2s ease;
}

.gallery-delete-button:hover {
  background: #f9dce3;
}

.gallery-delete-button:focus-visible {
  outline: 2px solid #a4314c;
  outline-offset: 3px;
}

.gallery-delete-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 600px) {
  .gallery-delete-button {
    min-height: 44px;
  }
}

/* ==========================================
   KIK ART — PRECIO DE SERVICIOS
========================================== */

#service-price {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid #e2d3e8;
  border-radius: 9px;
  background: #fff;
  color: #26202c;
  font: inherit;
  box-sizing: border-box;
}

#service-price:focus {
  outline: 2px solid #773b7b;
  outline-offset: 2px;
}

/* ==========================================
   KIK ART — TARJETAS DE SERVICIOS
========================================== */

.services-manager #services-list {
  display: grid;
  gap: 16px;
}

.services-manager .service-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px 14px;
  padding: 22px;
  border: 1px solid #e8dbea;
  border-radius: 14px;
  background: #fcf9fd;
  text-align: left;
}

.service-card > h3 {
  grid-column: 1;
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
  color: #241d29;
}

.service-card-status {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  padding: 6px 11px;
  border-radius: 30px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.service-card-status.is-active {
  color: #17653e;
  background: #e6f5eb;
}

.service-card-status.is-hidden {
  color: #715e77;
  background: #eee8f0;
}

.service-card > p {
  grid-column: 1 / -1;
  margin: 0;
  color: #75677d;
  font-size: 13px;
  line-height: 1.5;
}

.service-card > p:nth-of-type(2) {
  color: #773b7b;
  font-size: 25px;
  font-weight: 800;
}

.service-card-category {
  grid-column: 1 / -1;
  color: #82648a;
  font-size: 12px;
  font-weight: 600;
}

.service-card-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid #e8dbea;
}

.service-card-actions button {
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 9px;
}

@media (max-width: 600px) {
  .services-manager .service-card {
    padding: 16px;
  }

  .service-card > h3 {
    font-size: 16px;
  }

  .service-card > p:nth-of-type(2) {
    font-size: 22px;
  }
}

/* KIK ART — AJUSTE DE ETIQUETAS DE ESTADO */

.services-manager #services-list
.service-card > .service-card-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: fit-content;
  max-width: 100%;

  padding: 6px 12px;
  border-radius: 999px;

  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;

  white-space: nowrap;
}

.services-manager #services-list
.service-card > .service-card-status.is-active {
  background: #e6f5eb;
  color: #17653e;
}

.services-manager #services-list
.service-card > .service-card-status.is-hidden {
  background: #eee8f0;
  color: #715e77;
}

/* ==========================================
   KIK ART — MÓDULOS EN DESARROLLO
========================================== */

/* Ocultar opciones pendientes del menú */

a[href="#promociones"],
a[href="#turnos"] {
  display: none !important;
}

/* Ocultar secciones todavía no disponibles */

#promociones,
#turnos {
  display: none !important;
}

/* ==========================================
   KIK ART — CORREGIR FOTOS DE SERVICIOS
========================================== */

#services-list .service-card {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

#services-list .service-card > img.service-card-photo {
  grid-column: 1 / -1;

  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;

  height: 220px;
  max-height: 220px;

  object-fit: contain;
  object-position: center;

  border-radius: 12px;
  background: #f4edf5;
  box-sizing: border-box;
}

/* Adaptación para celulares */

@media (max-width: 600px) {
  #services-list .service-card > img.service-card-photo {
    height: 180px;
    max-height: 180px;
  }
}