:root {
  /* Surface */
  --mt-surface-base:     #fbfaf7;   /* fondo cálido, no blanco puro */
  --mt-surface-raised:   #ffffff;    /* paneles elevados */
  --mt-surface-sidebar:  #eff3f5;  /* barra lateral, tono frío suave */
  --mt-surface-nav:      #ffffff;    /* barra superior blanca */
  --mt-surface-overlay:  rgba(0, 0, 0, 0.45);

  /* Bordes */
  --mt-border-subtle:    #e1e6e8;
  --mt-border-default:   #cad2d5;
  --mt-border-strong:    #9da6aa;

  /* Texto */
  --mt-text-primary:     #0f161a;  /* casi negro, slate cálido */
  --mt-text-secondary:   #4c5458;
  --mt-text-tertiary:    #818789;
  --mt-text-disabled:    #a4a8aa;
  --mt-text-on-accent:   #fbfaf8;

  /* Acento: pine-teal oscuro — clínico sin ser corporativo */
  --mt-accent:           #084234;
  --mt-accent-hover:     #013428;
  --mt-accent-active:    #002a20;
  --mt-accent-subtle:    #e4f5ef;
  --mt-accent-text:      #043c2f;  /* sobre fondo claro */

  /* Semántico */
  --mt-error:            #8d2521;
  --mt-error-subtle:     #ffeeec;
  --mt-success:          #00572e;
  --mt-success-subtle:   #e8f7ec;
  --mt-warning:          #bb7e00;
  --mt-warning-subtle:   #fff3e1;

  /* Tipografía */
  --mt-font:    -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui,
                'Helvetica Neue', Arial, sans-serif;
  --mt-font-xs: 11px;
  --mt-font-sm: 12px;
  --mt-font-base: 13px;
  --mt-font-md:  14px;
  --mt-font-lg:  15px;
  --mt-font-xl:  18px;
  --mt-font-2xl: 22px;

  /* Espaciado */
  --mt-space-1: 4px;
  --mt-space-2: 8px;
  --mt-space-3: 12px;
  --mt-space-4: 16px;
  --mt-space-5: 20px;
  --mt-space-6: 24px;
  --mt-space-8: 32px;

  /* Radio */
  --mt-radius-sm: 4px;
  --mt-radius:    6px;
  --mt-radius-lg: 8px;

  /* Sombra */
  --mt-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.06),
                   0 1px 3px rgba(0, 0, 0, 0.08);
  --mt-shadow:     0 2px 6px rgba(0, 0, 0, 0.08),
                   0 4px 12px rgba(0, 0, 0, 0.06);
  --mt-shadow-lg:  0 4px 16px rgba(0, 0, 0, 0.1),
                   0 8px 32px rgba(0, 0, 0, 0.08);

  /* Transición */
  --mt-ease:      cubic-bezier(0.25, 0.0, 0.0, 1.0); /* ease-out-quart */
  --mt-duration:  160ms;
}

@supports (color: oklch(0 0 0)) {
  :root {
  --mt-surface-base:     oklch(0.985 0.004 85);   /* fondo cálido, no blanco puro */
  --mt-surface-raised:   oklch(1.0   0.0   0);    /* paneles elevados */
  --mt-surface-sidebar:  oklch(0.962 0.005 225);  /* barra lateral, tono frío suave */
  --mt-surface-nav:      oklch(1.0   0.0   0);    /* barra superior blanca */
  --mt-surface-overlay:  oklch(0.0   0.0   0 / 0.45);
  --mt-border-subtle:    oklch(0.922 0.006 220);
  --mt-border-default:   oklch(0.858 0.010 220);
  --mt-border-strong:    oklch(0.720 0.012 220);
  --mt-text-primary:     oklch(0.195 0.014 235);  /* casi negro, slate cálido */
  --mt-text-secondary:   oklch(0.440 0.012 230);
  --mt-text-tertiary:    oklch(0.620 0.008 220);
  --mt-text-disabled:    oklch(0.730 0.005 215);
  --mt-text-on-accent:   oklch(0.985 0.003 85);
  --mt-accent:           oklch(0.340 0.062 171);
  --mt-accent-hover:     oklch(0.290 0.056 171);
  --mt-accent-active:    oklch(0.255 0.050 171);
  --mt-accent-subtle:    oklch(0.956 0.020 171);
  --mt-accent-text:      oklch(0.320 0.060 171);  /* sobre fondo claro */
  --mt-error:            oklch(0.430 0.140  27);
  --mt-error-subtle:     oklch(0.965 0.022  27);
  --mt-success:          oklch(0.400 0.100 155);
  --mt-success-subtle:   oklch(0.963 0.022 155);
  --mt-warning:          oklch(0.640 0.135  75);
  --mt-warning-subtle:   oklch(0.970 0.028  75);
  --mt-shadow-sm:  0 1px 2px oklch(0.0 0.0 0 / 0.06),
                   0 1px 3px oklch(0.0 0.0 0 / 0.08);
  --mt-shadow:     0 2px 6px oklch(0.0 0.0 0 / 0.08),
                   0 4px 12px oklch(0.0 0.0 0 / 0.06);
  --mt-shadow-lg:  0 4px 16px oklch(0.0 0.0 0 / 0.10),
                   0 8px 32px oklch(0.0 0.0 0 / 0.08);
  }
}

/* ─── Reset base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  height: 100%;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* El shell es de alto fijo: topbar sticky, sidebar y footer fixed, y
   .mt-content es el único contenedor con scroll. El documento nunca debe
   scrollear — si lo hace es por desbordes de 1-2px y solo produce una barra
   extra en el borde derecho. */
body.mt-app {
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: var(--mt-surface-base);
  font-family: var(--mt-font);
  font-size: var(--mt-font-base);
  color: var(--mt-text-primary);
  line-height: 1.5;
}

a { color: var(--mt-accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── App Shell ───────────────────────────────────────────── */

/* Barra superior */
.mt-topbar {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 var(--mt-space-4);
  background: var(--mt-surface-nav);
  border-bottom: 1px solid var(--mt-border-subtle);
  gap: var(--mt-space-4);
}

.mt-topbar__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  width: 200px;
}

.mt-topbar__logo img {
  max-height: 36px;
  width: auto;
  display: block;
}

.mt-topbar__spacer { flex: 1; }

.mt-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--mt-space-2);
}

.mt-topbar__alert {
  display: flex;
  align-items: center;
  gap: var(--mt-space-2);
  padding: var(--mt-space-1) var(--mt-space-3);
  background: var(--mt-error-subtle);
  border: 1px solid rgba(141, 37, 33, 0.22);
  border: 1px solid oklch(0.430 0.140 27 / 0.22);
  border-radius: var(--mt-radius);
  font-size: var(--mt-font-sm);
  color: var(--mt-error);
  font-weight: 500;
  flex-shrink: 0;
}

.mt-topbar__user-label {
  font-size: var(--mt-font-sm);
  color: var(--mt-text-secondary);
}

.mt-topbar__user-label strong {
  color: var(--mt-accent-text);
  font-weight: 500;
}

/* Barra lateral */
.mt-sidebar {
  position: fixed;
  top: 48px;
  left: 0;
  width: 200px;
  height: calc(100vh - 48px - 28px);
  background: var(--mt-surface-sidebar);
  border-right: 1px solid var(--mt-border-subtle);
  display: flex;
  flex-direction: column;
  padding: var(--mt-space-4) var(--mt-space-3);
  gap: var(--mt-space-1);
  overflow-y: auto;
}

.mt-nav-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--mt-space-2) var(--mt-space-3);
  border-radius: var(--mt-radius);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--mt-font);
  font-size: var(--mt-font-base);
  font-weight: 500;
  color: var(--mt-text-secondary);
  text-align: left;
  transition: background var(--mt-duration) var(--mt-ease),
              color var(--mt-duration) var(--mt-ease);
  white-space: nowrap;
  outline: none;
  text-decoration: none;
}

.mt-nav-item:hover {
  background: rgba(0, 0, 0, 0.04);
  background: oklch(0.0 0.0 0 / 0.04);
  color: var(--mt-text-primary);
  text-decoration: none;
}

.mt-nav-item:focus-visible {
  box-shadow: 0 0 0 2px var(--mt-accent);
}

.mt-nav-item.is-active {
  background: var(--mt-accent-subtle);
  color: var(--mt-accent-text);
  font-weight: 600;
}

.mt-nav-item .mt-nav-icon {
  width: 16px;
  height: 16px;
  margin-right: var(--mt-space-2);
  opacity: 0.7;
  flex-shrink: 0;
}

.mt-nav-item.is-active .mt-nav-icon { opacity: 1; }

.mt-nav-sep {
  height: 1px;
  background: var(--mt-border-subtle);
  margin: var(--mt-space-2) 0;
}

.mt-sidebar__footer {
  margin-top: auto;
  padding-top: var(--mt-space-4);
  font-size: var(--mt-font-xs);
  color: var(--mt-text-tertiary);
  line-height: 1.6;
}

