@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Urbanist:wght@300;400;700&display=swap);
/* Sidebar como panel deslizante */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;

  width: var(--sidebar-width);
  min-width: var(--sidebar-width);

  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.4rem;
  box-sizing: border-box;

  background: radial-gradient(circle at top, #3a2b36 0, #251821 45%, #181017 100%);
  color: #fdf7f5;
  box-shadow: 8px 0 30px rgba(22, 11, 19, 0.55);

  transform: translateX(-105%);
  transition: transform 0.22s ease;
  z-index: 60;
}

.sidebar--open {
  transform: translateX(0);
}

/* Logo */
.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(255, 245, 250, 0.12);
  margin-bottom: 1.1rem;
}

.sidebar-logo {
  width: 100%;
  max-width: 160px;
  height: auto;
  display: block;
}

/* Menú */
.sidebar-menu {
  flex: 1;
  margin-top: 0.4rem;
}

.sidebar-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-menu li + li {
  margin-top: 0.15rem;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.9rem;
  border-radius: 12px;
  font-size: 0.9rem;
  color: #e3d7eb;
  text-decoration: none;
  transition: background 0.2s ease-in-out, color 0.2s ease-in-out, transform 0.1s ease-in-out;
}

.sidebar-icon {
  width: 18px;
  height: 18px;
}

.sidebar-link:hover {
  background: rgba(244, 184, 164, 0.18);
  color: #ffffff;
  transform: translateX(1px);
}

.sidebar-link.active {
  background: linear-gradient(135deg, #c8b7dd, #f4b8a4);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(222, 166, 185, 0.7);
}

.sidebar-link.active .sidebar-icon {
  color: #ffffff;
}

/* Footer */
.sidebar-footer {
  margin-top: 1.2rem;
}

.sidebar-user-card {
  padding: 0.8rem 0.9rem;
  border-radius: 16px;
  background: radial-gradient(circle at top left, #352633, #211620);
  border: 1px solid rgba(248, 230, 235, 0.35);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.sidebar-user-info {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.sidebar-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f4b8a4, #f7cfb7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fffaf6;
  font-weight: 600;
  font-size: 0.9rem;
  overflow: hidden;
  flex-shrink: 0;
}

.sidebar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-user-name {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: #fdf7f5;
}

.sidebar-user-role {
  margin: 0.1rem 0 0;
  font-size: 0.78rem;
  color: #d8c7de;
}

.sidebar-logout-btn {
  margin: 0;
  border: none;
  border-radius: 999px;
  padding: 0.5rem 0.8rem;
  background: rgba(244, 184, 164, 0.16);
  color: #f4b8a4;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  align-self: flex-start;
}

.sidebar-logout-icon {
  width: 16px;
  height: 16px;
}

.sidebar-auth-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.sidebar-auth-btn {
  width: 100%;
  border-radius: 999px;
  padding: 0.55rem 0.9rem;
  border: none;
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.sidebar-auth-btn.primary {
  background: linear-gradient(135deg, #c8b7dd, #f4b8a4);
  color: #ffffff;
}

.sidebar-auth-btn.ghost {
  background: transparent;
  border: 1px solid rgba(232, 213, 233, 0.7);
  color: #e5d7eb;
}

.sidebar-auth-icon {
  width: 16px;
  height: 16px;
}

.sidebar-badge {
  margin-left: 0.4rem;
  min-width: 18px;
  padding: 2px 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #c8b7dd, #f4b8a4);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* iPad */
@media (max-width: 1024px) {
  .sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    padding: 1.3rem 1.1rem;
  }
}

/* Móvil: drawer más estrecho */
@media (max-width: 768px) {
  .sidebar {
    width: 86vw;
    min-width: auto;
    max-width: 320px;
  }
}
/* Contenedor raíz */
.app-container {
  --sidebar-width: 260px;

  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
  min-width: 0;

  font-family: inherit;
  background: var(--app-shell-bg);
  color: var(--app-text);

  position: relative;
}

/* Cuando el sidebar está abierto (desktop/ipad), empujamos el main */
.app-container.sidebar-open .main-container {
  margin-left: var(--sidebar-width);
}

/* Main */
.main-container {
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;

  padding: 1.8rem 2rem;
  background: var(--app-content-bg);

  min-width: 0;
  margin-left: 0;

  transition: margin-left 0.22s ease;
}

/* Overlay (solo útil en móvil) */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 12, 0.45);
  z-index: 50;
}

/* Header de página: botón + título */
.page-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 18px;
}

/* Botón más pequeño y elegante */
.page-menu-btn {
  width: 30px;
  height: 30px;
  border-radius: 10px;

  border: 1px solid rgba(40, 30, 45, 0.12);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  flex-shrink: 0;

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

.page-menu-btn:hover {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(40, 30, 45, 0.18);
}

.page-menu-btn:active {
  transform: translateY(1px);
}

/* Título más “premium” */
.page-title {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

/* Cuando el header es solo botón (sin título) */
.page-header--menu-only {
  margin-bottom: 10px;
}

.page-header--menu-only .page-menu-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

/* Móvil */
@media (max-width: 768px) {
  .page-header {
    margin: 4px 0 14px;
    gap: 8px;
  }

  .page-menu-btn {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }

  .page-title {
    font-size: 1.65rem;
    letter-spacing: -0.02em;
  }
}

/* iPad */
@media (max-width: 1024px) {
  .app-container {
    --sidebar-width: 230px;
  }

  .main-container {
    padding: 1.4rem 1.3rem;
  }
}

/* Móvil: NO empujamos el main, el sidebar va por encima */
@media (max-width: 768px) {
  .app-container.sidebar-open .main-container {
    margin-left: 0;
  }

  .main-container {
    padding: 1.1rem 1rem;
  }

  .page-title {
    font-size: 1.5rem;
  }
}

/* Desktop: no queremos overlay bloqueando clicks */
@media (min-width: 769px) {
  .sidebar-overlay {
    display: none;
  }
}
.login-page {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow-y: auto;
  overflow-x: hidden;
  background: #0b0f1a;
}

.login-page * {
  box-sizing: border-box;
}

/* Imagen full-screen */
.login-bg {
  position: absolute;
  inset: 0;
  background-image: url(/images/clinic-loby.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.02);
  will-change: transform;
}

/* Overlay: más “Exolife” (plum + lavanda) */
.login-bg-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(200, 183, 221, 0.18) 0, rgba(0, 0, 0, 0) 45%),
    linear-gradient(
      90deg,
      rgba(24, 16, 23, 0.86) 0%,
      rgba(37, 24, 33, 0.62) 48%,
      rgba(8, 10, 18, 0.38) 100%
    );
}

/* Marca fija esquina superior izquierda */
.login-corner-brand {
  position: fixed;
  top: 28px;
  left: 32px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  pointer-events: none;
}

.login-corner-logo {
  width: auto;
  max-width: 280px;
  max-height: 72px;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 16px 34px rgba(0, 0, 0, 0.45));
}

.login-corner-subline {
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.86rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.02em;
}

/* Contenido */
.login-content {
  position: relative;
  min-height: 100vh;
  width: min(1200px, 100%);
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 56px;

  padding: 48px 56px;
}

/* HERO izquierda */
.login-hero {
  flex: 1;
  min-width: 0;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.login-hero-body h1 {
  margin: 0;
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  max-width: 560px;
  text-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.login-hero-body p {
  margin: 12px 0 0;
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.02rem;
  opacity: 0.9;
  max-width: 620px;
  line-height: 1.55;
}

.login-hero-bottom {
  display: flex;
  align-items: center;
  gap: 10px;
}

.login-hero-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
}

/* Card derecha */
.login-card-wrap {
  width: 420px;
  max-width: 92vw;
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

.login-card {
  width: 100%;
  border-radius: 20px;

  /* vibe de tus cards (lavanda suave + borde rosado) */
  background: radial-gradient(circle at top left, #f6f0fa 0, #ffffff 55%, #ffffff 100%);
  border: 1px solid #f0e4f3;

  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.26);
  padding: 22px 22px 18px;
  backdrop-filter: blur(8px);
}

.login-card-header h2 {
  margin: 0;
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #2f2430;
}

.login-card-header p {
  margin: 8px 0 0;
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.9rem;
  color: #7a687f;
}

/* Form */
.login-form {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-field label {
  font-size: 0.82rem;
  font-weight: 500;
  color: #7a687f;
}

.login-field input {
  border-radius: 12px;
  border: 1px solid #e0d6e6;
  padding: 10px 12px;
  font-size: 0.92rem;
  outline: none;
  background: #fbf8fd;
  color: #2f2430;
  transition: border 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.login-field input:focus {
  border-color: #c8b7dd;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(200, 183, 221, 0.32);
}

/* Input con icono (mostrar/ocultar contraseña) */
.login-input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.login-input-with-icon input {
  width: 100%;
  padding-right: 44px; /* espacio para el icono */
}

.login-password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);

  border: none;
  background: transparent;
  padding: 6px;
  border-radius: 10px;

  cursor: pointer;
  color: #6d5a74;

  display: inline-flex;
  align-items: center;
  justify-content: center;

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

.login-password-toggle:hover:not(:disabled) {
  color: #2f2430;
  background: rgba(200, 183, 221, 0.18);
}

.login-password-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(200, 183, 221, 0.32);
  background: rgba(200, 183, 221, 0.18);
}

.login-password-toggle:disabled {
  opacity: 0.6;
  cursor: default;
}

/* fila (solo para el link de forgot) */
.login-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 2px;
}

.login-link {
  border: none;
  background: transparent;
  color: #6d5a74;
  cursor: pointer;
  padding: 0;
  font-size: 0.82rem;
  text-decoration: underline;
}

.login-link:hover:not(:disabled) {
  color: #2f2430;
}

.login-link:disabled {
  opacity: 0.6;
  cursor: default;
}

/* botón principal Exolife */
.login-submit {
  border: none;
  border-radius: 999px;
  padding: 11px 14px;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, #c8b7dd, #f4b8a4);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(200, 183, 221, 0.55);
  transition: transform 0.08s ease, box-shadow 0.18s ease, opacity 0.18s ease;
  margin-top: 6px;
}

.login-submit:hover:not(:disabled) {
  box-shadow: 0 14px 28px rgba(200, 183, 221, 0.78);
  transform: translateY(-1px);
}

.login-submit:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 8px 18px rgba(200, 183, 221, 0.5);
}

.login-submit:disabled {
  opacity: 0.65;
  cursor: default;
  box-shadow: none;
}

.login-error {
  margin-top: 6px;
  font-size: 0.86rem;
  color: #b91c1c;
  background: rgba(185, 28, 28, 0.08);
  border: 1px solid rgba(185, 28, 28, 0.18);
  padding: 8px 10px;
  border-radius: 12px;
}

/* iPad y tablets */
@media (max-width: 1024px) {
  .login-corner-brand {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    text-align: center;
  }

  .login-corner-logo {
    max-width: 240px;
    max-height: 64px;
  }

  .login-content {
    width: 100%;
    min-height: 100vh;
    padding: 110px 28px 40px;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* MÁS AIRE entre texto y form */
    gap: 32px;
  }

  .login-hero {
    flex: 0;
    width: 100%;
    max-width: 720px;
    text-align: center;
    align-items: center;
  }

  .login-hero-body h1 {
    font-size: 2rem;
    max-width: 28ch;
    margin: 0 auto;
  }

  .login-hero-body p {
    font-size: 1rem;
    max-width: 60ch;
    margin: 12px auto 0;
  }

  .login-hero-bottom {
    justify-content: center;
    margin-top: 10px;
  }

  .login-card-wrap {
    flex: 0;
    width: min(520px, 100%);
    justify-content: center;

    /* refuerza separación visual */
    margin-top: 6px;
  }
}

/* Móvil */
@media (max-width: 450px) {
  .login-corner-brand {
    top: 16px;
  }

  .login-corner-logo {
    max-width: 210px;
    max-height: 58px;
  }

  .login-content {
    padding: 92px 16px 24px;

    /* MÁS AIRE entre texto y form */
    gap: 24px;
  }

  .login-hero {
    flex: 0;
  }

  .login-hero-body h1 {
    font-size: 1.6rem;
    max-width: 24ch;
  }

  .login-hero-body p {
    font-size: 0.95rem;
    max-width: 46ch;
    margin-top: 12px;
  }

  .login-hero-bottom {
    display: none;
  }

  .login-card-wrap {
    margin-top: 6px;
  }

  .login-card {
    border-radius: 18px;
    padding: 18px 16px 16px;
  }
}
.activation-page {
  min-height: 100vh;
  padding: 32px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;

  background: #0b0f1a; /* fallback */
}

.activation-page * {
  box-sizing: border-box;
}

/* Fondo tipo Login (imagen + overlay) */
.activation-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(/images/clinic-loby.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.02);
  z-index: 0;
}

.activation-page::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(8, 10, 18, 0.82) 0%,
    rgba(8, 10, 18, 0.62) 50%,
    rgba(8, 10, 18, 0.42) 100%
  );
  z-index: 0;
}

/* Card */
.activation-card {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: 520px;

  border-radius: 22px;
  border: 1px solid rgba(240, 228, 243, 0.92);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);

  padding: 1.25rem 1.35rem 1.2rem;
  backdrop-filter: blur(8px);
}

.activation-header {
  padding-bottom: 0.9rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid rgba(240, 228, 243, 0.92);
}

.activation-title {
  margin: 0;
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #2f2430;
}

.activation-subtitle {
  margin: 0.35rem 0 0;
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.92rem;
  color: #7a687f;
  line-height: 1.45;
}

.activation-message {
  border-radius: 14px;
  border: 1px solid transparent;
  padding: 10px 12px;
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.92rem;
  line-height: 1.45;
}

.activation-message--info {
  background: rgba(200, 183, 221, 0.14);
  border-color: rgba(200, 183, 221, 0.38);
  color: #2f2430;
}

.activation-message--success {
  background: rgba(101, 166, 118, 0.12);
  border-color: rgba(101, 166, 118, 0.28);
  color: #1f3a2a;
}

.activation-message--error {
  background: rgba(212, 92, 82, 0.12);
  border-color: rgba(212, 92, 82, 0.25);
  color: #7a1f1b;
}

.activation-message--warning {
  background: rgba(214, 176, 88, 0.16);
  border-color: rgba(214, 176, 88, 0.35);
  color: #4b3411;
}

.activation-form {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activation-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}

.activation-field label {
  font-size: 0.82rem;
  font-weight: 500;
  color: #7a687f;
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.activation-input {
  border-radius: 12px;
  border: 1px solid #e0d6e6;
  padding: 10px 12px;
  font-size: 0.95rem;
  outline: none;
  background: #fbf8fd;
  color: #2f2430;
  transition: border 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background 0.15s ease-in-out;

  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
}

.activation-input:focus {
  border-color: #c8b7dd;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(200, 183, 221, 0.32);
}

.activation-hint {
  font-size: 0.78rem;
  color: #a28fae;
}

.activation-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.activation-actions--form {
  margin-top: 6px;
}

.activation-btn {
  border-radius: 999px;
  padding: 0.55rem 1.05rem;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.1s ease-in-out, box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out, background 0.15s ease-in-out;
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  white-space: nowrap;
}

.activation-btn--primary {
  border: none;
  background: linear-gradient(135deg, #c8b7dd, #f4b8a4);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(200, 183, 221, 0.55);
}

.activation-btn--primary:hover:not(:disabled) {
  box-shadow: 0 14px 28px rgba(200, 183, 221, 0.8);
  transform: translateY(-1px);
}

.activation-btn--primary:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 8px 18px rgba(200, 183, 221, 0.5);
}

.activation-btn--ghost {
  background: transparent;
  border: 1px solid #ddcfe7;
  color: #6d5a74;
}

.activation-btn--ghost:hover:not(:disabled) {
  background: #f5eef9;
  border-color: #ccb8df;
}

.activation-btn:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
  box-shadow: none;
}

@media (max-width: 520px) {
  .activation-card {
    padding: 1.1rem 1.05rem 1.05rem;
    border-radius: 18px;
  }

  .activation-actions {
    justify-content: stretch;
  }

  .activation-btn {
    width: 100%;
  }
}
.fp-page {
  min-height: 100vh;
  padding: 32px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;

  background: #0b0f1a; /* fallback */
}

.fp-page * {
  box-sizing: border-box;
}

/* Fondo tipo Login (imagen + overlay) */
.fp-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(/images/clinic-loby.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.02);
  z-index: 0;
}

.fp-page::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(8, 10, 18, 0.82) 0%,
    rgba(8, 10, 18, 0.62) 50%,
    rgba(8, 10, 18, 0.42) 100%
  );
  z-index: 0;
}

.fp-card {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: 520px;

  border-radius: 22px;
  border: 1px solid rgba(240, 228, 243, 0.92);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);

  padding: 1.25rem 1.35rem 1.2rem;
  backdrop-filter: blur(8px);
}

.fp-header {
  padding-bottom: 0.9rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid rgba(240, 228, 243, 0.92);
}

.fp-title {
  margin: 0;
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #2f2430;
}

.fp-subtitle {
  margin: 0.35rem 0 0;
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.92rem;
  color: #7a687f;
  line-height: 1.45;
}

.fp-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fp-field label {
  font-size: 0.82rem;
  font-weight: 500;
  color: #7a687f;
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.fp-input {
  border-radius: 12px;
  border: 1px solid #e0d6e6;
  padding: 10px 12px;
  font-size: 0.95rem;
  outline: none;
  background: #fbf8fd;
  color: #2f2430;
  transition: border 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background 0.15s ease-in-out;

  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
}

.fp-input::placeholder {
  color: #b09fbe;
}

.fp-input:focus {
  border-color: #c8b7dd;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(200, 183, 221, 0.32);
}

.fp-actions {
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.fp-btn {
  border-radius: 999px;
  padding: 0.55rem 1.05rem;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.1s ease-in-out, box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out, background 0.15s ease-in-out;

  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  white-space: nowrap;
}

.fp-btn--primary {
  border: none;
  background: linear-gradient(135deg, #c8b7dd, #f4b8a4);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(200, 183, 221, 0.55);
}

.fp-btn--primary:hover:not(:disabled) {
  box-shadow: 0 14px 28px rgba(200, 183, 221, 0.8);
  transform: translateY(-1px);
}

.fp-btn--primary:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 8px 18px rgba(200, 183, 221, 0.5);
}

.fp-btn--ghost {
  background: transparent;
  border: 1px solid #ddcfe7;
  color: #6d5a74;
}

.fp-btn--ghost:hover:not(:disabled) {
  background: #f5eef9;
  border-color: #ccb8df;
}

.fp-btn:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.fp-message {
  margin-top: 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  padding: 10px 12px;

  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.92rem;
  line-height: 1.45;
}

.fp-message--success {
  background: rgba(101, 166, 118, 0.12);
  border-color: rgba(101, 166, 118, 0.28);
  color: #1f3a2a;
}

.fp-message--error {
  background: rgba(212, 92, 82, 0.12);
  border-color: rgba(212, 92, 82, 0.25);
  color: #7a1f1b;
}

@media (max-width: 520px) {
  .fp-card {
    padding: 1.1rem 1.05rem 1.05rem;
    border-radius: 18px;
  }

  .fp-actions {
    justify-content: stretch;
  }

  .fp-btn {
    width: 100%;
  }
}
.rp-page {
  min-height: 100vh;
  padding: 32px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;

  background: #0b0f1a; /* fallback */
}

.rp-page * {
  box-sizing: border-box;
}

/* Fondo tipo Login (imagen + overlay) */
.rp-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(/images/clinic-loby.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.02);
  z-index: 0;
}

.rp-page::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(8, 10, 18, 0.82) 0%,
    rgba(8, 10, 18, 0.62) 50%,
    rgba(8, 10, 18, 0.42) 100%
  );
  z-index: 0;
}

.rp-card {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: 520px;

  border-radius: 22px;
  border: 1px solid rgba(240, 228, 243, 0.92);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);

  padding: 1.25rem 1.35rem 1.2rem;
  backdrop-filter: blur(8px);
}

.rp-header {
  padding-bottom: 0.9rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid rgba(240, 228, 243, 0.92);
}

.rp-title {
  margin: 0;
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #2f2430;
}

.rp-subtitle {
  margin: 0.35rem 0 0;
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.92rem;
  color: #7a687f;
  line-height: 1.45;
}

