:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);

  --success: oklch(0.627 0.194 149.214);
  --success-soft: color-mix(in oklab, var(--success) 15%, transparent);
  --success-text: oklch(0.527 0.154 150.069);
  --warning: oklch(0.666 0.179 58.318);
  --warning-soft: color-mix(in oklab, var(--warning) 15%, transparent);
  --primary-soft: color-mix(in oklab, var(--primary) 10%, transparent);
  --destructive-soft: color-mix(in oklab, var(--destructive) 10%, transparent);

  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);

  --sidebar-width: 16rem;
  --sidebar-width-icon: 3rem;
  --header-height: 3.5rem;
  --content-max: 90rem;

  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  --font-sans: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --dur-rapida: 150ms;
  --dur-media: 250ms;
  --dur-lenta: 400ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

html.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
  --success: oklch(0.723 0.219 149.579);
  --success-text: oklch(0.723 0.219 149.579);
  --warning: oklch(0.769 0.188 70.08);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; border-color: var(--border); border-style: solid; border-width: 0; }
html { font-family: var(--font-sans); -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; min-height: 100vh; background: var(--background); color: var(--foreground); font-size: 0.875rem; line-height: 1.5; }

body, .card, .sidebar, .header, .input, .textarea, .select, .badge, .btn-outline, .btn-secondary { transition-property: background-color, color, border-color, box-shadow; transition-duration: var(--dur-media); transition-timing-function: var(--ease); }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
button:disabled { cursor: not-allowed; }
img, svg, video { display: block; max-width: 100%; }
table { border-collapse: collapse; border-spacing: 0; }
hr { border: 0; border-top: 1px solid var(--border); margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); border-radius: var(--radius-sm); }
::selection { background: var(--primary); color: var(--primary-foreground); }
.icono { width: 1rem; height: 1rem; flex-shrink: 0; }
.h-full { height: 100%; }

.app { display: flex; min-height: 100vh; width: 100%; }

.sidebar {
  position: fixed; inset-block: 0; left: 0; z-index: 50;
  width: var(--sidebar-width); display: flex; flex-direction: column;
  background: var(--sidebar); color: var(--sidebar-foreground); border-right: 1px solid var(--sidebar-border);
  transition: width var(--dur-media) var(--ease), transform var(--dur-media) var(--ease), background-color var(--dur-media) var(--ease), color var(--dur-media) var(--ease), border-color var(--dur-media) var(--ease);
}

.sidebar-inset { flex: 1; min-width: 0; display: flex; flex-direction: column; margin-left: var(--sidebar-width); transition: margin-left var(--dur-media) var(--ease); }
.sidebar-overlay { display: none; position: fixed; inset: 0; z-index: 49; background: rgb(0 0 0 / 0.5); }

.sidebar-header { padding: 0.5rem; }
.sidebar-brand { display: flex; align-items: center; gap: 0.625rem; height: 3rem; padding: 0.5rem; border-radius: var(--radius-md); width: 100%; }
.sidebar-brand .logo { width: 2rem; height: 2rem; }
.sidebar-brand-texto { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.sidebar-brand-nombre { font-size: 1.125rem; font-weight: 600; white-space: nowrap; line-height: 1.3; }
.sidebar-brand-rol { font-size: 0.75rem; font-weight: 300; white-space: nowrap; }
.sidebar-content { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 0.5rem; }
.sidebar-group { position: relative; display: flex; flex-direction: column; padding: 0.5rem; }
.sidebar-group-label {
  display: flex; align-items: center; height: 2rem; padding: 0 0.5rem; border-radius: var(--radius-md);
  font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em;
  color: color-mix(in oklab, var(--sidebar-foreground) 50%, transparent); white-space: nowrap; overflow: hidden;
}
.sidebar-menu { display: flex; flex-direction: column; gap: 0.25rem; }
.sidebar-menu-button {
  display: flex; align-items: center; gap: 0.5rem; width: 100%; height: 2rem; padding: 0.5rem; border-radius: var(--radius-md);
  font-size: 0.875rem; white-space: nowrap; overflow: hidden; color: var(--sidebar-foreground); transition: background var(--dur-rapida) var(--ease), transform var(--dur-rapida) var(--ease);
}
.sidebar-menu-button:active { transform: scale(0.98); }
.sidebar-menu-button .icono { width: 1rem; height: 1rem; }
.sidebar-menu-button span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; }
.sidebar-menu-button:hover { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
.sidebar-menu-button[aria-current="page"] { background: var(--primary-soft); font-weight: 500; }

.sidebar-menu-button .sidebar-contador { flex: none; min-width: 1.25rem; height: 1.25rem; padding: 0 0.375rem; border-radius: 9999px; background: var(--primary); color: var(--primary-foreground); font-size: 0.6875rem; font-weight: 600; line-height: 1.25rem; text-align: center; font-variant-numeric: tabular-nums; animation: aparecer-escala var(--dur-rapida) var(--ease); }

@media (min-width: 1024px) {
  html[data-sidebar="collapsed"] .sidebar { width: var(--sidebar-width-icon); }
  html[data-sidebar="collapsed"] .sidebar-inset { margin-left: var(--sidebar-width-icon); }
  html[data-sidebar="collapsed"] .sidebar-brand-texto,
  html[data-sidebar="collapsed"] .sidebar-menu-button span,
  html[data-sidebar="collapsed"] .sidebar-group-label { display: none; }
  html[data-sidebar="collapsed"] .sidebar-brand { justify-content: center; padding: 0; }
  html[data-sidebar="collapsed"] .sidebar-menu-button { justify-content: center; padding: 0.5rem; position: relative; }
  html[data-sidebar="collapsed"] .sidebar-menu-button .sidebar-contador { display: block; position: absolute; top: 0.2rem; right: 0.2rem; min-width: 0; width: 0.5rem; height: 0.5rem; padding: 0; font-size: 0; }
}

@media (max-width: 1023.98px) {
  .sidebar { transform: translateX(-100%); width: 18rem; box-shadow: var(--shadow-lg); }
  .sidebar-inset { margin-left: 0 !important; }
  html[data-sidebar-mobile="open"] .sidebar { transform: translateX(0); }
  html[data-sidebar-mobile="open"] .sidebar-overlay { display: block; }
  html[data-sidebar-mobile="open"] body { overflow: hidden; }
}

.header { position: sticky; top: 0; z-index: 40; background: var(--card); border-bottom: 1px solid var(--border); }
.header-inner { max-width: var(--content-max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 0.5rem 1rem; min-height: var(--header-height); }
.header-izq, .header-der { display: flex; align-items: center; gap: 0.375rem; min-width: 0; }
.header-izq { gap: 1rem; }
.breadcrumb { display: none; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--muted-foreground); min-width: 0; }
.breadcrumb li { display: flex; align-items: center; gap: 0.375rem; white-space: nowrap; }
.breadcrumb li:last-child { color: var(--foreground); font-weight: 400; }
.breadcrumb .icono { width: 0.875rem; height: 0.875rem; }
.separator-v { width: 1px; height: 1rem; background: var(--border); display: none; }
@media (min-width: 640px) { .breadcrumb, .separator-v { display: flex; } .header-inner { padding-inline: 1.5rem; } }

.main { width: 100%; max-width: var(--content-max); margin: 0 auto; flex: 1; padding: 1.5rem 1rem; }
.footer { color: var(--muted-foreground); }
.footer-inner { max-width: var(--content-max); margin: 0 auto; padding: 0.75rem 1rem; font-size: 0.875rem; display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
@media (min-width: 640px) { .main { padding-inline: 1.5rem; } .footer-inner { padding-inline: 1.5rem; } }

.pagina { display: flex; flex-direction: column; gap: 1.5rem; animation: aparecer 200ms var(--ease) both; }
.pagina-titulo { font-size: 1.125rem; font-weight: 600; }
.pagina-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }

.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; animation: aparecer 200ms var(--ease) both; }
.page-title { margin: 0; font-size: 1.5rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.025em; }
.page-description { margin: 0.25rem 0 0; color: var(--muted-foreground); font-size: 0.875rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap; flex-shrink: 0;
  height: 2.25rem; padding: 0.5rem 1rem; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 500; line-height: 1.25rem;
  transition: background var(--dur-rapida) var(--ease), color var(--dur-rapida) var(--ease), box-shadow var(--dur-rapida) var(--ease), border-color var(--dur-rapida) var(--ease), transform var(--dur-rapida) var(--ease), opacity var(--dur-rapida) var(--ease);
  cursor: pointer; user-select: none; text-decoration: none;
}
.btn .icono { width: 1rem; height: 1rem; pointer-events: none; }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.btn-default { background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-xs); }
.btn-default:hover { background: color-mix(in oklab, var(--primary) 90%, transparent); }
.btn-outline { border: 1px solid var(--border); background: var(--background); box-shadow: var(--shadow-xs); }
.btn-outline:hover { background: var(--accent); color: var(--accent-foreground); }
html.dark .btn-outline { background: color-mix(in oklab, var(--input) 30%, transparent); border-color: var(--input); }
html.dark .btn-outline:hover { background: color-mix(in oklab, var(--input) 50%, transparent); }
.btn-secondary { background: var(--secondary); color: var(--secondary-foreground); box-shadow: var(--shadow-xs); }
.btn-secondary:hover { background: color-mix(in oklab, var(--secondary) 80%, transparent); }
.btn-ghost:hover { background: var(--accent); color: var(--accent-foreground); }
.btn-destructive { background: var(--destructive); color: #fff; box-shadow: var(--shadow-xs); }
.btn-destructive:hover { background: color-mix(in oklab, var(--destructive) 90%, transparent); }
.btn-destructive:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 30%, transparent); }
.btn-link { color: var(--primary); text-decoration: underline; text-underline-offset: 4px; height: auto; padding: 0; }
.btn-sm { height: 2rem; padding: 0 0.75rem; gap: 0.375rem; border-radius: var(--radius-md); }
.btn-xs { height: 1.5rem; padding: 0 0.5rem; gap: 0.25rem; font-size: 0.75rem; }
.btn-lg { height: 2.5rem; padding: 0 1.5rem; }
.btn-xl { height: 2.75rem; padding: 0 1.5rem; font-size: 1rem; }
.btn-icon { width: 2.25rem; height: 2.25rem; padding: 0; }
.btn-icon-sm { width: 2rem; height: 2rem; padding: 0; }
.btn-icon .icono, .btn-icon-sm .icono { width: 1.125rem; height: 1.125rem; }
.btn-block { width: 100%; }
.btn-round { border-radius: 9999px; }