.mt-sidebar__footer a {
  color: var(--mt-text-tertiary);
  font-size: var(--mt-font-xs);
}

.mt-sidebar__footer a:hover { color: var(--mt-text-secondary); }

/* "Versión móvil" es una acción de navegación, no un dato de contacto como el
   correo de soporte: se presenta como botón para que se distinga del resto.
   El selector incluye .mt-sidebar__footer para ganarle a la regla de arriba,
   que fija color y tamaño para todos los enlaces del pie. */
.mt-sidebar__footer a.mt-mobile-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-bottom: var(--mt-space-3);
  padding: 8px 10px;
  border: 1px solid var(--mt-accent);
  border-radius: var(--mt-radius);
  background: var(--mt-surface-raised);
  color: var(--mt-accent-text);
  font-size: var(--mt-font-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--mt-duration) var(--mt-ease),
              border-color var(--mt-duration) var(--mt-ease);
}
.mt-sidebar__footer a.mt-mobile-link:hover {
  background: var(--mt-accent-subtle);
  color: var(--mt-accent-text);
  text-decoration: none;
}
.mt-sidebar__footer a.mt-mobile-link:focus-visible {
  outline: 2px solid var(--mt-accent);
  outline-offset: 2px;
}
.mt-sidebar__footer a.mt-mobile-link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Área de contenido principal */
.mt-content {
  margin-left: 200px;
  height: calc(100vh - 48px - 28px);
  overflow: auto;
}

/* Footer */
.mt-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mt-surface-sidebar);
  border-top: 1px solid var(--mt-border-subtle);
  font-size: var(--mt-font-xs);
  color: var(--mt-text-tertiary);
  gap: var(--mt-space-3);
  z-index: 100;
}

.mt-footer a {
  color: var(--mt-text-tertiary);
  font-size: var(--mt-font-xs);
}
.mt-footer a:hover { color: var(--mt-text-secondary); text-decoration: none; }

/* Overlay */
.mt-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--mt-surface-overlay);
  display: none;
}

/* ─── Invitación a la versión móvil ───────────────────────── */
/* Se muestra una vez por login cuando el viewport cae bajo el breakpoint de
   768px (ver medicatec.php).

   Sin left/top/width/height: los pone el JS a partir del ancho real de la
   pantalla. Con `position:fixed; inset:0` la caja se resolvia contra los
   720px de --mt-shell-min que el shell fuerza en <body> (junto con
   overflow-x:auto), no contra el ancho del telefono, y la tarjeta quedaba
   centrada en 360px — medio modal fuera de pantalla en un celular de 402px.
   Por lo mismo tampoco sirven 100vw/100dvh aqui.

   El z-index queda encima de #cambiacuenta (30001), el mas alto de la app. */
.mt-invite {
  position: absolute;
  z-index: 30002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mt-space-4);
  background: rgba(15, 22, 26, 0.55);
  background: oklch(0.195 0.014 235 / 0.55);
}
.mt-invite[hidden] { display: none; }

.mt-invite__card {
  width: 100%;
  max-width: 340px;
  padding: var(--mt-space-6);
  border-radius: var(--mt-radius-lg);
  background: var(--mt-surface-raised);
  box-shadow: var(--mt-shadow-lg);
  text-align: center;
}

.mt-invite__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 auto var(--mt-space-4);
  border-radius: 50%;
  background: var(--mt-accent-subtle);
  color: var(--mt-accent-text);
}
.mt-invite__icon svg { width: 22px; height: 22px; }

.mt-invite__title {
  margin: 0 0 var(--mt-space-2);
  font-size: var(--mt-font-xl);
  font-weight: 600;
  color: var(--mt-text-primary);
}

.mt-invite__text {
  margin: 0 0 var(--mt-space-5);
  font-size: var(--mt-font-base);
  line-height: 1.5;
  color: var(--mt-text-secondary);
}

/* En columna: dos botones lado a lado no caben cómodos a 320px de ancho. */
.mt-invite__actions {
  display: flex;
  flex-direction: column;
  gap: var(--mt-space-2);
}
.mt-invite__actions .mt-btn { width: 100%; }

/* El boton primario es un <a>, y sobre un enlace el color de .mt-btn--primary
   (0,1,0) pierde contra `.ui-widget-content a { color:#222 }` de jQuery UI
   (0,1,1): el texto salia gris oscuro sobre el verde y no se leia. Se refuerza
   calificando con a.  — mismo recurso que .mt-sidebar__footer a.mt-mobile-link. */
.mt-invite a.mt-btn--primary,
.mt-invite a.mt-btn--primary:link,
.mt-invite a.mt-btn--primary:visited,
.mt-invite a.mt-btn--primary:hover,
.mt-invite a.mt-btn--primary:focus {
  color: var(--mt-text-on-accent);
  text-decoration: none;
}

/* ─── Botones ─────────────────────────────────────────────── */

.mt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mt-space-2);
  height: 28px;
  padding: 0 12px;
  border-radius: var(--mt-radius);
  font-family: var(--mt-font);
  font-size: var(--mt-font-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--mt-duration) var(--mt-ease),
              border-color var(--mt-duration) var(--mt-ease),
              color var(--mt-duration) var(--mt-ease);
  outline: none;
  line-height: 1;
  -webkit-appearance: none;
}

.mt-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--mt-surface-nav),
              0 0 0 4px var(--mt-accent);
}

/* Primario */
.mt-btn--primary {
  background: var(--mt-accent);
  color: var(--mt-text-on-accent);
  border-color: var(--mt-accent);
}
.mt-btn--primary:hover {
  background: var(--mt-accent-hover);
  border-color: var(--mt-accent-hover);
  text-decoration: none;
  color: var(--mt-text-on-accent);
}
.mt-btn--primary:active {
  background: var(--mt-accent-active);
  border-color: var(--mt-accent-active);
}

/* Secundario */
.mt-btn--secondary {
  background: var(--mt-surface-raised);
  color: var(--mt-text-primary);
  border-color: var(--mt-border-default);
}
.mt-btn--secondary:hover {
  background: var(--mt-surface-base);
  border-color: var(--mt-border-strong);
  text-decoration: none;
  color: var(--mt-text-primary);
}
.mt-btn--secondary:active {
  background: var(--mt-accent-subtle);
  border-color: var(--mt-accent);
  color: var(--mt-accent-text);
}

/* Ghost */
.mt-btn--ghost {
  background: transparent;
  color: var(--mt-text-secondary);
  border-color: transparent;
}
.mt-btn--ghost:hover {
  background: rgba(0, 0, 0, 0.05);
  background: oklch(0.0 0.0 0 / 0.05);
  color: var(--mt-text-primary);
  text-decoration: none;
}

/* Destructivo */
.mt-btn--danger {
  background: var(--mt-error-subtle);
  color: var(--mt-error);
  border-color: rgba(141, 37, 33, 0.25);
  border-color: oklch(0.430 0.140 27 / 0.25);
}
.mt-btn--danger:hover {
  background: var(--mt-error);
  color: var(--mt-text-on-accent);
  border-color: var(--mt-error);
  text-decoration: none;
}

/* Tamaños */
.mt-btn--sm {
  height: 24px;
  padding: 0 8px;
  font-size: var(--mt-font-xs);
  border-radius: var(--mt-radius-sm);
}
.mt-btn--lg {
  height: 36px;
  padding: 0 var(--mt-space-5);
  font-size: var(--mt-font-base);
}

/* ─── Inputs & Formularios ────────────────────────────────── */

.mt-label {
  display: block;
  font-size: var(--mt-font-sm);
  font-weight: 500;
  color: var(--mt-text-secondary);
  margin-bottom: var(--mt-space-1);
}

.mt-input {
  display: block;
  width: 100%;
  height: 34px;
  padding: 0 var(--mt-space-3);
  background: var(--mt-surface-raised);
  border: 1px solid var(--mt-border-default);
  border-radius: var(--mt-radius);
  font-family: var(--mt-font);
  font-size: var(--mt-font-base);
  color: var(--mt-text-primary);
  transition: border-color var(--mt-duration) var(--mt-ease),
              box-shadow var(--mt-duration) var(--mt-ease);
  outline: none;
  -webkit-appearance: none;
}

.mt-input::placeholder { color: var(--mt-text-disabled); }

.mt-input:hover {
  border-color: var(--mt-border-strong);
}

.mt-input:focus {
  border-color: var(--mt-accent);
  box-shadow: 0 0 0 3px rgba(8, 66, 52, 0.14);
  box-shadow: 0 0 0 3px oklch(0.340 0.062 171 / 0.14);
}

.mt-input.is-error {
  border-color: var(--mt-error);
  box-shadow: 0 0 0 3px rgba(141, 37, 33, 0.12);
  box-shadow: 0 0 0 3px oklch(0.430 0.140 27 / 0.12);
}

.mt-field {
  margin-bottom: var(--mt-space-4);
}