.rp-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rp-field label {
  font-size: 0.82rem;
  font-weight: 500;
  color: #7a687f;
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.rp-input {
  border-radius: 12px;
  border: 1px solid #e0d6e6;
  padding: 10px 12px;
  font-size: 0.95rem;
  outline: none;
  background: #fbf8fd;
  color: #2f2430;
  transition: border 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background 0.15s ease-in-out;

  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
}

.rp-input:focus {
  border-color: #c8b7dd;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(200, 183, 221, 0.32);
}

.rp-input--error {
  border-color: rgba(212, 92, 82, 0.75);
  background: rgba(240, 125, 122, 0.10);
}

.rp-inline-error {
  margin-top: 2px;
  font-size: 0.82rem;
  color: #7a1f1b;
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.rp-actions {
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.rp-btn {
  border-radius: 999px;
  padding: 0.55rem 1.05rem;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.1s ease-in-out, box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out, background 0.15s ease-in-out;

  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  white-space: nowrap;
}

.rp-btn--primary {
  border: none;
  background: linear-gradient(135deg, #c8b7dd, #f4b8a4);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(200, 183, 221, 0.55);
}

.rp-btn--primary:hover:not(:disabled) {
  box-shadow: 0 14px 28px rgba(200, 183, 221, 0.8);
  transform: translateY(-1px);
}

.rp-btn--primary:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 8px 18px rgba(200, 183, 221, 0.5);
}

.rp-btn--ghost {
  background: transparent;
  border: 1px solid #ddcfe7;
  color: #6d5a74;
}

.rp-btn--ghost:hover:not(:disabled) {
  background: #f5eef9;
  border-color: #ccb8df;
}

.rp-btn:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.rp-message {
  margin-top: 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  padding: 10px 12px;

  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.92rem;
  line-height: 1.45;
}

.rp-message--success {
  background: rgba(101, 166, 118, 0.12);
  border-color: rgba(101, 166, 118, 0.28);
  color: #1f3a2a;
}

.rp-message--error {
  background: rgba(212, 92, 82, 0.12);
  border-color: rgba(212, 92, 82, 0.25);
  color: #7a1f1b;
}

.rp-success-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 520px) {
  .rp-card {
    padding: 1.1rem 1.05rem 1.05rem;
    border-radius: 18px;
  }

  .rp-actions {
    justify-content: stretch;
  }

  .rp-btn {
    width: 100%;
  }

  .rp-success-actions {
    justify-content: stretch;
  }
}
@charset "UTF-8";
.rbc-btn {
  color: inherit;
  font: inherit;
  margin: 0;
}

button.rbc-btn {
  overflow: visible;
  text-transform: none;
  -webkit-appearance: button;
     -moz-appearance: button;
          appearance: button;
  cursor: pointer;
}

button[disabled].rbc-btn {
  cursor: not-allowed;
}

button.rbc-input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.rbc-calendar {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.rbc-m-b-negative-3 {
  margin-bottom: -3px;
}

.rbc-h-full {
  height: 100%;
}

.rbc-calendar *,
.rbc-calendar *:before,
.rbc-calendar *:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

.rbc-abs-full, .rbc-row-bg {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.rbc-ellipsis, .rbc-show-more, .rbc-row-segment .rbc-event-content, .rbc-event-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rbc-rtl {
  direction: rtl;
}

.rbc-off-range {
  color: #999999;
}

.rbc-off-range-bg {
  background: #e6e6e6;
}

.rbc-header {
  overflow: hidden;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0%;
          flex: 1 0 0%;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 3px;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  font-size: 90%;
  min-height: 0;
  border-bottom: 1px solid #ddd;
}
.rbc-header + .rbc-header {
  border-left: 1px solid #ddd;
}
.rbc-rtl .rbc-header + .rbc-header {
  border-left-width: 0;
  border-right: 1px solid #ddd;
}
.rbc-header > a, .rbc-header > a:active, .rbc-header > a:visited {
  color: inherit;
  text-decoration: none;
}

.rbc-button-link {
  color: inherit;
  background: none;
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
}

.rbc-row-content {
  position: relative;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  z-index: 4;
}

.rbc-row-content-scrollable {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
}
.rbc-row-content-scrollable .rbc-row-content-scroll-container {
  height: 100%;
  overflow-y: scroll;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  /* Hide scrollbar for Chrome, Safari and Opera */
}
.rbc-row-content-scrollable .rbc-row-content-scroll-container::-webkit-scrollbar {
  display: none;
}

.rbc-today {
  background-color: #eaf6ff;
}

.rbc-toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 10px;
  font-size: 16px;
}
.rbc-toolbar .rbc-toolbar-label {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  padding: 0 10px;
  text-align: center;
}
.rbc-toolbar button {
  color: #373a3c;
  display: inline-block;
  margin: 0;
  text-align: center;
  vertical-align: middle;
  background: none;
  background-image: none;
  border: 1px solid #ccc;
  padding: 0.375rem 1rem;
  border-radius: 4px;
  line-height: normal;
  white-space: nowrap;
}
.rbc-toolbar button:active, .rbc-toolbar button.rbc-active {
  background-image: none;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
          box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  background-color: #e6e6e6;
  border-color: #adadad;
}
.rbc-toolbar button:active:hover, .rbc-toolbar button:active:focus, .rbc-toolbar button.rbc-active:hover, .rbc-toolbar button.rbc-active:focus {
  color: #373a3c;
  background-color: #d4d4d4;
  border-color: #8c8c8c;
}
.rbc-toolbar button:focus {
  color: #373a3c;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.rbc-toolbar button:hover {
  color: #373a3c;
  cursor: pointer;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.rbc-btn-group {
  display: inline-block;
  white-space: nowrap;
}
.rbc-btn-group > button:first-child:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.rbc-btn-group > button:last-child:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.rbc-rtl .rbc-btn-group > button:first-child:not(:last-child) {
  border-radius: 4px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.rbc-rtl .rbc-btn-group > button:last-child:not(:first-child) {
  border-radius: 4px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.rbc-btn-group > button:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.rbc-btn-group button + button {
  margin-left: -1px;
}
.rbc-rtl .rbc-btn-group button + button {
  margin-left: 0;
  margin-right: -1px;
}
.rbc-btn-group + .rbc-btn-group, .rbc-btn-group + button {
  margin-left: 10px;
}

@media (max-width: 767px) {
  .rbc-toolbar {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.rbc-event, .rbc-day-slot .rbc-background-event {
  border: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-shadow: none;
          box-shadow: none;
  margin: 0;
  padding: 2px 5px;
  background-color: #3174ad;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.rbc-slot-selecting .rbc-event, .rbc-slot-selecting .rbc-day-slot .rbc-background-event, .rbc-day-slot .rbc-slot-selecting .rbc-background-event {
  cursor: inherit;
  pointer-events: none;
}
.rbc-event.rbc-selected, .rbc-day-slot .rbc-selected.rbc-background-event {
  background-color: #265985;
}
.rbc-event:focus, .rbc-day-slot .rbc-background-event:focus {
  outline: 5px auto #3b99fc;
}

.rbc-event-label {
  font-size: 80%;
}

.rbc-event-overlaps {
  -webkit-box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5);
          box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5);
}

.rbc-event-continues-prior {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.rbc-event-continues-after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.rbc-event-continues-earlier {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.rbc-event-continues-later {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.rbc-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.rbc-row-segment {
  padding: 0 1px 1px 1px;
}
.rbc-selected-cell {
  background-color: rgba(0, 0, 0, 0.1);
}

.rbc-show-more {
  background-color: rgba(255, 255, 255, 0.3);
  z-index: 4;
  font-weight: bold;
  font-size: 85%;
  height: auto;
  line-height: normal;
  color: #3174ad;
}
.rbc-show-more:hover, .rbc-show-more:focus {
  color: #265985;
}

.rbc-month-view {
  position: relative;
  border: 1px solid #ddd;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
  width: 100%;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  height: 100%;
}

.rbc-month-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.rbc-month-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
  -ms-flex-preferred-size: 0px;
      flex-basis: 0px;
  overflow: hidden;
  height: 100%;
}
.rbc-month-row + .rbc-month-row {
  border-top: 1px solid #ddd;
}

.rbc-date-cell {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
  padding-right: 5px;
  text-align: right;
}
.rbc-date-cell.rbc-now {
  font-weight: bold;
}
.rbc-date-cell > a, .rbc-date-cell > a:active, .rbc-date-cell > a:visited {
  color: inherit;
  text-decoration: none;
}

.rbc-row-bg {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
  overflow: hidden;
  right: 1px;
}

.rbc-day-bg {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0%;
          flex: 1 0 0%;
}
.rbc-day-bg + .rbc-day-bg {
  border-left: 1px solid #ddd;
}
.rbc-rtl .rbc-day-bg + .rbc-day-bg {
  border-left-width: 0;
  border-right: 1px solid #ddd;
}

.rbc-overlay {
  position: absolute;
  z-index: 5;
  border: 1px solid #e5e5e5;
  background-color: #fff;
  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
  padding: 10px;
}
.rbc-overlay > * + * {
  margin-top: 1px;
}

.rbc-overlay-header {
  border-bottom: 1px solid #e5e5e5;
  margin: -10px -10px 5px -10px;
  padding: 2px 10px;
}

.rbc-agenda-view {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
  overflow: auto;
}
.rbc-agenda-view table.rbc-agenda-table {
  width: 100%;
  border: 1px solid #ddd;
  border-spacing: 0;
  border-collapse: collapse;
}
.rbc-agenda-view table.rbc-agenda-table tbody > tr > td {
  padding: 5px 10px;
  vertical-align: top;
}
.rbc-agenda-view table.rbc-agenda-table .rbc-agenda-time-cell {
  padding-left: 15px;
  padding-right: 15px;
  text-transform: lowercase;
}
.rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
  border-left: 1px solid #ddd;
}
.rbc-rtl .rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
  border-left-width: 0;
  border-right: 1px solid #ddd;
}
.rbc-agenda-view table.rbc-agenda-table tbody > tr + tr {
  border-top: 1px solid #ddd;
}
.rbc-agenda-view table.rbc-agenda-table thead > tr > th {
  padding: 3px 5px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
.rbc-rtl .rbc-agenda-view table.rbc-agenda-table thead > tr > th {
  text-align: right;
}

.rbc-agenda-time-cell {
  text-transform: lowercase;
}
.rbc-agenda-time-cell .rbc-continues-after:after {
  content: " »";
}
.rbc-agenda-time-cell .rbc-continues-prior:before {
  content: "« ";
}

.rbc-agenda-date-cell,
.rbc-agenda-time-cell {
  white-space: nowrap;
}

.rbc-agenda-event-cell {
  width: 100%;
}

.rbc-time-column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100%;
}
.rbc-time-column .rbc-timeslot-group {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.rbc-timeslot-group {
  border-bottom: 1px solid #ddd;
  min-height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
}

.rbc-time-gutter,
.rbc-header-gutter {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
}

.rbc-label {
  padding: 0 5px;
}

.rbc-day-slot {
  position: relative;
}
.rbc-day-slot .rbc-events-container {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  margin-right: 10px;
  top: 0;
}
.rbc-day-slot .rbc-events-container.rbc-rtl {
  left: 10px;
  right: 0;
}
.rbc-day-slot .rbc-event, .rbc-day-slot .rbc-background-event {
  border: 1px solid #265985;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-height: 100%;
  min-height: 20px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column wrap;
          flex-flow: column wrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  overflow: hidden;
  position: absolute;
}
.rbc-day-slot .rbc-background-event {
  opacity: 0.75;
}
.rbc-day-slot .rbc-event-label {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  padding-right: 5px;
  width: auto;
}
.rbc-day-slot .rbc-event-content {
  width: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  word-wrap: break-word;
  line-height: 1;
  height: 100%;
  min-height: 1em;
}
.rbc-day-slot .rbc-time-slot {
  border-top: 1px solid #f7f7f7;
}

.rbc-time-view-resources .rbc-time-gutter,
.rbc-time-view-resources .rbc-time-header-gutter {
  position: sticky;
  left: 0;
  background-color: white;
  border-right: 1px solid #ddd;
  z-index: 10;
  margin-right: -1px;
}
.rbc-time-view-resources .rbc-time-header {
  overflow: hidden;
}
.rbc-time-view-resources .rbc-time-header-content {
  min-width: auto;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
  -ms-flex-preferred-size: 0px;
      flex-basis: 0px;
}
.rbc-time-view-resources .rbc-time-header-cell-single-day {
  display: none;
}
.rbc-time-view-resources .rbc-day-slot {
  min-width: 140px;
}
.rbc-time-view-resources .rbc-header,
.rbc-time-view-resources .rbc-day-bg {
  width: 140px;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  -ms-flex-preferred-size: 0 px;
      flex-basis: 0 px;
}

.rbc-time-header-content + .rbc-time-header-content {
  margin-left: -1px;
}

.rbc-time-slot {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
}
.rbc-time-slot.rbc-now {
  font-weight: bold;
}

.rbc-day-header {
  text-align: center;
}

.rbc-slot-selection {
  z-index: 10;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 75%;
  width: 100%;
  padding: 3px;
}

.rbc-slot-selecting {
  cursor: move;
}

.rbc-time-view {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 100%;
  border: 1px solid #ddd;
  min-height: 0;
}
.rbc-time-view .rbc-time-gutter {
  white-space: nowrap;
  text-align: right;
}
.rbc-time-view .rbc-allday-cell {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  width: 100%;
  height: 100%;
  position: relative;
}
.rbc-time-view .rbc-allday-cell + .rbc-allday-cell {
  border-left: 1px solid #ddd;
}
.rbc-time-view .rbc-allday-events {
  position: relative;
  z-index: 4;
}
.rbc-time-view .rbc-row {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-height: 20px;
}

.rbc-time-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.rbc-time-header.rbc-overflowing {
  border-right: 1px solid #ddd;
}
.rbc-rtl .rbc-time-header.rbc-overflowing {
  border-right-width: 0;
  border-left: 1px solid #ddd;
}
.rbc-time-header > .rbc-row:first-child {
  border-bottom: 1px solid #ddd;
}
.rbc-time-header > .rbc-row.rbc-row-resource {
  border-bottom: 1px solid #ddd;
}

.rbc-time-header-cell-single-day {
  display: none;
}

.rbc-time-header-content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-width: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-left: 1px solid #ddd;
}
.rbc-rtl .rbc-time-header-content {
  border-left-width: 0;
  border-right: 1px solid #ddd;
}
.rbc-time-header-content > .rbc-row.rbc-row-resource {
  border-bottom: 1px solid #ddd;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.rbc-time-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0%;
          flex: 1 0 0%;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: 100%;
  border-top: 2px solid #ddd;
  overflow-y: auto;
  position: relative;
}
.rbc-time-content > .rbc-time-gutter {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
}
.rbc-time-content > * + * > * {
  border-left: 1px solid #ddd;
}
.rbc-rtl .rbc-time-content > * + * > * {
  border-left-width: 0;
  border-right: 1px solid #ddd;
}
.rbc-time-content > .rbc-day-slot {
  width: 100%;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}

.rbc-current-time-indicator {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #74ad31;
  pointer-events: none;
}

.rbc-resource-grouping.rbc-time-header-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.rbc-resource-grouping .rbc-row .rbc-header {
  width: 141px;
}

/*# sourceMappingURL=react-big-calendar.css.map */
.rbc-addons-dnd .rbc-addons-dnd-row-body {
  position: relative;
}
.rbc-addons-dnd .rbc-addons-dnd-drag-row {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.rbc-addons-dnd .rbc-addons-dnd-over {
  background-color: rgba(0, 0, 0, 0.3);
}
.rbc-addons-dnd .rbc-event {
  transition: opacity 150ms;
}
.rbc-addons-dnd .rbc-event:hover .rbc-addons-dnd-resize-ns-icon, .rbc-addons-dnd .rbc-event:hover .rbc-addons-dnd-resize-ew-icon {
  display: block;
}
.rbc-addons-dnd .rbc-addons-dnd-dragged-event {
  opacity: 0;
}
.rbc-addons-dnd.rbc-addons-dnd-is-dragging .rbc-event:not(.rbc-addons-dnd-dragged-event):not(.rbc-addons-dnd-drag-preview) {
  opacity: 0.5;
}
.rbc-addons-dnd .rbc-addons-dnd-resizable {
  position: relative;
  width: 100%;
  height: 100%;
}
.rbc-addons-dnd .rbc-addons-dnd-resize-ns-anchor {
  width: 100%;
  text-align: center;
  position: absolute;
}
.rbc-addons-dnd .rbc-addons-dnd-resize-ns-anchor:first-child {
  top: 0;
}
.rbc-addons-dnd .rbc-addons-dnd-resize-ns-anchor:last-child {
  bottom: 0;
}
.rbc-addons-dnd .rbc-addons-dnd-resize-ns-anchor .rbc-addons-dnd-resize-ns-icon {
  display: none;
  border-top: 3px double;
  margin: 0 auto;
  width: 10px;
  cursor: ns-resize;
}
.rbc-addons-dnd .rbc-addons-dnd-resize-ew-anchor {
  position: absolute;
  top: 4px;
  bottom: 0;
}
.rbc-addons-dnd .rbc-addons-dnd-resize-ew-anchor:first-child {
  left: 0;
}
.rbc-addons-dnd .rbc-addons-dnd-resize-ew-anchor:last-child {
  right: 0;
}
.rbc-addons-dnd .rbc-addons-dnd-resize-ew-anchor .rbc-addons-dnd-resize-ew-icon {
  display: none;
  border-left: 3px double;
  margin-top: auto;
  margin-bottom: auto;
  height: 10px;
  cursor: ew-resize;
}

/*# sourceMappingURL=styles.css.map */

/* SHELL GENERAL DEL CALENDARIO */
.agenda-shell {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

/* HEADER SUPERIOR (título + botón crear cita) */
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: #2f2430; /* texto cirujía/plum */
}

/* Botón primario reutilizable (mismo estilo que en el sidebar) */
.btn-primary {
  border: none;
  border-radius: 999px;
  padding: 0.55rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 500;
  background: linear-gradient(135deg, #c8b7dd, #f4b8a4);
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(200, 183, 221, 0.6);
  transition: transform 0.1s ease-in-out, box-shadow 0.2s ease-in-out,
    opacity 0.2s ease-in-out;
}

.btn-primary:hover:not(:disabled) {
  box-shadow: 0 10px 22px rgba(200, 183, 221, 0.85);
  transform: translateY(-1px);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 6px 14px rgba(200, 183, 221, 0.45);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: default;
}

/* CARD QUE ENVUELVE AL CALENDARIO */
.calendar-card {
  flex: 1;
  min-height: 0;
  padding: 0.9rem;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(58, 43, 54, 0.12);
  border: 1px solid #f0e4f3;
  box-sizing: border-box;
}

/* Ajustamos la altura interna del calendar para que quepa bien dentro de la tarjeta */
.calendar-card .rbc-calendar {
  height: calc(100vh - 220px) !important;
}

/* TOOLBAR PERSONALIZADA */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
  padding: 0.35rem 0.2rem 0.6rem;
  border-bottom: 1px solid #f0e4f3;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.toolbar-right {
  display: flex;
  align-items: center;
}

/* Botones fantasma (prev/next/hoy) */
.ghost {
  border: 1px solid #ddcfe7;
  background: transparent;
  color: #6d5a74;
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out,
    color 0.15s ease-in-out;
}

.ghost:hover {
  background: #f5eef9;
  border-color: #ccb8df;
}

/* Mes actual */
.month-label {
  margin: 0 0.4rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #2f2430;
}

/* Selector de vista (día/semana/mes) */
.view-switch {
  display: inline-flex;
  padding: 0.15rem;
  border-radius: 999px;
  background: #f6f0fa;
  border: 1px solid #e3d7ef;
}

.view-switch .seg {
  border: none;
  background: transparent;
  font-size: 0.8rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  color: #7c6887;
  transition: background 0.15s ease-in-out, color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.view-switch .seg.active {
  background: #ffffff;
  color: #af90c8;
  box-shadow: 0 4px 10px rgba(175, 144, 200, 0.4);
}

/* ------- ESTILOS BASE DE REACT-BIG-CALENDAR ------- */

.rbc-calendar {
  font-size: 0.88rem;
  color: #2f2430;
}

/* cabecera de días */
.rbc-header {
  padding: 0.5rem 0.25rem;
  font-weight: 500;
  color: #9583a1;
  border-bottom: 1px solid #f0e4f3;
}

/* bordes generales */
.rbc-time-view,
.rbc-month-view {
  border-color: #f0e4f3;
}

.rbc-time-header-gutter,
.rbc-time-gutter {
  border-color: #f0e4f3;
}

/* --- CELDAS MÁS GRANDES --- */

/* altura vertical de cada slot de tiempo */
.rbc-time-slot {
  border-color: #f5ecf9;
  min-height: 38px; /* antes ~20px: celdas más altas */
}

/* cada grupo de 1 hora (2 slots de 30') */
.rbc-timeslot-group {
  min-height: 64px;
}

/* filas de mes más altas */
.rbc-month-row {
  min-height: 130px;
}

/* línea de hora actual */
.rbc-current-time-indicator {
  background-color: #f07b86;
}

/* día actual en month view */
.rbc-today {
  background-color: #fdf6fa;
}

/* Ocultar la hora por defecto que react-big-calendar pone encima del evento */
.rbc-time-view .rbc-event-label {
  display: none;
}

/* selección de slot */
.rbc-slot-selection {
  background-color: rgba(200, 183, 221, 0.22);
  border: 1px solid rgba(200, 183, 221, 0.5);
}

/* días fuera de rango en mes */
.rbc-off-range-bg {
  background: #faf5fc;
}

/* ------- EVENTOS (week/day view) ------- */

/* Contenedor base (aplicado desde eventPropGetter) */
.ev {
  border-radius: 14px;
  border: 1px solid transparent;
  box-shadow: 0 4px 10px rgba(47, 36, 48, 0.18);
  padding: 0.05rem;
  overflow: hidden;
}

/* Diferentes estados de la cita */
.ev--planned {
  background: linear-gradient(135deg, #f1ebfb, #e0d5f6);
  border-color: rgba(171, 148, 214, 0.9);
}

.ev--waiting_room {
  background: linear-gradient(135deg, #fff4d6, #ffe2a8);
  border-color: rgba(214, 176, 88, 0.95);
}

.ev--in_consultation {
  background: linear-gradient(135deg, #e6f2ff, #cfe6ff);
  border-color: rgba(96, 150, 214, 0.95);
}

.ev--finished {
  background: linear-gradient(135deg, #e4f5ee, #cbeade);
  border-color: rgba(122, 176, 148, 0.9);
}

.ev--cancelled {
  background: linear-gradient(135deg, #fbe5ea, #f5d0d8);
  border-color: rgba(211, 129, 135, 0.9);
}

/* Tarjeta interna que has definido en EventCard */
.ev-card {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.35rem 0.5rem 0.3rem;
  font-size: 0.76rem;          /* un pelín más pequeño */
  line-height: 1.2;
  color: #2f2430;
}

.ev-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.ev-card .dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #af90c8;
  flex-shrink: 0;
}

/* Título: permitimos wrap y máximo 2 líneas */
.ev-title {
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1.2;
  white-space: normal;
  overflow: hidden;
}

.ev-sub {
  font-size: 0.7rem;
  color: #5a4a63;
}

.ev-time {
  font-size: 0.7rem;
  color: #7a6a83;
}


/* Color de punto por estado */
.ev-card[data-status="planned"] .dot {
  background: #af90c8;
}

.ev-card[data-status="waiting_room"] .dot {
  background: #d6b058;
}

.ev-card[data-status="in_consultation"] .dot {
  background: #6096d6;
}

.ev-card[data-status="finished"] .dot {
  background: #65a676;
}

.ev-card[data-status="cancelled"] .dot {
  background: #d16773;
}

.ev-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ev-sub {
  font-size: 0.72rem;
  color: #5a4a63;
}

.ev-time {
  font-size: 0.7rem;
  color: #7a6a83;
}

/* ------- MONTH VIEW ------- */

.rbc-month-view .rbc-date-cell {
  padding: 0.2rem 0.3rem;
}

.rbc-month-view .rbc-date-cell > div {
  font-size: 0.8rem;
}

/* ------- MODAL PARA CREAR / EDITAR CITA ------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(25, 14, 23, 0.45);
  z-index: 999;

  /* ✅ antes estaba centrado fijo; ahora permite scroll si el modal es alto */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;

  /* ✅ deja aire arriba para dropdowns */
  padding: 6vh 1rem 1.5rem;
}

.modal {
  width: 420px;
  max-width: 90vw;
  background: #ffffff;
  border-radius: 20px;
  padding: 1.3rem 1.4rem 1.2rem;
  box-shadow: 0 22px 60px rgba(34, 21, 34, 0.55);
  box-sizing: border-box;

  /* ✅ por si se va de alto: el backdrop scrollea */
  margin: 0 auto;
}

.modal h3 {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: #2f2430;
}

/* Campos del formulario */
.field {
  margin-bottom: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.field label {
  font-size: 0.82rem;
  font-weight: 500;
  color: #7a687f;
}

.field input,
.field select,
.field textarea {
  border-radius: 10px;
  border: 1px solid #e0d6e6;
  padding: 0.45rem 0.7rem;
  font-size: 0.9rem;
  outline: none;
  background: #fbf8fd;
  transition: border 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
    background 0.15s ease-in-out;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: #c8b7dd;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(200, 183, 221, 0.32);
}

.field input[type="date"],
.field input[type="time"],
.field select {
  cursor: pointer;
}

/* Fila de dos columnas */
.inline-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

/* Pills de doctor (readonly) */
.readonly-pill {
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  background: #f6f0fa;
  color: #5c4867;
  font-size: 0.85rem;
}

/* Motivo: chips */
.reason-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.reason-chip {
  border-radius: 999px;
  border: 1px solid #e0d6e6;
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
  color: #6b5a78;
  cursor: pointer;
  background: #faf5fc;
  transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out,
    color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.reason-chip.is-active {
  background: linear-gradient(135deg, #c8b7dd, #f4b8a4);
  border-color: #c8b7dd;
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(175, 144, 200, 0.55);
}

/* Acciones del modal */
.modal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.3rem;
}

.btn-danger {
  background: rgba(240, 125, 122, 0.14) !important;
  color: #d45c52 !important;
  border-color: rgba(212, 92, 82, 0.9) !important;
}

.btn-danger:hover {
  background: rgba(240, 125, 122, 0.22) !important;
}

/* -------- TIME WHEEL -------- */

.wheel {
  position: relative;
}

.wheel-viewport {
  position: relative;
  overflow-y: auto;
  scrollbar-width: thin;
}

.wheel-viewport::-webkit-scrollbar {
  width: 4px;
}

.wheel-viewport::-webkit-scrollbar-thumb {
  background-color: #d3c5e2;
  border-radius: 2px;
}

.wheel-item {
  text-align: center;
  font-size: 0.9rem;
  color: #7c6b84;
  scroll-snap-align: center;
}

.wheel-item.is-active {
  color: #b08fcb;
  font-weight: 500;
}

.wheel-highlight {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid rgba(204, 183, 220, 0.8);
  border-bottom: 1px solid rgba(204, 183, 220, 0.8);
  pointer-events: none;
}

/* Preview paciente */
.patient-preview {
  margin-top: 0.55rem;
  padding: 0.6rem 0.75rem;
  border-radius: 14px;
  background: #f6f0fa;
  border: 1px solid #f0e4f3;
}

.patient-preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0.2rem 0;
}

.patient-preview-label {
  font-size: 0.82rem;
  color: #7a687f;
  font-weight: 500;
}

.patient-preview-value {
  font-size: 0.84rem;
  color: #2f2430;
  font-weight: 600;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 62%;
}

/* StatusSelect (dropdown con lucide) */
.status-select {
  position: relative;
}

.status-select-trigger {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #e0d6e6;
  padding: 0.45rem 0.7rem;
  font-size: 0.9rem;
  outline: none;
  background: #fbf8fd;
  cursor: pointer;
  transition: border 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background 0.15s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #2f2430;
}

.status-select-trigger:focus {
  border-color: #c8b7dd;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(200, 183, 221, 0.32);
}

.status-select-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-select.is-disabled .status-select-trigger {
  opacity: 0.6;
  cursor: default;
}

.status-select-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);

  background: #ffffff;
  border: 1px solid #f0e4f3;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(58, 43, 54, 0.12);
  padding: 6px;
  z-index: 1000;

  /* ✅ clave: que no sea infinito y pueda scrollear */
  max-height: 260px;
  overflow-y: auto;
}

.status-select.is-up .status-select-menu {
  top: auto;
  bottom: calc(100% + 6px);
}

.status-select-item {
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.5rem 0.6rem;
  border-radius: 12px;
  color: #2f2430;
  text-align: left;
}

.status-select-item:hover {
  background: #f6f0fa;
}

.status-select-item.is-active {
  background: #f6f0fa;
  font-weight: 600;
}

/* Responsive modal */
@media (max-width: 600px) {
  .modal {
    width: 100%;
    margin: 0 1rem;
  }

  .inline-2 {
    grid-template-columns: 1fr;
  }
}
/* frontend/styles/patients/patients.css */

/* CONTENEDOR PRINCIPAL */
.patients-container {
  background: linear-gradient(
    180deg,
    var(--ui-surface-lilac) 0%,
    var(--ui-surface) 45%,
    var(--ui-surface) 100%
  );
  border-radius: 24px;
  border: 1px solid var(--ui-border-soft);
  box-shadow: var(--ui-shadow-card);
  padding: 1.4rem 1.6rem 1.3rem;
  box-sizing: border-box;
  color: var(--ui-text);
}

.patients-top h1,
.patients-container h1 {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ui-text);
}

/* TOOLBAR */
.patients-toolbar {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 320px) auto;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 1rem;
}

.patients-toolbar-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  flex-wrap: wrap;
}

/* Input */
.patients-input {
  width: 100%;
  border-radius: var(--ui-radius-pill);
  border: 1px solid var(--ui-border);
  padding: 0.55rem 0.95rem;
  font-size: 0.9rem;
  outline: none;
  background: #fbf8fd;
  color: var(--ui-text);
  transition: border 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  box-sizing: border-box;
}

.patients-input::placeholder {
  color: #9a8aa6;
}

.patients-input:focus {
  border-color: var(--ui-primary-1);
  background: var(--ui-surface);
  box-shadow: var(--ui-focus-ring);
}

/* Select */
.patients-select {
  width: 100%;
  border-radius: var(--ui-radius-pill);
  border: 1px solid var(--ui-border);
  padding: 0.55rem 0.95rem;
  font-size: 0.88rem;
  outline: none;
  background: #fbf8fd;
  color: #5a4a63;
  transition: border 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  box-sizing: border-box;
}

.patients-select:focus {
  border-color: var(--ui-primary-1);
  background: var(--ui-surface);
  box-shadow: var(--ui-focus-ring);
}

/* BANNERS */
.patients-banner {
  font-size: 0.88rem;
  color: var(--ui-text-muted);
  margin-bottom: 0.6rem;
  padding: 0.6rem 0.85rem;
  border-radius: 14px;
  border: 1px solid var(--ui-border-soft);
  background: #fbf8fd;
}

.patients-banner--error {
  border-color: rgba(209, 103, 115, 0.35);
  background: rgba(209, 103, 115, 0.08);
  color: #b5475c;
}

.patients-banner--success {
  border-color: rgba(22, 101, 52, 0.25);
  background: rgba(22, 101, 52, 0.06);
  color: #166534;
}

/* VACÍO */
.patients-empty {
  margin-top: 1.1rem;
  font-size: 0.95rem;
  color: var(--ui-text-soft);
}

/* TABLA */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--ui-radius-18);
  border: 1px solid var(--ui-border-soft);
  background: linear-gradient(180deg, #fbf8fd 0%, #fdfbff 55%, #ffffff 100%);
}

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
  color: var(--ui-text);
}

.table thead {
  background: var(--ui-surface-lilac);
}

.table thead th {
  text-align: left;
  padding: 0.75rem 0.9rem;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #7c6887;
  border-bottom: 1px solid #e3d7ef;
  white-space: nowrap;
}

.table tbody td {
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid #ebdfef;
  vertical-align: middle;
}

.table tbody tr:hover {
  background: var(--ui-surface-soft);
}

.table tbody td:first-child {
  width: 52px;
}

/* acciones header */
.th-actions,
.td-actions {
  text-align: right;
}

.td-name {
  font-weight: 500;
}

/* Avatar */
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}

.avatar-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ui-primary-2), #f7cfb7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #5b3427;
  border: 1px solid rgba(240, 184, 164, 0.45);
}

/* TAGS */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: var(--ui-radius-pill);
  font-size: 0.74rem;
  font-weight: 600;
  background: rgba(200, 183, 221, 0.18);
  color: #5c4867;
  border: 1px solid rgba(200, 183, 221, 0.65);
}

.tag.dim {
  background: rgba(210, 187, 170, 0.22);
  color: #6b5a4b;
  border-color: rgba(210, 187, 170, 0.65);
}

.tag.warning {
  background: rgba(244, 184, 164, 0.22);
  color: #b5475c;
  border-color: rgba(244, 184, 164, 0.9);
}

.tag.neutral {
  background: rgba(229, 231, 235, 0.6);
  color: #756a63;
  border-color: transparent;
}

/* Icon actions */
.patient-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.patient-action-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--ui-radius-pill);
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #334155;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.12s ease, border-color 0.12s ease,
    transform 0.06s ease, box-shadow 0.12s ease;
}