.card {
  display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem 0;
  background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xs);
}
.card-header { display: grid; grid-auto-rows: min-content; align-items: start; gap: 0.375rem; padding: 0 1.5rem; }
.card-header.con-accion { grid-template-columns: 1fr auto; }
.card-action { grid-column: 2; grid-row: 1 / span 2; align-self: start; justify-self: end; }
.card-title { font-weight: 600; line-height: 1.2; font-size: 1rem; }
.card-description { color: var(--muted-foreground); font-size: 0.875rem; }
.card-content { padding: 0 1.5rem; }
.card-footer { display: flex; align-items: center; gap: 0.5rem; padding: 0 1.5rem; }
.card-footer.con-borde, .card-header.con-borde { border-top: 1px solid var(--border); padding-top: 1.5rem; }
.card-header.con-borde { border-top: 0; border-bottom: 1px solid var(--border); padding-bottom: 1rem; }
.card-sin-padding { padding: 0; gap: 0; }

.card-interactiva { transition: box-shadow var(--dur-rapida) var(--ease), border-color var(--dur-rapida) var(--ease), background-color var(--dur-media) var(--ease), transform var(--dur-rapida) var(--ease); cursor: pointer; }
.card-interactiva:hover { box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 40%, transparent); }
button:active:not(:disabled) > .card-interactiva { transform: scale(0.98); }
.card-activa { background: color-mix(in oklab, var(--primary) 5%, var(--card)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 30%, transparent); }
.card-lista { background: var(--card); box-shadow: 0 0 0 2px color-mix(in oklab, var(--success) 50%, transparent); }

.field { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; line-height: 1; user-select: none; }
.label-opcional { color: var(--muted-foreground); font-weight: 400; }
.input, .textarea, .select {
  display: flex; width: 100%; min-width: 0; height: 2.25rem; padding: 0.25rem 0.75rem;
  background: transparent; border: 1px solid var(--input); border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
  font-size: 0.875rem; color: var(--foreground); transition: border-color var(--dur-rapida) var(--ease), box-shadow var(--dur-rapida) var(--ease), background-color var(--dur-media) var(--ease); outline: none;
}
html.dark .input, html.dark .textarea, html.dark .select { background: color-mix(in oklab, var(--input) 30%, transparent); }
.input::placeholder, .textarea::placeholder { color: var(--muted-foreground); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); border-radius: var(--radius-md); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--destructive); box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 20%, transparent); }
.input:disabled, .textarea:disabled, .select:disabled { opacity: 0.5; cursor: not-allowed; }
.input-lg { height: 2.5rem; font-size: 1rem; }
.input-sm { height: 2rem; }
.input[type="number"] { font-variant-numeric: tabular-nums; }
.input[type="date"] { min-width: 9rem; }
.textarea { height: auto; min-height: 4rem; padding: 0.5rem 0.75rem; resize: vertical; field-sizing: content; }
.select {
  appearance: none; padding-right: 2rem; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 0.5rem center;
}
.input-group { position: relative; display: flex; align-items: center; width: 100%; }
.input-group .input { padding-left: 2.25rem; }
.input-group.addon-derecha .input { padding-left: 0.75rem; padding-right: 2.5rem; }
.input-addon { position: absolute; left: 0.75rem; color: var(--muted-foreground); display: flex; align-items: center; pointer-events: none; font-size: 0.875rem; }
.input-addon.derecha { left: auto; right: 0.375rem; pointer-events: auto; }
.field-error { color: var(--destructive); font-size: 0.875rem; }
.field-hint { color: var(--muted-foreground); font-size: 0.75rem; }
.checkbox { width: 1rem; height: 1rem; accent-color: var(--primary); border-radius: 4px; cursor: pointer; margin: 0; }
.switch { position: relative; display: inline-flex; align-items: center; width: 2rem; height: 1.15rem; border-radius: 9999px; background: var(--input); transition: background var(--dur-rapida) var(--ease), opacity var(--dur-rapida) var(--ease); cursor: pointer; flex-shrink: 0; }
.switch::after { content: ""; position: absolute; left: 2px; width: 0.9rem; height: 0.9rem; border-radius: 9999px; background: var(--background); transition: transform var(--dur-rapida) var(--ease), background-color var(--dur-rapida) var(--ease); box-shadow: var(--shadow-xs); }
.switch:active:not(:disabled)::after { transform: scaleX(1.15); }
.switch[aria-checked="true"]:active:not(:disabled)::after { transform: translateX(0.8rem) scaleX(1.15); }
html.dark .switch::after { background: var(--foreground); }
.switch[aria-checked="true"] { background: var(--primary); }
.switch[aria-checked="true"]::after { transform: translateX(0.8rem); background: var(--primary-foreground); }
.switch:disabled { opacity: 0.5; cursor: not-allowed; }