.mt-field-error {
  margin-top: var(--mt-space-1);
  font-size: var(--mt-font-xs);
  color: var(--mt-error);
}

.mt-select {
  display: block;
  width: 100%;
  height: 34px;
  padding: 0 var(--mt-space-3);
  background: var(--mt-surface-raised);
  border: 1px solid var(--mt-border-default);
  border-radius: var(--mt-radius);
  font-family: var(--mt-font);
  font-size: var(--mt-font-base);
  color: var(--mt-text-primary);
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23667788' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

.mt-select:focus {
  border-color: var(--mt-accent);
  box-shadow: 0 0 0 3px rgba(8, 66, 52, 0.14);
  box-shadow: 0 0 0 3px oklch(0.340 0.062 171 / 0.14);
}

/* ─── Alertas / Banners ───────────────────────────────────── */

.mt-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--mt-space-3);
  padding: var(--mt-space-3) var(--mt-space-4);
  border-radius: var(--mt-radius);
  font-size: var(--mt-font-base);
  border: 1px solid transparent;
}

.mt-alert--error {
  background: var(--mt-error-subtle);
  border-color: rgba(141, 37, 33, 0.2);
  border-color: oklch(0.430 0.140 27 / 0.20);
  color: #671513;
  color: oklch(0.340 0.115 27);
}

.mt-alert--success {
  background: var(--mt-success-subtle);
  border-color: rgba(0, 87, 46, 0.2);
  border-color: oklch(0.400 0.100 155 / 0.20);
  color: #003f1d;
  color: oklch(0.320 0.090 155);
}

.mt-alert--warning {
  background: var(--mt-warning-subtle);
  border-color: rgba(187, 126, 0, 0.25);
  border-color: oklch(0.640 0.135 75 / 0.25);
  color: #854500;
  color: oklch(0.460 0.115 60);
}

/* ─── Paneles / Contenido ─────────────────────────────────── */

.mt-panel {
  background: var(--mt-surface-raised);
  border: 1px solid var(--mt-border-subtle);
  border-radius: var(--mt-radius-lg);
  padding: var(--mt-space-5);
}

.mt-panel__title {
  font-size: var(--mt-font-lg);
  font-weight: 600;
  color: var(--mt-text-primary);
  margin: 0 0 var(--mt-space-4) 0;
}

/* ─── Tablas ──────────────────────────────────────────────── */

.mt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--mt-font-base);
}

.mt-table th {
  text-align: left;
  font-size: var(--mt-font-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mt-text-tertiary);
  padding: var(--mt-space-2) var(--mt-space-3);
  border-bottom: 1px solid var(--mt-border-default);
}

.mt-table td {
  padding: var(--mt-space-3);
  color: var(--mt-text-primary);
  border-bottom: 1px solid var(--mt-border-subtle);
  vertical-align: middle;
}

.mt-table tr:last-child td { border-bottom: none; }

.mt-table tr:hover td {
  background: rgba(0, 0, 0, 0.02);
  background: oklch(0.0 0.0 0 / 0.02);
}

/* ─── Diálogos (jQuery UI override) ──────────────────────── */

.ui-dialog {
  background: var(--mt-surface-raised) !important;
  border: 1px solid var(--mt-border-subtle) !important;
  border-radius: var(--mt-radius-lg) !important;
  box-shadow: var(--mt-shadow-lg) !important;
  font-family: var(--mt-font) !important;
  font-size: var(--mt-font-base) !important;
  color: var(--mt-text-primary) !important;
  padding: 0 !important;
}

.ui-dialog .ui-dialog-titlebar {
  background: var(--mt-surface-base) !important;
  border: none !important;
  border-bottom: 1px solid var(--mt-border-subtle) !important;
  border-radius: var(--mt-radius-lg) var(--mt-radius-lg) 0 0 !important;
  padding: var(--mt-space-3) var(--mt-space-4) !important;
  font-size: var(--mt-font-md) !important;
  font-weight: 600 !important;
  color: var(--mt-text-primary) !important;
}

.ui-dialog .ui-dialog-content {
  padding: var(--mt-space-5) !important;
  font-size: var(--mt-font-base) !important;
  color: var(--mt-text-primary) !important;
}

/* jQuery UI buttons — proporción compacta global */
.ui-button.ui-widget {
  font-family: var(--mt-font) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: var(--mt-radius) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Texto sin padding para botones sin icono */
.ui-button.ui-widget.ui-button-text-only .ui-button-text {
  padding: 5px 12px !important;
  line-height: 1.4 !important;
}

/* Botones con icono: espacio a la izquierda dentro del texto */
.ui-button.ui-widget.ui-button-text-icon-primary .ui-button-text {
  padding: 5px 12px 5px 2em !important;
  line-height: 1.4 !important;
}

/* Posición del icono */
.ui-button.ui-widget .ui-button-icon-primary {
  left: 0.4em !important;
  margin-top: -8px !important;
}

.ui-dialog .ui-dialog-buttonpane {
  border-top: 1px solid var(--mt-border-subtle) !important;
  background: var(--mt-surface-base) !important;
  padding: var(--mt-space-3) var(--mt-space-4) !important;
  text-align: right !important;
}

/* Orden de acciones: "Cancelar" a la izquierda, la acción de confirmar
   (OK / Guardar / Eliminar / Actualizar…) a la derecha, y el grupo completo
   alineado a la derecha del modal.

   Todos los dialogs del sistema declaran la acción principal primero y
   "Cancelar" al final, así que row-reverse invierte el orden visual sin tocar
   el DOM. Eso importa: las reglas de color de abajo se apoyan en :first-child
   para saber cuál es la principal, y varios `open:` marcan el secundario con
   .eq(1) — ambas cosas siguen siendo correctas con el DOM intacto. */
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  float: none !important;
  display: inline-flex !important;
  flex-direction: row-reverse;
  align-items: center;
  gap: var(--mt-space-2);
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
  float: none !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.ui-dialog .ui-dialog-buttonpane .ui-button {
  background: var(--mt-accent) !important;
  border: 1px solid var(--mt-accent) !important;
  color: var(--mt-text-on-accent) !important;
  border-radius: var(--mt-radius) !important;
  font-family: var(--mt-font) !important;
  font-size: var(--mt-font-base) !important;
  font-weight: 500 !important;
  padding: var(--mt-space-2) var(--mt-space-4) !important;
}

/* Cancelar como acción secundaria: solo la acción principal lleva el acento.
   Dos selectores: por posición (genérico) y por clase mt-dlg-secondary
   (asignada en el open del dialog, inmune a variaciones del DOM) */
.ui-dialog .ui-dialog-buttonpane .ui-button:not(:first-child),
.ui-dialog .ui-dialog-buttonpane button.mt-dlg-secondary {
  background: var(--mt-surface-raised) !important;
  border: 1px solid var(--mt-border-default) !important;
  color: var(--mt-text-secondary) !important;
}
.ui-dialog .ui-dialog-buttonpane .ui-button:not(:first-child):hover,
.ui-dialog .ui-dialog-buttonpane button.mt-dlg-secondary:hover {
  border-color: var(--mt-border-strong) !important;
  color: var(--mt-text-primary) !important;
  background: var(--mt-surface-base) !important;
}

/* Diálogos destructivos: la acción de confirmar va en rojo, no en acento.
   Se activa con dialogClass: 'mt-dlg-danger' al inicializar el dialog. */
.mt-dlg-danger .ui-dialog-buttonpane .ui-button:first-child {
  background: var(--mt-error) !important;
  border-color: var(--mt-error) !important;
  color: var(--mt-text-on-accent) !important;
}
.mt-dlg-danger .ui-dialog-buttonpane .ui-button:first-child:hover {
  background: #790e0f !important;
  background: oklch(0.370 0.140 27) !important;
  border-color: #790e0f !important;
  border-color: oklch(0.370 0.140 27) !important;
}
.mt-dlg-danger .ui-dialog-titlebar { color: var(--mt-error) !important; }

/* Avisos de confirmación: texto con aire, sin icono flotado apretado.
   Regla general en vez de una lista de ids, que había que ir ampliando cada
   vez que aparecía un modal nuevo. */
.ui-dialog .ui-dialog-content > p {
  margin: 0 !important;
  line-height: 1.6 !important;
  font-size: 13px !important;
  color: var(--mt-text-primary);
}
.ui-dialog .ui-dialog-content { padding: 18px 20px !important; }
.ui-dialog .ui-icon-alert { margin: 2px 10px 0 0 !important; }
/* La separación entre botones la da el `gap` del buttonset (ver arriba);
   un margin-left aquí caería del lado equivocado por el row-reverse. */

.ui-dialog-titlebar-close {
  background: transparent !important;
  border: none !important;
  color: var(--mt-text-tertiary) !important;
  font-size: 18px !important;
}

/* ─── Diálogo "Agregar medicamento a la receta" ────────────── */
.mt-med {
  display: flex;
  flex-direction: column;
  gap: var(--mt-space-3);
  font-family: var(--mt-font);
}
.mt-med__row { display: flex; align-items: center; gap: var(--mt-space-3); }
.mt-med__lbl {
  flex: 0 0 175px;
  font-size: var(--mt-font-sm);
  color: var(--mt-text-secondary);
}
.mt-med__ctl { flex: 1; min-width: 0; }
.mt-med input[type="text"],
.mt-med select {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  font-family: var(--mt-font);
  font-size: var(--mt-font-base);
  color: var(--mt-text-primary);
  background: var(--mt-surface-raised);
  border: 1px solid var(--mt-border-default);
  border-radius: var(--mt-radius);
  outline: none;
  transition: border-color var(--mt-duration);
  box-sizing: border-box;
}
.mt-med input[type="text"]:focus,
.mt-med select:focus {
  border-color: var(--mt-accent);
  box-shadow: 0 0 0 3px rgba(8, 66, 52, 0.12);
  box-shadow: 0 0 0 3px oklch(0.340 0.062 171 / 0.12);
}
/* el combo con buscador (chosen) traía un ancho fijo de 280px en línea */
.mt-med .chosen-container { width: 100% !important; }
.mt-med .chosen-container-single .chosen-single {
  height: 34px;
  line-height: 32px;
  padding: 0 10px;
  background: var(--mt-surface-raised);
  border: 1px solid var(--mt-border-default);
  border-radius: var(--mt-radius);
  box-shadow: none;
  color: var(--mt-text-primary);
  font-size: var(--mt-font-base);
}
.mt-med .chosen-container-single .chosen-single div { top: 5px; }
.mt-med__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--mt-space-3);
  margin-top: var(--mt-space-2);
  padding-top: var(--mt-space-3);
  border-top: 1px solid var(--mt-border-subtle);
}
/* la acción principal del diálogo, con el acento del sistema */
#dialogMed #addMed.ui-button,
#dialogMed #addMed {
  height: 34px;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: var(--mt-accent) !important;
  background-image: none !important;
  border: 1px solid var(--mt-accent) !important;
  border-radius: var(--mt-radius) !important;
  color: var(--mt-text-on-accent) !important;
  font-family: var(--mt-font) !important;
  font-size: var(--mt-font-sm) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  flex-shrink: 0;
}
#dialogMed #addMed:hover {
  background: var(--mt-accent-hover) !important;
  border-color: var(--mt-accent-hover) !important;
}
#dialogMed #addMed .ui-icon { filter: brightness(0) invert(1); position: static !important; margin: 0 !important; }
#dialogMed #addMed .ui-button-text { padding: 0 !important; line-height: 1; }