.patient-action-icon:hover {
  background: var(--ui-surface-soft);
  border-color: rgba(200, 183, 221, 0.9);
  box-shadow: var(--ui-shadow-soft);
}

.patient-action-icon:active {
  transform: translateY(1px);
}

.patient-action-icon--danger {
  border-color: rgba(212, 92, 82, 0.35);
  color: #d45c52;
}

.patient-action-icon--danger:hover {
  background: rgba(240, 125, 122, 0.14);
  border-color: rgba(212, 92, 82, 0.55);
}

/* PAGINACIÓN */
.pagination {
  margin-top: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.pagination-label {
  flex: 1;
  text-align: center;
  font-size: 0.86rem;
  color: var(--ui-text-muted);
}

/* PageHeader dentro de Patients: quitamos el margen global y lo alineamos con el diseño */
.patients-top .page-header {
  margin: 0 0 1em;
}

/* Modal crear paciente (usa estilos globales ui-modal) */
.ui-modal-body.patients-create-modal-body {
  grid-template-columns: 1fr 1fr;
}

.patients-create-full {
  grid-column: 1 / -1;
}

/* Responsive */
@media (max-width: 900px) {
  .patients-container {
    padding: 1.2rem 1.1rem 1.1rem;
  }

  .patients-toolbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .patients-toolbar-actions {
    justify-content: flex-start;
  }

  .pagination {
    flex-direction: column;
    align-items: stretch;
  }

  .pagination-label {
    order: -1;
    text-align: left;
  }
}

@media (max-width: 560px) {
  .ui-modal-body.patients-create-modal-body {
    grid-template-columns: 1fr;
  }

  .patients-create-full {
    grid-column: auto;
  }

  /* En móvil, ocultamos “Cirugía” para no apretar */
  .td-proc,
  .table thead th:nth-child(3) {
    display: none;
  }
}
/* frontend/styles/patients/patientdetails.css */

/* CONTENEDOR PRINCIPAL DE LA FICHA */
.pd-container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0.6rem 0 1.6rem;
  box-sizing: border-box;
  color: var(--ui-text);
  background: transparent;      /* ya no es una card grande */
  border: 0;
  box-shadow: none;
}

/* LINK VOLVER */
.pd-backlink {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.88rem;
  color: #af90c8;
  text-decoration: none;
  margin-bottom: 0.65rem;
}

.pd-backlink:hover {
  text-decoration: underline;
}

/* CABECERA: AVATAR + NOMBRE COMO CARD */
.pd-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  margin-bottom: 1.3rem;
  border-radius: 22px;
  background: linear-gradient(135deg, #f4f0ff, #f2f7ff);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.08);
}

.pd-title-block {
  flex: 1;
  min-width: 0;
}

.pd-title-block h2 {
  margin: 0 0 0.15rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ui-text);
}

.pd-subtle {
  font-size: 0.9rem;
  color: var(--ui-text-muted);
}

/* LAYOUT PRINCIPAL TIPO DASHBOARD */
.pd-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.1fr);
  gap: 1.1rem;
  margin-top: 0.3rem;
}

.pd-layout-main,
.pd-layout-side {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* dentro del layout usamos el gap, sin márgenes extra */
.pd-layout .pd-section {
  margin-bottom: 0;
}

/* Avatar zona */
.pd-avatar-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
}

.pd-avatar,
.pd-avatar--placeholder {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-avatar {
  box-shadow: 0 10px 22px rgba(58, 43, 54, 0.28);
  border: 3px solid var(--ui-surface);
  background: linear-gradient(135deg, var(--ui-primary-2), #f7cfb7);
}

.pd-avatar--placeholder {
  background: linear-gradient(135deg, var(--ui-primary-2), #f7cfb7);
  font-size: 1rem;
  font-weight: 700;
  color: #5b3427;
  box-shadow: var(--ui-shadow-soft);
}

/* =========================
   SECCIONES = CARDS FLOTANTES
========================= */
.pd-section {
  margin-bottom: 1.1rem;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.05);
  padding: 0.9rem 1.1rem 0.9rem;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    border-color 0.15s ease, background 0.15s ease;
}

.pd-section:hover {
  transform: translateY(-1px);
  border-color: rgba(148, 163, 184, 0.85);
  box-shadow: 0 22px 52px rgba(15, 23, 42, 0.08);
}

.pd-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.35rem;
}

.pd-section__title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 750;
  color: var(--ui-text);
}

.pd-section__body {
  border-radius: 0;
  border: 0;
  background: transparent;
  padding: 0.3rem 0 0;
  box-shadow: none;
}

/* ACTIONS */
.pd-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.pd-actions--bottom {
  margin-top: 0.6rem;
}

.pd-actions--doc {
  align-self: flex-end;
}

/* =========================
   FORMULARIO DATOS CLÍNICOS
========================= */
.pd-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1.4rem;
}

.pd-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

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

.pd-field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ui-text-muted);
}

.pd-input,
.pd-textarea {
  border-radius: var(--ui-radius-10);
  border: 1px solid var(--ui-border);
  padding: 0.5rem 0.75rem;
  font-size: 0.92rem;
  outline: none;
  background: #fbf8fd;
  color: var(--ui-text);
  transition: border 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  width: 100%;
  box-sizing: border-box;
}

.pd-input::placeholder,
.pd-textarea::placeholder {
  color: #b09fbe;
}

.pd-input:focus,
.pd-textarea:focus {
  border-color: var(--ui-primary-1);
  background: var(--ui-surface);
  box-shadow: var(--ui-focus-ring);
}

.pd-textarea {
  resize: vertical;
  min-height: 80px;
}

/* =========================
   LISTAS CLÍNICAS
========================= */
.pd-list {
  list-style: none;
  padding: 0;
  margin: 0.35rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.pd-list-item {
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: #ffffff;
  padding: 0.7rem 0.8rem;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.pd-status {
  font-size: 0.88rem;
  color: var(--ui-text-soft);
}

.pd-status--muted {
  opacity: 0.8;
}

.pd-status--error {
  color: #b5475c;
}

.pd-list__row {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.pd-list__title {
  font-size: 0.94rem;
  color: var(--ui-text);
}

.pd-list__meta {
  font-size: 0.84rem;
  color: var(--ui-text-muted);
}

.pd-list__actions {
  margin-top: 0.5rem;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Inline form */
.pd-inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  margin-bottom: 0.55rem;
}

.pd-inline-form--full {
  width: 100%;
}

.pd-inline-form .pd-input {
  min-width: 140px;
}

.pd-inline-form--short .pd-input {
  flex: 1 1 160px;
}

.pd-inline-form--med .pd-input {
  flex: 1 1 160px;
}

.pd-inline-form--recovery {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed rgba(224, 214, 230, 0.8);
}

/* Substatus */
.pd-substatus {
  margin-top: 0.4rem;
  font-size: 0.82rem;
  color: var(--ui-text-soft);
}

.pd-substatus--error {
  color: #b5475c;
}

/* SUBLISTA recovery */
.pd-sublist {
  list-style: none;
  padding-left: 0.85rem;
  margin: 0.55rem 0 0.1rem;
  border-left: 2px solid var(--ui-border-soft);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.pd-sublist__item {
  padding-left: 0.45rem;
}

/* CHECKBOX */
.pd-checkbox {
  font-size: 0.86rem;
  color: var(--ui-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.2rem;
}

.pd-checkbox input[type="checkbox"] {
  accent-color: var(--ui-primary-1);
}

/* =========================
   DOCUMENTOS
========================= */
.pd-doc-upload {
  display: flex;
  gap: 0.8rem;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}

.pd-field--doccat {
  min-width: 220px;
}

.pd-field--docfile {
  flex: 1;
  min-width: 240px;
}

.pd-doc-fileline {
  border: 1px solid rgba(226, 232, 240, 0.9);
  background: #ffffff;
  border-radius: var(--ui-radius-10);
  padding: 0.45rem 0.65rem;
  box-sizing: border-box;
}

.pd-doc-filename {
  display: block;
  font-size: 0.84rem;
  color: #475569;
  max-width: 560px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pd-doc-empty {
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
  color: var(--ui-text-muted);
  border-radius: 14px;
  padding: 0.8rem 0.95rem;
  background: #ffffff;
  border: 1px dashed rgba(226, 232, 240, 0.95);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

/* Lista compacta de documentos */
.pd-doc-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Cada documento como fila pill */
.pd-doc-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: 18px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: #f9fafb;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    border-color 0.15s ease, background 0.15s ease;
}

.pd-doc-card:hover {
  transform: translateY(-1px);
  border-color: rgba(148, 163, 184, 0.8);
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

/* Contenido principal de cada fila de documento */
.pd-doc-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}


.pd-doc-main:focus-visible {
  outline: 2px solid var(--ui-primary-1);
  outline-offset: 2px;
}

/* Icono circular */
.pd-doc-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(79, 70, 229, 0.08);
  color: #4f46e5;
  flex-shrink: 0;
}

/* Texto del documento */
.pd-doc-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.pd-doc-name {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ui-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pd-doc-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.55rem;
  font-size: 0.8rem;
  color: var(--ui-text-muted);
}

.pd-doc-badge {
  font-size: 0.74rem;
  padding: 0.14rem 0.55rem;
  border-radius: var(--ui-radius-pill);
  background: rgba(248, 250, 252, 0.95);
  border: 1px solid rgba(226, 232, 240, 0.9);
  color: #475569;
  white-space: nowrap;
}

.pd-doc-meta-text {
  font-size: 0.78rem;
  color: #64748b;
}

/* Acciones a la derecha */
.pd-doc-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

/* Icon buttons (docs + close) */
.pd-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--ui-radius-pill);
  border: 1px solid rgba(224, 214, 230, 0.8);
  background: var(--ui-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #5c4867;
  transition: background 0.12s ease, border-color 0.12s ease,
    box-shadow 0.12s ease;
}

.pd-icon-btn:hover {
  background: var(--ui-surface-soft);
  border-color: rgba(200, 183, 221, 0.9);
  box-shadow: var(--ui-shadow-soft);
}

.pd-icon-btn--danger {
  color: #d45c52;
  border-color: rgba(212, 92, 82, 0.35);
}

.pd-icon-btn--danger:hover {
  background: rgba(240, 125, 122, 0.14);
  border-color: rgba(212, 92, 82, 0.55);
}


/* Icon buttons (docs + close) */
.pd-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--ui-radius-pill);
  border: 1px solid rgba(224, 214, 230, 0.8);
  background: var(--ui-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #5c4867;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.pd-icon-btn:hover {
  background: var(--ui-surface-soft);
  border-color: rgba(200, 183, 221, 0.9);
  box-shadow: var(--ui-shadow-soft);
}

.pd-icon-btn--danger {
  color: #d45c52;
  border-color: rgba(212, 92, 82, 0.35);
}

.pd-icon-btn--danger:hover {
  background: rgba(240, 125, 122, 0.14);
  border-color: rgba(212, 92, 82, 0.55);
}

.pd-doc-name {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--ui-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pd-doc-sub {
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: var(--ui-text-muted);
}

/* =========================
   MODAL PREVIEW / CONFIRM
========================= */
.pd-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 15, 22, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 9999;
}

.pd-modal {
  width: min(920px, 96vw);
  background: var(--ui-surface);
  border-radius: var(--ui-radius-18);
  border: 1px solid rgba(224, 214, 230, 0.8);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.pd-modal--small {
  width: min(560px, 96vw);
}

.pd-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.85rem 0.95rem;
  border-bottom: 1px solid rgba(224, 214, 230, 0.55);
  background: var(--ui-surface);
}

.pd-modal__title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ui-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pd-modal__sub {
  font-size: 0.85rem;
  color: var(--ui-text-muted);
}

.pd-modal__body {
  padding: 0.9rem;
  background: var(--ui-surface);
}

.pd-doc-preview-frame {
  width: 100%;
  height: min(68vh, 720px);
  border: 1px solid rgba(224, 214, 230, 0.6);
  border-radius: var(--ui-radius-14);
}

.pd-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  padding: 0.85rem 0.95rem;
  border-top: 1px solid rgba(224, 214, 230, 0.55);
  background: var(--ui-surface);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px) {
  .pd-container {
    padding: 0.8rem 0 1.2rem;
  }

  .pd-form {
    grid-template-columns: 1fr;
  }

  .pd-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .pd-layout-main,
  .pd-layout-side {
    gap: 1rem;
  }
}

@media (max-width: 600px) {
  .pd-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .pd-avatar-wrap {
    width: 64px;
    height: 64px;
  }

  .pd-avatar,
  .pd-avatar--placeholder {
    width: 64px;
    height: 64px;
  }

  .pd-title-block h2 {
    font-size: 1.15rem;
  }

  .pd-section {
    padding: 0.85rem 0.9rem 0.9rem;
  }

  .pd-section__body {
    padding: 0.6rem 0 0;
  }

  .pd-inline-form {
    flex-direction: column;
    align-items: stretch;
  }

  .pd-inline-form .pd-input {
    width: 100%;
    min-width: 0;
  }

  .pd-doc-upload {
    flex-direction: column;
    align-items: stretch;
  }

  .pd-doc-filename {
    max-width: 100%;
  }

  .pd-doc-preview-frame {
    height: 60vh;
  }
}
/* CONTENEDOR PRINCIPAL DEL PERFIL */
.profile-container {
  width: 100%;
  background: var(--ui-surface);
  border-radius: 24px;
  border: 1px solid var(--ui-border-soft);
  box-shadow: var(--ui-shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.profile-page {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.profile-top .page-header {
  margin: 0;
}

.profile-top .page-title {
  font-size: 1.85rem;
}

@media (max-width: 768px) {
  .profile-top .page-title {
    font-size: 1.5rem;
  }
}

/* HEADER CON FOTO DE LA CLÍNICA */
.profile-header {
  position: relative;
  height: 190px;
  background-size: cover;
  background-position: center;
}

/* Capa de degradado encima de la foto */
.profile-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(38, 25, 46, 0.9),
    rgba(58, 43, 84, 0.7),
    rgba(244, 184, 164, 0.35)
  );
}

/* BLOQUE AVATAR + NOMBRE (superpuesto al header) */
.profile-picture {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  padding: 0 1.8rem 1rem;
  margin-top: -60px;
  z-index: 1;
}

/* Imagen de perfil */
.profile-picture img {
  width: 110px;
  height: 110px;
  border-radius: var(--ui-radius-pill);
  object-fit: cover;
  border: 4px solid var(--ui-surface);
  box-shadow: 0 10px 24px rgba(29, 16, 28, 0.65);
  background: radial-gradient(135deg, var(--ui-primary-1), var(--ui-primary-2));
}

/* Info básica (nombre + rol) */
.profile-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
}

.profile-name {
  margin: 0 0 0.2rem;
  font-size: 1.35rem;
  font-weight: 600;
  color: #fdf7f5;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}

/* Rol como pill */
.profile-bio {
  margin: 0;
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.7rem;
  border-radius: var(--ui-radius-pill);
  font-size: 0.8rem;
  text-transform: capitalize;
  background: rgba(247, 242, 252, 0.98);
  color: #5c4867;
  border: 1px solid rgba(224, 214, 230, 0.95);
}

/* CONTENIDO DEL PERFIL */
.profile-content {
  padding: 0.4rem 1.8rem 1.6rem;
  box-sizing: border-box;
}

.profile-content h3 {
  margin: 0 0 0.9rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ui-text);
}

.profile-empty {
  margin: 0;
  color: var(--ui-text-muted);
  font-size: 0.9rem;
}

/* Campos organizados en grid */
.profile-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem 1.5rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

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

.field label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ui-text-muted);
}

.field p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ui-text);
}

/* Inputs */
.field input[type="text"],
.field input[type="email"] {
  border-radius: var(--ui-radius-10);
  border: 1px solid var(--ui-border);
  padding: 0.45rem 0.7rem;
  font-size: 0.9rem;
  outline: none;
  background: var(--ui-surface-soft);
  transition: border 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
    background 0.15s ease-in-out;
}

.field input[type="text"]:focus,
.field input[type="email"]:focus {
  border-color: var(--ui-primary-1);
  background: var(--ui-surface);
  box-shadow: var(--ui-focus-ring);
}

/* Input file discreto */
.field input[type="file"] {
  padding: 0.25rem 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

/* ACCIONES */
.profile-actions {
  margin-top: 1.3rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .profile-container {
    border-radius: 20px;
  }

  .profile-picture {
    padding: 0 1.2rem 0.9rem;
  }

  .profile-content {
    padding: 0.4rem 1.2rem 1.3rem;
  }

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

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

@media (max-width: 600px) {
  .profile-picture {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: -50px;
  }

  .profile-picture img {
    width: 90px;
    height: 90px;
  }

  .profile-name {
    font-size: 1.15rem;
  }

  .profile-content h3 {
    font-size: 0.95rem;
  }
}
/* =========================
   ChatSidebar layout
========================= */
.chat-sidebar {
  width: 280px;
  min-width: 260px;
  max-width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 0.8rem 0.8rem 0.9rem;
  box-sizing: border-box;

  /* El fondo, borde y sombra principales los pone el layout */
  background: transparent;
  border-radius: 20px 0 0 20px;
  border: none;
  box-shadow: none;
}

/* Header del menú dentro del ChatSidebar (solo botón, compacto) */
.chat-sidebar-top {
  margin-bottom: 10px;
}

.chat-sidebar-top .page-header {
  margin: 0;
  gap: 8px;
}

.chat-sidebar-top .page-menu-btn {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(40, 30, 45, 0.12);
  backdrop-filter: blur(8px);
}

.chat-sidebar-top .page-menu-btn:hover {
  background: rgba(255, 255, 255, 0.9);
}

/* =========================
   Headers
========================= */
.chat-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}

.chat-sidebar-header-row {
  gap: 0.5rem;
}

.chat-sidebar-header h3,
.chat-sidebar-header h4 {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a687f;
}

.chat-sidebar-header h4 {
  margin-top: 0.3rem;
  font-weight: 500;
  color: #9785a2;
}

/* Botón "Crear canal" */
.chat-sidebar-create-channel {
  border-radius: 999px;
  border: 1px solid rgba(200, 183, 221, 0.8);
  background: rgba(244, 232, 255, 0.7);
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 500;
  color: #6e5c80;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease, transform 0.1s ease;
}

.chat-sidebar-create-channel:hover {
  background: #ffffff;
  border-color: #c8b7dd;
  box-shadow: 0 6px 16px rgba(175, 144, 200, 0.4);
  transform: translateY(-1px);
}

.chat-sidebar-create-channel:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(175, 144, 200, 0.35);
}

/* =========================
   Status / empty / error
========================= */
.chat-sidebar-status {
  font-size: 0.8rem;
  color: #9a8aa5;
  margin-bottom: 0.4rem;
}

.chat-sidebar-status.error {
  color: #d45c52;
}

.chat-sidebar-empty {
  font-size: 0.8rem;
  color: #b8a8c3;
  margin-bottom: 0.5rem;
}

/* =========================
   Threads list (channels + DMs)
========================= */
.chat-thread-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.6rem;
  max-height: 42vh;
  overflow-y: auto;
}

.chat-thread-list::-webkit-scrollbar {
  width: 5px;
}

.chat-thread-list::-webkit-scrollbar-thumb {
  background-color: #e0d6e6;
  border-radius: 3px;
}

.chat-thread {
  margin-bottom: 0.2rem;
}

/* Thread item (DM + Channel usan <button>) */
.chat-sidebar .thread-button,
.chat-sidebar .thread-button--channel {
  width: 100%;
  border: none;
  background: transparent;
  border-radius: 14px;
  padding: 0.42rem 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-align: left;
  cursor: pointer;
  justify-content: space-between; /* texto + badge */
  transition: background 0.15s ease-in-out, transform 0.1s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.chat-sidebar .thread-button:hover,
.chat-sidebar .thread-button--channel:hover {
  background: rgba(246, 240, 250, 0.9);
}

/* Active thread */
.chat-thread.active .thread-button,
.chat-thread.active .thread-button--channel {
  background: linear-gradient(135deg, #c8b7dd, #f4b8a4);
  box-shadow: none;
  transform: translateY(-1px);
}

/* Focus visible */
.chat-sidebar .thread-button:focus-visible,
.chat-sidebar .thread-button--channel:focus-visible,
.chat-sidebar-create-channel:focus-visible,
.chat-bubble:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(200, 183, 221, 0.35);
}

/* Avatar (channel / user) */
.chat-sidebar .thread-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, #f4b8a4, #f7cfb7);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-thread.active .thread-avatar {
  background: rgba(255, 255, 255, 0.24);
}

.chat-sidebar .avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-sidebar .avatar-fallback {
  font-size: 0.8rem;
  font-weight: 600;
  color: #fffaf6;
}

/* Text content */
.chat-sidebar .thread-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.chat-sidebar .thread-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: #2f2430;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-sidebar .thread-meta {
  margin-top: 0.08rem;
  font-size: 0.72rem;
  color: #a497b0;
}

/* Active text color */
.chat-thread.active .thread-title,
.chat-thread.active .thread-meta {
  color: #ffffff;
}

/* Unread badge */
.thread-unread-badge {
  margin-left: 8px;
  padding: 0 6px;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f97373, #fb923c);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(249, 115, 129, 0.45);
}

.chat-thread.active .thread-unread-badge {
  background: rgba(255, 255, 255, 0.9);
  color: #c2410c;
  box-shadow: none;
}

/* =========================
   Available users
========================= */
.chat-bubbles-wrapper {
  margin-top: 0.3rem;
  max-height: 32vh;
  overflow-y: auto;
  padding-right: 2px;
}

.chat-bubbles-wrapper::-webkit-scrollbar {
  width: 4px;
}

.chat-bubbles-wrapper::-webkit-scrollbar-thumb {
  background-color: #e0d6e6;
  border-radius: 3px;
}

.chat-sidebar .no-users {
  font-size: 0.8rem;
  color: #b8a8c3;
  margin: 0.3rem 0 0.2rem;
}

.chat-bubble {
  width: 100%;
  border-radius: 999px;
  border: 1px solid #e0d6e6;
  background: #faf5fc;
  padding: 0.4rem 0.55rem;
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out, transform 0.1s ease-in-out;
}

.chat-bubble:hover {
  background: #ffffff;
  border-color: #c8b7dd;
  box-shadow: none;
  transform: translateY(-1px);
}

/* Avatar bubble */
.chat-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f1ebfb, #e0d5f6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: #af90c8;
  overflow: hidden;
  flex-shrink: 0;
}

.chat-avatar .avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bubble texts */
.chat-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-info strong {
  font-size: 0.85rem;
  color: #2f2430;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-info small {
  font-size: 0.7rem;
  color: #8f7fa0;
}

/* =========================
   Responsive
========================= */
@media (max-width: 1024px) {
  .chat-sidebar {
    width: 260px;
    border-radius: 18px 0 0 18px;
  }
}

@media (max-width: 800px) {
  .chat-sidebar {
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-bottom: 1rem;
    border-radius: 18px;
  }
}
/* CONTENEDOR PRINCIPAL (tarjeta tipo Slack con 2 columnas) */
.chat-shell {
  position: relative;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;

  display: flex;
  align-items: stretch;
  gap: 0;

  height: calc(100vh - 3rem); /* ✅ clave: alto fijo */
  min-height: 0;              /* ✅ permite que los hijos “encojan” */
  overflow: hidden;           /* ✅ nada del contenido puede empujar fuera */

  border-radius: 26px;
  border: 1px solid #f0e4f3;
  background: radial-gradient(
    circle at top left,
    #f4ecfb 0,
    #fbf7fd 38%,
    #ffffff 100%
  );
  box-shadow: 0 22px 55px rgba(31, 41, 55, 0.10);
}

/* Panel izquierdo (sidebar) y derecho (chat) ocupan toda la altura */
.chat-panel-left,
.chat-panel-right {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Sidebar: columna fija */
.chat-panel-left {
  flex-shrink: 0;
}

/* Chat principal: ocupa el resto */
.chat-panel-right {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden; /* ✅ */
}

/* --- Integración tipo Slack: sidebar + chatroom pegados --- */

/* Sidebar dentro del layout de chats */
.chat-panel-left .chat-sidebar {
  margin-right: 0; /* 👈 anulamos el margin-right del CSS original */
  height: 100%;

  border-radius: 20px 0 0 20px;
  border: none;
  box-shadow: none;

  background: linear-gradient(145deg, #f4ecfb, #fdfbff);
  border-right: 1px solid #f0e4f3;
}

/* ChatRoom dentro del layout de chats */
.chat-panel-right .chatroom-container {
  height: 100%;

  border-radius: 0 20px 20px 0;
  border: none;
  border-left: 1px solid #f0e4f3;
  box-shadow: none; /* la sombra la pone la tarjeta grande (.chat-shell) */
}

/* Aseguramos que el contenido del panel derecho llena el alto */
.chat-panel-right > * {
  flex: 1;
  min-height: 0;
}

/* --- RESPONSIVE --- */

/* Pantallas medianas: ajustamos padding y radios */
@media (max-width: 1024px) {
  .chat-shell {
    max-width: 100%;
    padding: 0.8rem;
    border-radius: 22px;
  }
}

/* Móviles: apilamos sidebar y chat, cada uno como tarjeta independiente otra vez */
@media (max-width: 800px) {
  .chat-shell {
    flex-direction: column;
    padding: 0.8rem 0.6rem 1rem;
    border-radius: 20px;
  }

  .chat-panel-left,
  .chat-panel-right {
    width: 100%;
  }

  .chat-panel-left .chat-sidebar,
  .chat-panel-right .chatroom-container {
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(58, 43, 54, 0.12);
    border: 1px solid #f0e4f3;
    margin-bottom: 0.6rem;
  }

  /* pequeño ajuste para que el chat no tenga borde doble arriba */
  .chat-panel-right .chatroom-container {
    border-top: 1px solid #f0e4f3;
  }
}

@media (max-width: 480px) {
  .chat-shell {
    padding: 0.7rem 0.4rem 0.9rem;
  }
}
/* =========================
   ChatRoom layout
========================= */
.chatroom-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
  background: transparent;
  padding: 0.85rem 0.9rem 0.8rem 0.85rem;
}

/* =========================
   Header
========================= */
.chatroom-container .chat-header {
  padding-bottom: 0.65rem;
  margin-bottom: 0.65rem;
  border-bottom: 1px solid #f0e4f3;
}

.chatroom-container .chat-header-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.chatroom-container .chat-header-row-between {
  justify-content: space-between;
}

.chatroom-container .chat-header-main {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.chatroom-container .chat-header-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, #f1ebfb, #e0d5f6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chatroom-container .chat-header-avatar .avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chatroom-container .chat-header-avatar .avatar-fallback {
  font-size: 0.9rem;
  font-weight: 600;
  color: #af90c8;
}

.chatroom-container .chat-header-texts {
  display: flex;
  flex-direction: column;
}

.chatroom-container .chat-header-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #2f2430;
}