.opciones { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; }
.opcion { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 2.25rem; padding: 0 0.875rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--background); font-size: 0.875rem; font-weight: 500; transition: background var(--dur-rapida) var(--ease), color var(--dur-rapida) var(--ease), border-color var(--dur-rapida) var(--ease), transform var(--dur-rapida) var(--ease); cursor: pointer; }
.opcion:hover { background: var(--accent); }
.opcion:active { transform: scale(0.97); }
.opcion[aria-pressed="true"], .opcion.activa { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }

.badge { display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; width: fit-content; white-space: nowrap; flex-shrink: 0; padding: 0.125rem 0.5rem; border: 1px solid transparent; border-radius: var(--radius-md); font-size: 0.75rem; font-weight: 500; line-height: 1rem; animation: aparecer-escala var(--dur-rapida) var(--ease); }
.badge .icono { width: 0.75rem; height: 0.75rem; }
.badge-default { background: var(--primary); color: var(--primary-foreground); }
.badge-secondary { background: var(--secondary); color: var(--secondary-foreground); }
.badge-outline { border-color: var(--border); color: var(--foreground); }
.badge-destructive { background: var(--destructive); color: #fff; }
.badge-destructive-soft { background: var(--destructive-soft); color: var(--destructive); }
.badge-soft { background: var(--primary-soft); color: var(--primary); }
.badge-success { background: var(--success-soft); color: var(--success-text); }
.badge-warning { background: var(--warning-soft); color: oklch(0.555 0.163 48.998); }
html.dark .badge-warning { color: var(--warning); }
.badge-muted { background: var(--muted); color: var(--muted-foreground); }
.badge-sm { padding: 0 0.375rem; font-size: 0.6875rem; border-radius: var(--radius-sm); }
.badge-round { border-radius: 9999px; }

.table-wrap { position: relative; width: 100%; overflow-x: auto; }

.table-wrap.sin-recorte { overflow: visible; }
.table { width: 100%; font-size: 0.875rem; caption-side: bottom; }
.table thead tr { border-bottom: 1px solid var(--border); }
.table th { height: 3.5rem; padding: 0.5rem; text-align: left; font-weight: 500; color: var(--muted-foreground); white-space: nowrap; vertical-align: middle; }
.table td { padding: 0.5rem; vertical-align: middle; height: 3.5rem; }
.table tbody tr { border-bottom: 1px solid var(--border); transition: background var(--dur-rapida) var(--ease); }
.table tbody tr:last-child { border-bottom: 0; }
.table tbody tr:hover { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.table th:first-child, .table td:first-child { padding-left: 1rem; }
.table th:last-child, .table td:last-child { padding-right: 1rem; }
.table-num, .table th.table-num { text-align: right; font-variant-numeric: tabular-nums; }
.table tfoot td { font-weight: 600; border-top: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 50%, transparent); }
.table .fila-celda-principal { color: var(--card-foreground); font-weight: 500; }

.tabla-pie { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 1.5rem; flex-wrap: wrap; }
.paginacion { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.btn-pagina { background: var(--primary-soft); color: var(--primary); }
.btn-pagina:hover { background: color-mix(in oklab, var(--primary) 20%, transparent); }

dialog.dialog, dialog.sheet { border: 0; padding: 0; margin: 0; background: transparent; color: var(--foreground); max-width: none; max-height: none; inset: 0; }
dialog::backdrop { background: rgb(0 0 0 / 0.5); }
dialog[open]::backdrop { animation: fundir var(--dur-rapida) var(--ease); }
dialog.cerrando::backdrop { animation: desvanecer var(--dur-rapida) var(--ease) forwards; }
dialog.dialog {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: calc(100% - 2rem); max-width: 32rem; max-height: calc(100dvh - 2rem); overflow-y: auto;
  display: none; flex-direction: column; gap: 1rem; padding: 1.5rem;
  background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
dialog.dialog[open] { display: flex; animation: dialogo-entrar var(--dur-rapida) var(--ease); }
dialog.dialog.cerrando[open] { animation: dialogo-salir var(--dur-rapida) var(--ease) forwards; pointer-events: none; }
dialog.dialog-sm { max-width: 24rem; }
dialog.dialog-md { max-width: 28rem; }
dialog.dialog-lg { max-width: 42rem; }
dialog.dialog-xl { max-width: 56rem; }
@keyframes dialogo-entrar { from { opacity: 0; transform: translate(-50%, -48%) scale(0.97); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes dialogo-salir { to { opacity: 0; transform: translate(-50%, -49%) scale(0.98); } }
.dialog-header { display: flex; flex-direction: column; gap: 0.5rem; text-align: center; padding-right: 1.5rem; }
.dialog-title { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.dialog-description { color: var(--muted-foreground); font-size: 0.875rem; }
.dialog-body { display: flex; flex-direction: column; gap: 1rem; }
.dialog-footer { display: flex; flex-direction: column-reverse; gap: 0.5rem; }
.dialog-close { position: absolute; top: 1rem; right: 1rem; opacity: 0.7; border-radius: var(--radius-sm); }
.dialog-close:hover { opacity: 1; }
@media (min-width: 640px) {
  .dialog-header { text-align: left; }
  .dialog-footer { flex-direction: row; justify-content: flex-end; }
}
dialog.sheet {
  position: fixed; top: 0; right: 0; left: auto; height: 100dvh; width: 100%; max-width: 100%;
  display: none; flex-direction: column; gap: 1rem; padding: 1.5rem; overflow-y: auto;
  background: var(--background); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg);
}
@media (min-width: 640px) { dialog.sheet { width: 26rem; } dialog.sheet-lg { width: 36rem; } }
dialog.sheet[open] { display: flex; animation: sheet-entrar var(--dur-media) var(--ease); }
dialog.sheet.cerrando[open] { animation: sheet-salir var(--dur-rapida) var(--ease) forwards; pointer-events: none; }
@keyframes sheet-entrar { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes sheet-salir { to { transform: translateX(100%); } }
.sheet-footer { margin-top: auto; display: flex; flex-direction: column-reverse; gap: 0.5rem; padding-top: 1rem; }
@media (min-width: 640px) { .sheet-footer { flex-direction: row; justify-content: flex-end; } }

.dropdown { position: relative; display: inline-flex; }
.dropdown-menu {
  position: absolute; top: calc(100% + 0.25rem); left: 0; z-index: 60; display: none; flex-direction: column; min-width: 10rem;
  padding: 0.25rem; background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  animation: menu-entrar var(--dur-rapida) var(--ease);
}
.dropdown-menu-end { left: auto; right: 0; }
.dropdown-menu-arriba { top: auto; bottom: calc(100% + 0.25rem); }
.dropdown[data-abierto] > .dropdown-menu { display: flex; }
.dropdown[data-cerrando] > .dropdown-menu { display: flex; animation: menu-salir var(--dur-rapida) var(--ease) forwards; pointer-events: none; }
@keyframes menu-entrar { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes menu-salir { to { opacity: 0; transform: translateY(-4px) scale(0.98); } }
.dropdown-item { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.375rem 0.5rem; border-radius: var(--radius-sm); font-size: 0.875rem; white-space: nowrap; cursor: pointer; text-align: left; transition: background var(--dur-rapida) var(--ease), color var(--dur-rapida) var(--ease); }
.dropdown-item:active:not(:disabled) { background: color-mix(in oklab, var(--accent) 70%, var(--border)); }
.dropdown-item .icono { width: 1rem; height: 1rem; color: var(--muted-foreground); }
.dropdown-item:hover, .dropdown-item:focus-visible { background: var(--accent); color: var(--accent-foreground); box-shadow: none; }
.dropdown-item:disabled { opacity: 0.5; pointer-events: none; }
.dropdown-item-destructive { color: var(--destructive); }
.dropdown-item-destructive .icono { color: var(--destructive); }
.dropdown-item-destructive:hover { background: var(--destructive-soft); color: var(--destructive); }
.dropdown-label { padding: 0.375rem 0.5rem; font-size: 0.875rem; font-weight: 500; }
.dropdown-separator { height: 1px; margin: 0.25rem -0.25rem; background: var(--border); }

.tabs-list { display: inline-flex; align-items: center; justify-content: center; height: 2.25rem; padding: 0.1875rem; gap: 0.125rem; background: var(--muted); color: var(--muted-foreground); border-radius: var(--radius-lg); width: fit-content; max-width: 100%; overflow-x: auto; }
.tab { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; height: 100%; padding: 0.25rem 0.75rem; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 500; white-space: nowrap; color: var(--muted-foreground); transition: background var(--dur-rapida) var(--ease), color var(--dur-rapida) var(--ease), box-shadow var(--dur-rapida) var(--ease), border-color var(--dur-rapida) var(--ease), transform var(--dur-rapida) var(--ease); border: 1px solid transparent; }
.tab:hover { color: var(--foreground); }
.tab:active { transform: scale(0.97); }
.tab[aria-selected="true"] { background: var(--background); color: var(--foreground); box-shadow: var(--shadow-xs); }
html.dark .tab[aria-selected="true"] { background: var(--input); border-color: var(--input); }
.tab .icono { width: 1rem; height: 1rem; }

.skeleton { background: var(--accent); border-radius: var(--radius-md); animation: pulso 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulso { 50% { opacity: 0.5; } }
.animate-pulse { animation: pulso 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

.animate-spin { animation: girar 1s linear infinite, fundir var(--dur-rapida) var(--ease); }
@keyframes girar { to { transform: rotate(360deg); } }

@keyframes fundir { from { opacity: 0; } }
@keyframes desvanecer { to { opacity: 0; } }
@keyframes aparecer { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes aparecer-escala { from { opacity: 0.4; transform: scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes destacar { from { background-color: var(--primary-soft); } to { background-color: transparent; } }
.anim-aparecer { animation: aparecer 200ms var(--ease) both; }
.anim-escalonado > * { animation: aparecer 200ms var(--ease) both; animation-delay: calc(min(var(--i, 0), 12) * 25ms); }
.anim-salir { transition: opacity var(--dur-rapida) var(--ease), transform var(--dur-rapida) var(--ease); opacity: 0 !important; transform: translateY(-2px); pointer-events: none; }
.saliendo { opacity: 0 !important; transition: opacity 120ms var(--ease); pointer-events: none; }
.destacar { animation: destacar 600ms var(--ease); border-radius: var(--radius-sm); }

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; animation-timing-function: var(--ease); }
::view-transition-old(sidebar), ::view-transition-new(sidebar), ::view-transition-old(header), ::view-transition-new(header) { animation: none; }
.sidebar { view-transition-name: sidebar; }
.header { view-transition-name: header; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

.toasts { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; width: calc(100% - 2rem); max-width: 22.5rem; pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: 0.75rem; width: 100%; padding: 0.875rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--popover); color: var(--popover-foreground); box-shadow: var(--shadow-lg); font-size: 0.875rem; font-weight: 500; pointer-events: auto; animation: toast-entrar 0.25s ease-out; }
.toast .icono { width: 1.125rem; height: 1.125rem; margin-top: 0.05rem; }
.toast-success { background: oklch(0.962 0.044 156.743); border-color: oklch(0.871 0.15 154.449); color: var(--success-text); }
.toast-error { background: oklch(0.969 0.015 12.422); border-color: oklch(0.885 0.062 18.334); color: oklch(0.505 0.213 27.518); }
.toast-info { background: oklch(0.97 0.014 254.604); border-color: oklch(0.882 0.059 254.128); color: oklch(0.424 0.199 265.638); }
.toast-warning { background: oklch(0.973 0.071 103.193); border-color: oklch(0.905 0.182 98.111); color: oklch(0.476 0.114 61.907); }
html.dark .toast-success { background: oklch(0.266 0.065 152.934); border-color: oklch(0.393 0.095 152.535); color: oklch(0.871 0.15 154.449); }
html.dark .toast-error { background: oklch(0.258 0.092 26.042); border-color: oklch(0.396 0.141 25.723); color: oklch(0.885 0.062 18.334); }
html.dark .toast-info { background: oklch(0.282 0.091 267.935); border-color: oklch(0.379 0.146 265.522); color: oklch(0.882 0.059 254.128); }
html.dark .toast-warning { background: oklch(0.286 0.066 53.813); border-color: oklch(0.421 0.095 57.708); color: oklch(0.945 0.129 101.54); }
.toast-saliendo { animation: toast-salir 0.2s ease-in forwards; }
@keyframes toast-entrar { from { opacity: 0; transform: translateY(-0.75rem); } to { opacity: 1; transform: none; } }
@keyframes toast-salir { to { opacity: 0; transform: translateY(-0.5rem); } }

.avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 9999px; background: var(--muted); color: var(--foreground); font-size: 0.75rem; font-weight: 500; flex-shrink: 0; overflow: visible; }
.avatar-lg { width: 2.5rem; height: 2.5rem; font-size: 0.875rem; }
.avatar-punto { position: absolute; right: 0; bottom: 0; width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--success); box-shadow: 0 0 0 2px var(--card); }

.estado { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 3rem 1.5rem; text-align: center; }
.estado-compacto { padding: 1.5rem; }
.estado-icono { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin-bottom: 0.25rem; border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--primary); }
.estado-icono .icono { width: 1.25rem; height: 1.25rem; }
.estado-icono-destructivo { background: var(--destructive-soft); color: var(--destructive); }
.estado-icono-lg { width: 3rem; height: 3rem; }
.estado-icono-lg .icono { width: 1.5rem; height: 1.5rem; }
.estado-titulo { font-size: 1rem; font-weight: 500; }
.estado-texto { color: var(--muted-foreground); font-size: 0.875rem; max-width: 24rem; }

.alert { position: relative; display: grid; grid-template-columns: 1rem 1fr; gap: 0.25rem 0.75rem; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); font-size: 0.875rem; align-items: start; }
.alert .icono { grid-row: 1 / span 2; margin-top: 0.125rem; }
.alert-title { font-weight: 500; }
.alert-description { color: var(--muted-foreground); grid-column: 2; }
.alert-destructive { color: var(--destructive); border-color: color-mix(in oklab, var(--destructive) 30%, transparent); background: var(--destructive-soft); }
.alert-destructive .alert-description { color: color-mix(in oklab, var(--destructive) 85%, transparent); }
.alert-warning { color: oklch(0.476 0.114 61.907); background: var(--warning-soft); border-color: color-mix(in oklab, var(--warning) 40%, transparent); }
html.dark .alert-warning { color: var(--warning); }
.alert-success { color: var(--success-text); background: var(--success-soft); border-color: color-mix(in oklab, var(--success) 40%, transparent); }
.alert-accion { grid-column: 2; justify-self: start; margin-top: 0.25rem; }

.separator { height: 1px; width: 100%; background: var(--border); }
.progress { position: relative; height: 0.5rem; width: 100%; overflow: hidden; border-radius: 9999px; background: var(--primary-soft); }
.progress > span { display: block; height: 100%; background: var(--primary); border-radius: 9999px; transition: width var(--dur-lenta) var(--ease); }
.progress-ranking { width: 7rem; height: 0.375rem; }
.progress-mini { max-width: 16rem; height: 0.25rem; margin-top: 0.375rem; }

.stat-icono { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex-shrink: 0; border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--primary); }
.stat-icono .icono { width: 1rem; height: 1rem; }

.stat-card { gap: 0.875rem; container-type: inline-size; }
.stat-card .card-header { grid-template-columns: minmax(0, 1fr) auto; }
.stat-card .card-action { grid-row: 1; }
.stat-card .stat-titulo { font-size: 0.875rem; font-weight: 500; align-self: center; }
.stat-cifra { grid-column: 1 / -1; min-width: 0; }
.stat-valor { display: block; font-size: clamp(1.25rem, 10cqi, 1.75rem); line-height: 1.25; font-weight: 600; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-detalle { color: var(--muted-foreground); }
.stat-pie { flex-wrap: wrap; gap: 0.5rem; color: var(--muted-foreground); font-size: 0.8125rem; }
.badge-delta { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.375rem; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 500; line-height: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.badge-delta .icono { width: 0.75rem; height: 0.75rem; }
.delta-up { background: var(--success-soft); color: var(--success-text); }
.delta-down { background: var(--destructive-soft); color: var(--destructive); }
.delta-flat { background: var(--muted); color: var(--muted-foreground); }

.ranking { display: flex; flex-direction: column; gap: 0.75rem; }
.ranking-item { display: flex; align-items: center; gap: 0.75rem; }
.ranking-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ranking-sub { font-size: 0.75rem; color: var(--muted-foreground); }

.grafico { position: relative; width: 100%; transition: opacity var(--dur-rapida) var(--ease); }
.grafico.cambiando { opacity: 0.35; }
.grafico svg { width: 100%; height: auto; display: block; overflow: visible; }
.grafico-eje { fill: var(--muted-foreground); font-size: 11px; }
.grafico-grilla { stroke: var(--border); stroke-dasharray: 3 3; }

.grafico-barra { transform-box: fill-box; transform-origin: bottom; }
.grafico[data-animar] .grafico-barra { animation: barra-crecer var(--dur-lenta) var(--ease) both; animation-delay: calc(min(var(--i, 0), 30) * 12ms); }
.grafico[data-animar] .grafico-linea { stroke-dasharray: 1; stroke-dashoffset: 1; animation: linea-dibujar 500ms var(--ease) forwards; }
.grafico[data-animar] .grafico-area, .grafico[data-animar] .grafico-leyenda { animation: fundir var(--dur-lenta) var(--ease) both; animation-delay: 150ms; }
.grafico[data-animar] .grafico-dona { transform-box: view-box; transform-origin: center; animation: dona-crecer var(--dur-lenta) var(--ease) both; }
@keyframes barra-crecer { from { transform: scaleY(0); } }
@keyframes linea-dibujar { to { stroke-dashoffset: 0; } }
@keyframes dona-crecer { from { opacity: 0; transform: scale(0.85); } }
.grafico-tooltip { position: absolute; z-index: 20; pointer-events: none; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--popover); color: var(--popover-foreground); box-shadow: var(--shadow-md); font-size: 0.75rem; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity var(--dur-rapida) var(--ease), visibility var(--dur-rapida); }
.grafico-tooltip.visible { opacity: 1; visibility: visible; }
.grafico-tooltip strong { display: block; margin-bottom: 0.25rem; font-weight: 500; }
.grafico-tooltip .fila { display: flex; align-items: center; gap: 0.5rem; justify-content: space-between; }
.grafico-tooltip .punto { width: 0.5rem; height: 0.5rem; border-radius: 2px; display: inline-block; margin-right: 0.375rem; }
.grafico-leyenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; padding-top: 0.75rem; font-size: 0.75rem; color: var(--muted-foreground); }
.grafico-leyenda span { display: inline-flex; align-items: center; gap: 0.375rem; }
.grafico-leyenda i, .punto-leyenda { width: 0.625rem; height: 0.625rem; border-radius: 2px; display: inline-block; flex-shrink: 0; }

.logo { width: 2rem; height: 2rem; flex-shrink: 0; }
.logo-fondo { fill: var(--primary); }
.logo-trazo { stroke: var(--primary-foreground); }
.logo-invertido .logo-fondo { fill: var(--primary-foreground); }
.logo-invertido .logo-trazo { stroke: var(--primary); }
.logo-sidebar .logo-fondo { fill: var(--primary); }
.logo-sidebar .logo-trazo { stroke: var(--sidebar); }

.solo-oscuro { display: none; }
html.dark .solo-claro { display: none; }
html.dark .solo-oscuro { display: inline-flex; }
.solo-claro, .solo-oscuro { align-items: center; }

.badge-contador { position: absolute; top: -0.125rem; right: -0.125rem; display: flex; align-items: center; justify-content: center; min-width: 1rem; height: 1rem; padding: 0 0.25rem; border-radius: 9999px; background: var(--primary); color: var(--primary-foreground); font-size: 10px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1; }

.login { display: grid; min-height: 100vh; }
@media (min-width: 1024px) { .login { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); } }
.login-aside { position: relative; display: none; overflow: hidden; background: var(--primary); color: var(--primary-foreground); padding: 3rem; flex-direction: column; justify-content: space-between; gap: 2.5rem; }
@media (min-width: 1024px) { .login-aside { display: flex; } }
@media (min-width: 1280px) { .login-aside { padding: 4rem; } }
.login-forma { position: absolute; top: -18rem; right: -18rem; width: 50rem; height: 50rem; opacity: 0.4; pointer-events: none; }
.login-marca { position: relative; display: flex; align-items: center; gap: 0.75rem; font-size: 1.25rem; font-weight: 700; }
.login-marca .logo { width: 2.25rem; height: 2.25rem; }
.login-texto { position: relative; display: flex; flex-direction: column; gap: 2.5rem; }
.login-titulo { font-size: 2.25rem; line-height: 1.15; font-weight: 600; text-wrap: balance; max-width: 32rem; }
@media (min-width: 1280px) { .login-titulo { font-size: 3rem; } }
.login-sub { font-size: 1.125rem; color: color-mix(in oklab, var(--primary-foreground) 70%, transparent); max-width: 32rem; margin-top: 1rem; }
.login-preview { display: flex; align-items: flex-start; gap: 1rem; max-width: 36rem; }
.login-mesas { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; padding: 0.75rem; border-radius: var(--radius-xl); background: color-mix(in oklab, var(--primary-foreground) 5%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary-foreground) 10%, transparent); }
.login-mesa { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.625rem; border-radius: var(--radius-lg); background: color-mix(in oklab, var(--primary-foreground) 10%, transparent); }
.login-mesa.ocupada { background: var(--primary-foreground); color: var(--primary); }
.login-mesa b { font-size: 1.25rem; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.login-mesa small { font-size: 0.75rem; opacity: 0.7; }
.login-ticket { flex: 1; display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; border-radius: var(--radius-xl); background: var(--primary-foreground); color: var(--primary); box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); font-size: 0.75rem; }
.login-ticket .fila { display: flex; justify-content: space-between; gap: 0.75rem; }
.login-ticket .total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 0.5rem; border-top: 1px solid color-mix(in oklab, var(--primary) 15%, transparent); }
.login-ticket .total b { font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.login-pasos { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; }
.login-pasos li { display: flex; align-items: center; gap: 0.625rem; font-size: 0.875rem; }
.login-pasos .paso-icono { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius-md); background: color-mix(in oklab, var(--primary-foreground) 10%, transparent); flex-shrink: 0; }
.login-pasos .paso-num { color: color-mix(in oklab, var(--primary-foreground) 60%, transparent); font-variant-numeric: tabular-nums; }
.login-pie { position: relative; font-size: 0.875rem; color: color-mix(in oklab, var(--primary-foreground) 60%, transparent); }
.login-main { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 2.5rem 1rem; }
.login-card { position: relative; z-index: 1; width: 100%; max-width: 28rem; gap: 1.5rem; padding: 2rem 0; }
@media (min-width: 1024px) { .login-card { box-shadow: none; border-color: transparent; } }
.login-card .card-header, .login-card .card-content { padding-inline: 1.5rem; }
@media (min-width: 640px) { .login-card .card-header, .login-card .card-content { padding-inline: 2rem; } }
.login-logo-movil { display: flex; align-items: center; gap: 0.75rem; font-size: 1.25rem; font-weight: 700; margin-bottom: 1.5rem; }
.login-logo-movil .logo { width: 2.125rem; height: 2.125rem; }
@media (min-width: 1024px) { .login-logo-movil { display: none; } }

.pantalla-error { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.card-error { align-items: center; text-align: center; max-width: 26rem; width: 100%; padding: 2.5rem 1.5rem; gap: 0.75rem; }
.error-codigo { font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); letter-spacing: 0.1em; }
.error-titulo { font-size: 1.25rem; font-weight: 600; }
.card-error .btn { margin-top: 0.75rem; }

.mesas-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 640px) { .mesas-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mesas-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .mesas-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.mesa-btn { display: block; width: 100%; text-align: left; border-radius: var(--radius-xl); }
.mesa-btn:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); border-radius: var(--radius-xl); }
.mesa-btn:disabled { opacity: 0.6; }
.mesa-card { height: 100%; gap: 0.75rem; padding: 1rem 0; }

.mesa-btn[data-bloqueada] { cursor: default; }
.mesa-card.mesa-bloqueada { background: var(--muted); border-style: dashed; box-shadow: none; }
.mesa-card .card-content { padding-inline: 1rem; display: flex; flex-direction: column; gap: 0.25rem; }
.mesa-card .mesa-top { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.mesa-numero { font-size: 1.875rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.mesa-nombre { font-size: 0.875rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mesa-monto { font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.mesa-meta { display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: var(--muted-foreground); }
.mesa-meta .icono { width: 0.875rem; height: 0.875rem; }
.mesa-badges { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }

.carta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (min-width: 640px) { .carta-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .carta-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.carta-grid > li { display: flex; min-width: 0; }

.producto-card { display: flex; flex-direction: column; width: 100%; height: 100%; min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); text-align: left; transition: box-shadow var(--dur-rapida) var(--ease), transform var(--dur-rapida) var(--ease), background-color var(--dur-rapida) var(--ease), opacity var(--dur-rapida) var(--ease); padding: 0; }
.producto-card:hover { box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 40%, transparent); }
.producto-card:active:not(:disabled) { transform: scale(0.98); }
.producto-card:disabled { opacity: 0.55; cursor: not-allowed; }
.producto-foto { position: relative; width: 100%; aspect-ratio: 4 / 3; background: var(--muted); overflow: hidden; flex-shrink: 0; }
.producto-foto img { width: 100%; height: 100%; object-fit: cover; }
.producto-foto-vacia { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--muted-foreground); }
.producto-foto-vacia .icono { width: 2rem; height: 2rem; opacity: 0.5; }
.producto-info { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem; flex: 1; width: 100%; min-width: 0; }
.producto-nombre { font-size: 0.875rem; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.producto-desc { font-size: 0.75rem; color: var(--muted-foreground); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.producto-precio { margin-top: auto; padding-top: 0.25rem; font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.producto-stock { position: absolute; top: 0.5rem; right: 0.5rem; }

.pedido-layout { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 1024px) { .pedido-layout { grid-template-columns: minmax(0, 1fr) 24rem; } }
@media (min-width: 1280px) { .pedido-layout { grid-template-columns: minmax(0, 1fr) 26rem; } }
.pedido-panel { position: sticky; top: calc(var(--header-height) + 1.5rem); }

.cocina-columnas { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 768px) { .cocina-columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .cocina-columnas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plato-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); min-width: 0; }

.plato-card > .flex:first-child { flex-wrap: wrap; row-gap: 0.375rem; }
.plato-card > .flex:first-child > .min-w-0 { flex: 1 1 8rem; }
.plato-card .plato-nombre, .plato-card .text-sm.font-medium { overflow-wrap: anywhere; }
.plato-card.demorado { border-color: color-mix(in oklab, var(--destructive) 40%, transparent); }
.plato-card.listo { border-color: color-mix(in oklab, var(--success) 50%, transparent); }
.plato-cant { font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.plato-nota { padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); background: var(--warning-soft); font-size: 0.875rem; }
.cocina-grande .plato-card { padding: 1rem; gap: 0.75rem; }
.cocina-grande .plato-cant { font-size: 1.5rem; }
.cocina-grande .plato-nombre { font-size: 1.125rem; font-weight: 600; }

.ticket-papel { margin: 0 auto; width: 100%; max-width: 18.75rem; padding: 1rem; background: #fff; color: #000; font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.35; font-variant-numeric: tabular-nums; }
.ticket-papel table { width: 100%; }
.ticket-papel th { text-align: left; font-weight: 700; }
.ticket-papel .der { text-align: right; }
.ticket-papel .centro { text-align: center; }
.ticket-papel .negrita { font-weight: 700; }
.ticket-papel hr { margin: 0.5rem 0; border-top: 1px dashed rgb(0 0 0 / 0.5); }
.ticket-papel .encabezado { font-size: 0.875rem; font-weight: 700; text-transform: uppercase; }
.ticket-papel .total { font-size: 0.875rem; font-weight: 700; }
.ticket-papel .grande { font-size: 0.875rem; font-weight: 600; }
.ticket-fondo { padding: 0.75rem; border-radius: var(--radius-lg); background: var(--muted); }

.ecuacion { display: grid; gap: 1rem; align-items: stretch; }
@media (min-width: 1024px) { .ecuacion { grid-template-columns: 1fr auto 1fr auto 1fr; } }
.ecuacion-operador { display: flex; align-items: center; justify-content: center; color: var(--muted-foreground); }
.ecuacion-operador .icono { width: 1.5rem; height: 1.5rem; }
.bloque-valor { font-size: 1.875rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bloque-positivo { color: var(--success); }
.bloque-negativo { color: var(--destructive); }

.card-centrada { margin: 0 auto; width: 100%; max-width: 28rem; }

.buscador { width: 100%; }
@media (min-width: 640px) { .buscador { max-width: 16rem; } }

#area-impresion { display: none; }
@media print {
  body > *:not(#area-impresion) { display: none !important; }
  #area-impresion { display: block; }

  #area-impresion .ticket-papel {
    max-width: none; margin: 0; padding: 2mm 3mm;
    font-size: 11px; line-height: 1.3; color: #000; background: #fff;
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
  }

  @page { margin: 6mm; }
}

.flex { display: flex; } .inline-flex { display: inline-flex; } .grid { display: grid; } .block { display: block; } .hidden { display: none; }
.flex-col { flex-direction: column; } .flex-row { flex-direction: row; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1 1 0%; } .flex-auto { flex: 1 1 auto; } .shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .items-baseline { align-items: baseline; } .items-stretch { align-items: stretch; }
.justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .justify-start { justify-content: flex-start; }
.self-start { align-self: flex-start; } .self-center { align-self: center; } .self-end { align-self: flex-end; }
.gap-0 { gap: 0; } .gap-1 { gap: 0.25rem; } .gap-1\.5 { gap: 0.375rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-5 { gap: 1.25rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; }
.gap-x-2 { column-gap: 0.5rem; } .gap-x-4 { column-gap: 1rem; } .gap-x-6 { column-gap: 1.5rem; } .gap-y-1 { row-gap: 0.25rem; } .gap-y-2 { row-gap: 0.5rem; } .gap-y-3 { row-gap: 0.75rem; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.col-span-2 { grid-column: span 2 / span 2; } .col-span-full { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sm\:flex { display: flex; } .sm\:block { display: block; } .sm\:hidden { display: none; } .sm\:flex-row { flex-direction: row; } .sm\:items-center { align-items: center; } .sm\:justify-between { justify-content: space-between; } .sm\:text-left { text-align: left; } .sm\:col-span-2 { grid-column: span 2 / span 2; } .sm\:w-auto { width: auto; }
}
@media (min-width: 768px) { .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .md\:flex { display: flex; } .md\:block { display: block; } .md\:hidden { display: none; } }
@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lg\:grid-cols-3-1 { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); } .lg\:grid-cols-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .lg\:grid-cols-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .lg\:col-span-2 { grid-column: span 2 / span 2; } .lg\:col-auto { grid-column: auto; } .lg\:flex { display: flex; } .lg\:block { display: block; } .lg\:hidden { display: none; } .lg\:flex-row { flex-direction: row; }
}
@media (min-width: 1280px) { .xl\:col-auto { grid-column: auto; } .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .xl\:col-span-2 { grid-column: span 2 / span 2; } }
@media (max-width: 639.98px) { .max-sm\:hidden { display: none; } .max-sm\:flex-col { flex-direction: column; } .max-sm\:w-full { width: 100%; } .max-sm\:text-center { text-align: center; } }

.w-full { width: 100%; } .w-auto { width: auto; } .w-fit { width: fit-content; } .h-auto { height: auto; } .min-w-0 { min-width: 0; } .max-w-56 { max-width: 14rem; } .max-w-sm { max-width: 24rem; } .max-w-md { max-width: 28rem; } .max-w-lg { max-width: 32rem; } .max-w-xl { max-width: 36rem; } .max-w-2xl { max-width: 42rem; } .max-w-3xl { max-width: 48rem; } .mx-auto { margin-inline: auto; } .ml-auto { margin-left: auto; } .mr-auto { margin-right: auto; } .mt-auto { margin-top: auto; }
.size-3 { width: 0.75rem; height: 0.75rem; } .size-3\.5 { width: 0.875rem; height: 0.875rem; } .size-4 { width: 1rem; height: 1rem; } .size-5 { width: 1.25rem; height: 1.25rem; } .size-6 { width: 1.5rem; height: 1.5rem; } .size-7 { width: 1.75rem; height: 1.75rem; } .size-8 { width: 2rem; height: 2rem; } .size-9 { width: 2.25rem; height: 2.25rem; } .size-10 { width: 2.5rem; height: 2.5rem; } .size-12 { width: 3rem; height: 3rem; } .size-16 { width: 4rem; height: 4rem; }
.h-3 { height: 0.75rem; } .h-4 { height: 1rem; } .h-5 { height: 1.25rem; } .h-6 { height: 1.5rem; } .h-8 { height: 2rem; } .h-9 { height: 2.25rem; } .h-10 { height: 2.5rem; } .h-11 { height: 2.75rem; } .h-12 { height: 3rem; } .h-20 { height: 5rem; } .h-24 { height: 6rem; } .h-28 { height: 7rem; } .h-32 { height: 8rem; } .h-36 { height: 9rem; } .h-40 { height: 10rem; } .h-48 { height: 12rem; } .h-56 { height: 14rem; } .h-64 { height: 16rem; } .h-72 { height: 18rem; } .h-80 { height: 20rem; } .h-96 { height: 24rem; }
.w-4 { width: 1rem; } .w-8 { width: 2rem; } .w-10 { width: 2.5rem; } .w-12 { width: 3rem; } .w-16 { width: 4rem; } .w-20 { width: 5rem; } .w-24 { width: 6rem; } .w-28 { width: 7rem; } .w-32 { width: 8rem; } .w-36 { width: 9rem; } .w-40 { width: 10rem; } .w-48 { width: 12rem; } .w-56 { width: 14rem; } .w-64 { width: 16rem; } .w-1\/2 { width: 50%; } .w-1\/3 { width: 33.333%; } .w-2\/3 { width: 66.666%; } .w-3\/4 { width: 75%; } .min-w-10 { min-width: 2.5rem; } .min-w-40 { min-width: 10rem; } .min-w-52 { min-width: 13rem; } .min-w-56 { min-width: 14rem; } .min-h-24 { min-height: 6rem; }
.p-0 { padding: 0; } .p-1 { padding: 0.25rem; } .p-2 { padding: 0.5rem; } .p-3 { padding: 0.75rem; } .p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; } .p-8 { padding: 2rem; }
.px-0 { padding-inline: 0; } .px-1 { padding-inline: 0.25rem; } .px-1\.5 { padding-inline: 0.375rem; } .px-2 { padding-inline: 0.5rem; } .px-3 { padding-inline: 0.75rem; } .px-4 { padding-inline: 1rem; } .px-6 { padding-inline: 1.5rem; }
.py-0 { padding-block: 0; } .py-0\.5 { padding-block: 0.125rem; } .py-1 { padding-block: 0.25rem; } .py-2 { padding-block: 0.5rem; } .py-3 { padding-block: 0.75rem; } .py-4 { padding-block: 1rem; } .py-6 { padding-block: 1.5rem; } .py-8 { padding-block: 2rem; } .py-12 { padding-block: 3rem; }
.pt-0 { padding-top: 0; } .pt-1 { padding-top: 0.25rem; } .pt-2 { padding-top: 0.5rem; } .pt-3 { padding-top: 0.75rem; } .pt-4 { padding-top: 1rem; } .pt-6 { padding-top: 1.5rem; } .pb-0 { padding-bottom: 0; } .pb-2 { padding-bottom: 0.5rem; } .pb-3 { padding-bottom: 0.75rem; } .pb-4 { padding-bottom: 1rem; } .pb-6 { padding-bottom: 1.5rem; } .pl-1 { padding-left: 0.25rem; } .pl-2 { padding-left: 0.5rem; } .pl-4 { padding-left: 1rem; } .pr-1 { padding-right: 0.25rem; } .pr-4 { padding-right: 1rem; } .pr-6 { padding-right: 1.5rem; }
.m-0 { margin: 0; } .mt-0\.5 { margin-top: 0.125rem; } .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .ml-1 { margin-left: 0.25rem; } .ml-2 { margin-left: 0.5rem; } .mr-1 { margin-right: 0.25rem; } .mr-2 { margin-right: 0.5rem; } .-mr-2 { margin-right: -0.5rem; } .-mx-4 { margin-inline: -1rem; } .-mx-6 { margin-inline: -1.5rem; } .-mb-6 { margin-bottom: -1.5rem; }
.text-xs { font-size: 0.75rem; line-height: 1rem; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-base { font-size: 1rem; line-height: 1.5rem; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-2xl { font-size: 1.5rem; line-height: 2rem; } .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .text-\[10px\] { font-size: 10px; line-height: 1; }
.font-light { font-weight: 300; } .font-normal { font-weight: 400; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .font-mono { font-family: var(--font-mono); }
.text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-balance { text-wrap: balance; } .text-nowrap, .whitespace-nowrap { white-space: nowrap; } .uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; } .tracking-wider { letter-spacing: 0.05em; } .tracking-tight { letter-spacing: -0.025em; } .leading-none { line-height: 1; } .leading-tight { line-height: 1.25; } .leading-snug { line-height: 1.375; } .line-through { text-decoration: line-through; } .underline { text-decoration: underline; } .italic { font-style: italic; }
.tabular-nums { font-variant-numeric: tabular-nums; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .break-words { overflow-wrap: anywhere; }
.text-muted { color: var(--muted-foreground); } .text-foreground { color: var(--foreground); } .text-primary { color: var(--primary); } .text-destructive { color: var(--destructive); } .text-success { color: var(--success); } .text-warning { color: var(--warning); } .text-primary-foreground { color: var(--primary-foreground); }
.bg-muted { background: var(--muted); } .bg-muted-suave { background: color-mix(in oklab, var(--muted) 50%, transparent); } .bg-card { background: var(--card); } .bg-background { background: var(--background); } .bg-primary { background: var(--primary); } .bg-primary-soft { background: var(--primary-soft); } .bg-destructive-soft { background: var(--destructive-soft); } .bg-success-soft { background: var(--success-soft); } .bg-warning-soft { background: var(--warning-soft); } .bg-transparent { background: transparent; }
.border { border-width: 1px; } .border-0 { border-width: 0; } .border-t { border-top-width: 1px; } .border-b { border-bottom-width: 1px; } .border-l { border-left-width: 1px; } .border-r { border-right-width: 1px; } .border-dashed { border-style: dashed; } .border-destructive { border-color: var(--destructive); } .border-primary { border-color: var(--primary); } .border-success { border-color: var(--success); } .border-transparent { border-color: transparent; } .divide-y > * + * { border-top-width: 1px; }
.rounded { border-radius: 0.25rem; } .rounded-sm { border-radius: var(--radius-sm); } .rounded-md { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-xl { border-radius: var(--radius-xl); } .rounded-2xl { border-radius: 1rem; } .rounded-full { border-radius: 9999px; } .rounded-none { border-radius: 0; }
.shadow-none { box-shadow: none; } .shadow-xs { box-shadow: var(--shadow-xs); } .shadow-sm { box-shadow: var(--shadow-sm); } .shadow-md { box-shadow: var(--shadow-md); } .shadow-lg { box-shadow: var(--shadow-lg); } .ring-success { box-shadow: 0 0 0 2px color-mix(in oklab, var(--success) 50%, transparent); } .ring-destructive { box-shadow: 0 0 0 2px color-mix(in oklab, var(--destructive) 40%, transparent); }
.relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } .sticky { position: sticky; } .inset-0 { inset: 0; } .top-0 { top: 0; } .right-0 { right: 0; } .bottom-0 { bottom: 0; } .left-0 { left: 0; } .top-2 { top: 0.5rem; } .right-2 { right: 0.5rem; } .-top-0\.5 { top: -0.125rem; } .-right-0\.5 { right: -0.125rem; } .z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-50 { z-index: 50; }
.overflow-hidden { overflow: hidden; } .overflow-auto { overflow: auto; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } .max-h-60 { max-height: 15rem; } .max-h-80 { max-height: 20rem; } .max-h-96 { max-height: 24rem; }
.opacity-0 { opacity: 0; } .opacity-50 { opacity: 0.5; } .opacity-60 { opacity: 0.6; } .opacity-70 { opacity: 0.7; } .opacity-80 { opacity: 0.8; }
.cursor-pointer { cursor: pointer; } .cursor-default { cursor: default; } .cursor-not-allowed { cursor: not-allowed; } .select-none { user-select: none; } .pointer-events-none { pointer-events: none; }
.transition { transition: all 0.15s ease; } .transition-colors { transition: color 0.15s, background 0.15s, border-color 0.15s; } .transition-transform { transition: transform 0.2s; } .rotate-90 { transform: rotate(90deg); } .rotate-180 { transform: rotate(180deg); } .scale-0 { transform: scale(0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
.space-y-1 > * + * { margin-top: 0.25rem; } .space-y-2 > * + * { margin-top: 0.5rem; } .space-y-3 > * + * { margin-top: 0.75rem; } .space-y-4 > * + * { margin-top: 1rem; } .space-y-6 > * + * { margin-top: 1.5rem; }
.list-disc { list-style: disc; padding-left: 1.25rem; } .list-decimal { list-style: decimal; padding-left: 1.25rem; }

.borrador-aviso { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border: 1px dashed var(--border); border-radius: var(--radius-md); background: color-mix(in oklab, var(--muted) 50%, transparent); color: var(--muted-foreground); font-size: 0.8125rem; }
.borrador-aviso span { flex: 1; }
.borrador-aviso .icono { flex-shrink: 0; }