/* ─── FullCalendar overrides ──────────────────────────────── */

.fc {
  font-family: var(--mt-font) !important;
  font-size: var(--mt-font-base) !important;
  color: var(--mt-text-primary) !important;
}

.fc-toolbar h2 {
  font-size: var(--mt-font-lg) !important;
  font-weight: 600 !important;
  color: var(--mt-text-primary) !important;
}

/* FullCalendar v1 — reset total de estilos de botones */
.fc-button,
.fc-button-inner,
.fc-state-default,
.fc-state-default .fc-button-inner {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  overflow: visible !important;
  border-radius: 0 !important;
}

/* Elimina el efecto brillo/gloss de v1 */
.fc-state-default .fc-button-effect { display: none !important; }

/* Contenido interior: toda la apariencia visual va aquí */
.fc-button-content {
  display: inline-block !important;
  float: none !important;
  height: auto !important;
  line-height: 1 !important;
  padding: 5px 11px !important;
  font-family: var(--mt-font) !important;
  font-size: var(--mt-font-sm) !important;
  font-weight: 400 !important;
  color: var(--mt-text-secondary) !important;
  background: transparent !important;
  border: 1px solid var(--mt-border-subtle) !important;
  border-radius: var(--mt-radius-sm) !important;
  cursor: pointer !important;
  transition: border-color 120ms, color 120ms !important;
  white-space: nowrap !important;
}

/* Hover */
.fc-state-hover .fc-button-content {
  border-color: var(--mt-border-default) !important;
  color: var(--mt-text-primary) !important;
}

/* Presionado */
.fc-state-down .fc-button-content {
  border-color: var(--mt-border-strong) !important;
  color: var(--mt-text-primary) !important;
}

/* Activo (vista seleccionada) — solo borde más visible y texto más oscuro */
.fc-state-active .fc-button-content {
  border-color: var(--mt-border-strong) !important;
  color: var(--mt-text-primary) !important;
  font-weight: 500 !important;
}

/* Deshabilitado */
.fc-state-disabled .fc-button-content {
  opacity: 0.4 !important;
  cursor: default !important;
}

/* Colapsa bordes entre botones adyacentes del grupo de vistas */
.fc-header-right .fc-button + .fc-button .fc-button-content,
.fc-header-left  .fc-button + .fc-button .fc-button-content {
  margin-left: -1px !important;
  border-radius: 0 !important;
}
.fc-header-right .fc-button:first-child .fc-button-content,
.fc-header-left  .fc-button:first-child .fc-button-content {
  border-radius: var(--mt-radius-sm) 0 0 var(--mt-radius-sm) !important;
}
.fc-header-right .fc-button:last-child .fc-button-content,
.fc-header-left  .fc-button:last-child .fc-button-content {
  border-radius: 0 var(--mt-radius-sm) var(--mt-radius-sm) 0 !important;
}

.fc-event {
  border-radius: 3px !important;
  border: none !important;
  font-size: var(--mt-font-xs) !important;
  font-weight: 500 !important;
  padding: 1px 4px !important;
}

/* Color de cita por defecto: tinte teal del proyecto en lugar del azul #36c.
   Sin !important a propósito — los colores personalizados de coloresAgenda
   se aplican inline y deben seguir ganando */
.fc-event-skin {
  background-color: #cce7dd;
  background-color: oklch(0.905 0.032 171);
  border-color: #8cb6a7;
  border-color: oklch(0.740 0.050 171);
  color: #00281d;
  color: oklch(0.245 0.050 171);
}

/* Sin velo blanco encima de los bloques: el tinte ya es claro,
   el velo solo lavaba el color y creaba el "segundo azul" */
.fc-event-vert .fc-event-bg { display: none; }

/* Agenda semanal/diaria: slots más altos para que las citas de 20 min
   sean legibles (20px de alto en vez de 13px) */
.fc-agenda-slots td div { height: 30px !important; }

/* Citas verticales compactas */
.fc-event-vert {
  border-radius: 4px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(15, 22, 26, 0.15) !important;
  box-shadow: 0 1px 2px oklch(0.195 0.014 235 / 0.15) !important;
}
.fc-event-vert .fc-event-time {
  font-size: 9px !important;
  font-weight: 600 !important;
  opacity: 0.85;
}
.fc-event-vert .fc-event-head,
.fc-event-vert .fc-event-content {
  line-height: 1.25 !important;
}

/* Franja de confirmación (roja = sin confirmar, verde = confirmada)
   inyectada por el fullcalendar.js customizado como .ui-resizable-e */
.fc-event-vert .ui-resizable-e {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 5px !important;
  height: 100% !important;
  border-radius: 0 4px 4px 0 !important;
}

.fc-today { background: var(--mt-accent-subtle) !important; }

/* All-day row: height for pills + inner div must be relative+sized */
.fc-agenda-allday td { height: 30px !important; vertical-align: middle !important; }
.fc-agenda-allday td .fc-day-content { height: 30px !important; }
.fc-agenda-allday td .fc-day-content > div {
  position: relative !important;
  height: 30px !important;
  overflow: visible !important;
}

/* ─── Login Page ──────────────────────────────────────────── */

body.mt-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mt-surface-base);
  font-family: var(--mt-font);
  color: var(--mt-text-primary);
}

.mt-login-card {
  width: 100%;
  max-width: 400px;
  background: var(--mt-surface-raised);
  border: 1px solid var(--mt-border-subtle);
  border-radius: var(--mt-radius-lg);
  box-shadow: var(--mt-shadow);
  padding: var(--mt-space-8);
}

.mt-login-card__logo {
  display: flex;
  justify-content: center;
  margin-bottom: var(--mt-space-6);
}

.mt-login-card__logo img {
  max-height: 44px;
  width: auto;
}

.mt-login-card__title {
  font-size: var(--mt-font-lg);
  font-weight: 600;
  color: var(--mt-text-primary);
  text-align: center;
  margin: 0 0 var(--mt-space-6);
}

.mt-login-card__lang {
  display: flex;
  justify-content: center;
  gap: var(--mt-space-3);
  margin-top: var(--mt-space-5);
  font-size: var(--mt-font-xs);
  color: var(--mt-text-tertiary);
}