.chatroom-container .chat-header-sub {
  margin: 0.08rem 0 0;
  font-size: 0.8rem;
  color: #8f7fa0;
}

/* Participantes del canal (chips) */
.chat-group-participants {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chat-group-participant-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(241, 235, 251, 0.95);
  border: 1px solid rgba(200, 183, 221, 0.7);
  font-size: 0.72rem;
  color: #2f2430;
}

.chip-avatar {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #c8b7dd, #f4b8a4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: #ffffff;
}

.chip-name {
  max-width: 140px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Acciones header */
.chat-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Botón engranaje */
.chat-header-settings-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(200, 183, 221, 0.9);
  background: rgba(246, 240, 250, 0.9);
  color: #6e5c80;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.chat-header-settings-btn:hover {
  background: #ffffff;
  border-color: #c8b7dd;
  transform: translateY(-1px);
}

/* =========================
   Focus visible (accesible y pro)
========================= */
.chat-header-settings-btn:focus-visible,
.chat-attach-plus:focus-visible,
.chat-send-inside:focus-visible,
.chatroom-container .load-more:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(200, 183, 221, 0.35);
}

/* =========================
   Messages area
========================= */
.chatroom-container .chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;

  padding: 0.5rem 0.25rem 0.7rem;
  border-radius: 16px;

  /* plano, “crudo”, para que el blanco de burbuja destaque */
  background: #fbf8fd;
  border: 1px solid rgba(240, 228, 243, 0.95);

  /* un pelín de profundidad sin ensuciar */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);

  margin-bottom: 0.75rem;
  box-sizing: border-box;
}

.chatroom-container .chat-messages::-webkit-scrollbar {
  width: 6px;
}

.chatroom-container .chat-messages::-webkit-scrollbar-thumb {
  background-color: #e0d6e6;
  border-radius: 3px;
}

/* Botón "Cargar más" */
.chatroom-container .load-more {
  display: inline-flex;
  margin: 0 0 0.4rem 0.2rem;
  padding: 0.25rem 0.65rem;
  font-size: 0.78rem;
  border-radius: 999px;
  border: 1px solid #e0d6e6;
  background: #faf5fc;
  color: #6e5c80;
  cursor: pointer;
  transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.chatroom-container .load-more:hover:not(:disabled) {
  background: #ffffff;
  border-color: #c8b7dd;
}

.chatroom-container .load-more:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Mensajes */
.chat-message-row {
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}

.chat-message-row.sent {
  justify-content: flex-end;
}

.chat-message-row.received {
  justify-content: flex-start;
}

.chat-message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, #f1ebfb, #e0d5f6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: #af90c8;
}

.chat-message-avatar.mine {
  background: linear-gradient(135deg, #f4b8a4, #f7cfb7);
  color: #fffaf6;
}

.chat-message-avatar .avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-message-bubble {
  max-width: 65%;
  padding: 0.38rem 0.62rem; /* menos “relleno” */
  border-radius: 10px; /* menos redonda */
  font-size: 0.9rem;
  line-height: 1.45;
  box-sizing: border-box;

  /* texto gris elegante */
  color: #3f3644;

  /* sensación “card” suave */
  box-shadow: 0 8px 18px rgba(58, 43, 54, 0.06);
}

.chat-message-bubble.received {
  background: #ffffff; /* plano */
  border: 1px solid rgba(224, 214, 230, 0.85);

  /* acento clínico (lavanda) para que no se confunda con el fondo */
  border-left: 3px solid rgba(200, 183, 221, 0.95);

  border-bottom-left-radius: 6px;
}

.chat-message-bubble.sent {
  background: #ffffff;
  border: 1px solid rgba(200, 183, 221, 0.55);
  border-right: 3px solid rgba(244, 184, 164, 0.95);
  border-bottom-right-radius: 6px;
  color: #3a3140;
  box-shadow: 0 8px 18px rgba(58, 43, 54, 0.05);
}

.message-content {
  display: flex;
  flex-direction: column;
  gap: 6px;

  white-space: pre-wrap;
  word-wrap: break-word;
}

.message-content p {
  margin: 0;
}

.chat-mention {
  display: inline-block;
  padding: 0.05rem 0.3rem;
  border-radius: 7px;
  font-weight: 650;

  background: rgba(200, 183, 221, 0.22);
  border: 1px solid rgba(200, 183, 221, 0.35);
  color: #4d385d;
}

.message-meta {
  display: block;
  margin-top: 2px;
  font-size: 0.7rem;
  color: #9a8aa5;
  text-align: right;
}

.chat-typing-indicator {
  margin-top: 0.3rem;
  padding: 0.25rem 0.65rem;
  font-size: 0.78rem;
  color: #8f7fa0;
}

/* =========================
   Input area ( + outside, send inside )
========================= */
.chat-input {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border-top: 1px solid #f0e4f3;
  padding-top: 0.55rem;
  margin-top: 0.1rem;
}

/* + redondo fuera */
.chat-attach-plus {
  width: 30px;
  height: 30px;
  border-radius: 999px;

  /* PRO: lavanda sólido + borde grueso */
  background: #af90c8;
  border: 2px solid rgba(200, 183, 221, 0.95);
  color: #ffffff;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  flex-shrink: 0;

  box-shadow: 0 10px 20px rgba(109, 84, 140, 0.16);
  transition: background 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease,
    transform 0.15s ease;
}

.chat-attach-plus:hover:not(:disabled) {
  background: #a38fb5;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(109, 84, 140, 0.22);
}

.chat-attach-plus:disabled {
  opacity: 0.5;
  cursor: default;
}

/* wrapper del textarea para poder meter el botón dentro */
.chat-input-editor {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
}

/* textarea igual que tenías, pero con padding-right para que no choque con “enviar” */
.chat-input-editor textarea {
  width: 100%;
  resize: none;

  border-radius: 14px;
  border: 1px solid #e0d6e6;

  /* espacio para el botón enviar dentro */
  padding: 0.45rem 2.6rem 0.45rem 0.7rem;

  font-size: 0.9rem;
  line-height: 1.35;
  outline: none;
  background: #faf5fc;
  max-height: 120px;

  transition: border 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
    background 0.15s ease-in-out;

  font-weight: 500;
  letter-spacing: 0.01em;
  color: #3f3644;
}

.chat-input-editor textarea::placeholder {
  font-weight: 400;
  color: #a497b0;
}

.chat-input-editor textarea:focus {
  border-color: rgba(200, 183, 221, 0.9);
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(200, 183, 221, 0.22);
}

/* botón enviar dentro: sin borde ni relleno, solo hover suave */
.chat-send-inside {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);

  width: 28px;
  height: 28px;

  border: none;
  background: transparent;
  border-radius: 8px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #8f7fa0;
  cursor: pointer;

  transition: background 0.15s ease, color 0.15s ease, opacity 0.2s ease;
}

.chat-send-inside:hover:not(:disabled) {
  background: rgba(200, 183, 221, 0.14);
  color: #4d385d;
}

.chat-send-inside:disabled {
  opacity: 0.45;
  cursor: default;
}

/* =========================
   Attachments in messages
========================= */
.message-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.message-attachment.thumb {
  max-width: 220px;
  border-radius: 16px;
}

.attachment-thumb {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
}

.attachment-thumb-media {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
}

.attachment-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease-out;
}

.attachment-thumb:hover .attachment-overlay {
  opacity: 1;
}

.attachment-overlay-icon {
  color: #e5e7eb;
  width: 22px;
  height: 22px;
}

.message-attachment.file-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.4);
  cursor: pointer;
}

.message-attachment.file-chip:hover {
  background: rgba(79, 70, 229, 0.08);
  border-color: rgba(79, 70, 229, 0.5);
}

.file-chip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-chip-text {
  display: flex;
  flex-direction: column;
}

.file-chip-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: #0f172a;
}

.file-chip-hint {
  font-size: 0.7rem;
  color: #6b7280;
}

/* =========================
   Modal base (used by preview + manage)
========================= */
.chat-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.chat-modal-backdrop--blur {
  background: rgba(47, 36, 48, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.chat-modal {
  width: 100%;
  box-sizing: border-box;
}

/* =========================
   Modal: Manage channel
========================= */
.manage-users-modal {
  position: relative;
  max-width: 560px;
  border-radius: 18px;
  border: 1px solid #f0e4f3;
  background: linear-gradient(180deg, #ffffff 0%, #fbf7fd 100%);
  color: #2f2430;
  box-shadow: 0 18px 44px rgba(58, 43, 54, 0.18);
  padding: 16px 18px 16px;
}

/* Close button (top-right) */
.manage-users-modal .chat-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #e0d6e6;
  background: #ffffff;
  color: #7a687f;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.manage-users-modal .chat-modal-close:hover {
  background: #faf5fc;
  border-color: #ccb8df;
  transform: translateY(-1px);
}

/* Header */
.manage-users-modal .chat-modal-header {
  padding-right: 44px;
  margin-bottom: 10px;
}

.manage-users-modal .chat-modal-title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: #2f2430;
}

.manage-users-modal .chat-modal-subtitle {
  margin: 4px 0 0;
  font-size: 0.8rem;
  color: #8f7fa0;
}

/* Body */
.manage-users-modal .chat-modal-body {
  max-height: 70vh;
  overflow-y: auto;
  padding-top: 6px;
  padding-right: 2px;
}

.manage-users-modal .chat-modal-body::-webkit-scrollbar {
  width: 5px;
}

.manage-users-modal .chat-modal-body::-webkit-scrollbar-thumb {
  background-color: #e0d6e6;
  border-radius: 3px;
}

/* Sections */
.manage-users-section {
  margin-top: 12px;
}

.manage-users-section:first-child {
  margin-top: 0;
}

.manage-users-section-title {
  margin: 6px 0 8px;
  font-size: 0.78rem;
  font-weight: 650;
  color: #8f7fa0;
  letter-spacing: 0.02em;
}

/* List items inside modal */
.chat-add-users-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.chat-add-users-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(240, 228, 243, 0.95);
  background: rgba(250, 245, 252, 0.8);
  margin-bottom: 8px;

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

.chat-add-users-item:hover {
  background: rgba(246, 240, 250, 0.95);
  border-color: rgba(200, 183, 221, 0.85);
  transform: translateY(-1px);
}

.chat-add-users-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.chat-add-users-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(135deg, #f1ebfb, #e0d5f6);
  border: 1px solid rgba(200, 183, 221, 0.7);
  color: #af90c8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  flex-shrink: 0;
}

.chat-add-users-avatar .avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-add-users-texts {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.1;
}

.chat-add-users-name {
  font-size: 0.9rem;
  font-weight: 650;
  color: #2f2430;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-add-users-role {
  font-size: 0.75rem;
  color: #8f7fa0;
  margin-top: 2px;
}

.chat-add-users-empty {
  font-size: 0.82rem;
  color: #a497b0;
  padding: 6px 2px;
}

/* Remove button + tag */
.manage-users-remove-btn {
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.08);
  color: #b91c1c;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
  white-space: nowrap;
}

.manage-users-remove-btn:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.5);
  transform: translateY(-1px);
}

.manage-users-fixed-tag {
  font-size: 0.78rem;
  color: #a497b0;
  padding: 0 6px;
  white-space: nowrap;
}

/* ✅ Wrapper del FORM del modal (body + footer) */
.manage-users-form {
  display: flex;
  flex-direction: column;
}

/* Footer un pelín más compacto + centrado vertical */
.manage-users-footer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(240, 228, 243, 0.95);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

/* Channel form inside modal */
.manage-channel-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (max-width: 520px) {
  .manage-users-footer {
    flex-direction: column-reverse;
  }

  .manage-users-footer .btn-primary,
  .manage-users-footer .btn-danger {
    width: 100%;
  }
}

@media (min-width: 720px) {
  .manage-channel-form {
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
  }

  .manage-channel-error,
  .manage-channel-actions {
    grid-column: 1 / -1;
  }
}

.manage-channel-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 650;
  color: #8f7fa0;
  margin-bottom: 6px;
}

.manage-channel-field input {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(240, 228, 243, 0.95);
  background: rgba(250, 245, 252, 0.75);
  padding: 10px 12px;
  outline: none;
  color: #2f2430;
}

.manage-channel-field input:focus {
  border-color: rgba(200, 183, 221, 0.9);
  box-shadow: 0 0 0 2px rgba(200, 183, 221, 0.22);
}

.manage-channel-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}

.manage-channel-error {
  padding: 0.55rem 0.75rem;
  border-radius: 14px;
  border: 1px solid rgba(209, 103, 115, 0.35);
  background: rgba(209, 103, 115, 0.08);
  color: #b5475c;
  font-size: 0.82rem;
}

/* =========================
   Modal: Preview attachment
========================= */
.chat-preview-modal {
  max-width: 720px;
  width: 100%;
  background: #0f172a;
  color: #e5e7eb;
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.35);
}

/* =========================
   Preview modal: X arriba a la derecha
========================= */
.chat-preview-modal {
  position: relative; /* clave para que el absolute de la X funcione aquí */
}

.chat-preview-modal .chat-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;

  width: 34px;
  height: 34px;
  border-radius: 999px;

  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(2, 6, 23, 0.65);
  color: #e5e7eb;

  font-size: 1rem;
  line-height: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  z-index: 2; /* para que quede por encima del header */
}

.chat-preview-modal .chat-modal-close:hover {
  background: rgba(2, 6, 23, 0.85);
  border-color: rgba(148, 163, 184, 0.6);
  transform: translateY(-1px);
}

.chat-preview-body {
  padding: 24px;
  background: #020617;
  border-radius: 20px;
  max-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.chat-preview-image {
  max-width: 100%;
  max-height: 56vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
}

.chat-preview-video {
  max-width: 100%;
  max-height: 56vh;
  width: auto;
  height: auto;
  border-radius: 16px;
}

.chat-preview-iframe {
  width: 100%;
  height: 60vh;
  border: 0;
  border-radius: 16px;
  background: #0b1220;
}

.chat-preview-generic {
  color: #e5e7eb;
  font-size: 0.9rem;
  text-align: center;
}

.chat-modal-footer {
  margin-top: 16px;
  padding: 0 24px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* =========================
   Responsive
========================= */
@media (max-width: 900px) {
  .chatroom-container {
    padding: 0.75rem 0.7rem 0.7rem 0.7rem;
    margin-top: 0.6rem;
  }

  .chat-message-bubble {
    max-width: 80%;
  }
}

@media (max-width: 520px) {
  .manage-users-modal {
    max-width: calc(100vw - 24px);
    padding: 14px 14px;
    border-radius: 16px;
  }
}
/* Contenedor general del asistente */
.assistant-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 1.8rem 2rem;
  box-sizing: border-box;
}

/* Sección hero: saludo + orb AI */
.assistant-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 1.7rem;
  border-radius: 22px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.96),
    rgba(246, 240, 250, 0.96)
  );
  box-shadow: 0 18px 45px rgba(58, 43, 54, 0.12);
  backdrop-filter: blur(18px);
  border: 1px solid #f0e4f3;
}

.assistant-hero-text {
  max-width: 60%;
}

.assistant-hero-greeting {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: #a38fb5;
  text-transform: uppercase;
}

.assistant-hero-title {
  margin: 0 0 0.4rem;
  font-size: 1.9rem;
  line-height: 1.2;
  font-weight: 600;
  color: #2f2430;
}

.assistant-hero-subtitle {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #7a687f;
}

/* Orb AI: lavanda + melocotón */
.assistant-hero-orb {
  flex-shrink: 0;
  width: 112px;
  height: 112px;
  border-radius: 999px;
  background: radial-gradient(circle at top left, #ffffff, #c8b7dd, #f4b8a4);
  box-shadow: 0 12px 30px rgba(140, 113, 163, 0.5),
    0 0 0 8px rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

.assistant-hero-orb-inner {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 20%, #ffffff, #e5d7f0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #4d385d;
  text-transform: uppercase;
  font-size: 0.8rem;
}

/* Tarjeta principal de chat */
.assistant-chat-card {
  margin-top: 1.6rem;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(58, 43, 54, 0.12);
  padding: 1.1rem 1.3rem 1.2rem;
  border: 1px solid #f0e4f3;
  box-sizing: border-box;
}

/* Cabecera de la tarjeta */
.assistant-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid #f0e4f3;
  margin-bottom: 0.8rem;
}

.assistant-chat-header-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.assistant-chat-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #2f2430;
}

.assistant-chat-status {
  margin: 0;
  font-size: 0.8rem;
  color: #a28fb3;
}

/* Botón limpiar, estilo píldora */
.clear-btn {
  background: #f6f0fa;
  border-radius: 999px;
  border: 1px solid #e3d7ef;
  color: #7a687f;
  padding: 0.35rem 0.9rem;
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: all 0.2s ease-in-out;
}

.clear-btn:hover:not(:disabled) {
  background: #ece0f4;
  border-color: #c8b7dd;
}

.clear-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Área de mensajes */
.assistant-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.15rem 0.15rem 0.45rem;
  display: flex;
  flex-direction: column;
}

.assistant-placeholder {
  text-align: center;
  color: #b6a5c3;
  margin: 1.2rem 0;
  font-size: 0.9rem;
}

/* Fila de mensaje (avatar + burbuja) */
.assistant-message-row {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.assistant-message-row.assistant {
  justify-content: flex-start;
}

.assistant-message-row.user {
  justify-content: flex-end;
}

/* Avatar base */
.assistant-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #ffffff;
}

/* Avatar IA: lavanda profunda */
.assistant-avatar.ai {
  background: radial-gradient(circle at 20% 0, #ffffff, #af90c8, #4c365f);
  box-shadow: 0 6px 14px rgba(109, 84, 140, 0.5);
}

/* Avatar usuario: coral melocotón */
.assistant-avatar.user {
  background: linear-gradient(135deg, #f4b8a4, #f7cfb7);
  box-shadow: 0 6px 14px rgba(191, 114, 97, 0.4);
  overflow: hidden;
}

.assistant-avatar.user img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Burbuja de mensaje */
.assistant-message-bubble {
  max-width: 68%;
  padding: 0.6rem 0.85rem;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.45;
  box-sizing: border-box;
}

/* Burbuja del asistente */
.assistant-message-bubble.assistant {
  background: #f6f0fa;
  color: #2f2430;
  border-bottom-left-radius: 4px;
  border: 1px solid #e3d7ef;
}

/* Burbuja del usuario */
.assistant-message-bubble.user {
  background: linear-gradient(135deg, #c8b7dd, #f4b8a4);
  color: #fffaf6;
  border-bottom-right-radius: 4px;
  box-shadow: 0 6px 16px rgba(200, 183, 221, 0.6);
}

/* Markdown dentro de las burbujas */
.assistant-message-bubble p {
  margin: 0 0 0.3rem;
}

.assistant-message-bubble p:last-child {
  margin-bottom: 0;
}

.assistant-message-bubble ul,
.assistant-message-bubble ol {
  margin: 0.4rem 0 0.4rem 1.2rem;
  padding: 0;
}

.assistant-message-bubble li {
  margin-bottom: 0.15rem;
}

.assistant-message-bubble code {
  font-size: 0.85rem;
  background: rgba(0, 0, 0, 0.04);
  padding: 0.1rem 0.25rem;
  border-radius: 4px;
}

.assistant-message-bubble pre {
  margin: 0.45rem 0;
  padding: 0.55rem 0.7rem;
  background: #121212;
  color: #f3f3f3;
  border-radius: 10px;
  overflow-x: auto;
  font-size: 0.82rem;
}

.assistant-message-bubble a {
  color: #af90c8;
  text-decoration: underline;
}

.assistant-message-bubble a:hover {
  text-decoration: none;
}

/* Error */
.assistant-error {
  color: #d6514c;
  font-size: 0.85rem;
  margin: 0.1rem 0 0.6rem;
}

/* Input + botón */
.assistant-input-area {
  display: flex;
  gap: 0.55rem;
  border-top: 1px solid #f0e4f3;
  padding-top: 0.7rem;
  margin-top: 0.3rem;
}

.assistant-input-area input {
  flex: 1;
  border-radius: 999px;
  border: 1px solid #e0d6e6;
  padding: 0.65rem 1.1rem;
  font-size: 0.95rem;
  outline: none;
  background: #fbf8fd;
  color: #2f2430;
  transition: border 0.2s ease-in-out, box-shadow 0.2s ease-in-out,
    background 0.2s ease-in-out;
}

.assistant-input-area input::placeholder {
  color: #b09fbe;
}

.assistant-input-area input:focus {
  border-color: #c8b7dd;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(200, 183, 221, 0.32);
}

.assistant-input-area input:disabled {
  opacity: 0.7;
}

/* Botón enviar: mismo estilo btn-primary (lavanda + melocotón) */
.assistant-input-area button {
  border: none;
  border-radius: 999px;
  padding: 0.65rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 500;
  background: linear-gradient(135deg, #c8b7dd, #f4b8a4);
  color: #ffffff;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(200, 183, 221, 0.55);
  transition: transform 0.1s ease-in-out, box-shadow 0.2s ease-in-out,
    opacity 0.2s ease-in-out;
}

.assistant-input-area button:hover:not(:disabled) {
  box-shadow: 0 10px 22px rgba(200, 183, 221, 0.75);
  transform: translateY(-1px);
}

.assistant-input-area button:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 6px 14px rgba(200, 183, 221, 0.5);
}

.assistant-input-area button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Scrollbar suave */
.assistant-messages::-webkit-scrollbar {
  width: 6px;
}

.assistant-messages::-webkit-scrollbar-thumb {
  background-color: #dccfe8;
  border-radius: 3px;
}
/* Botón menú integrado en el saludo (solo aquí) */
.assistant-hero-greeting {
  display: flex;
  align-items: center;
  gap: 10px;
}

.assistant-hero-greeting {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: #a38fb5;
  text-transform: uppercase;

  display: flex;
  align-items: center;
  gap: 10px;
}

.assistant-hero-greeting .page-header {
  margin: 0;
  padding: 0;
  width: auto;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

/* Responsive: más compacto en pantallas pequeñas */
@media (max-width: 900px) {
  .assistant-container {
    padding: 1.2rem 1rem;
  }

  .assistant-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .assistant-hero-text {
    max-width: 100%;
  }

  .assistant-hero-orb {
    align-self: center;
    margin-top: 0.4rem;
  }

  .assistant-chat-card {
    margin-top: 1.1rem;
  }

  .assistant-message-bubble {
    max-width: 82%;
  }

  .assistant-menu-btn {
    width: 28px;
    height: 28px;
  }
}
.crm-pipeline-container {
  width: 100%;
  background: linear-gradient(180deg, #f6f0fa 0%, #ffffff 45%, #ffffff 100%);
  border-radius: 24px;
  border: 1px solid var(--ui-border-soft);
  box-shadow: var(--ui-shadow-card);
  padding: clamp(1rem, 2vw, 1.4rem);
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  min-height: 0;
}

.crm-pipeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--ui-border-soft);
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.crm-pipeline-header h2 {
  margin: 0 0 0.2rem;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ui-text);
}

.crm-pipeline-subtitle {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ui-text-muted);
}

.crm-pipeline-header-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.crm-pipeline-selector {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: var(--ui-text-muted);
}

.crm-pipeline-selector label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #b2a3bf;
}

.crm-pipeline-selector select {
  border-radius: var(--ui-radius-pill);
  border: 1px solid var(--ui-border);
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
  background: #fbf8fd;
  color: var(--ui-text);
  outline: none;
  min-width: clamp(180px, 22vw, 240px);
  cursor: pointer;
  transition: border 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.crm-pipeline-selector select:focus {
  border-color: var(--ui-primary-1);
  background: #ffffff;
  box-shadow: var(--ui-focus-ring);
}

/* Form Nuevo caso */
.crm-new-deal-form-wrapper {
  margin: 1.2rem 0 0.9rem;
  border-radius: var(--ui-radius-18);
  border: 1px solid var(--ui-border-soft);
  background: radial-gradient(circle at top left, #f6f0fa 0, #fdfbff 40%, #ffffff 100%);
  padding: 0.9rem 1rem 0.8rem;
  box-sizing: border-box;
}

.crm-new-deal-hint {
  font-size: 0.8rem;
  color: var(--ui-text-soft);
  margin-bottom: 0.5rem;
}

.crm-new-deal-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.crm-new-deal-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.8rem 1rem;
}

.crm-new-deal-field {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}

.crm-new-deal-field label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ui-text-muted);
}

.crm-new-deal-field input,
.crm-new-deal-field select {
  border-radius: var(--ui-radius-10);
  border: 1px solid var(--ui-border);
  padding: 0.45rem 0.7rem;
  font-size: 0.9rem;
  outline: none;
  background: #fbf8fd;
  color: var(--ui-text);
  box-sizing: border-box;
  transition: border 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.crm-new-deal-field input:focus,
.crm-new-deal-field select:focus {
  border-color: var(--ui-primary-1);
  background: #ffffff;
  box-shadow: var(--ui-focus-ring);
}

.crm-new-deal-field select:disabled {
  background: #f4eff8;
  cursor: not-allowed;
}

.crm-new-deal-error {
  border-radius: var(--ui-radius-10);
  border: 1px solid rgba(212, 92, 82, 0.9);
  background: rgba(240, 125, 122, 0.14);
  color: #d45c52;
  font-size: 0.8rem;
  padding: 0.4rem 0.6rem;
}

.crm-new-deal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.2rem;
  flex-wrap: wrap;
}

.crm-new-deal-note {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  color: var(--ui-text-soft);
}

/* Board Kanban */
.crm-pipeline-board {
  margin-top: 0.8rem;
  display: flex;
  align-items: stretch;
  gap: 0.8rem;
  overflow-x: auto;
  padding-bottom: 0.2rem;
  scrollbar-width: thin;
  scroll-snap-type: x mandatory;
  scroll-padding: 12px;

  flex: 1;
  min-height: 0;
}

.crm-pipeline-board::-webkit-scrollbar {
  height: 5px;
}

.crm-pipeline-board::-webkit-scrollbar-thumb {
  background-color: #d3c5e2;
  border-radius: 999px;
}

/* Columna */
.crm-pipeline-column {
  background: var(--ui-surface);
  border-radius: var(--ui-radius-18);
  border: 1px solid var(--ui-border-soft);
  box-shadow: 0 8px 20px rgba(58, 43, 54, 0.08);

  flex: 0 0 clamp(250px, 28vw, 330px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  scroll-snap-align: start;
}

.crm-pipeline-column-header {
  padding: 0.55rem 0.75rem 0.45rem;
  border-bottom: 1px solid var(--ui-border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.crm-pipeline-column-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ui-text);
}

.crm-pipeline-column-count {
  font-size: 0.78rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-surface-lilac);
  color: #5c4867;
  border: 1px solid #e3d7ef;
}

.crm-pipeline-column-body {
  padding: 0.8rem 0.85rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
  min-height: 0;
}

.crm-pipeline-empty {
  font-size: 0.8rem;
  color: #b2a3bf;
  padding: 0.4rem 0.2rem;
}

/* Card */
.crm-pipeline-card {
  border-radius: var(--ui-radius-18);
  border: 1px solid var(--ui-border-soft);
  background: radial-gradient(circle at top left, #f6f0fa 0, #fdfbff 45%, #ffffff 100%);
  padding: 1rem 1rem 0.9rem;
  box-shadow: 0 10px 22px rgba(58, 43, 54, 0.12);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.82rem;
  position: relative;
  min-height: 180px;
}

.crm-pipeline-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ui-text);
  padding-right: 1.4rem;
  overflow-wrap: anywhere;
}

.crm-pipeline-card-subtitle {
  font-size: 0.82rem;
  color: var(--ui-text-muted);
  margin-bottom: 0.15rem;
}

.crm-pipeline-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.crm-pipeline-card-label {
  font-size: 0.78rem;
  color: var(--ui-text-soft);
}

.crm-pipeline-card-value {
  font-size: 0.82rem;
  font-weight: 500;
  color: #5c4867;
}

.crm-pipeline-card-footer {
  margin-top: 0.45rem;
  display: flex;
  gap: 0.35rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Delete X */
.crm-pipeline-card-delete {
  position: absolute;
  z-index: 2;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: var(--ui-radius-pill);
  border: 1px solid var(--ui-border);
  background: rgba(255, 255, 255, 0.95);
  color: #d45c52;
  font-size: 0.9rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(58, 43, 54, 0.18);
  padding: 0;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}

.crm-pipeline-card-delete:hover {
  background: #ffe9ec;
  border-color: rgba(212, 92, 82, 0.9);
  transform: translateY(-1px);
}

.crm-deal-owner-select-inline {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 500;
  color: #5c4867;
  cursor: pointer;
  min-width: 0;
}

.crm-deal-owner-select-inline:focus {
  outline: none;
  text-decoration: underline;
}

.crm-deal-owner-select-inline:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 900px) {
  .crm-pipeline-header {
    align-items: flex-start;
  }

  .crm-pipeline-header-actions {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 600px) {
  .crm-pipeline-header-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .crm-pipeline-selector select {
    width: 100%;
  }

  .crm-pipeline-card-footer {
    justify-content: flex-start;
  }
}
.crm-wa-card {
  border-radius: 18px;
  border: 1px solid #f0e4f3;
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(58, 43, 54, 0.12);
  padding: 0.95rem 1rem;
  box-sizing: border-box;
  margin: 15px 0;
}

/* Header más "CRM" */
.crm-wa-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #f0e4f3;
}

.crm-wa-header-left {
  min-width: 0;
}

.crm-wa-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  color: #2f2430;
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.crm-wa-subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: #7a687f;
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.crm-wa-header-right {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.crm-wa-contact {
  border-radius: 14px;
  border: 1px solid #f0e4f3;
  background: rgba(246, 240, 250, 0.55);
  padding: 0.45rem 0.6rem;
  min-width: 0;
  max-width: 240px;
}

.crm-wa-contact-name {
  font-size: 0.86rem;
  font-weight: 700;
  color: #2f2430;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.crm-wa-contact-meta {
  margin-top: 2px;
  font-size: 0.78rem;
  color: #7a687f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Form */
.crm-wa-form {
  margin-top: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.crm-wa-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.crm-wa-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.crm-wa-field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #7a687f;
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.crm-wa-input,
.crm-wa-textarea {
  border-radius: 12px;
  border: 1px solid #e0d6e6;
  padding: 10px 12px;
  font-size: 0.95rem;
  outline: none;
  background: #fbf8fd;
  color: #2f2430;
  transition: border 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background 0.15s ease-in-out;
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  box-sizing: border-box;
}

.crm-wa-textarea {
  resize: vertical;
  min-height: 120px;
}

.crm-wa-input:focus,
.crm-wa-textarea:focus {
  border-color: #c8b7dd;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(200, 183, 221, 0.32);
}

/* Acciones: cerrar + enviar (dentro del form) */
.crm-wa-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

.crm-wa-btn {
  border-radius: 999px;
  padding: 0.55rem 1.05rem;
  font-size: 0.86rem;
  font-weight: 650;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.1s ease-in-out, box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out,
    background 0.15s ease-in-out, border-color 0.15s ease-in-out;
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  white-space: nowrap;
}

.crm-wa-btn--primary {
  border: none;
  background: linear-gradient(135deg, #c8b7dd, #f4b8a4);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(200, 183, 221, 0.55);
}

.crm-wa-btn--primary:hover:not(:disabled) {
  box-shadow: 0 14px 28px rgba(200, 183, 221, 0.8);
  transform: translateY(-1px);
}

.crm-wa-btn--ghost {
  background: rgba(246, 240, 250, 0.85);
  border-color: #ddcfe7;
  color: #6d5a74;
}

.crm-wa-btn--ghost:hover {
  background: #ffffff;
  border-color: #c8b7dd;
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(58, 43, 54, 0.10);
}

.crm-wa-btn:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
  box-shadow: none;
}

/* Mensajes de error */
.crm-wa-message {
  border-radius: 14px;
  border: 1px solid transparent;
  padding: 10px 12px;
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.92rem;
  line-height: 1.45;
}

.crm-wa-message--error {
  background: rgba(212, 92, 82, 0.12);
  border-color: rgba(212, 92, 82, 0.25);
  color: #7a1f1b;
}

.crm-wa-divider {
  margin: 0.9rem 0;
  border-top: 1px solid #f0e4f3;
}

/* Thread: scroll como CRM */
.crm-wa-thread {
  border-radius: 14px;
  border: 1px solid #f0e4f3;
  background: rgba(246, 240, 250, 0.35);
  padding: 0.65rem;
  box-sizing: border-box;

  max-height: 320px;
  overflow: auto;

  display: flex;
  flex-direction: column;
  gap: 8px;
}

.crm-wa-empty {
  font-size: 0.9rem;
  color: #7a687f;
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Burbujas */
.crm-wa-bubble {
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(200, 183, 221, 0.25);
  background: rgba(200, 183, 221, 0.10);
  max-width: 86%;
}

.crm-wa-bubble--out {
  align-self: flex-end;
  background: rgba(244, 184, 164, 0.14);
  border-color: rgba(244, 184, 164, 0.35);
}

.crm-wa-bubble--in {
  align-self: flex-start;
}

.crm-wa-bubble-text {
  font-size: 0.92rem;
  color: #2f2430;
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  white-space: pre-wrap;
}

.crm-wa-bubble-meta {
  margin-top: 6px;
  font-size: 0.78rem;
  color: #7a687f;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.crm-wa-bubble-sep {
  color: #c1b2cc;
}

/* Responsive */
@media (max-width: 650px) {
  .crm-wa-form-grid {
    grid-template-columns: 1fr;
  }

  .crm-wa-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .crm-wa-btn {
    width: 100%;
    justify-content: center;
  }

  .crm-wa-contact {
    max-width: 180px;
  }
}

/* ==========================
   CRM CONTACTS (PRO)
   Inspirado en crmservices.css
   ========================== */

.crm-contacts-container {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 0.4rem;
  padding: clamp(0.9rem, 2vw, 1.1rem);
  border-radius: 22px;
  background: linear-gradient(180deg, #f6f0fa 0%, #ffffff 42%, #ffffff 100%);
  border: 1px solid var(--ui-border-soft);
  box-shadow: var(--ui-shadow-card);
  box-sizing: border-box;
}

/* HEADER */
.crm-contacts-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.crm-contacts-title h2 {
  margin: 0 0 0.15rem;
  font-size: 1.1rem;
  font-weight: 650;
  color: var(--ui-text);
}

.crm-contacts-subtitle {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ui-text-muted);
}

.crm-contacts-count {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--ui-text-soft);
}

.crm-contacts-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  flex-wrap: wrap;
  min-width: 0;
}

.crm-contacts-inline-status {
  font-size: 0.78rem;
  color: var(--ui-text-muted);
  padding: 0.18rem 0.55rem;
  border-radius: var(--ui-radius-pill);
  border: 1px solid var(--ui-border-soft);
  background: rgba(255, 255, 255, 0.8);
}

.crm-contacts-loading,
.crm-contacts-error,
.crm-contacts-empty {
  margin: 0.6rem 0 0;
  color: var(--ui-text-muted);
  font-size: 0.9rem;
}

.crm-contacts-error {
  color: #b83f37;
}

/* BUSCADOR (mismo estilo que services) */
.crm-contacts-search-form {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.25rem;
  border-radius: var(--ui-radius-pill);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #e3d7ef;
  box-shadow: 0 4px 10px rgba(58, 43, 54, 0.12);
  min-width: 0;
}

.crm-contacts-search-form input {
  border: none;
  outline: none;
  background: transparent;
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
  min-width: min(320px, 55vw);
  color: var(--ui-text);
  box-sizing: border-box;
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.crm-contacts-search-form input::placeholder {
  color: #b09fbe;
  font-weight: 400;
}

/* FILTROS */
.crm-contacts-filters {
  max-width: 100%;
}

/* FORM */
.crm-contact-form-wrapper {
  margin: 0.4rem 0 0.7rem;
  border-radius: 18px;
  border: 1px solid var(--ui-border-soft);
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(58, 43, 54, 0.14);
  padding: 0.9rem 1rem 0.9rem;
  box-sizing: border-box;
}

.crm-contact-form h3 {
  margin: 0 0 0.7rem;
  font-size: 1rem;
  font-weight: 650;
  color: var(--ui-text);
}

.crm-contact-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.7rem 1rem;
  margin-bottom: 0.7rem;
}

.crm-contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}

.crm-contact-field label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ui-text-muted);
}

.crm-contact-field input,
.crm-contact-field select,
.crm-contact-field textarea {
  border-radius: var(--ui-radius-10);
  border: 1px solid var(--ui-border);
  padding: 0.48rem 0.7rem;
  font-size: 0.9rem;
  outline: none;
  background: #fbf8fd;
  color: var(--ui-text);
  box-sizing: border-box;
  transition: border 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.crm-contact-field input::placeholder,
.crm-contact-field textarea::placeholder {
  font-weight: 400;
  color: #a497b0;
}

.crm-contact-field input:focus,
.crm-contact-field select:focus,
.crm-contact-field textarea:focus {
  border-color: var(--ui-primary-1);
  background: #ffffff;
  box-shadow: var(--ui-focus-ring);
}

.crm-contact-field-notes {
  grid-column: 1 / -1;
}

.crm-contact-field textarea {
  resize: vertical;
  min-height: 72px;
}

.crm-contact-form-error {
  margin: 0.3rem 0 0.4rem;
  font-size: 0.82rem;
  color: #b83f37;
  background: rgba(240, 125, 122, 0.12);
  border-radius: var(--ui-radius-10);
  padding: 0.45rem 0.6rem;
  border: 1px solid rgba(184, 63, 55, 0.35);
}

.crm-contact-form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* ==========================
   “TABLA” (divs) — simple con flex
   ========================== */

.crm-contacts-table {
  margin-top: 0.7rem;
  border-radius: 16px;
  border: 1px solid var(--ui-border-soft);
  background: rgba(255, 255, 255, 0.78);
  overflow: hidden;
}

.crm-contacts-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.crm-contacts-row + .crm-contacts-row {
  border-top: 1px solid var(--ui-border-soft);
}

.crm-contacts-row:not(.crm-contacts-row-head):hover {
  background: rgba(246, 240, 250, 0.5);
}

/* HEADER “th” (más grande y limpio) */
.crm-contacts-row-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(246, 240, 250, 0.9);
  font-size: 0.86rem;
  font-weight: 750;
  color: var(--ui-text-muted);
  letter-spacing: 0.01em;
}

/* Columnas: Contacto NO crece, Pipeline crece, Acciones fijo */
.crm-contacts-cell {
  min-width: 0;
  color: var(--ui-text);
}

/* 👇 clave: NO grow => no “espacio desperdiciado” */
.crm-contacts-cell.is-contact {
  flex: 0 1 460px; /* ajusta aquí si lo quieres más estrecho */
  max-width: 520px;
}

/* 👇 se queda el espacio flexible */
.crm-contacts-cell.is-pipeline {
  flex: 1 1 0;
  min-width: 240px;
}

/* 👇 ancho fijo igual que services (y header alineable) */
.crm-contacts-cell.is-actions {
  flex: 0 0 124px;
  display: flex;
  justify-content: flex-end;
}

/* Alinea el texto “Contacto” con el nombre (evita que quede sobre el avatar) */
@media (min-width: 901px) {
  .crm-contacts-row-head .crm-contacts-cell.is-contact {
    padding-left: 44px;
  }
}

/* CONTACTO */
.crm-contact-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.crm-contact-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    rgba(200, 183, 221, 0.95),
    rgba(244, 184, 164, 0.95)
  );
  color: #ffffff;
  font-weight: 800;
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px rgba(58, 43, 54, 0.12);
  flex: 0 0 auto;
}

.crm-contact-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}

.crm-contact-name {
  font-weight: 750;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-contact-secondary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  font-size: 0.82rem;
  color: var(--ui-text-muted);
}

.crm-contact-secondary-item {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-dot-sep {
  color: #c1b2cc;
}

.crm-contact-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.crm-tag {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid #e6dbea;
  background: rgba(246, 240, 250, 0.85);
  color: #6d5a74;
  white-space: nowrap;
}

.crm-tag.is-soft {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--ui-border-soft);
  color: var(--ui-text-muted);
}

/* ICONOS */
.crm-contacts-action-icons {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  white-space: nowrap;
}

.crm-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #e6dbea;
  background: rgba(255, 255, 255, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #6d5a74;
  transition: transform 0.08s ease-in-out, box-shadow 0.15s ease-in-out,
    background 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.crm-icon-btn:hover {
  transform: translateY(-1px);
  background: #ffffff;
  border-color: var(--ui-primary-1);
  box-shadow: 0 10px 20px rgba(58, 43, 54, 0.12);
  color: var(--ui-text);
}

.crm-icon-btn:active {
  transform: translateY(0);
}

.crm-icon-btn.danger {
  border-color: rgba(248, 113, 113, 0.35);
  color: #b83f37;
}

.crm-icon-btn.danger:hover {
  border-color: rgba(248, 113, 113, 0.65);
  box-shadow: 0 10px 20px rgba(184, 63, 55, 0.12);
}

/* PIPELINE */
.crm-contact-funnel {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.crm-contact-funnel-line {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 150px;
  min-width: 150px;
  max-width: 150px;
}

.crm-contact-funnel-line::before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 2px;
  background: #e7dff4;
  transform: translateY(-50%);
  z-index: 0;
}

.crm-contact-funnel-step {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
}

.crm-contact-funnel-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #d7caec;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(200, 183, 221, 0.55);
}

.crm-contact-funnel-step.is-past .crm-contact-funnel-dot {
  background: var(--ui-primary-1);
}

.crm-contact-funnel-step.is-current .crm-contact-funnel-dot {
  background: linear-gradient(135deg, var(--ui-primary-1), var(--ui-primary-2));
  box-shadow: 0 0 0 2px rgba(244, 184, 164, 0.35);
}

.crm-contact-funnel.is-closed-won .crm-contact-funnel-step.is-current .crm-contact-funnel-dot {
  background: radial-gradient(circle at 30% 0%, #fde68a 0%, #facc15 40%, #22c55e 80%, #16a34a 100%);
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.65);
}

.crm-contact-funnel.is-closed-lost .crm-contact-funnel-step.is-current .crm-contact-funnel-dot {
  background: linear-gradient(135deg, #fb7185, #dc2626);
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.6);
}

.crm-contact-funnel.is-cancelled .crm-contact-funnel-step.is-current .crm-contact-funnel-dot {
  background: linear-gradient(135deg, #cbd5e1, #94a3b8);
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.45);
}

.crm-contact-funnel-label {
  font-size: 0.74rem;
  color: #7a687f;
  min-width: 0;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--ui-border-soft);
  background: rgba(255, 255, 255, 0.85);
}

.crm-contact-funnel.is-closed-won .crm-contact-funnel-label {
  color: #166534;
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.2);
}

.crm-contact-funnel.is-closed-lost .crm-contact-funnel-label {
  color: #991b1b;
  background: rgba(248, 113, 113, 0.1);
  border-color: rgba(248, 113, 113, 0.22);
}

.crm-contact-funnel.is-cancelled .crm-contact-funnel-label {
  color: #475569;
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.22);
}

.crm-contact-funnel-empty {
  font-size: 0.78rem;
  color: #b2a3bf;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .crm-contacts-header {
    flex-direction: column;
    align-items: stretch;
  }

  .crm-contacts-actions {
    justify-content: flex-start;
    align-items: stretch;
  }

  .crm-contacts-search-form {
    width: 100%;
  }

  .crm-contacts-search-form input {
    min-width: 0;
    width: 100%;
  }

  .crm-contacts-row-head {
    display: none;
  }

  .crm-contacts-row {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
  }

  .crm-contacts-cell.is-contact {
    flex: 1 1 auto;
    max-width: none;
  }

  .crm-contacts-cell.is-actions {
    flex: 0 0 auto;
    width: auto;
    margin-left: auto;
  }

  .crm-contacts-cell.is-pipeline {
    flex: 1 1 100%;
    min-width: 0;
  }
}

@media (max-width: 650px) {
  .crm-contact-form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .crm-contact-form-actions .btn-primary,
  .crm-contact-form-actions .ghost {
    width: 100%;
    justify-content: center;
  }

  .crm-icon-btn {
    width: 32px;
    height: 32px;
  }

  .crm-contact-funnel-label {
    max-width: 100%;
  }
}
/* CONTENEDOR */
.crm-services-container {
  margin-top: 0.4rem;
  padding: clamp(0.9rem, 2vw, 1.1rem);
  border-radius: 22px;
  background: linear-gradient(180deg, #f6f0fa 0%, #ffffff 42%, #ffffff 100%);
  border: 1px solid var(--ui-border-soft);
  box-shadow: var(--ui-shadow-card);
  box-sizing: border-box;
}

/* CABECERA */
.crm-services-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.crm-services-header h2 {
  margin: 0 0 0.15rem;
  font-size: 1.1rem;
  font-weight: 650;
  color: var(--ui-text);
}

.crm-services-subtitle {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ui-text-muted);
}

/* ACCIONES (derecha) */
.crm-services-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  flex-wrap: wrap;
  min-width: 0;
}

.crm-services-inline-status {
  font-size: 0.78rem;
  color: #7a687f;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid #f0e4f3;
  background: rgba(255, 255, 255, 0.8);
}

/* BUSCADOR */
.crm-services-search-form {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.25rem;
  border-radius: var(--ui-radius-pill);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #e3d7ef;
  box-shadow: 0 4px 10px rgba(58, 43, 54, 0.12);
  min-width: 0;
}

.crm-services-search-form input {
  border: none;
  outline: none;
  background: transparent;
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
  min-width: min(320px, 55vw);
  color: var(--ui-text);
  box-sizing: border-box;
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.crm-services-search-form input::placeholder {
  color: #b09fbe;
  font-weight: 400;
}

/* FILTROS (usa .segmented / .segmented-btn del ui.css) */
.crm-services-filters {
  max-width: 100%;
}

/* FORM WRAPPER */
.crm-service-form-wrapper {
  margin: 0.4rem 0 0.7rem;
  border-radius: 18px;
  border: 1px solid var(--ui-border-soft);
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(58, 43, 54, 0.14);
  padding: 0.9rem 1rem 0.9rem;
  box-sizing: border-box;
}

.crm-service-form h3 {
  margin: 0 0 0.7rem;
  font-size: 1rem;
  font-weight: 650;
  color: var(--ui-text);
}

/* GRID AUTO-FIT (no rompe en móvil) */
.crm-service-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.7rem 1rem;
  margin-bottom: 0.7rem;
}

.crm-service-field {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}

.crm-service-field label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ui-text-muted);
}

.crm-service-field input,
.crm-service-field select,
.crm-service-field textarea {
  border-radius: var(--ui-radius-10);
  border: 1px solid var(--ui-border);
  padding: 0.48rem 0.7rem;
  font-size: 0.9rem;
  outline: none;
  background: #fbf8fd;
  color: var(--ui-text);
  box-sizing: border-box;
  transition: border 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.crm-service-field input:focus,
.crm-service-field select:focus,
.crm-service-field textarea:focus {
  border-color: var(--ui-primary-1);
  background: #ffffff;
  box-shadow: var(--ui-focus-ring);
}

.crm-service-field-inline {
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  padding-top: 1.55rem; /* alinea visualmente con inputs */
}

.crm-service-field-inline label {
  margin: 0;
}

.crm-service-field-inline input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--ui-primary-1);
}

.crm-service-form-error {
  margin: 0.3rem 0 0.4rem;
  font-size: 0.8rem;
  color: #d45c52;
  background: rgba(240, 125, 122, 0.1);
  border-radius: var(--ui-radius-10);
  padding: 0.4rem 0.6rem;
  border: 1px solid rgba(212, 92, 82, 0.4);
}

.crm-service-form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* ==========================
   ACCIONES (tabla con iconos)
   ========================== */
.crm-services-table-actions {
  text-align: right;
}

.crm-services-action-icons {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  white-space: nowrap;
}

.crm-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #e6dbea;
  background: rgba(255, 255, 255, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #6d5a74;
  transition: transform 0.08s ease-in-out, box-shadow 0.15s ease-in-out,
    background 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.crm-icon-btn:hover {
  transform: translateY(-1px);
  background: #ffffff;
  border-color: #c8b7dd;
  box-shadow: 0 10px 20px rgba(58, 43, 54, 0.12);
  color: #2f2430;
}

.crm-icon-btn:active {
  transform: translateY(0);
}

.crm-icon-btn.danger {
  border-color: rgba(248, 113, 113, 0.35);
  color: #b83f37;
}

.crm-icon-btn.danger:hover {
  border-color: rgba(248, 113, 113, 0.65);
  box-shadow: 0 10px 20px rgba(184, 63, 55, 0.12);
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .crm-services-header {
    flex-direction: column;
    align-items: stretch;
  }

  .crm-services-actions {
    justify-content: flex-start;
  }

  .crm-services-search-form {
    width: 100%;
  }

  .crm-services-search-form input {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 650px) {
  .crm-service-form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
}
/* CONTENEDOR GENERAL DE LA TAB DE ACTIVIDADES */
.crm-activities-container {
  margin-top: 0.4rem;
  padding: 1rem 1.1rem 1.1rem;
  border-radius: 22px;
  background: linear-gradient(180deg, #f6f0fa 0%, #ffffff 42%, #ffffff 100%);
  border: 1px solid #f0e4f3;
  box-shadow: 0 18px 40px rgba(58, 43, 54, 0.13);
  box-sizing: border-box;
}

/* CABECERA */
.crm-activities-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.crm-activities-header h2 {
  margin: 0 0 0.15rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: #2f2430;
}

.crm-activities-subtitle {
  margin: 0;
  font-size: 0.85rem;
  color: #7a687f;
}

/* ACCIONES DERECHA */
.crm-activities-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.45rem;
  min-width: 0;
}

.crm-activities-inline-status {
  font-size: 0.78rem;
  color: #7a687f;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid #f0e4f3;
  background: rgba(255, 255, 255, 0.8);
}

/* GRUPO DE FILTRO (label + segmented) */
.crm-activity-filter-group {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.crm-activity-filter-label {
  font-size: 0.78rem;
  color: #7a687f;
  font-weight: 600;
  white-space: nowrap;
}

/* CARD DEL FORMULARIO */
.crm-activity-form-wrapper {
  margin: 0.4rem 0 0.7rem;
  border-radius: 18px;
  border: 1px solid #f0e4f3;
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(58, 43, 54, 0.14);
  padding: 0.9rem 1rem 0.9rem;
  box-sizing: border-box;
}

/* FORMULARIO */
.crm-activity-form h3 {
  margin: 0 0 0.7rem;
  font-size: 1rem;
  font-weight: 600;
  color: #2f2430;
}

.crm-activity-form-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem 1rem;
  margin-bottom: 0.7rem;
}

/* Campos */
.crm-activity-field {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.crm-activity-field label {
  font-size: 0.8rem;
  font-weight: 500;
  color: #7a687f;
}

/* Inputs y selects */
.crm-activity-field input,
.crm-activity-field select,
.crm-activity-field textarea {
  border-radius: 10px;
  border: 1px solid #e0d6e6;
  padding: 0.45rem 0.7rem;
  font-size: 0.9rem;
  outline: none;
  background: #fbf8fd;
  color: #2f2430;
  box-sizing: border-box;
  transition: border 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background 0.15s ease-in-out;

  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.crm-activity-field input::placeholder,
.crm-activity-field textarea::placeholder {
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: #a497b0;
}

.crm-activity-field input:focus,
.crm-activity-field select:focus,
.crm-activity-field textarea:focus {
  border-color: #c8b7dd;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(200, 183, 221, 0.32);
}

/* Checkbox inline */
.crm-activity-field-inline {
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
}

.crm-activity-field-inline label {
  margin: 0;
}

.crm-activity-field-inline input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #c8b7dd;
}

/* Notas ancho completo */
.crm-activity-field-notes {
  grid-column: 1 / -1;
}

.crm-activity-field-notes textarea {
  min-height: 80px;
  resize: vertical;
}

/* ERROR FORM */
.crm-activity-form-error {
  margin: 0.3rem 0 0.4rem;
  font-size: 0.8rem;
  color: #d45c52;
  background: rgba(240, 125, 122, 0.1);
  border-radius: 10px;
  padding: 0.4rem 0.6rem;
  border: 1px solid rgba(212, 92, 82, 0.4);
}

/* ACCIONES DEL FORM */
.crm-activity-form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* BOTONES EN TABLA */
.crm-table-btn {
  border-radius: 999px;
  border: 1px solid #ddcfe7;
  padding: 0.25rem 0.7rem;
  font-size: 0.78rem;
  background: #f6f0fa;
  color: #5c4867;
  cursor: pointer;
  margin-right: 0.25rem;
  transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.crm-table-btn:hover {
  background: #ece0f4;
  border-color: #c8b7dd;
}

.crm-table-btn.danger {
  border-color: rgba(212, 92, 82, 0.9);
  background: rgba(240, 125, 122, 0.14);
  color: #d45c52;
}

.crm-table-btn.danger:hover {
  background: rgba(240, 125, 122, 0.22);
}

/* ICONOS (acciones tabla) */
.crm-activities-action-icons {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  white-space: nowrap;
}

.crm-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #e6dbea;
  background: rgba(255, 255, 255, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #6d5a74;
  transition: transform 0.08s ease-in-out, box-shadow 0.15s ease-in-out, background 0.15s ease-in-out,
    border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.crm-icon-btn:hover {
  transform: translateY(-1px);
  background: #ffffff;
  border-color: #c8b7dd;
  box-shadow: 0 10px 20px rgba(58, 43, 54, 0.12);
  color: #2f2430;
}

.crm-icon-btn:active {
  transform: translateY(0);
}

.crm-icon-btn.danger {
  border-color: rgba(248, 113, 113, 0.35);
  color: #b83f37;
}

.crm-icon-btn.danger:hover {
  border-color: rgba(248, 113, 113, 0.65);
  box-shadow: 0 10px 20px rgba(184, 63, 55, 0.12);
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .crm-activities-header {
    flex-direction: column;
    align-items: stretch;
  }

  .crm-activities-actions {
    justify-content: flex-start;
    align-items: stretch;
  }

  .crm-activity-filter-group {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .crm-activity-form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .crm-activities-container {
    padding: 0.9rem 0.8rem 1rem;
  }

  .crm-activity-form-row {
    grid-template-columns: 1fr;
  }

  .crm-activity-form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .crm-activity-form-actions .btn-primary,
  .crm-activity-form-actions .ghost {
    width: 100%;
    justify-content: center;
  }
}
.crm-page-container {
  margin: 0 auto;
  padding: clamp(0.9rem, 2vw, 1.2rem) clamp(0.4rem, 2vw, 1.2rem);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.crm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.crm-header h1 {
  margin: 0 0 0.2rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ui-text);
}

.crm-header p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ui-text-muted);
}

/* Tabs: ahora se apoyan en .segmented / .segmented-btn del ui.css */
.crm-tabs {
  width: fit-content;
  max-width: 100%;
}

.crm-tab-content {
  margin-top: 0.4rem;
}

.crm-status-text {
  font-size: 0.85rem;
  color: var(--ui-text-soft);
}

/* Tabla base */
.crm-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-top: 0.5rem;
  background: var(--ui-surface);
  border-radius: var(--ui-radius-18);
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(58, 43, 54, 0.08);
  border: 1px solid var(--ui-border-soft);
}

.crm-table thead {
  background: linear-gradient(135deg, var(--ui-surface-lilac), #fdfbff);
}

.crm-table th,
.crm-table td {
  font-size: 0.82rem;
  padding: 0.45rem 0.8rem;
  text-align: left;
  color: var(--ui-text);
  border-bottom: 1px solid #f3e9f7;
}

.crm-table th {
  font-weight: 600;
  color: var(--ui-text-muted);
}

.crm-table tbody tr:last-child td {
  border-bottom: none;
}

.crm-table tbody tr:nth-child(even) {
  background: #fdfbff;
}

.crm-table tbody tr:hover {
  background: #f7f1fb;
}

/* Responsive */
@media (max-width: 900px) {
  .crm-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 600px) {
  .crm-tabs {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .crm-table {
    display: block;
    overflow-x: auto;
    border-radius: 16px;
  }
}
/* frontend/styles/patients/patientfollowup.css */

/* =========================
   Layout base
========================= */

.pf-page-container {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(0.9rem, 2vw, 1.2rem) clamp(0.4rem, 2vw, 1.1rem);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* Header */

.pf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
}

.pf-header h1 {
  margin: 0 0 0.2rem;
  font-size: 1.35rem;
  font-weight: 650;
  color: var(--ui-text);
}

.pf-header p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ui-text-muted);
}

.pf-header-patient {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border-soft);
  font-size: 0.84rem;
  color: var(--ui-text-muted);
}

/* Layout principal */

.pf-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.75fr);
  gap: 1rem;
}