.mt-login-card__lang a {
  color: var(--mt-text-tertiary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.mt-login-card__lang a:hover { color: var(--mt-accent-text); text-decoration: none; }

.mt-login-card__support {
  margin-top: var(--mt-space-4);
  font-size: var(--mt-font-xs);
  color: var(--mt-text-tertiary);
  text-align: center;
}

.mt-login-card__support a { color: var(--mt-accent-text); }

/* ─── Admin Panel (fragment) ──────────────────────────────── */

.mt-admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mt-space-2);
  padding: var(--mt-space-4);
  border-bottom: 1px solid var(--mt-border-subtle);
  background: var(--mt-surface-raised);
}

.mt-admin-section {
  padding: var(--mt-space-5) var(--mt-space-4);
}

.mt-admin-section__title {
  font-size: var(--mt-font-xl);
  font-weight: 600;
  color: var(--mt-text-primary);
  margin: 0 0 var(--mt-space-4);
}

/* ─── Utilidades ──────────────────────────────────────────── */

.mt-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.mt-text-error { color: var(--mt-error); font-size: var(--mt-font-xs); }
.mt-text-muted { color: var(--mt-text-tertiary); }
.mt-text-secondary { color: var(--mt-text-secondary); }

/* ─── Responsive ──────────────────────────────────────────── */

/* En pantallas chicas no hay ancho para sidebar + contenido lado a lado, así
   que el shell conserva un ancho mínimo y se navega con scroll horizontal.
   Antes el sidebar se escondía con translateX(-100%) esperando una clase
   .is-open que nada en la app llegaba a poner, de modo que en celular y tablet
   el menú quedaba permanentemente fuera de pantalla. */
@media (max-width: 768px) {
  :root { --mt-shell-min: 720px; }

  /* Sobrescribe el overflow:hidden del shell para habilitar el scroll lateral.
     El min-width hace que el body desborde el viewport y sea este el que
     scrollea; en vertical se mantiene .mt-content como único contenedor. */
  body.mt-app {
    min-width: var(--mt-shell-min);
    overflow-x: auto;
    overflow-y: hidden;
  }

  /* fixed lo anclaba al viewport: no acompañaba el scroll horizontal y el
     menú se quedaba encimado sobre el calendario al desplazarse. */
  .mt-sidebar {
    position: absolute;
    transform: none;
    z-index: 300;
  }

  .mt-topbar { min-width: var(--mt-shell-min); }

  .mt-content {
    margin-left: 200px;
    min-width: calc(var(--mt-shell-min) - 200px);
  }

  .mt-topbar__logo { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ─── Datepicker ──────────────────────────────────────────────
   jQuery UI lo inyecta en <body> como #ui-datepicker-div y le asigna un
   z-index calculado a partir del input (que casi siempre da 1), por eso
   quedaba por debajo del contenido. Se fija aqui, junto con un aspecto
   acorde al resto de la interfaz.
   ──────────────────────────────────────────────────────────── */

#ui-datepicker-div,
.ui-datepicker {
  z-index: 9999 !important;
  width: auto !important;
  padding: 10px !important;
  font-family: var(--mt-font) !important;
  font-size: 13px !important;
  background: var(--mt-surface-raised) !important;
  border: 1px solid var(--mt-border-subtle) !important;
  border-radius: var(--mt-radius-lg) !important;
  box-shadow: 0 10px 28px rgba(15, 22, 26, 0.14),
              0 2px 6px  rgba(15, 22, 26, 0.06) !important;
  box-shadow: 0 10px 28px oklch(0.195 0.014 235 / 0.14),
              0 2px 6px  oklch(0.195 0.014 235 / 0.06) !important;
}

/* ── Encabezado ── */
.ui-datepicker .ui-datepicker-header {
  position: relative;
  padding: 2px 0 10px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  font-weight: 600;
}
.ui-datepicker .ui-datepicker-title {
  /* flex y no bloque: jQuery UI da width:49% a cada select, y dentro de un
     grupo estrecho (vista de 3 meses) no cabian y se apilaban. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
  margin: 0 30px !important;
  line-height: 26px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--mt-text-primary);
}
.ui-datepicker .ui-datepicker-title select {
  flex: 0 0 auto;
  width: auto !important;   /* anula el 49% / 100% del tema */
  height: 26px;
  padding: 0 4px;
  margin: 0 !important;
  font-family: var(--mt-font);
  font-size: 12px;
  color: var(--mt-text-primary);
  background: var(--mt-surface-base);
  border: 1px solid var(--mt-border-default);
  border-radius: var(--mt-radius);
}

/* Flechas: se sustituye el sprite por un chevron dibujado con bordes */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  top: 2px !important;
  width: 26px !important;
  height: 26px !important;
  cursor: pointer;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--mt-radius) !important;
  transition: background 140ms, border-color 140ms;
}
/* jQuery UI desplaza 1px el boton al pasar el mouse con las clases
   -prev-hover / -next-hover; se neutraliza para que el chevron no salte. */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-prev-hover { left: 2px !important; top: 2px !important; }
.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-next-hover { right: 2px !important; top: 2px !important; }
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover,
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
  background: var(--mt-accent-subtle) !important;
  border-color: var(--mt-border-subtle) !important;
}
/* El sprite de jQuery UI vive en un <span class="ui-icon"> de 0x0 con
   text-indent negativo; se oculta por completo y el chevron se dibuja sobre el
   propio enlace, que ya es position:absolute y sirve de bloque contenedor. */
.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon {
  display: none !important;
}
.ui-datepicker .ui-datepicker-prev::before,
.ui-datepicker .ui-datepicker-next::before {
  content: "";
  position: absolute;
  top: 8px;
  width: 8px;
  height: 8px;
  border-top: 1.6px solid var(--mt-text-secondary);
  border-right: 1.6px solid var(--mt-text-secondary);
}
.ui-datepicker .ui-datepicker-prev::before { left: 10px; transform: rotate(-135deg); }
.ui-datepicker .ui-datepicker-next::before { right: 10px; transform: rotate(45deg); }
.ui-datepicker .ui-datepicker-prev:hover::before,
.ui-datepicker .ui-datepicker-next:hover::before { border-color: var(--mt-accent); }
.ui-datepicker .ui-state-disabled::before { opacity: 0.25; }

/* ── Cuadricula ── */
.ui-datepicker table {
  margin: 0 !important;
  border-collapse: separate;
  border-spacing: 2px;
  font-size: 12px;
}
.ui-datepicker th {
  padding: 4px 0 6px !important;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mt-text-tertiary);
  border: none;
}
.ui-datepicker td { padding: 0 !important; border: none; }
.ui-datepicker td span,
.ui-datepicker td a {
  display: block;
  width: 30px;
  padding: 7px 0 !important;
  text-align: center !important;
  text-decoration: none;
  font-weight: 500;
  color: var(--mt-text-primary) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--mt-radius) !important;
  transition: background 120ms, color 120ms;
}
.ui-datepicker td a:hover {
  background: var(--mt-accent-subtle) !important;
  color: var(--mt-accent-text) !important;
}
/* hoy */
.ui-datepicker td a.ui-state-highlight,
.ui-datepicker td .ui-state-highlight {
  border-color: var(--mt-accent) !important;
  color: var(--mt-accent-text) !important;
  font-weight: 600;
}
/* seleccionado */
.ui-datepicker td a.ui-state-active,
.ui-datepicker td .ui-state-active {
  background: var(--mt-accent) !important;
  border-color: var(--mt-accent) !important;
  color: var(--mt-text-on-accent) !important;
  font-weight: 600;
}
.ui-datepicker td.ui-datepicker-other-month span,
.ui-datepicker td.ui-datepicker-unselectable span {
  color: var(--mt-text-disabled) !important;
}

/* ── Vista de varios meses ── */
.ui-datepicker-multi .ui-datepicker-group {
  /* 33.3% fijo apretaba el mes que lleva los selects; que cada grupo tome
     el ancho que necesita (la raiz ya es width:auto) */
  width: auto !important;
  padding: 0 8px;
  float: left;
}
.ui-datepicker-multi .ui-datepicker-group table { width: auto !important; margin: 0 auto !important; }
.ui-datepicker-multi .ui-datepicker-group + .ui-datepicker-group {
  border-left: 1px solid var(--mt-border-subtle);
}
.ui-datepicker-multi .ui-datepicker-buttonpane { border-top-color: var(--mt-border-subtle) !important; }
.ui-datepicker .ui-datepicker-buttonpane { background: transparent !important; }


/* ── Configuración del doctor (medico.php) ── */

/* Acceso a Administración Avanzada */
.mt-doc-admin {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--mt-accent);
  border-radius: var(--mt-radius);
  background: var(--mt-surface-raised);
  font-family: var(--mt-font);
  font-size: var(--mt-font-sm);
  font-weight: 600;
  color: var(--mt-accent-text);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--mt-duration) var(--mt-ease);
}
.mt-doc-admin svg { width: 15px; height: 15px; flex-shrink: 0; }
.mt-doc-admin:hover { background: var(--mt-accent-subtle); }
.mt-doc-admin:focus-visible { outline: 2px solid var(--mt-accent); outline-offset: 2px; }