.pf-column {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* =========================
   Cards base
========================= */

.pf-card {
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.05);
  padding: 0.9rem 1rem 0.95rem;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    border-color 0.15s ease, background 0.15s ease;
}

.pf-card:hover {
  transform: translateY(-1px);
  border-color: rgba(148, 163, 184, 0.85);
  box-shadow: 0 22px 52px rgba(15, 23, 42, 0.08);
}

.pf-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.8rem;
  margin-bottom: 0.55rem;
}

.pf-card-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.pf-card-title-wrap > svg {
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: var(--ui-primary-1);
}

.pf-card-title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 750;
  color: var(--ui-text);
}

.pf-card-sub {
  margin: 0.1rem 0 0;
  font-size: 0.83rem;
  color: var(--ui-text-muted);
}

.pf-card-body {
  margin-top: 0.15rem;
}

/* =========================
   Actions & Buttons helpers
========================= */

.pf-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.pf-actions--right {
  justify-content: flex-end;
}

/* Icon buttons (base) - más sutiles */
.pf-item-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.pf-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 0;
  background: transparent;
  color: #6b5575;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pf-icon-button svg {
  pointer-events: none;
}

.pf-icon-button:hover {
  background: rgba(91, 55, 104, 0.06);
  border-color: rgba(203, 184, 223, 0.7);
  color: #3a2b36;
}

.pf-icon-button--danger {
  color: #b91c1c;
}

.pf-icon-button--danger:hover {
  background: rgba(185, 28, 28, 0.06);
  border-color: rgba(185, 28, 28, 0.2);
  color: #7f1d1d;
}

/* =========================
   Inputs genéricos
========================= */

.pf-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

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

.pf-field label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ui-text-muted);
}

.pf-input,
.pf-textarea {
  border-radius: var(--ui-radius-10);
  border: 1px solid var(--ui-border);
  padding: 0.45rem 0.7rem;
  font-size: 0.9rem;
  outline: none;
  background: #fbf8fd;
  color: var(--ui-text);
  transition: border 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  width: 100%;
  box-sizing: border-box;
}

.pf-input::placeholder,
.pf-textarea::placeholder {
  color: #b09fbe;
}

.pf-input:focus,
.pf-textarea:focus {
  border-color: var(--ui-primary-1);
  background: var(--ui-surface);
  box-shadow: var(--ui-focus-ring);
}

.pf-textarea {
  resize: vertical;
  min-height: 70px;
}

/* =========================
   Empty states
========================= */

.pf-empty {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.55rem;
  border-radius: 16px;
  padding: 0.7rem 0.9rem;
  background: #f9fafb;
  border: 1px dashed rgba(226, 232, 240, 0.95);
  color: var(--ui-text-muted);
  font-size: 0.86rem;
}

.pf-empty--soft {
  background: #fefcff;
}

.pf-empty > svg {
  margin-top: 0.05rem;
  color: var(--ui-primary-2);
}

.pf-empty-title {
  font-weight: 600;
  color: var(--ui-text);
}

.pf-empty-text {
  margin-top: 0.1rem;
}

/* =========================
   Listas (tratamientos)
========================= */

.pf-surgeries-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.3rem;
}

.pf-surgery-card {
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: #f9fafb;
  padding: 0.65rem 0.75rem 0.6rem;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.7rem;
  cursor: pointer;
  text-align: left;
  transition: transform 0.12s ease, box-shadow 0.12s ease,
    border-color 0.12s ease, background 0.12s ease;
}

.pf-surgery-card:hover {
  transform: translateY(-1px);
  border-color: rgba(148, 163, 184, 0.85);
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

.pf-surgery-card--active {
  border-color: var(--ui-primary-1);
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(79, 70, 229, 0.15);
}

.pf-surgery-main {
  flex: 1;
  min-width: 0;
}

.pf-surgery-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ui-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pf-surgery-meta {
  margin-top: 0.18rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  font-size: 0.8rem;
  color: var(--ui-text-muted);
}

.pf-surgery-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.pf-surgery-meta svg {
  flex-shrink: 0;
}

.pf-surgery-status {
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.95);
  border: 1px solid rgba(226, 232, 240, 0.9);
  font-size: 0.74rem;
  color: #64748b;
  white-space: nowrap;
}

/* Header info derecha */
.pf-surgery-header-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
}

.pf-surgery-header-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ui-text);
}

.pf-surgery-header-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: var(--ui-text-muted);
}

/* =========================
   Tratamientos: acciones en esquina (más aire)
========================= */

.pf-treatment-card {
  position: relative;
}

/* deja espacio a la derecha para que no tape contenido */
.pf-treatment-card .pf-surgery-main {
  padding-right: 92px;
}

/* un poco más de aire arriba para el toolbar */
.pf-treatment-card .pf-surgery-title {
  padding-top: 0.05rem;
}

.pf-treatment-card-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  z-index: 2;
}

/* botones un pelín más grandes que los “inline”, pero sutiles */
.pf-treatment-card-actions .pf-icon-button {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--ui-border-soft);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.pf-treatment-card-actions .pf-icon-button:hover {
  background: rgba(255, 255, 255, 1);
}

/* =========================
   Tratamientos: cirugías dentro
========================= */

.pf-treatment-surgeries {
  margin-top: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.pf-treatment-surgery-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.035);
}

.pf-treatment-surgery-main {
  min-width: 0;
  flex: 1;
}

.pf-treatment-surgery-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ui-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pf-treatment-surgery-meta {
  margin-top: 0.15rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.7rem;
  font-size: 0.8rem;
  color: var(--ui-text-muted);
}

.pf-treatment-surgery-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* =========================
   Derecha: formulario + línea del tiempo
========================= */

.pf-journey-simple-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.pf-journey-simple-meta {
  margin-top: 0.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.pf-journey-simple-chip {
  font-size: 0.74rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--ui-border-soft);
  background: rgba(226, 232, 240, 0.35);
  color: var(--ui-text-muted);
}

.pf-journey-simple-chip--planned {
  background: rgba(148, 163, 184, 0.16);
  border-color: rgba(148, 163, 184, 0.35);
  color: #64748b;
}

.pf-journey-simple-chip--done {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
  color: #047857;
}

.pf-journey-simple-chip--cancelled {
  background: rgba(185, 28, 28, 0.06);
  border-color: rgba(185, 28, 28, 0.2);
  color: #991b1b;
}

/* Timeline */

.pf-timeline {
  list-style: none;
  padding: 0;
  margin: 0.2rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.pf-timeline--journey {
  margin-top: 0.25rem;
}

.pf-timeline-item {
  display: flex;
  align-items: stretch;
  gap: 0.55rem;
}

.pf-timeline-dot-column {
  width: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.pf-timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #e5e7eb;
  margin-top: 0.25rem;
}

.pf-timeline-dot--done {
  background: rgba(16, 185, 129, 0.9);
}

.pf-timeline-line {
  flex: 1;
  width: 2px;
  background: #e5e7eb;
  margin-top: 0.1rem;
}

.pf-timeline-card {
  flex: 1;
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
  padding: 0.6rem 0.75rem 0.55rem;
}

.pf-timeline-header {
  margin-bottom: 0.2rem;
}

.pf-timeline-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.pf-timeline-title {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ui-text);
}

.pf-timeline-title svg {
  color: var(--ui-primary-2);
}

.pf-timeline-date {
  font-size: 0.8rem;
  color: var(--ui-text-muted);
}

.pf-timeline-footer {
  margin-top: 0.35rem;
  display: flex;
  justify-content: flex-end;
}

.pf-timeline-scroll {
  overflow-y: auto;
  max-height: 40vh;   /* ajusta si quieres */
  padding-right: 4px;
  min-height: 0;
}

/* =========================
   Responsive
========================= */

@media (max-width: 900px) {
  .pf-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .pf-column--left,
  .pf-column--right {
    gap: 0.8rem;
  }

  .pf-card {
    padding: 0.85rem 0.9rem 0.9rem;
  }

  .pf-treatment-card .pf-surgery-main {
    padding-right: 88px;
  }
}

@media (max-width: 650px) {
  .pf-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .pf-header-patient {
    align-self: flex-start;
  }

  .pf-timeline-card {
    padding: 0.55rem 0.7rem 0.5rem;
  }

  .pf-treatment-card-actions {
    top: 10px;
    right: 10px;
  }

  .pf-treatment-card .pf-surgery-main {
    padding-right: 84px;
  }
}
/* frontend/styles/patients/patients.css */

.patients-page-container {
  max-width: 1220px;
  margin: 0 auto;
  padding: clamp(0.9rem, 2vw, 1.2rem) clamp(0.4rem, 2vw, 1.2rem);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* Si más adelante quieres una cabecera propia, la puedes usar aquí */
.patients-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.patients-header h1 {
  margin: 0 0 0.2rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ui-text);
}

.patients-header p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ui-text-muted);
}

/* Tabs: usa los estilos .segmented / .segmented-btn globales que ya tienes */
.patients-tabs {
  width: fit-content;
  max-width: 100%;
}

.patients-tab-content {
  margin-top: 0.4rem;
}

/* Tabs row: botón + tabs */
.patients-tabs-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Reutiliza estética global del botón, solo ajustamos tamaño */
.patients-menu-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

/* En móvil: tabs ocupan todo el ancho */
@media (max-width: 600px) {
  .patients-tabs-row {
    align-items: stretch;
  }

  .patients-tabs {
    width: 100%;
  }

  .patients-tab {
    flex: 1;
    justify-content: center;
  }
}

/* Responsive */
@media (max-width: 600px) {
  .patients-tabs {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
  }
}
/* frontend/styles/hr/hremployeeprofile.css */

.hr-profile-tab {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Header card */
.hr-profile-header-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 20px;
  background: linear-gradient(135deg, #f4f0ff, #f2f7ff);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  min-width: 0;
}

.hr-profile-header-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.hr-profile-header-text {
  min-width: 0;
}

.hr-profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 750;
  font-size: 22px;
  color: #4f46e5;
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.hr-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hr-profile-name {
  font-size: 20px;
  font-weight: 750;
  margin: 0 0 4px;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 520px;
}

.hr-profile-position {
  margin: 0;
  font-size: 14px;
  color: #475569;
}

.hr-profile-department {
  margin: 2px 0 0;
  font-size: 13px;
  color: #64748b;
}

.hr-profile-header-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

/* Pills */
.hr-pill {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  border: 1px solid transparent;
  white-space: nowrap;
}

.hr-pill--type {
  background: rgba(99, 102, 241, 0.08);
  color: #4f46e5;
  border-color: rgba(99, 102, 241, 0.2);
}

.hr-pill--status {
  background: rgba(34, 197, 94, 0.08);
  color: #16a34a;
  border-color: rgba(34, 197, 94, 0.2);
}

.hr-pill--status-active {
  background: rgba(34, 197, 94, 0.08);
  color: #16a34a;
  border-color: rgba(34, 197, 94, 0.2);
}

.hr-pill--status-leave {
  background: rgba(245, 158, 11, 0.10);
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.22);
}

.hr-pill--status-inactive {
  background: rgba(148, 163, 184, 0.14);
  color: #475569;
  border-color: rgba(148, 163, 184, 0.26);
}

/* Grid layout:
   - métricas a ancho completo
   - 2 cards en 2 columnas (desktop), 1 columna en móvil */
.hr-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  min-width: 0;
}

.hr-profile-metrics {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  min-width: 0;
}

/* Metric cards */
.hr-metric-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.hr-metric-card--primary {
  background: linear-gradient(135deg, #fef3c7, #fee2e2);
}

.hr-metric-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.hr-metric-label {
  font-size: 13px;
  color: #475569;
}

.hr-metric-icon {
  width: 18px;
  height: 18px;
  color: #4f46e5;
  flex: 0 0 auto;
}

.hr-metric-value {
  font-size: 24px;
  font-weight: 750;
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
  color: #0f172a;
}

.hr-metric-unit {
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
}

.hr-metric-helper {
  margin: 0;
  font-size: 12px;
  color: #64748b;
}

/* Info cards */
.hr-info-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.hr-info-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 750;
  margin: 0;
  color: #0f172a;
}

.hr-info-icon {
  width: 18px;
  height: 18px;
  color: #111827;
}

.hr-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.hr-info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  min-width: 0;
}

.hr-info-label {
  color: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.hr-info-value {
  color: #0f172a;
  font-weight: 600;
  min-width: 0;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}

.hr-inline-icon {
  width: 14px;
  height: 14px;
}

.hr-error-text {
  font-size: 13px;
  color: #b91c1c;
}

.hr-error-text.small {
  font-size: 12px;
  margin: 0;
  color: #b91c1c;
}

/* Responsive */
@media (max-width: 900px) {
  .hr-profile-grid {
    grid-template-columns: 1fr;
  }

  .hr-profile-name {
    max-width: 100%;
  }

  .hr-info-value {
    max-width: 55%;
  }
}

@media (max-width: 650px) {
  .hr-profile-header-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .hr-profile-header-tags {
    justify-content: flex-start;
  }

  .hr-profile-metrics {
    grid-template-columns: 1fr;
  }

  .hr-info-value {
    max-width: 100%;
    text-align: left;
    white-space: normal;
  }
}
/* frontend/styles/hr/hremployeetime.css */

.hr-time-tab {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Header */
.hr-time-tab .hr-time-header-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-radius: 20px;
  background: linear-gradient(135deg, #eff6ff, #f5f3ff);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  min-width: 0;
}

.hr-time-tab .hr-time-header-left {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hr-time-tab .hr-time-header-date {
  margin: 0;
  font-size: 13px;
  color: #64748b;
  text-transform: capitalize;
}

.hr-time-tab .hr-time-header-title {
  margin: 0;
  font-size: 20px;
  font-weight: 750;
  color: #0f172a;
}

.hr-time-tab .hr-time-header-subtitle {
  margin: 0;
  font-size: 13px;
  color: #475569;
}

.hr-time-tab .hr-time-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.hr-time-tab .hr-time-header-helper {
  margin: 0;
  font-size: 12px;
  color: #64748b;
}

/* Pills (solo dentro del tab) */
.hr-time-tab .hr-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  border: 1px solid transparent;
  white-space: nowrap;
  width: fit-content;
}

.hr-time-tab .hr-pill--status {
  background: rgba(56, 189, 248, 0.12);
  color: #0284c7;
  border-color: rgba(56, 189, 248, 0.25);
}

/* Botones */
.hr-time-tab .hr-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  border: none;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  transition: transform 0.05s ease, box-shadow 0.12s ease, background-color 0.12s ease,
    opacity 0.12s ease;
}

.hr-time-tab .hr-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.hr-time-tab .hr-button--primary {
  background: #4f46e5;
  color: #f9fafb;
  box-shadow: 0 10px 25px rgba(79, 70, 229, 0.30);
}

.hr-time-tab .hr-button--primary:hover:not(:disabled) {
  background: #4338ca;
  transform: translateY(-1px);
}

.hr-time-tab .hr-button--danger {
  background: #ef4444;
  color: #f9fafb;
  box-shadow: 0 10px 25px rgba(239, 68, 68, 0.28);
}

.hr-time-tab .hr-button--danger:hover:not(:disabled) {
  background: #dc2626;
  transform: translateY(-1px);
}

.hr-time-tab .hr-button-icon {
  width: 16px;
  height: 16px;
}

/* Banner errores */
.hr-time-tab .hr-error-banner {
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(248, 113, 113, 0.10);
  border: 1px solid rgba(248, 113, 113, 0.22);
  color: #b91c1c;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Grid principal */
.hr-time-tab .hr-time-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 16px;
  min-width: 0;
}

/* Métricas */
.hr-time-tab .hr-time-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  min-width: 0;
}

.hr-time-tab .hr-metric-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.hr-time-tab .hr-metric-card--primary {
  background: linear-gradient(135deg, #dcfce7, #e0f2fe);
}

.hr-time-tab .hr-metric-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hr-time-tab .hr-metric-label {
  font-size: 13px;
  color: #475569;
  font-weight: 600;
}

.hr-time-tab .hr-metric-icon {
  width: 18px;
  height: 18px;
  color: #4f46e5;
  flex: 0 0 auto;
}

.hr-time-tab .hr-metric-value {
  font-size: 24px;
  font-weight: 800;
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
  color: #0f172a;
}

.hr-time-tab .hr-metric-unit {
  font-size: 12px;
  color: #64748b;
  font-weight: 650;
}

.hr-time-tab .hr-metric-helper {
  margin: 0;
  font-size: 12px;
  color: #64748b;
}

/* Historial */
.hr-time-tab .hr-time-history-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.hr-time-tab .hr-info-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  margin: 0;
  color: #0f172a;
}

.hr-time-tab .hr-info-icon {
  width: 18px;
  height: 18px;
  color: #111827;
}

.hr-time-tab .hr-time-history-empty {
  font-size: 13px;
  color: #64748b;
}

/* Tabla */
.hr-time-tab .hr-time-history-table-wrapper {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  background: rgba(248, 250, 252, 0.7);
}

.hr-time-tab .hr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 520px;
}

.hr-time-tab .hr-table thead {
  background: rgba(248, 250, 252, 0.95);
}

.hr-time-tab .hr-table th,
.hr-time-tab .hr-table td {
  padding: 10px 12px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

.hr-time-tab .hr-table th {
  font-weight: 750;
  color: #64748b;
}

.hr-time-tab .hr-table tbody tr:hover {
  background: rgba(226, 232, 240, 0.35);
}

.hr-time-tab .hr-table tbody tr.is-open-row {
  background: rgba(56, 189, 248, 0.06);
}

/* Badges */
.hr-time-tab .hr-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 750;
  border: 1px solid transparent;
}

.hr-time-tab .hr-badge--open {
  background: rgba(56, 189, 248, 0.12);
  color: #0284c7;
  border-color: rgba(56, 189, 248, 0.25);
}

.hr-time-tab .hr-badge--closed {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
  border-color: rgba(34, 197, 94, 0.25);
}

.hr-time-tab .hr-error-text {
  font-size: 13px;
  color: #b91c1c;
}

/* Responsive */
@media (max-width: 900px) {
  .hr-time-tab .hr-time-header-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .hr-time-tab .hr-time-header-right {
    align-items: flex-start;
    width: 100%;
  }

  .hr-time-tab .hr-time-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .hr-time-tab .hr-time-metrics {
    grid-template-columns: 1fr;
  }
}

/* frontend/styles/hr/hremployeevacations.css */

.hr-vacations-tab {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Header */
.hr-vacations-tab .hr-vacations-header-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-radius: 20px;
  background: linear-gradient(135deg, #fef9c3, #e0f2fe);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  min-width: 0;
}

.hr-vacations-tab .hr-vacations-header-left {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hr-vacations-tab .hr-vacations-header-year {
  margin: 0;
  font-size: 13px;
  color: #64748b;
}

.hr-vacations-tab .hr-vacations-header-title {
  margin: 0;
  font-size: 20px;
  font-weight: 750;
  color: #0f172a;
}

.hr-vacations-tab .hr-vacations-header-subtitle {
  margin: 0;
  font-size: 13px;
  color: #475569;
}

.hr-vacations-tab .hr-vacations-header-right {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.hr-vacations-tab .hr-vacations-header-circle {
  width: 112px;
  height: 112px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.hr-vacations-tab .hr-vacations-header-icon {
  width: 18px;
  height: 18px;
  color: #f97316;
}

.hr-vacations-tab .hr-vacations-header-days {
  font-size: 28px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
}

.hr-vacations-tab .hr-vacations-header-label {
  font-size: 11px;
  color: #64748b;
}

/* Grid principal */
.hr-vacations-tab .hr-vacations-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 2fr);
  gap: 16px;
  min-width: 0;
}

/* Métricas */
.hr-vacations-tab .hr-vacations-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  min-width: 0;
}

.hr-vacations-tab .hr-metric-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.hr-vacations-tab .hr-metric-card--primary {
  background: linear-gradient(135deg, #fef3c7, #ffedd5);
}

.hr-vacations-tab .hr-metric-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hr-vacations-tab .hr-metric-label {
  font-size: 13px;
  color: #475569;
  font-weight: 700;
}

.hr-vacations-tab .hr-metric-icon {
  width: 18px;
  height: 18px;
  color: #f97316;
  flex: 0 0 auto;
}

.hr-vacations-tab .hr-metric-value {
  font-size: 24px;
  font-weight: 800;
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
  color: #0f172a;
}

.hr-vacations-tab .hr-metric-unit {
  font-size: 12px;
  color: #64748b;
  font-weight: 650;
}

.hr-vacations-tab .hr-metric-helper {
  margin: 0;
  font-size: 12px;
  color: #64748b;
}

/* Card formulario */
.hr-vacations-tab .hr-vacations-request-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.hr-vacations-tab .hr-info-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  margin: 0;
  color: #0f172a;
}

.hr-vacations-tab .hr-info-icon {
  width: 18px;
  height: 18px;
  color: #111827;
}

/* Botón (para no depender del tab de fichajes) */
.hr-vacations-tab .hr-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  border: none;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
  transition: transform 0.05s ease, box-shadow 0.12s ease, background-color 0.12s ease,
    opacity 0.12s ease;
}

.hr-vacations-tab .hr-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.hr-vacations-tab .hr-button--primary {
  background: #4f46e5;
  color: #f9fafb;
  box-shadow: 0 10px 25px rgba(79, 70, 229, 0.30);
}

.hr-vacations-tab .hr-button--primary:hover:not(:disabled) {
  background: #4338ca;
  transform: translateY(-1px);
}

.hr-vacations-tab .hr-button-icon {
  width: 16px;
  height: 16px;
}

.hr-vacations-tab .hr-vacations-submit-btn {
  align-self: flex-end;
  margin-top: 2px;
}

/* Form */
.hr-vacations-tab .hr-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hr-vacations-tab .hr-form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hr-vacations-tab .hr-form-row label {
  font-size: 13px;
  color: #64748b;
  font-weight: 650;
}

.hr-vacations-tab .hr-form-row select,
.hr-vacations-tab .hr-form-row input[type="date"],
.hr-vacations-tab .hr-form-row textarea {
  border-radius: 10px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  padding: 9px 10px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background: #fbfdff;
  transition: border-color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
}

.hr-vacations-tab .hr-form-row select:focus,
.hr-vacations-tab .hr-form-row input[type="date"]:focus,
.hr-vacations-tab .hr-form-row textarea:focus {
  border-color: #4f46e5;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.14);
}

.hr-vacations-tab .hr-form-row--inline {
  flex-direction: row;
  gap: 10px;
}

.hr-vacations-tab .hr-form-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.hr-vacations-tab .hr-form-optional {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
}

/* Mensajes */
.hr-vacations-tab .hr-error-text {
  margin-top: 6px;
  font-size: 12px;
  color: #b91c1c;
}

.hr-vacations-tab .hr-error-text.small {
  font-size: 11px;
}

.hr-vacations-tab .hr-success-text {
  margin-top: 6px;
  font-size: 12px;
  color: #16a34a;
  font-weight: 650;
}

/* Historial */
.hr-vacations-tab .hr-vacations-requests-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.hr-vacations-tab .hr-vacations-empty {
  font-size: 13px;
  color: #64748b;
}

.hr-vacations-tab .hr-vacations-table-wrapper {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  background: rgba(248, 250, 252, 0.7);
}

/* Tabla */
.hr-vacations-tab .hr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 520px;
}

.hr-vacations-tab .hr-table thead {
  background: rgba(248, 250, 252, 0.95);
}

.hr-vacations-tab .hr-table th,
.hr-vacations-tab .hr-table td {
  padding: 10px 12px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

.hr-vacations-tab .hr-table th {
  font-weight: 750;
  color: #64748b;
}

.hr-vacations-tab .hr-table tbody tr:hover {
  background: rgba(226, 232, 240, 0.35);
}

/* Badges estado */
.hr-vacations-tab .hr-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 750;
  border: 1px solid transparent;
}

.hr-vacations-tab .hr-status-badge--pending {
  background: rgba(234, 179, 8, 0.12);
  color: #b45309;
  border-color: rgba(234, 179, 8, 0.22);
}

.hr-vacations-tab .hr-status-badge--approved {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
  border-color: rgba(34, 197, 94, 0.22);
}

.hr-vacations-tab .hr-status-badge--rejected {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.22);
}

.hr-vacations-tab .hr-status-badge--cancelled {
  background: rgba(148, 163, 184, 0.12);
  color: #64748b;
  border-color: rgba(148, 163, 184, 0.25);
}

/* Responsive */
@media (max-width: 900px) {
  .hr-vacations-tab .hr-vacations-header-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .hr-vacations-tab .hr-vacations-header-right {
    justify-content: flex-start;
  }

  .hr-vacations-tab .hr-vacations-grid {
    grid-template-columns: 1fr;
  }

  .hr-vacations-tab .hr-vacations-submit-btn {
    align-self: stretch;
    justify-content: center;
  }
}

@media (max-width: 650px) {
  .hr-vacations-tab .hr-form-row--inline {
    flex-direction: column;
  }

  .hr-vacations-tab .hr-vacations-metrics {
    grid-template-columns: 1fr;
  }
}
/* frontend/styles/hr/hremployeecalendar.css */

.hr-calendar-tab {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  min-width: 0;
}

/* Header */
.hr-calendar-tab .hr-calendar-header-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border-radius: 20px;
  background: linear-gradient(135deg, #eef2ff, #e0f2fe);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  min-width: 0;
}

.hr-calendar-tab .hr-calendar-header-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.hr-calendar-tab .hr-calendar-header-year {
  margin: 0;
  font-size: 13px;
  color: #64748b;
}

.hr-calendar-tab .hr-calendar-header-title {
  margin: 0;
  font-size: 20px;
  font-weight: 750;
  color: #0f172a;
}

.hr-calendar-tab .hr-calendar-header-subtitle {
  margin: 0;
  font-size: 13px;
  color: #475569;
}

.hr-calendar-tab .hr-calendar-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: 0 0 auto;
}

.hr-calendar-tab .hr-calendar-year-label {
  font-size: 12px;
  color: #64748b;
  font-weight: 650;
}

.hr-calendar-tab .hr-calendar-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hr-calendar-tab .hr-calendar-controls input[type="number"] {
  width: 86px;
  border-radius: 999px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  padding: 7px 10px;
  font-size: 13px;
  text-align: center;
  outline: none;
  background: #ffffff;
  transition: border-color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
}

.hr-calendar-tab .hr-calendar-controls input[type="number"]:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.14);
  background: #ffffff;
}

.hr-calendar-tab .hr-calendar-year-btn {
  border-radius: 999px;
  border: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: #ffffff;
  color: #64748b;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
  transition: background-color 0.1s ease, transform 0.05s ease;
}

.hr-calendar-tab .hr-calendar-year-btn:hover {
  background: #f1f5f9;
  transform: translateY(-1px);
}

.hr-calendar-tab .hr-calendar-loading,
.hr-calendar-tab .hr-calendar-empty-state {
  font-size: 13px;
  color: #64748b;
}

/* Errores (por si no existe global) */
.hr-calendar-tab .hr-error-text {
  margin-top: 2px;
  font-size: 12px;
  color: #b91c1c;
}

/* Métricas (SCOPED, para no depender de otros CSS) */
.hr-calendar-tab .hr-calendar-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  min-width: 0;
}

.hr-calendar-tab .hr-metric-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.hr-calendar-tab .hr-metric-card--primary {
  background: linear-gradient(135deg, #dcfce7, #e0f2fe);
}

.hr-calendar-tab .hr-metric-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.hr-calendar-tab .hr-metric-label {
  font-size: 13px;
  color: #475569;
  font-weight: 750;
}

.hr-calendar-tab .hr-metric-icon {
  width: 18px;
  height: 18px;
  color: #4b3cff;
  flex: 0 0 auto;
}

.hr-calendar-tab .hr-metric-value {
  font-size: 24px;
  font-weight: 800;
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
  color: #0f172a;
}

.hr-calendar-tab .hr-metric-unit {
  font-size: 12px;
  color: #64748b;
  font-weight: 650;
}

.hr-calendar-tab .hr-metric-helper {
  margin: 0;
  font-size: 12px;
  color: #64748b;
}

/* Grid anual */
.hr-calendar-tab .hr-calendar-year-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  min-width: 0;
}

.hr-calendar-tab .hr-calendar-month-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.hr-calendar-tab .hr-calendar-month-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.hr-calendar-tab .hr-calendar-month-name {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
}

.hr-calendar-tab .hr-calendar-month-count {
  font-size: 11px;
  color: #64748b;
  font-weight: 650;
}

.hr-calendar-tab .hr-calendar-empty {
  font-size: 12px;
  color: #64748b;
}

/* Lista de eventos por mes */
.hr-calendar-tab .hr-calendar-events-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 190px;
  overflow-y: auto;
}

.hr-calendar-tab .hr-calendar-event-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 10px;
}

.hr-calendar-tab .hr-calendar-event-row:hover {
  background: rgba(226, 232, 240, 0.35);
}

.hr-calendar-tab .hr-calendar-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.hr-calendar-tab .hr-calendar-day {
  width: 26px;
  text-align: right;
  font-weight: 800;
  color: #0f172a;
}

.hr-calendar-tab .hr-calendar-type {
  color: #64748b;
  font-weight: 650;
}

/* Leyenda */
.hr-calendar-tab .hr-calendar-legend-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.hr-calendar-tab .hr-calendar-legend-title {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
}

.hr-calendar-tab .hr-calendar-legend-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hr-calendar-tab .hr-calendar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #64748b;
  font-weight: 650;
}

/* Responsive */
@media (max-width: 800px) {
  .hr-calendar-tab .hr-calendar-header-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .hr-calendar-tab .hr-calendar-header-right {
    align-items: flex-start;
  }

  .hr-calendar-tab .hr-calendar-legend-card {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* frontend/styles/hr/hremployeedashboard.css */

.hr-employee-dashboard {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Header */
.hr-employee-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}

.hr-employee-title {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 750;
  color: #111827;
}

.hr-employee-subtitle {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.35;
  color: #64748b;
}

/* Tabs (pill bar) */
.hr-tabs {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.03);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);

  /* ✅ mobile-friendly */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.hr-tabs::-webkit-scrollbar {
  height: 6px;
}

.hr-tab-button {
  border: none;
  background: transparent;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #64748b;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.12s ease, color 0.12s ease,
    box-shadow 0.12s ease, transform 0.05s ease;
}

.hr-tab-button:hover {
  background: rgba(148, 163, 184, 0.12);
}

.hr-tab-button:active {
  transform: translateY(1px);
}

.hr-tab-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

.hr-tab-button--active {
  background: #ffffff;
  color: #111827;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
}

.hr-tab-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.hr-tab-label {
  line-height: 1;
}

/* Content */
.hr-tab-content {
  margin-top: 6px;
  min-width: 0;
}

/* Responsive */
@media (max-width: 800px) {
  .hr-employee-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .hr-tabs {
    width: 100%;
    justify-content: flex-start;
  }
}
/* frontend/styles/hr/hr-manager-employees.css */

.hr-manager-team-tab {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* Header */
.hr-manager-team-tab .hr-manager-team-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}

.hr-manager-team-tab .hr-manager-team-title {
  margin: 0;
  font-size: 20px;
  font-weight: 750;
  color: #0f172a;
}

.hr-manager-team-tab .hr-tab-helper-text {
  margin: 6px 0 0;
  font-size: 13px;
  color: #64748b;
}

.hr-manager-team-tab .hr-manager-team-count {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.hr-manager-team-tab .hr-manager-team-count .hr-pill {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  font-size: 12px;
  color: #475569;
  border: 1px solid rgba(148, 163, 184, 0.18);
}

/* Pills (para status/type del detalle) */
.hr-manager-team-tab .hr-pill {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  background: rgba(148, 163, 184, 0.08);
  color: #475569;
}

.hr-manager-team-tab .hr-pill--status {
  background: rgba(34, 197, 94, 0.10);
  color: #16a34a;
  border-color: rgba(34, 197, 94, 0.22);
}

.hr-manager-team-tab .hr-pill--type {
  background: rgba(99, 102, 241, 0.10);
  color: #4f46e5;
  border-color: rgba(99, 102, 241, 0.22);
}

/* Botones (solo dentro del tab) */
.hr-manager-team-tab .hr-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.12s ease, box-shadow 0.12s ease, transform 0.05s ease;
}

.hr-manager-team-tab .hr-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.hr-manager-team-tab .hr-button--primary {
  background: #4f46e5;
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(79, 70, 229, 0.20);
}

.hr-manager-team-tab .hr-button--primary:hover:not(:disabled) {
  background: #4338ca;
}

.hr-manager-team-tab .hr-button--ghost {
  background: #ffffff;
  color: #64748b;
  border-color: #e2e8f0;
}

.hr-manager-team-tab .hr-button--ghost:hover:not(:disabled) {
  background: #f8fafc;
}

.hr-manager-team-tab .hr-button--danger {
  background: #ef4444;
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(239, 68, 68, 0.18);
}

.hr-manager-team-tab .hr-button--danger:hover:not(:disabled) {
  background: #dc2626;
}

.hr-manager-team-tab .hr-button--with-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Mensajes */
.hr-manager-team-tab .hr-success-text {
  margin-top: 6px;
  font-size: 12px;
  color: #16a34a;
}

.hr-manager-team-tab .hr-error-text {
  margin-top: 6px;
  font-size: 12px;
  color: #dc2626;
}

/* Filtros */
.hr-manager-team-tab .hr-manager-team-filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.hr-manager-team-tab .hr-filter-search {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  padding: 7px 12px;
  background: #f8fafc;
}

.hr-manager-team-tab .hr-filter-search-icon {
  width: 16px;
  height: 16px;
  color: #94a3b8;
}

.hr-manager-team-tab .hr-filter-search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: #0f172a;
}

.hr-manager-team-tab .hr-filter-selects {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.hr-manager-team-tab .hr-filter-select {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
}

.hr-manager-team-tab .hr-filter-select label {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 650;
}

.hr-manager-team-tab .hr-filter-select select {
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background: #ffffff;
}

.hr-manager-team-tab .hr-filter-select select:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.14);
}

/* Layout principal */
.hr-manager-team-tab .hr-manager-team-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 2.4fr);
  gap: 16px;
}

/* Lista lateral */
.hr-manager-team-tab .hr-manager-team-list {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  padding: 8px 6px;
  max-height: 520px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.hr-manager-team-tab .hr-manager-team-item {
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.12s ease, box-shadow 0.12s ease, transform 0.05s ease;
}

.hr-manager-team-tab .hr-manager-team-item:hover {
  background: #f1f5f9;
}

.hr-manager-team-tab .hr-manager-team-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.16);
}

.hr-manager-team-tab .hr-manager-team-item--active {
  background: #eef2ff;
  box-shadow: 0 10px 22px rgba(79, 70, 229, 0.14);
}

.hr-manager-team-tab .hr-manager-team-item-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
}

.hr-manager-team-tab .hr-manager-team-item-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
}

.hr-manager-team-tab .hr-manager-team-item-icon {
  width: 18px;
  height: 18px;
  color: #4b5563;
}

.hr-manager-team-tab .hr-manager-team-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hr-manager-team-tab .hr-manager-team-item-name {
  font-size: 13px;
  font-weight: 650;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hr-manager-team-tab .hr-manager-team-item-sub {
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Detalle */
.hr-manager-team-tab .hr-manager-team-detail-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.hr-manager-team-tab .hr-manager-team-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.hr-manager-team-tab .hr-manager-team-detail-main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.hr-manager-team-tab .hr-manager-team-detail-avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
}

.hr-manager-team-tab .hr-manager-team-detail-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hr-manager-team-tab .hr-manager-team-detail-avatar-icon {
  width: 26px;
  height: 26px;
  color: #4b5563;
}

.hr-manager-team-tab .hr-manager-team-detail-headtext {
  min-width: 0;
}

.hr-manager-team-tab .hr-manager-team-detail-name {
  margin: 0;
  font-size: 18px;
  font-weight: 750;
  color: #0f172a;
}

.hr-manager-team-tab .hr-manager-team-detail-position {
  margin: 2px 0 0;
  font-size: 13px;
  color: #64748b;
}

.hr-manager-team-tab .hr-manager-team-detail-department {
  margin: 0;
  font-size: 12px;
  color: #94a3b8;
}

.hr-manager-team-tab .hr-manager-team-detail-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.hr-manager-team-tab .hr-manager-team-detail-actions--editing {
  flex-direction: column;
  align-items: flex-end;
}

.hr-manager-team-tab .hr-manager-team-detail-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.hr-manager-team-tab .hr-manager-team-action-buttons {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.hr-manager-team-tab .hr-icon-button {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.12s ease, box-shadow 0.12s ease, transform 0.05s ease;
}

.hr-manager-team-tab .hr-icon-button:hover {
  background: #f8fafc;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.hr-manager-team-tab .hr-icon-button:active {
  transform: translateY(1px);
}

.hr-manager-team-tab .hr-icon-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.18), 0 10px 22px rgba(15, 23, 42, 0.08);
}

.hr-manager-team-tab .hr-icon-button--danger {
  border-color: #fecaca;
  color: #b91c1c;
}

.hr-manager-team-tab .hr-icon-button--danger:hover {
  background: #fef2f2;
  box-shadow: 0 10px 22px rgba(220, 38, 38, 0.14);
}

/* Grid de info */
.hr-manager-team-tab .hr-manager-team-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr);
  gap: 10px;
}

/* Info cards */
.hr-manager-team-tab .hr-info-card {
  background: #f9fafb;
  border-radius: 14px;
  padding: 12px;
  border: 1px solid rgba(226, 232, 240, 0.85);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.hr-manager-team-tab .hr-info-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 750;
  margin: 0;
  color: #0f172a;
}

.hr-manager-team-tab .hr-info-icon {
  width: 16px;
  height: 16px;
}

.hr-manager-team-tab .hr-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.hr-manager-team-tab .hr-info-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  min-width: 0;
}

.hr-manager-team-tab .hr-info-label {
  color: #94a3b8;
  font-weight: 650;
}

.hr-manager-team-tab .hr-info-value {
  color: #0f172a;
  font-weight: 650;
}

/* Inputs */
.hr-manager-team-tab .hr-info-input {
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  padding: 6px 10px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
  background: #ffffff;
  min-width: 0;
}

.hr-manager-team-tab .hr-info-input:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.14);
}

/* En filas de info (derecha) */
.hr-manager-team-tab .hr-info-row .hr-info-input {
  max-width: 160px;
  text-align: right;
}

/* Footer edición */
.hr-manager-team-tab .hr-manager-team-detail-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}

/* Vacíos */
.hr-manager-team-tab .hr-manager-team-empty {
  font-size: 13px;
  color: #94a3b8;
  padding: 8px 4px;
}

/* =========================
   MODAL
   ========================= */
.hr-manager-team-tab .hr-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 9999;
}

.hr-manager-team-tab .hr-modal {
  width: 100%;
  max-width: 980px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.18);
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.hr-manager-team-tab .hr-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #e2e8f0;
}

.hr-manager-team-tab .hr-modal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 750;
  color: #0f172a;
}

.hr-manager-team-tab .hr-modal-subtitle {
  margin: 4px 0 0;
  font-size: 12px;
  color: #64748b;
}

.hr-manager-team-tab .hr-modal-close {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
}

.hr-manager-team-tab .hr-modal-close:hover {
  background: #f8fafc;
}

.hr-manager-team-tab .hr-modal-body {
  padding: 14px 16px 16px;
}

.hr-manager-team-tab .hr-modal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.hr-manager-team-tab .hr-modal-section {
  background: #f9fafb;
  border-radius: 14px;
  padding: 12px;
  border: 1px solid rgba(226, 232, 240, 0.85);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.hr-manager-team-tab .hr-modal-section-title {
  margin: 0;
  font-size: 13px;
  font-weight: 750;
  color: #0f172a;
}

.hr-manager-team-tab .hr-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hr-manager-team-tab .hr-form-label {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 650;
}

.hr-manager-team-tab .hr-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px 14px;
  border-top: 1px solid #e2e8f0;
}

/* Responsive */
@media (max-width: 900px) {
  .hr-manager-team-tab .hr-manager-team-layout {
    grid-template-columns: 1fr;
  }

  .hr-manager-team-tab .hr-manager-team-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .hr-manager-team-tab .hr-modal-grid {
    grid-template-columns: 1fr;
  }
}
/* frontend/styles/hr/hr-manager-time.css
   Todo va scopeado para no pisar estilos globales */

.hr-manager-time-tab {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

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

.hr-manager-time-header-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding: 20px 24px;
  border-radius: 20px;
  background: linear-gradient(135deg, #eff6ff, #f5f3ff);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.hr-manager-time-header-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hr-manager-time-kicker {
  margin: 0;
  font-size: 12px;
  color: #94a3b8;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.hr-manager-time-title {
  margin: 0;
  font-size: 22px;
  font-weight: 650;
  color: #0f172a;
}

.hr-manager-time-subtitle {
  margin: 0;
  font-size: 13px;
  color: #64748b;
  max-width: 680px;
}

.hr-manager-time-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.hr-manager-time-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.hr-manager-time-pill--secondary {
  background: rgba(255, 255, 255, 0.75);
}

.hr-manager-time-pill-icon {
  width: 16px;
  height: 16px;
  color: #4f46e5;
}

.hr-manager-time-pill-text {
  font-size: 12px;
  color: #334155;
  white-space: nowrap;
}

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

.hr-manager-time-filters-card {
  padding: 12px 14px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.22);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hr-manager-time-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

/* select / date fields */
.hr-manager-time-tab .hr-filter-select,
.hr-manager-time-tab .hr-filter-date-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hr-manager-time-tab .hr-filter-select label,
.hr-manager-time-tab .hr-filter-date-field label {
  font-size: 11px;
  color: #94a3b8;
}

.hr-manager-time-tab .hr-filter-select select,
.hr-manager-time-tab .hr-filter-date-field input[type="date"] {
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background: #ffffff;
  transition: border-color 0.1s ease, box-shadow 0.1s ease;
}

.hr-manager-time-tab .hr-filter-select select:focus,
.hr-manager-time-tab .hr-filter-date-field input[type="date"]:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.18);
}

.hr-filter-dates {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}

/* botones SOLO dentro de este tab */
.hr-manager-time-tab .hr-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  border: none;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.05s ease, box-shadow 0.1s ease, filter 0.1s ease;
}

.hr-manager-time-tab .hr-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.hr-manager-time-tab .hr-button--primary {
  background: #4f46e5;
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(79, 70, 229, 0.28);
}

.hr-manager-time-tab .hr-button--primary:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(0.98);
}

.hr-manager-time-tab .hr-button--ghost {
  background: transparent;
  border: 1px solid #e2e8f0;
  color: #64748b;
}

.hr-manager-time-tab .hr-button--ghost:hover:not(:disabled) {
  background: #f8fafc;
}

/* Banner de error */
.hr-manager-time-tab .hr-error-banner {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(254, 202, 202, 0.85);
  color: #b91c1c;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* =========================
   METRICS (self-contained)
   ========================= */

.hr-manager-time-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}

.hr-manager-time-tab .hr-metric-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.22);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hr-manager-time-tab .hr-metric-card--primary {
  background: linear-gradient(135deg, #eef2ff, #ffffff);
}

.hr-manager-time-tab .hr-metric-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hr-manager-time-tab .hr-metric-label {
  font-size: 12px;
  color: #64748b;
}

.hr-manager-time-tab .hr-metric-icon {
  width: 18px;
  height: 18px;
  color: #4f46e5;
}

.hr-manager-time-tab .hr-metric-value {
  font-size: 24px;
  font-weight: 650;
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
  color: #0f172a;
}

.hr-manager-time-tab .hr-metric-unit {
  font-size: 12px;
  color: #94a3b8;
}

.hr-manager-time-tab .hr-metric-helper {
  margin: 0;
  font-size: 12px;
  color: #94a3b8;
}

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

.hr-manager-time-table-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.25);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hr-manager-time-table-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.hr-manager-time-table-title {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  color: #0f172a;
}

.hr-manager-time-table-subtitle {
  margin: 4px 0 0;
  font-size: 12px;
  color: #94a3b8;
}

.hr-manager-time-table-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  color: #475569;
  font-size: 12px;
}

.hr-manager-time-table-pill-icon {
  width: 16px;
  height: 16px;
}

.hr-manager-time-empty {
  font-size: 13px;
  color: #94a3b8;
}

/* Tabla (scopeado) */
.hr-manager-time-tab .hr-time-history-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.hr-manager-time-tab .hr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.hr-manager-time-tab .hr-table thead {
  background: #f8fafc;
}

.hr-manager-time-tab .hr-table th,
.hr-manager-time-tab .hr-table td {
  padding: 10px 10px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid #e2e8f0;
}

.hr-manager-time-tab .hr-table th {
  font-weight: 650;
  color: #64748b;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.hr-manager-time-tab .hr-table tbody tr:hover td {
  background: #f9fafb;
}

/* Inputs inline en tabla */
.hr-manager-time-tab .hr-inline-input {
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  padding: 6px 8px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
  background: #ffffff;
  transition: border-color 0.1s ease, box-shadow 0.1s ease;
}

.hr-manager-time-tab .hr-inline-input:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.16);
}

/* Badges estado (scopeado) */
.hr-manager-time-tab .hr-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
}

.hr-manager-time-tab .hr-badge--open {
  background: rgba(56, 189, 248, 0.12);
  color: #0284c7;
}

.hr-manager-time-tab .hr-badge--closed {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

/* Acciones */
.hr-manager-time-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* Botones icono (editar / eliminar) */
.hr-manager-time-tab .hr-icon-button {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.12s ease, box-shadow 0.12s ease, transform 0.05s ease;
}

.hr-manager-time-tab .hr-icon-button:hover {
  background: #f8fafc;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.hr-manager-time-tab .hr-icon-button:active {
  transform: translateY(1px);
}

.hr-manager-time-tab .hr-icon-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.18), 0 10px 22px rgba(15, 23, 42, 0.08);
}

.hr-manager-time-tab .hr-icon-button--danger {
  border-color: #fecaca;
  color: #b91c1c;
}

.hr-manager-time-tab .hr-icon-button--danger:hover {
  background: #fef2f2;
  box-shadow: 0 10px 22px rgba(220, 38, 38, 0.14);
}

/* Helper inicial */
.hr-manager-time-helper {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #94a3b8;
  padding: 8px 4px;
}

.hr-manager-time-helper-icon {
  width: 16px;
  height: 16px;
}

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

@media (max-width: 900px) {
  .hr-manager-time-header-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .hr-manager-time-header-right {
    align-items: flex-start;
  }

  .hr-manager-time-filter-row {
    flex-direction: column;
    align-items: stretch;
  }

  .hr-filter-dates {
    width: 100%;
  }

  .hr-manager-time-metrics {
    grid-template-columns: 1fr;
  }
}
/* frontend/styles/hr/hr-manager-vacations.css
   Scopeado para no pisar global: TODO dentro de .hr-manager-vacations-tab */

.hr-manager-vacations-tab {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

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

.hr-manager-vacations-tab .hr-manager-vacations-header-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding: 20px 24px;
  border-radius: 20px;
  background: linear-gradient(135deg, #ecfeff, #eef2ff);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.hr-manager-vacations-tab .hr-manager-vacations-header-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hr-manager-vacations-tab .hr-manager-vacations-kicker {
  margin: 0;
  font-size: 12px;
  color: #94a3b8;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.hr-manager-vacations-tab .hr-manager-vacations-title {
  margin: 0;
  font-size: 22px;
  font-weight: 650;
  color: #0f172a;
}

.hr-manager-vacations-tab .hr-manager-vacations-subtitle {
  margin: 0;
  font-size: 13px;
  color: #64748b;
  max-width: 760px;
}

.hr-manager-vacations-tab .hr-manager-vacations-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.hr-manager-vacations-tab .hr-manager-vacations-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.hr-manager-vacations-tab .hr-manager-vacations-pill--secondary {
  background: rgba(255, 255, 255, 0.75);
}

.hr-manager-vacations-tab .hr-manager-vacations-pill-icon {
  width: 16px;
  height: 16px;
  color: #4f46e5;
}

.hr-manager-vacations-tab .hr-manager-vacations-pill-text {
  font-size: 12px;
  color: #334155;
  white-space: nowrap;
}

/* =========================
   BUTTONS (solo este tab)
   ========================= */

.hr-manager-vacations-tab .hr-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  border: none;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: transform 0.05s ease, box-shadow 0.1s ease, filter 0.1s ease;
}

.hr-manager-vacations-tab .hr-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.hr-manager-vacations-tab .hr-button--primary {
  background: #4f46e5;
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(79, 70, 229, 0.28);
}

.hr-manager-vacations-tab .hr-button--primary:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(0.98);
}

.hr-manager-vacations-tab .hr-button--small {
  padding: 7px 12px;
  font-size: 12px;
}

.hr-manager-vacations-tab .hr-button--success {
  background: #16a34a;
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(22, 163, 74, 0.22);
}

.hr-manager-vacations-tab .hr-button--success:hover:not(:disabled) {
  filter: brightness(0.98);
  transform: translateY(-1px);
}

.hr-manager-vacations-tab .hr-button--danger {
  background: #dc2626;
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(220, 38, 38, 0.2);
}

.hr-manager-vacations-tab .hr-button--danger:hover:not(:disabled) {
  filter: brightness(0.98);
  transform: translateY(-1px);
}

.hr-manager-vacations-tab .hr-button-icon {
  width: 14px;
  height: 14px;
}