/* Selector de archivo: el <input type="file"> nativo muestra "Browse... /
   No file selected", que no se puede estilizar ni traducir. Se oculta y se
   usa su <label> como botón — el clic en el label abre el mismo diálogo. */
.mt-file-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.mt-file-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--mt-border-default);
  border-radius: var(--mt-radius);
  background: var(--mt-surface-raised);
  font-family: var(--mt-font);
  font-size: var(--mt-font-sm);
  font-weight: 500;
  color: var(--mt-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--mt-duration), color var(--mt-duration);
}
.mt-file-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.mt-file-btn:hover { border-color: var(--mt-accent); color: var(--mt-accent-text); }
/* foco por teclado: el input está oculto, así que se marca su etiqueta */
.mt-file-input:focus-visible + .mt-file-btn,
.mt-file-btn:has(+ .mt-file-input:focus-visible) {
  outline: 2px solid var(--mt-accent);
  outline-offset: 2px;
}


/* Formulario de configuración: el markup es de tablas heredadas, así que se
   acota por contenedor en vez de reescribirlo fila por fila. */
.mt-doc {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--mt-space-5);
  font-family: var(--mt-font);
  font-size: var(--mt-font-base);
  color: var(--mt-text-primary);
}
/* Barra de acciones fija: se queda pegada arriba del area de contenido
   (.mt-content es el unico contenedor con scroll) para no perder de vista
   "Actualizar Cambios" en un formulario tan largo. Los margenes negativos la
   hacen del ancho completo de .mt-doc, si no el contenido se veria pasar por
   los costados al hacer scroll. */
.mt-doc__top {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mt-space-3);
  flex-wrap: wrap;
  margin: calc(var(--mt-space-5) * -1) calc(var(--mt-space-5) * -1) var(--mt-space-4);
  padding: var(--mt-space-3) var(--mt-space-5);
  background: var(--mt-surface-base);
  border-bottom: 1px solid var(--mt-border-subtle);
}
.mt-doc table { width: 100% !important; border-collapse: collapse; margin-bottom: var(--mt-space-2); }
.mt-doc td { padding: 6px 0 !important; vertical-align: middle !important; }
/* la primera columna hace de etiqueta */
.mt-doc td:first-child { color: var(--mt-text-secondary); font-size: var(--mt-font-sm); }
/* los <b> sueltos son encabezados de sección */
.mt-doc td > b {
  display: block;
  font-size: var(--mt-font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mt-text-tertiary);
  margin: var(--mt-space-5) 0 var(--mt-space-2);
  padding-bottom: var(--mt-space-2);
  border-bottom: 1px solid var(--mt-border-subtle);
}

/* Campos y selects: el <select> nativo trae el estilo del sistema operativo
   (el aspecto "de los 90"). Se le quita la apariencia y se dibuja la flecha. */
.mt-doc input[type="text"],
.mt-doc input[type="password"],
.mt-doc input[type="email"],
.mt-doc select {
  width: 100%;
  max-width: 420px;
  height: 34px;
  padding: 0 10px;
  font-family: var(--mt-font);
  font-size: var(--mt-font-base);
  color: var(--mt-text-primary);
  background: var(--mt-surface-raised);
  border: 1px solid var(--mt-border-default);
  border-radius: var(--mt-radius);
  outline: none;
  transition: border-color var(--mt-duration);
}
.mt-doc select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  cursor: pointer;
}
/* los Si/No van en línea con su pregunta: no deben ocupar el ancho completo */
.mt-doc select.mt-doc-sn { width: auto; min-width: 76px; }
.mt-doc input:focus,
.mt-doc select:focus {
  border-color: var(--mt-accent);
  box-shadow: 0 0 0 3px rgba(8, 66, 52, 0.12);
  box-shadow: 0 0 0 3px oklch(0.340 0.062 171 / 0.12);
}

/* Barra de guardado */
/* vive dentro de .mt-doc__top: la separacion y la linea las pone la barra */
.mt-doc__save {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--mt-space-3);
}
.mt-doc__saving {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--mt-font-sm);
  color: var(--mt-text-secondary);
}
.mt-doc #actualizarDoctor.ui-button,
.mt-doc #actualizarDoctor {
  height: 34px;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--mt-accent) !important;
  border-radius: var(--mt-radius) !important;
  background: var(--mt-accent) !important;
  background-image: none !important;
  font-family: var(--mt-font) !important;
  font-size: var(--mt-font-base) !important;
  font-weight: 600 !important;
  color: var(--mt-text-on-accent) !important;
  text-shadow: none !important;
  cursor: pointer;
}
.mt-doc #actualizarDoctor:hover {
  background: var(--mt-accent-hover) !important;
  border-color: var(--mt-accent-hover) !important;
}
.mt-doc #actualizarDoctor .ui-icon { filter: brightness(0) invert(1); position: static !important; margin: 0 !important; }
.mt-doc #actualizarDoctor .ui-button-text { padding: 0 !important; line-height: 1; }

/* ─── Administración Avanzada de Cuenta ───────────────────────
   Estas pantallas se cargan dentro de #calendar y venían del HTML original:
   tablas con bgcolor, estilos en línea, botones de jQuery UI con degradado.
   Todo se reestiliza aquí para no tocar el markup heredado archivo por archivo.
   ──────────────────────────────────────────────────────────── */

/* ── Navegación entre módulos ── */
.mt-adminnav {
  display: flex;
  align-items: center;
  gap: var(--mt-space-3);
  flex-wrap: wrap;
  padding: var(--mt-space-3) var(--mt-space-5);
  background: var(--mt-surface-raised);
  border-bottom: 1px solid var(--mt-border-subtle);
}
.mt-adminnav__tabs {
  display: flex;
  gap: var(--mt-space-1);
  flex-wrap: wrap;
  padding: 3px;
  background: var(--mt-surface-base);
  border: 1px solid var(--mt-border-subtle);
  border-radius: var(--mt-radius-lg);
}
.mt-adminnav__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--mt-radius);
  background: transparent;
  font-family: var(--mt-font);
  font-size: var(--mt-font-sm);
  font-weight: 500;
  color: var(--mt-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--mt-duration) var(--mt-ease),
              color var(--mt-duration) var(--mt-ease);
}
.mt-adminnav__tab svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.75; }
.mt-adminnav__tab:hover { background: var(--mt-surface-raised); color: var(--mt-text-primary); }
.mt-adminnav__tab.is-active {
  background: var(--mt-accent);
  border-color: var(--mt-accent);
  color: var(--mt-text-on-accent);
  font-weight: 600;
}
.mt-adminnav__tab.is-active svg { opacity: 1; }
.mt-adminnav__respaldo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--mt-border-default);
  border-radius: var(--mt-radius);
  background: var(--mt-surface-raised);
  font-family: var(--mt-font);
  font-size: var(--mt-font-sm);
  color: var(--mt-text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.mt-adminnav__respaldo svg { width: 14px; height: 14px; }
.mt-adminnav__respaldo:hover { border-color: var(--mt-border-strong); color: var(--mt-text-primary); }

.mt-admin-loading { padding: 60px 0; text-align: center; }

/* ── Contenedor de cada módulo ── */
#contenidoAdmin,
.mt-admin-section {
  width: auto !important;
  max-width: 1400px;
  margin: 0 auto !important;
  padding: var(--mt-space-5) !important;
  font-family: var(--mt-font);
  font-size: var(--mt-font-base);
  color: var(--mt-text-primary);
}
/* El título de cada módulo venía como <div style="font-size:22px"> suelto */
#contenidoAdmin > div[style*="font-size:22px"],
.mt-admin-section__title {
  font-size: var(--mt-font-lg) !important;
  font-weight: 600 !important;
  color: var(--mt-text-primary);
  margin: 0 0 var(--mt-space-4) !important;
  padding-bottom: var(--mt-space-3);
  border-bottom: 1px solid var(--mt-border-subtle);
}

/* ── Tablas de campos ──
   El markup trae bgcolor="#F0F0F0" y padding en línea; el CSS de autor gana
   sobre esos atributos de presentación, así que no hay que editarlos. */
#contenidoAdmin table,
.mt-admin-section table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: var(--mt-surface-raised);
  border: 1px solid var(--mt-border-subtle);
  border-radius: var(--mt-radius-lg);
  overflow: hidden;
  font-size: var(--mt-font-sm);
  margin-bottom: var(--mt-space-4);
}
#contenidoAdmin table tr,
.mt-admin-section table tr { background: transparent !important; }
#contenidoAdmin table td,
.mt-admin-section table td {
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--mt-border-subtle);
  vertical-align: middle;
  color: var(--mt-text-primary);
}
#contenidoAdmin table tr:last-child td,
.mt-admin-section table tr:last-child td { border-bottom: none; }
/* la primera fila hace de encabezado (el markup usa <td><b>) */
#contenidoAdmin table tr:first-child td,
.mt-admin-section table tr:first-child td {
  background: var(--mt-surface-base) !important;
  font-size: var(--mt-font-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mt-text-tertiary);
}
#contenidoAdmin table tr:first-child td b,
.mt-admin-section table tr:first-child td b { font-weight: 600; }
#contenidoAdmin table tr:hover td,
.mt-admin-section table tr:hover td { background: var(--mt-accent-subtle); }
#contenidoAdmin table tr:first-child:hover td { background: var(--mt-surface-base) !important; }


/* columna de acciones de las tablas de administración */
#contenidoAdmin table td.mt-admin-table__act { width: 1%; white-space: nowrap; text-align: right; }
#contenidoAdmin table td.mt-admin-table__act a { color: var(--mt-error); font-weight: 500; }
#contenidoAdmin table td.mt-admin-table__act a:hover { text-decoration: underline; }
#contenidoAdmin table.mt-admin-table { max-width: 620px; }

/* ── Campos y controles ── */
#contenidoAdmin input[type="text"],
#contenidoAdmin input[type="password"],
#contenidoAdmin input[type="email"],
#contenidoAdmin select,
.mt-admin-section input[type="text"],
.mt-admin-section select {
  height: 32px;
  padding: 0 10px;
  font-family: var(--mt-font);
  font-size: var(--mt-font-base);
  color: var(--mt-text-primary);
  background: var(--mt-surface-base);
  border: 1px solid var(--mt-border-default);
  border-radius: var(--mt-radius);
  outline: none;
  transition: border-color var(--mt-duration);
  max-width: 100%;
}
#contenidoAdmin input[type="text"]:focus,
#contenidoAdmin select:focus,
.mt-admin-section input[type="text"]:focus {
  border-color: var(--mt-accent);
  box-shadow: 0 0 0 3px rgba(8, 66, 52, 0.12);
  box-shadow: 0 0 0 3px oklch(0.340 0.062 171 / 0.12);
}

/* ── Botones de jQuery UI dentro de administración ── */
#contenidoAdmin .ui-button,
.mt-admin-section .ui-button {
  background: var(--mt-surface-raised) !important;
  background-image: none !important;
  border: 1px solid var(--mt-border-default) !important;
  border-radius: var(--mt-radius) !important;
  font-family: var(--mt-font) !important;
  font-size: var(--mt-font-sm) !important;
  font-weight: 500 !important;
  color: var(--mt-text-primary) !important;
  text-shadow: none !important;
  padding: 4px 12px !important;
}
#contenidoAdmin .ui-button:hover,
.mt-admin-section .ui-button:hover {
  background: var(--mt-surface-base) !important;
  border-color: var(--mt-border-strong) !important;
}
/* "Agregar" es la acción principal de estas pantallas */
#contenidoAdmin #add.ui-button,
#contenidoAdmin #addField.ui-button,
#contenidoAdmin [id^="agregar"].ui-button {
  background: var(--mt-accent) !important;
  border-color: var(--mt-accent) !important;
  color: var(--mt-text-on-accent) !important;
  font-weight: 600 !important;
}
#contenidoAdmin #add.ui-button .ui-icon,
#contenidoAdmin #addField.ui-button .ui-icon { filter: brightness(0) invert(1); }
/* los de borrar, en rojo suave */
#contenidoAdmin [id^="borrar"].ui-button,
#contenidoAdmin .borrarCampo.ui-button {
  background: var(--mt-error-subtle) !important;
  border-color: color-mix(in oklch, var(--mt-error) 40%, transparent) !important;
  color: var(--mt-error) !important;
}


/* ── "Crear categoría nueva" ──
   Era etiqueta suelta + input estirado + un botón cuadrado con solo el icono
   (text:false), más alto que el campo y sin decir qué hacía. */
.mt-admin-newcat {
  display: flex;
  align-items: center;
  gap: var(--mt-space-2);
  flex-wrap: wrap;
  margin-bottom: var(--mt-space-5);
}
/* Tarjeta de categorias: mismo recuadro que .mt-etq. Envuelve el campo de
   crear, el separador y las pestañas con su contenido, que antes quedaban
   sueltos sobre el fondo de la pantalla. */
.mt-cat {
  background: var(--mt-surface-raised);
  border: 1px solid var(--mt-border-subtle);
  border-radius: var(--mt-radius-lg);
  padding: var(--mt-space-4) var(--mt-space-5);
  margin-bottom: var(--mt-space-8);
}
.mt-cat__title {
  margin: 0 0 var(--mt-space-4);
  font-size: var(--mt-font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mt-text-tertiary);
}
.mt-cat__sep {
  border: none;
  border-top: 1px solid var(--mt-border-subtle);
  margin: var(--mt-space-4) 0;
}
/* dentro de la tarjeta el campo ya no necesita su separacion inferior:
   la da el <hr> */
.mt-cat .mt-admin-newcat { margin-bottom: 0; }
.mt-admin-newcat__label {
  font-size: var(--mt-font-sm);
  font-weight: 500;
  color: var(--mt-text-secondary);
  white-space: nowrap;
}
#contenidoAdmin .mt-admin-newcat input[type="text"] {
  flex: 0 1 320px;   /* ancho razonable, no todo el renglón */
  min-width: 180px;
}
#contenidoAdmin .mt-admin-newcat .ui-button {
  /* misma altura que el campo: 32px */
  height: 32px;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center;
  background: var(--mt-accent) !important;
  border-color: var(--mt-accent) !important;
  color: var(--mt-text-on-accent) !important;
  font-weight: 600 !important;
}
#contenidoAdmin .mt-admin-newcat .ui-button:hover {
  background: var(--mt-accent-hover) !important;
  border-color: var(--mt-accent-hover) !important;
}
#contenidoAdmin .mt-admin-newcat .ui-button .ui-button-text {
  padding: 0 0 0 4px !important;
  line-height: 1;
}
/* el sprite de jQuery UI es oscuro: blanquearlo sobre el acento */
#contenidoAdmin .mt-admin-newcat .ui-button .ui-icon {
  filter: brightness(0) invert(1);
  position: static !important;
  margin: 0 !important;
  flex-shrink: 0;
}



/* ── Etiquetas de colores de agenda (administracionc.php) ──
   Era un bloque flotado con <font color> y los campos en una sola línea que
   envolvía donde caía, más diez <br> al final para separarlo. */
.mt-etq {
  background: var(--mt-surface-raised);
  border: 1px solid var(--mt-border-subtle);
  border-radius: var(--mt-radius-lg);
  padding: var(--mt-space-4) var(--mt-space-5);
  /* 20px dejaba las dos tarjetas casi pegadas */
  margin-bottom: var(--mt-space-8);
}
.mt-etq__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mt-space-4);
  flex-wrap: wrap;
  margin-bottom: var(--mt-space-4);
}
.mt-etq__title {
  margin: 0;
  font-size: var(--mt-font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mt-text-tertiary);
}
.mt-etq__hint { margin: 4px 0 0; font-size: var(--mt-font-sm); color: var(--mt-text-secondary); }
.mt-etq__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--mt-font-sm);
  font-weight: 500;
  color: var(--mt-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.mt-etq__toggle input { width: 15px; height: 15px; margin: 0; accent-color: var(--mt-accent); }

.mt-etq__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--mt-space-3);
}
.mt-etq__item { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mt-etq__color {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--mt-font-xs);
  color: var(--mt-text-secondary);
  cursor: pointer;
}
.mt-etq__dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border: 1px solid oklch(0 0 0 / 0.15);   /* contorno: los claros se perdían */
}
#contenidoAdmin .mt-etq__item input[type="text"] { width: 100%; }

.mt-etq__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--mt-space-4);
  padding-top: var(--mt-space-3);
  border-top: 1px solid var(--mt-border-subtle);
}
#contenidoAdmin .mt-etq__actions input[type="button"] {
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--mt-accent);
  border-radius: var(--mt-radius);
  background: var(--mt-accent);
  font-family: var(--mt-font);
  font-size: var(--mt-font-sm);
  font-weight: 600;
  color: var(--mt-text-on-accent);
  cursor: pointer;
}
#contenidoAdmin .mt-etq__actions input[type="button"]:hover { background: var(--mt-accent-hover); }


/* nombre del color + botón de eliminar, en la etiqueta del campo */
.mt-etq__cname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mt-etq__del {
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0;
  border: none; border-radius: var(--mt-radius-sm);
  background: transparent; color: var(--mt-text-tertiary);
  cursor: pointer; opacity: 0; transition: opacity 120ms, color 120ms, background 120ms;
}
.mt-etq__del svg { width: 11px; height: 11px; }
.mt-etq__item:hover .mt-etq__del,
.mt-etq__del:focus-visible { opacity: 1; }
.mt-etq__del:hover { background: var(--mt-error-subtle); color: var(--mt-error); }