/* Messages */
.hr-manager-vacations-tab .hr-success-text {
  font-size: 12px;
  color: #16a34a;
}

.hr-manager-vacations-tab .hr-error-inline {
  font-size: 12px;
  color: #dc2626;
}

/* =========================
   CREATE CARD
   ========================= */

.hr-manager-vacations-tab .hr-manager-vacations-create-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.22);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hr-manager-vacations-tab .hr-manager-vacations-create-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hr-manager-vacations-tab .hr-manager-vacations-create-title {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  color: #0f172a;
}

.hr-manager-vacations-tab .hr-manager-vacations-create-helper {
  margin: 0;
  font-size: 12px;
  color: #94a3b8;
}

.hr-manager-vacations-tab .hr-manager-vacations-create-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hr-manager-vacations-tab .hr-manager-vacations-create-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.hr-manager-vacations-tab .hr-manager-vacations-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hr-manager-vacations-tab .hr-manager-vacations-field--full {
  grid-column: 1 / -1;
}

.hr-manager-vacations-tab .hr-manager-vacations-field label {
  font-size: 11px;
  color: #94a3b8;
}

.hr-manager-vacations-tab .hr-manager-vacations-field select,
.hr-manager-vacations-tab .hr-manager-vacations-field input[type="date"],
.hr-manager-vacations-tab .hr-manager-vacations-field textarea {
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background: #ffffff;
  transition: border-color 0.1s ease, box-shadow 0.1s ease;
}

.hr-manager-vacations-tab .hr-manager-vacations-field textarea {
  border-radius: 14px;
  resize: vertical;
  line-height: 1.35;
}

.hr-manager-vacations-tab .hr-manager-vacations-field select:focus,
.hr-manager-vacations-tab .hr-manager-vacations-field input[type="date"]:focus,
.hr-manager-vacations-tab .hr-manager-vacations-field textarea:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.16);
}

.hr-manager-vacations-tab .hr-manager-vacations-create-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

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

.hr-manager-vacations-tab .hr-manager-vacations-filters-card {
  padding: 12px 14px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.22);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hr-manager-vacations-tab .hr-manager-vacations-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.hr-manager-vacations-tab .hr-filter-select {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
}

.hr-manager-vacations-tab .hr-filter-select label {
  font-size: 11px;
  color: #94a3b8;
}

.hr-manager-vacations-tab .hr-filter-select select {
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background: #ffffff;
  transition: border-color 0.1s ease, box-shadow 0.1s ease;
}

.hr-manager-vacations-tab .hr-filter-select select:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.18);
}

/* Error banner */
.hr-manager-vacations-tab .hr-error-banner {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(254, 202, 202, 0.85);
  color: #b91c1c;
  font-size: 12px;
}

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

.hr-manager-vacations-tab .hr-manager-vacations-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}

.hr-manager-vacations-tab .hr-metric-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.22);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hr-manager-vacations-tab .hr-metric-card--primary {
  background: linear-gradient(135deg, #eef2ff, #ffffff);
}

.hr-manager-vacations-tab .hr-metric-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hr-manager-vacations-tab .hr-metric-label {
  font-size: 12px;
  color: #64748b;
}

.hr-manager-vacations-tab .hr-metric-icon {
  width: 18px;
  height: 18px;
  color: #4f46e5;
}

.hr-manager-vacations-tab .hr-metric-value {
  font-size: 24px;
  font-weight: 650;
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
  color: #0f172a;
}

.hr-manager-vacations-tab .hr-metric-unit {
  font-size: 12px;
  color: #94a3b8;
}

.hr-manager-vacations-tab .hr-metric-helper {
  margin: 0;
  font-size: 12px;
  color: #94a3b8;
}

/* =========================
   TABLE CARD + TABLE
   ========================= */

.hr-manager-vacations-tab .hr-manager-vacations-table-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.25);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hr-manager-vacations-tab .hr-manager-vacations-table-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.hr-manager-vacations-tab .hr-manager-vacations-table-title {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  color: #0f172a;
}

.hr-manager-vacations-tab .hr-manager-vacations-table-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  color: #475569;
  font-size: 12px;
}

.hr-manager-vacations-tab .hr-manager-vacations-table-pill-icon {
  width: 16px;
  height: 16px;
}

.hr-manager-vacations-tab .hr-manager-vacations-empty {
  font-size: 13px;
  color: #94a3b8;
}

/* Tabla scopeada */
.hr-manager-vacations-tab .hr-time-history-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.hr-manager-vacations-tab .hr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.hr-manager-vacations-tab .hr-table thead {
  background: #f8fafc;
}

.hr-manager-vacations-tab .hr-table th,
.hr-manager-vacations-tab .hr-table td {
  padding: 10px 10px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid #e2e8f0;
}

.hr-manager-vacations-tab .hr-table th {
  font-weight: 650;
  color: #64748b;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.hr-manager-vacations-tab .hr-table tbody tr:hover td {
  background: #f9fafb;
}

.hr-manager-vacations-tab .hr-table-muted {
  font-size: 12px;
  color: #94a3b8;
}

/* Badges scopeados */
.hr-manager-vacations-tab .hr-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
}

.hr-manager-vacations-tab .hr-badge--pending {
  background: rgba(245, 158, 11, 0.16);
  color: #92400e;
}

.hr-manager-vacations-tab .hr-badge--success {
  background: rgba(34, 197, 94, 0.14);
  color: #16a34a;
}

.hr-manager-vacations-tab .hr-badge--danger {
  background: rgba(239, 68, 68, 0.14);
  color: #b91c1c;
}

.hr-manager-vacations-tab .hr-badge--neutral {
  background: rgba(148, 163, 184, 0.18);
  color: #475569;
}

/* =========================
   ACTIONS (approve/reject + icons)
   ========================= */

.hr-manager-vacations-tab .hr-manager-vacations-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.hr-manager-vacations-tab .hr-manager-vacations-manage-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hr-manager-vacations-tab .hr-manager-vacations-icon-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Icon buttons (solo vacations tab) */
.hr-manager-vacations-tab .hr-icon-button {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.12s ease, box-shadow 0.12s ease, transform 0.05s ease;
}

.hr-manager-vacations-tab .hr-icon-button:hover {
  background: #f8fafc;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.hr-manager-vacations-tab .hr-icon-button:active {
  transform: translateY(1px);
}

.hr-manager-vacations-tab .hr-icon-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.18),
    0 10px 22px rgba(15, 23, 42, 0.08);
}

.hr-manager-vacations-tab .hr-icon-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.hr-manager-vacations-tab .hr-icon-button--danger {
  border-color: #fecaca;
  color: #b91c1c;
}

.hr-manager-vacations-tab .hr-icon-button--danger:hover {
  background: #fef2f2;
  box-shadow: 0 10px 22px rgba(220, 38, 38, 0.14);
}

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

@media (max-width: 900px) {
  .hr-manager-vacations-tab .hr-manager-vacations-header-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .hr-manager-vacations-tab .hr-manager-vacations-header-right {
    align-items: flex-start;
  }

  .hr-manager-vacations-tab .hr-manager-vacations-filter-row {
    flex-direction: column;
    align-items: stretch;
  }

  .hr-manager-vacations-tab .hr-manager-vacations-metrics {
    grid-template-columns: 1fr;
  }

  .hr-manager-vacations-tab .hr-manager-vacations-create-grid {
    grid-template-columns: 1fr;
  }

  .hr-manager-vacations-tab .hr-filter-select {
    min-width: 0;
  }
}
/* frontend/styles/hr/hr-manager-work-schedule.css
   Todo scopeado para no pisar otros tabs */

.hr-manager-work-schedule-tab {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* =========================
   Header
   ========================= */

.hr-manager-work-schedule-tab .hr-manager-work-schedule-header h2 {
  font-size: 1.4rem;
  font-weight: 650;
  margin: 0 0 0.25rem;
}

.hr-manager-work-schedule-tab .hr-tab-helper-text {
  margin: 0;
  font-size: 0.9rem;
  color: #6b7280;
}

/* =========================
   Controls card
   ========================= */

.hr-manager-work-schedule-tab .hr-manager-work-schedule-controls {
  background: #ffffff;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.22);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hr-manager-work-schedule-tab .hr-manager-work-schedule-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

/* Filter select (local) */
.hr-manager-work-schedule-tab .hr-filter-select {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 260px;
}

.hr-manager-work-schedule-tab .hr-filter-select label {
  font-size: 11px;
  color: #94a3b8;
}

.hr-manager-work-schedule-tab .hr-filter-select select {
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background: #ffffff;
  transition: border-color 0.1s ease, box-shadow 0.1s ease;
}

.hr-manager-work-schedule-tab .hr-filter-select select:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.16);
}

/* Buttons (local) */
.hr-manager-work-schedule-tab .hr-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  border: none;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: transform 0.05s ease, box-shadow 0.1s ease, filter 0.1s ease;
  white-space: nowrap;
}

.hr-manager-work-schedule-tab .hr-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.hr-manager-work-schedule-tab .hr-button-icon {
  width: 14px;
  height: 14px;
}

.hr-manager-work-schedule-tab .hr-button--primary {
  background: #4f46e5;
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(79, 70, 229, 0.22);
}

.hr-manager-work-schedule-tab .hr-button--primary:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(0.98);
}

.hr-manager-work-schedule-tab .hr-button--ghost {
  background: rgba(148, 163, 184, 0.12);
  color: #475569;
  border: 1px solid rgba(226, 232, 240, 0.9);
}

.hr-manager-work-schedule-tab .hr-button--ghost:hover:not(:disabled) {
  filter: brightness(0.98);
  transform: translateY(-1px);
}

.hr-manager-work-schedule-tab .hr-button--small {
  padding: 7px 12px;
  font-size: 12px;
}

.hr-manager-work-schedule-tab .hr-button--danger-outline {
  background: transparent;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.hr-manager-work-schedule-tab .hr-button--danger-outline:hover:not(:disabled) {
  background: #fef2f2;
  transform: translateY(-1px);
}

/* Banners */
.hr-manager-work-schedule-tab .hr-error-banner {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(254, 202, 202, 0.85);
  color: #b91c1c;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hr-manager-work-schedule-tab .hr-success-banner {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(187, 247, 208, 0.9);
  color: #166534;
  font-size: 12px;
}

/* =========================
   Metrics
   ========================= */

.hr-manager-work-schedule-tab .hr-manager-work-schedule-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.hr-manager-work-schedule-tab .hr-metric-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.22);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hr-manager-work-schedule-tab .hr-metric-card--primary {
  background: linear-gradient(135deg, #eef2ff, #ffffff);
}

.hr-manager-work-schedule-tab .hr-metric-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hr-manager-work-schedule-tab .hr-metric-label {
  font-size: 12px;
  color: #64748b;
}

.hr-manager-work-schedule-tab .hr-metric-icon {
  width: 18px;
  height: 18px;
  color: #4f46e5;
}

.hr-manager-work-schedule-tab .hr-metric-value {
  font-size: 18px;
  font-weight: 650;
  color: #0f172a;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.hr-manager-work-schedule-tab .hr-metric-unit {
  font-size: 12px;
  color: #94a3b8;
}

.hr-manager-work-schedule-tab .hr-metric-helper {
  margin: 0;
  font-size: 12px;
  color: #94a3b8;
}

/* =========================
   Table card
   ========================= */

.hr-manager-work-schedule-tab .hr-manager-work-schedule-table-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.25);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hr-manager-work-schedule-tab .hr-manager-work-schedule-table-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.hr-manager-work-schedule-tab .hr-manager-work-schedule-title {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  color: #0f172a;
}

.hr-manager-work-schedule-tab .hr-manager-work-schedule-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  color: #475569;
  font-size: 12px;
}

.hr-manager-work-schedule-tab .hr-manager-work-schedule-pill-icon {
  width: 16px;
  height: 16px;
}

.hr-manager-work-schedule-tab .hr-manager-work-schedule-empty {
  padding: 10px 6px;
  font-size: 13px;
  color: #94a3b8;
}

/* =========================
   Table (simple + responsive)
   ========================= */

.hr-manager-work-schedule-tab .hr-time-history-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Mantén tabla simple, con scroll. Columna Día sticky para no “perder” los nombres */
.hr-manager-work-schedule-tab .hr-work-schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 720px;
}

.hr-manager-work-schedule-tab .hr-work-schedule-table thead {
  background: #f8fafc;
}

.hr-manager-work-schedule-tab .hr-work-schedule-table th,
.hr-manager-work-schedule-tab .hr-work-schedule-table td {
  padding: 10px 10px;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: middle;
  white-space: nowrap;
}

/* Hover limpio (sin “cortes” raros) */
.hr-manager-work-schedule-tab .hr-work-schedule-table tbody tr:hover td {
  background: #f9fafb;
}

/* STICKY: Día */
.hr-manager-work-schedule-tab .hr-work-schedule-table th:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
}

.hr-manager-work-schedule-tab .hr-work-schedule-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #ffffff;
  border-right: 1px solid #e2e8f0;
}

/* Hover también para sticky */
.hr-manager-work-schedule-tab .hr-work-schedule-table tbody tr:hover td:first-child {
  background: #f9fafb;
}

.hr-manager-work-schedule-tab .hr-work-schedule-day-name {
  font-weight: 650;
  color: #0f172a;
  margin-right: 10px;
  white-space: normal;     /* permite ver el nombre completo si hace falta */
  overflow: visible;
  text-overflow: clip;
}

/* Badges (local) */
.hr-manager-work-schedule-tab .hr-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.hr-manager-work-schedule-tab .hr-badge--neutral {
  background: rgba(148, 163, 184, 0.18);
  color: #475569;
}

/* Inputs time */
.hr-manager-work-schedule-tab .hr-time-input {
  width: 140px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background: #ffffff;
  transition: border-color 0.1s ease, box-shadow 0.1s ease;
}

.hr-manager-work-schedule-tab .hr-time-input:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.16);
}

.hr-manager-work-schedule-tab .hr-manager-work-schedule-helper {
  margin-top: 10px;
  font-size: 12px;
  color: #94a3b8;
}

/* =========================
   Responsive
   ========================= */

@media (max-width: 900px) {
  .hr-manager-work-schedule-tab .hr-manager-work-schedule-row {
    flex-direction: column;
    align-items: stretch;
  }

  .hr-manager-work-schedule-tab .hr-filter-select {
    min-width: 0;
  }

  .hr-manager-work-schedule-tab .hr-time-input {
    width: 100%;
    max-width: 180px;
  }
}
/* frontend/styles/hr/hr-manager-reports.css */

/* Importante:
   TODO va scoping dentro de .hr-manager-reports-tab para NO pisar
   estilos globales (hr-button, hr-table, hr-metric-card, etc.) */

.hr-manager-reports-tab {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

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

.hr-manager-reports-header-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding: 20px 24px;
  border-radius: 20px;
  background: linear-gradient(135deg, #eef2ff, #e0f2fe);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.hr-manager-reports-header-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hr-manager-reports-kicker {
  margin: 0;
  font-size: 12px;
  color: #94a3b8;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.hr-manager-reports-title {
  margin: 0;
  font-size: 22px;
  font-weight: 650;
  color: #0f172a;
}

.hr-manager-reports-subtitle {
  margin: 0;
  font-size: 13px;
  color: #64748b;
  max-width: 620px;
}

.hr-manager-reports-header-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.hr-manager-reports-range-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.hr-manager-reports-range-icon {
  width: 16px;
  height: 16px;
  color: #4f46e5;
}

.hr-manager-reports-range-text {
  font-size: 12px;
  color: #334155;
  white-space: nowrap;
}

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

.hr-manager-reports-filters-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.hr-manager-reports-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.hr-manager-reports-tab .hr-filter-date-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hr-manager-reports-tab .hr-filter-date-field label {
  font-size: 11px;
  color: #94a3b8;
}

.hr-manager-reports-tab .hr-filter-date-field input[type="date"] {
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  padding: 8px 12px;
  font-size: 13px;
  outline: none;
  background: #f8fafc;
  transition: border-color 0.1s ease, box-shadow 0.1s ease;
}

.hr-manager-reports-tab .hr-filter-date-field input[type="date"]:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.18);
}

/* Botón SOLO dentro de reports */
.hr-manager-reports-tab .hr-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  border: none;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.05s ease, box-shadow 0.1s ease, filter 0.1s ease;
}

.hr-manager-reports-tab .hr-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.hr-manager-reports-tab .hr-button--primary {
  background: #4f46e5;
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(79, 70, 229, 0.28);
}

.hr-manager-reports-tab .hr-button--primary:hover:not(:disabled) {
  filter: brightness(0.98);
  transform: translateY(-1px);
}

.hr-manager-reports-tab .hr-error-banner {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(254, 202, 202, 0.9);
  color: #b91c1c;
  font-size: 13px;
}

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

.hr-manager-reports-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}

.hr-manager-reports-tab .hr-metric-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.22);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hr-manager-reports-tab .hr-metric-card--primary {
  background: linear-gradient(135deg, #eef2ff, #ffffff);
}

.hr-manager-reports-tab .hr-metric-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hr-manager-reports-tab .hr-metric-label {
  font-size: 12px;
  color: #64748b;
}

.hr-manager-reports-tab .hr-metric-icon {
  width: 18px;
  height: 18px;
  color: #4f46e5;
}

.hr-manager-reports-tab .hr-metric-value {
  font-size: 24px;
  font-weight: 650;
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
  color: #0f172a;
}

.hr-manager-reports-tab .hr-metric-unit {
  font-size: 12px;
  color: #94a3b8;
}

.hr-manager-reports-tab .hr-metric-helper {
  margin: 0;
  font-size: 12px;
  color: #94a3b8;
}

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

.hr-manager-reports-table-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.25);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hr-manager-reports-table-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.hr-manager-reports-table-title {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  color: #0f172a;
}

.hr-manager-reports-table-subtitle {
  margin: 4px 0 0;
  font-size: 12px;
  color: #64748b;
}

.hr-manager-reports-table-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  color: #475569;
  font-size: 12px;
}

.hr-manager-reports-table-icon {
  width: 16px;
  height: 16px;
}

.hr-manager-reports-empty {
  padding: 10px 6px;
  font-size: 13px;
  color: #94a3b8;
}

/* Tabla SOLO dentro de reports */
.hr-manager-reports-tab .hr-time-history-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.hr-manager-reports-tab .hr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.hr-manager-reports-tab .hr-table thead {
  background: #f8fafc;
}

.hr-manager-reports-tab .hr-table th,
.hr-manager-reports-tab .hr-table td {
  padding: 10px 10px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid #e2e8f0;
}

.hr-manager-reports-tab .hr-table th {
  font-weight: 600;
  color: #64748b;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.hr-manager-reports-tab .hr-table tbody tr:hover td {
  background: #f9fafb;
}

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

@media (max-width: 900px) {
  .hr-manager-reports-header-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .hr-manager-reports-header-right {
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .hr-manager-reports-filters-card {
    padding: 12px 12px;
  }

  .hr-manager-reports-table-card {
    padding: 14px 14px;
  }

  .hr-manager-reports-tab .hr-table th,
  .hr-manager-reports-tab .hr-table td {
    padding: 9px 8px;
  }
}
.hr-manager-dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Header */
.hr-manager-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}

.hr-manager-title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
}

.hr-manager-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: #94a3b8;
}

/* Tabs (mismo estilo que empleado) */
.hr-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.03);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.hr-tab-button {
  border: none;
  background: transparent;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease,
    box-shadow 0.12s ease, transform 0.05s ease;
}

.hr-tab-button:hover {
  background: rgba(148, 163, 184, 0.12);
}

.hr-tab-button--active {
  background: #ffffff;
  color: #111827;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
}

.hr-tab-icon {
  width: 16px;
  height: 16px;
}

/* Contenido */
.hr-tab-content {
  margin-top: 6px;
}

/* Contenedor base para las vistas del manager */
.hr-manager-tab {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hr-tab-helper-text {
  font-size: 13px;
  color: #94a3b8;
}

/* Responsive */
@media (max-width: 800px) {
  .hr-manager-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .hr-tabs {
    width: 100%;
    justify-content: flex-start;
  }
}
:root {
  /* =========================
     App shell (layout)
  ========================= */
  --app-text: #102129;
  --app-shell-bg: radial-gradient(
    circle at top left,
    #f6fbfd 0,
    #f9fafc 40%,
    #ffffff 100%
  );
  --app-content-bg: linear-gradient(
    180deg,
    rgba(248, 252, 253, 0.94),
    #ffffff 45%,
    #ffffff 100%
  );

  /* =========================
     UI Tokens
  ========================= */

  /* Radios */
  --ui-radius-10: 10px;
  --ui-radius-14: 14px;
  --ui-radius-18: 18px;
  --ui-radius-22: 22px;
  --ui-radius-pill: 999px;

  /* Texto */
  --ui-text: #2f2430;
  --ui-text-muted: #7a687f;
  --ui-text-soft: #a28fae;

  /* Bordes / superficies */
  --ui-border: #e0d6e6;
  --ui-border-soft: #f0e4f3;
  --ui-surface: #ffffff;
  --ui-surface-soft: #faf5fc;
  --ui-surface-lilac: #f6f0fa;

  /* Marca */
  --ui-primary-1: #c8b7dd;
  --ui-primary-2: #f4b8a4;
  --ui-primary-gradient: linear-gradient(
    135deg,
    var(--ui-primary-1),
    var(--ui-primary-2)
  );

  /* Sombras */
  --ui-shadow-card: 0 18px 40px rgba(58, 43, 54, 0.12);
  --ui-shadow-soft: 0 8px 18px rgba(58, 43, 54, 0.08);
  --ui-shadow-primary: 0 8px 18px rgba(200, 183, 221, 0.6);
  --ui-shadow-primary-hover: 0 10px 22px rgba(200, 183, 221, 0.85);

  /* Focus */
  --ui-focus-ring: 0 0 0 2px rgba(200, 183, 221, 0.32);
}

/* =========================
   Buttons
========================= */
.btn-primary,
.btn-secondary,
.btn-danger,
.ghost,
.btn-ghost {
  border-radius: var(--ui-radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  font-weight: 500;
  line-height: 1;
  transition: background 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease, transform 0.1s ease, opacity 0.2s ease;
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-danger:focus-visible,
.ghost:focus-visible,
.btn-ghost:focus-visible {
  outline: none;
  box-shadow: var(--ui-focus-ring);
}

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
}

.btn-xs {
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
}

.btn-primary {
  border: none;
  background: var(--ui-primary-gradient);
  color: #ffffff;
  box-shadow: var(--ui-shadow-primary);
}

.btn-primary:hover:not(:disabled) {
  box-shadow: var(--ui-shadow-primary-hover);
  transform: translateY(-1px);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(1px);
}

.btn-secondary {
  border: 1px solid rgba(200, 183, 221, 0.9);
  background: rgba(246, 240, 250, 0.9);
  color: #6e5c80;
}

.btn-secondary:hover:not(:disabled) {
  background: var(--ui-surface);
  border-color: var(--ui-primary-1);
}

.ghost,
.btn-ghost {
  border: 1px solid #ddcfe7;
  background: transparent;
  color: #6d5a74;
}

.ghost:hover:not(:disabled),
.btn-ghost:hover:not(:disabled) {
  background: #f5eef9;
  border-color: #ccb8df;
}

.btn-danger {
  border: 1px solid rgba(212, 92, 82, 0.9);
  background: rgba(240, 125, 122, 0.14);
  color: #d45c52;
}

.btn-danger:hover:not(:disabled) {
  background: rgba(240, 125, 122, 0.22);
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled,
.ghost:disabled,
.btn-ghost:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .btn-secondary,
  .btn-danger,
  .ghost,
  .btn-ghost {
    transition: none;
  }
}

/* =========================
   Segmented (tabs tipo pills)
========================= */
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.18rem;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-surface-lilac);
  border: 1px solid #e3d7ef;
  box-shadow: var(--ui-shadow-soft);
}

.segmented-btn {
  border: none;
  border-radius: var(--ui-radius-pill);
  padding: 0.32rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  color: #7c6887;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.segmented-btn:hover {
  background: #f5eef9;
  color: #5c4867;
}

.segmented-btn.is-active {
  background: #ffffff;
  color: #af90c8;
  box-shadow: 0 4px 10px rgba(175, 144, 200, 0.45);
}

/* =========================
   UI Confirm / Warning Modal (global styles)
   (no usa .modal genérico para evitar conflictos)
========================= */
.ui-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(47, 36, 48, 0.35);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 999;
}

.ui-modal {
  width: min(560px, 100%);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  border-radius: 24px;
  border: 1px solid var(--ui-border-soft);
  background: linear-gradient(180deg, #ffffff 0%, #fbf8fd 100%);
  box-shadow: 0 22px 60px rgba(58, 43, 54, 0.28);
  padding: 1rem 1rem 0.95rem;
  box-sizing: border-box;
  animation: uiModalIn 140ms ease-out;
}

@keyframes uiModalIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.ui-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.7rem;
}

.ui-modal-header h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ui-text);
}

.ui-modal-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
}

.ui-modal-body--single {
  grid-template-columns: 1fr;
}

.ui-modal-footer {
  margin-top: 0.95rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
}

/* Texto del warning */
.ui-delete-help {
  font-size: 0.95rem;
  color: #0f172a;
}

.ui-delete-subhelp {
  margin-top: 6px;
  font-size: 0.82rem;
  color: #64748b;
}

/* Banner error “inline” dentro del modal */
.ui-modal-error {
  padding: 0.6rem 0.85rem;
  border-radius: 14px;
  border: 1px solid rgba(209, 103, 115, 0.35);
  background: rgba(209, 103, 115, 0.08);
  color: #b5475c;
  font-size: 0.88rem;
}

@media (prefers-reduced-motion: reduce) {
  .ui-modal {
    animation: none;
  }
}

/* =========================
   UI Modal form fields (global)
========================= */
.ui-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ui-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ui-text);
}

.ui-input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: 14px;
  border: 1px solid var(--ui-border-soft);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ui-text);
  outline: none;
  box-sizing: border-box;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.ui-input:focus {
  border-color: rgba(200, 183, 221, 0.9);
  box-shadow: var(--ui-focus-ring);
}

.ui-input:disabled {
  opacity: 0.7;
  cursor: default;
}

.ui-help {
  font-size: 0.8rem;
  color: var(--ui-text-muted);
}
/* Tipografías globales */
:root {
  --font-body: "Urbanist", system-ui, -apple-system, "Segoe UI", Roboto, Arial,
    sans-serif;
  --font-heading: "Montserrat", var(--font-body);
}

/* Reset básico y consistente */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--app-text, #102129);
  background: #ffffff;
}

/* Tipografía headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
}

/* Formularios y botones heredan tipografía/color */
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Links sin sorpresas */
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Media responsive por defecto */
img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

/*# sourceMappingURL=styles.aa28df8b6fd4c914c1bf.css.map*/