/* indicador de guardado por campo */
.mt-etq__field { position: relative; display: block; }
#contenidoAdmin .mt-etq__field input[type="text"] { width: 100%; padding-right: 30px; }
.mt-etq__state {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  pointer-events: none;
}
.mt-etq__state.is-saving::before,
.mt-etq__state.is-ok::before,
.mt-etq__state.is-error::before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}
/* ✓ discreto */
.mt-etq__state.is-ok::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' stroke='%23217a5b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  animation: mt-etq-in 180ms var(--mt-ease);
}
/* girando mientras guarda */
.mt-etq__state.is-saving::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='6' stroke='%23b8bcc0' stroke-width='2'/%3E%3Cpath d='M8 2a6 6 0 0 1 6 6' stroke='%23217a5b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  animation: mt-etq-spin 0.7s linear infinite;
}
.mt-etq__state.is-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 4v5' stroke='%23a4341f' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.6' r='1' fill='%23a4341f'/%3E%3C/svg%3E");
}
@keyframes mt-etq-in  { from { opacity: 0; transform: scale(0.7) } to { opacity: 1; transform: scale(1) } }
@keyframes mt-etq-spin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) {
  .mt-etq__state.is-ok::before, .mt-etq__state.is-saving::before { animation: none; }
}

/* alta de etiqueta nueva */
/* El bloque de agregar va ARRIBA del listado, asi que la linea separadora
   queda debajo (antes era border-top con el bloque al final). */
.mt-etq__add {
  display: flex;
  align-items: center;
  gap: var(--mt-space-2);
  flex-wrap: wrap;
  margin-bottom: var(--mt-space-4);
  padding-bottom: var(--mt-space-4);
  border-bottom: 1px solid var(--mt-border-subtle);
}
.mt-etq__addcolor {
  display: inline-flex;
  width: 34px; height: 34px;
  border: 1px solid var(--mt-border-default);
  border-radius: var(--mt-radius);
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
}
/* el input de color trae relleno propio del navegador: se anula para que el
   recuadro se vea como una muestra sólida */
.mt-etq__addcolor input[type="color"] {
  width: 150%; height: 150%;
  margin: -25%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
#contenidoAdmin .mt-etq__add input[type="text"] { flex: 0 1 260px; min-width: 160px; }
#contenidoAdmin .mt-etq__add button {
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--mt-accent);
  border-radius: var(--mt-radius);
  background: var(--mt-accent);
  font-family: var(--mt-font);
  font-size: var(--mt-font-sm);
  font-weight: 600;
  color: var(--mt-text-on-accent);
  cursor: pointer;
}
#contenidoAdmin .mt-etq__add button:hover { background: var(--mt-accent-hover); }
#contenidoAdmin .mt-etq__add button:disabled { opacity: 0.5; cursor: default; }
.mt-etq__msg { font-size: var(--mt-font-sm); color: var(--mt-text-secondary); }
.mt-etq__msg.is-error { color: var(--mt-error); font-weight: 500; }

/* ── Formato de Recetas (editor.php) ── */
.mt-rec-bar {
  display: flex;
  align-items: center;
  gap: var(--mt-space-2);
  flex-wrap: wrap;
  margin-bottom: var(--mt-space-3);
}
.mt-rec-bar__label {
  font-size: var(--mt-font-sm);
  font-weight: 500;
  color: var(--mt-text-secondary);
}
#contenidoAdmin .mt-rec-bar select { min-width: 200px; }
.mt-rec-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--mt-space-3);
  margin-left: auto;
}
.mt-rec-saving {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--mt-font-sm);
  color: var(--mt-text-secondary);
}
#contenidoAdmin #guardarReceta.ui-button {
  height: 32px;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center;
  background: var(--mt-accent) !important;
  border-color: var(--mt-accent) !important;
  color: var(--mt-text-on-accent) !important;
  font-weight: 600 !important;
}
#contenidoAdmin #guardarReceta.ui-button:hover {
  background: var(--mt-accent-hover) !important;
  border-color: var(--mt-accent-hover) !important;
}
#contenidoAdmin #guardarReceta.ui-button .ui-icon {
  filter: brightness(0) invert(1);
  position: static !important;
  margin: 0 !important;
}
#contenidoAdmin #guardarReceta.ui-button .ui-button-text { padding: 0 0 0 5px !important; line-height: 1; }

/* Marcadores: no estaban documentados en ningun lado */
.mt-rec-help {
  margin-bottom: var(--mt-space-3);
  padding: 10px 14px;
  background: var(--mt-surface-base);
  border: 1px solid var(--mt-border-subtle);
  border-radius: var(--mt-radius);
  font-size: var(--mt-font-sm);
}
.mt-rec-help summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--mt-accent-text);
  list-style: none;
}
.mt-rec-help summary::-webkit-details-marker { display: none; }
.mt-rec-help summary::before { content: "▸ "; }
.mt-rec-help[open] summary::before { content: "▾ "; }
.mt-rec-help p { margin: 10px 0 8px; color: var(--mt-text-secondary); }
.mt-rec-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-rec-tags code {
  padding: 3px 8px;
  background: var(--mt-accent-subtle);
  border: 1px solid rgba(8, 66, 52, 0.18);
  border: 1px solid oklch(0.340 0.062 171 / 0.18);
  border-radius: var(--mt-radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--mt-font-xs);
  color: var(--mt-accent-text);
}

/* Cromo de CKEditor 4 (skin moono): quitar degradados y ajustar a la paleta */
.mt-rec-editor .cke,
.mt-rec-editor .cke_chrome {
  border: 1px solid var(--mt-border-subtle) !important;
  border-radius: var(--mt-radius-lg) !important;
  overflow: hidden;
  box-shadow: none !important;
}
.mt-rec-editor .cke_top {
  background: var(--mt-surface-base) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--mt-border-subtle) !important;
  box-shadow: none !important;
  padding: 8px !important;
}
.mt-rec-editor .cke_bottom {
  background: var(--mt-surface-base) !important;
  background-image: none !important;
  border-top: 1px solid var(--mt-border-subtle) !important;
  box-shadow: none !important;
}
.mt-rec-editor .cke_toolgroup,
.mt-rec-editor .cke_combo_button {
  background: var(--mt-surface-raised) !important;
  background-image: none !important;
  border: 1px solid var(--mt-border-subtle) !important;
  border-radius: var(--mt-radius) !important;
  box-shadow: none !important;
}
.mt-rec-editor .cke_button:hover,
.mt-rec-editor .cke_button:focus,
.mt-rec-editor .cke_combo_button:hover { background: var(--mt-accent-subtle) !important; }
.mt-rec-editor .cke_button_on { background: var(--mt-accent-subtle) !important; box-shadow: none !important; }
.mt-rec-editor .cke_combo_text { font-family: var(--mt-font) !important; font-size: var(--mt-font-sm) !important; color: var(--mt-text-secondary) !important; }
.mt-rec-editor .cke_contents { background: var(--mt-surface-raised); }

/* ── Pestañas de categorías dentro de administración ── */
#contenidoAdmin #tabs.ui-tabs,
#contenidoAdmin #tabs.ui-widget-content {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
#contenidoAdmin #tabs .ui-tabs-nav {
  padding: 0 !important;
  margin: 0 0 var(--mt-space-4) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--mt-border-subtle) !important;
  border-radius: 0 !important;
}
#contenidoAdmin #tabs .ui-tabs-nav li {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin: 0 !important;
  border-radius: 0 !important;
  top: 0 !important;
}
#contenidoAdmin #tabs .ui-tabs-nav li a {
  padding: 8px 14px !important;
  font-family: var(--mt-font) !important;
  font-size: var(--mt-font-sm) !important;
  font-weight: 500 !important;
  color: var(--mt-text-secondary) !important;
}
#contenidoAdmin #tabs .ui-tabs-nav li.ui-state-active,
#contenidoAdmin #tabs .ui-tabs-nav li.ui-tabs-selected {
  border-bottom-color: var(--mt-accent) !important;
  background: transparent !important;
}
#contenidoAdmin #tabs .ui-tabs-nav li.ui-state-active a,
#contenidoAdmin #tabs .ui-tabs-nav li.ui-tabs-selected a {
  color: var(--mt-accent) !important;
  font-weight: 600 !important;
}
#contenidoAdmin #tabs .ui-tabs-panel {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
/* Icono de cerrar categoria: iba con float:left, asi que caia ANTES de la
   etiqueta y se llevaba su propio ancho + el padding del <a>, dejando un
   hueco grande sobre el borde inferior de la pestaña activa. Sin float queda
   despues del texto, pegado a el y centrado con la linea. */
#contenidoAdmin #tabs .ui-tabs-nav li .ui-icon-close {
  float: none !important;
  display: inline-block;
  vertical-align: middle;
  margin: -2px 8px 0 -8px;
  opacity: .45;
  cursor: pointer;
  transition: opacity 120ms;
}
#contenidoAdmin #tabs .ui-tabs-nav li:hover .ui-icon-close,
#contenidoAdmin #tabs .ui-tabs-nav li.ui-state-active .ui-icon-close,
#contenidoAdmin #tabs .ui-tabs-nav li.ui-tabs-selected .ui-icon-close { opacity: 1; }