@import url("https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/css/select2.min.css");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&family=Space+Grotesk:wght@400;500;700&display=swap");
@import "select2.tailwind.css";
@import "pagy.tailwind.css";
@import "poppers.tailwind.css";
@import "dictado.tailwind.css";
@tailwind base;
@tailwind components;
@tailwind utilities;


/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

@layer components {
    .title {
        @apply text-center text-5xl font-bold mb-4 dark:text-gray-300;
    }
    .text-title {
        @apply text-center text-2xl lg:text-4xl font-bold mb-6 dark:text-gray-300;
    }
    .text-title-tiny {
        @apply text-center text-xl font-bold mb-6 dark:text-gray-400;
    }
    .text-tiny {
        @apply sm:text-xl font-semibold text-gray-800 dark:text-gray-400;
    }
    .title-modal {
        @apply text-center text-2xl lg:text-3xl font-bold text-gray-800 dark:text-gray-400;
    }
    .text-indigo {
        @apply text-lg font-bold text-indigo-700 mb-2;
    }
    .card-small {
        @apply p-6 rounded-xl shadow-2xl shadow-black dark:border dark:border-gray-500 max-w-screen-sm mx-auto;
    }
    .card-tiny {
        @apply border p-6 bg-white dark:bg-gray-950 rounded-lg transition-transform transform duration-700 hover:scale-105 hover:shadow-xl;
    }
    .card-tiny-space {
        @apply bg-white shadow-lg rounded-lg p-6 space-y-4 dark:bg-gray-950 dark:border dark:border-gray-400 dark:text-gray-400;
    }
    .card-line {
        @apply w-full md:w-3/5 mx-auto border border-gray-700 font-semibold text-xl rounded-lg py-1 text-center text-sm my-10 dark:text-gray-400;
    }
    /* Tarjeta de un registro clínico dentro del modal.
       Las nueve secciones la usan con el mismo marcado (una fila por dato),
       así que el estilo se define aquí una vez y todas quedan iguales:
       la etiqueta apagada a la izquierda y el dato con peso a la derecha. */
    .card-modal {
        @apply rounded-xl border border-slate-200 bg-white p-3 text-xs shadow-sm dark:border-slate-800 dark:bg-slate-900 sm:text-sm;
    }
    .card-modal th {
        @apply py-1.5 pr-3 text-left align-top text-xs font-medium text-slate-500 dark:text-slate-400;
    }
    .card-modal td {
        @apply py-1.5 text-right align-top text-sm font-semibold text-slate-800 dark:text-slate-200;
    }
    .card-modal .table-tr {
        @apply border-b border-slate-100 last:border-0 hover:bg-transparent dark:border-slate-800 dark:bg-transparent;
    }
    /* Bloques de texto largo (motivo de visita, diagnóstico, observaciones). */
    .card-modal .tr-div {
        @apply mt-2 border-0 border-t border-slate-100 pt-2 hover:bg-transparent dark:border-slate-800;
    }
    .card-modal .tr-div p:first-child {
        @apply text-xs font-medium text-slate-500 dark:text-slate-400;
    }
    .card-modal .tr-div p:last-child {
        @apply text-sm text-slate-800 dark:text-slate-200;
    }
    .container-title {
        @apply flex flex-wrap justify-center items-center gap-x-4 my-4;
    }
    .overlay {
        @apply fixed inset-0 z-30 flex items-center justify-center bg-black/30 backdrop-blur transition-opacity duration-300 ease-in-out;
    }
    .overlay-right {
        @apply fixed z-10 w-full h-full top-0 left-0 bg-black/30 backdrop-blur;
    }
    .modal-small {
        @apply p-6 relative w-full max-w-screen-xl mx-4 bg-gray-100 rounded-lg shadow transition-transform duration-300 ease-in-out
        h-dvh max-h-dvh overflow-y-auto lg:h-auto lg:max-h-full;
    }
    .modal-tiny {
        @apply p-6 relative w-full max-w-screen-sm mx-4 bg-gray-100 rounded-lg shadow transition-transform duration-300 ease-in-out
        h-dvh max-h-dvh overflow-y-auto lg:h-auto lg:max-h-full;
    }
    .modal-right {
        @apply fixed z-20 bottom-0 rounded-t-xl sm:rounded-none sm:top-0 right-0 w-full sm:w-2/3 lg:w-3/6 xl:w-2/6 h-[90dvh] sm:h-full bg-white dark:bg-gray-950 overflow-y-scroll shadow dark:border-l dark:border-gray-500 flex flex-col ease-in-out duration-300 p-5 transform translate-y-full sm:translate-x-full;
    }
    .label {
        @apply block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400;
    }
    .label-green {
        @apply text-center border border-gray-900 rounded-xl bg-green-400 dark:bg-green-900 dark:text-gray-200 font-bold text-sm px-5 py-2.5;
    }
    .label-red {
        @apply block w-full inline-flex items-center justify-center bg-red-100 dark:bg-red-700 text-red-600 dark:text-red-200 rounded-lg text-sm border border-gray-500 font-bold px-5 py-2;
    }
    .label-blue {
        @apply block w-full inline-flex items-center justify-center bg-blue-100 text-blue-600 rounded-lg text-sm border border-gray-500 font-bold px-5 py-2;
    }
    .label-yellow {
        @apply block w-full inline-flex items-center justify-center bg-yellow-100 text-yellow-600 rounded-lg text-sm border border-gray-500 font-bold px-5 py-2;
    }
    .label-gray {
        @apply block w-full inline-flex items-center justify-center bg-gray-200 text-gray-600 rounded-lg text-sm border border-gray-500 font-bold px-5 py-2;
    }
    .input {
        @apply bg-transparent border border-gray-700 text-gray-900 dark:text-gray-400 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5;
    }
    .input::file-selector-button {
        @apply bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-300 border-0 rounded-md cursor-pointer;
    }
    .input::file-selector-button:hover {
        @apply bg-gray-300 dark:bg-gray-600;
    }
    .input:disabled {
        @apply bg-gray-300 dark:bg-gray-600 text-gray-600 border-gray-600 cursor-not-allowed;
    }
    .button-primary {
        @apply inline-flex min-h-11 w-full cursor-pointer items-center justify-center rounded-xl bg-teal-700 px-5 py-2.5 text-center text-sm font-bold text-white shadow-sm transition hover:bg-teal-800 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-teal-400 sm:w-auto;
    }
    .button-secondary {
        @apply cursor-pointer text-gray-950 dark:text-gray-400 hover:text-gray-50 bg-gray-50 dark:bg-gray-950 hover:bg-gray-900 focus:ring-4 focus:outline-none focus:ring-stone-300 font-medium border border-gray-900 dark:border-gray-400 rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center;
    }
    .button-secondary-tiny {
        @apply block w-full sm:w-auto inline-flex items-center justify-center text-gray-900 dark:text-gray-400 hover:text-white border border-gray-700 dark:border-gray-400 hover:bg-gray-800 dark:hover:bg-gray-500 focus:ring-2 focus:outline-none focus:ring-gray-500 font-medium rounded-lg text-xs px-5 py-1 text-center;
    }
    .button-dark {
        @apply block inline-flex items-center text-gray-900 hover:text-white border border-gray-800 bg-white hover:bg-gray-900 focus:ring-4 focus:outline-none focus:ring-stone-300 font-medium rounded-lg text-xs px-5 py-1 text-center;
    }
    .button-red-tiny {
        @apply block w-full sm:w-auto inline-flex justify-center items-center text-red-900 dark:text-red-700 hover:text-white border border-red-800 dark:border-red-600 bg-white dark:bg-transparent hover:bg-red-700 focus:ring-2 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-xs px-5 py-1 text-center;
    }
    .button-orange {
        @apply block w-full sm:w-auto inline-flex items-center justify-center text-orange-800 hover:text-gray-900 border border-orange-800 hover:bg-orange-400 focus:ring-2 focus:outline-none focus:ring-orange-300 font-medium rounded-lg text-xs px-5 py-1 text-center;
    }
    .button-green-large {
        @apply text-white bg-green-600 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center;
    }
    .button-green {
        @apply block w-full sm:w-auto inline-flex items-center justify-center bg-transparent text-green-900 dark:text-green-700 hover:bg-green-600 border border-green-700 hover:text-white font-medium rounded-lg text-xs px-5 py-1;
    }
    .button-alert {
        @apply block w-full sm:w-auto bg-red-500 hover:bg-white dark:hover:bg-red-800 border-2 hover:border-red-600 hover:text-red-500 dark:hover:text-gray-100 text-white font-semibold py-2 px-4 rounded-lg shadow;
    }
    .button-select-hour {
        @apply block w-full inline-flex items-center justify-center text-gray-900 hover:text-white border border-gray-700 hover:bg-gray-800 font-medium rounded-lg text-sm px-5 py-2;
    }
    .button-tiny-blue {
        @apply block w-full sm:w-auto inline-flex items-center justify-center bg-transparent hover:bg-blue-700 border border-blue-800 dark:border-blue-600 hover:text-white text-blue-900 dark:text-blue-600 text-xs font-medium py-1 px-2 rounded-lg;
    }
    .button-menu-link {
        @apply flex items-center rounded-xl px-3 py-2.5 text-sm font-semibold text-gray-700 transition-colors hover:bg-gray-200 hover:text-gray-950 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white;
    }
    .button-tiny {
        @apply flex text-sm px-4 py-1 font-semibold w-full border border-gray-500 rounded hover:bg-gray-950 hover:text-gray-50;
    }
    .button-close-right {
        @apply absolute top-3 right-3 text-stone-400 bg-transparent hover:bg-stone-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 inline-flex justify-center items-center;
    }
    .button-close-left {
        @apply absolute top-3 left-3 text-stone-400 bg-transparent hover:bg-stone-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 inline-flex justify-center items-center;
    }
    .table {
        @apply min-w-full w-full rounded-xl shadow-md dark:border;
    }
    .table-tiny {
        @apply min-w-full w-full overflow-x-auto;
    }
    .tr-body {
        @apply bg-slate-950 text-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:border-b;
    }
    .table-tr {
        @apply border-b border-gray-800 hover:bg-gray-100 dark:hover:bg-stone-900 dark:bg-gray-950 dark:text-gray-400;
    }
    .table-tr-large {
        @apply border-b border-gray-300 dark:bg-gray-950 hover:bg-white dark:hover:bg-stone-900 text-sm dark:text-gray-400;
    }
    .line {
        @apply divide-x divide-black border-b dark:border-gray-600 mx-2;
    }
    .checkbox {
        @apply h-5 w-5 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500 dark:bg-gray-950;
    }
    .flex-tr-div {
        @apply flex justify-between border-b border-gray-800 hover:bg-gray-100 dark:hover:bg-stone-900;
    }
    .tr-div {
        @apply border-b border-gray-800 hover:bg-gray-100 dark:hover:bg-stone-900;
    }

    /* Único diseño de búsqueda: una superficie amplia, icono fijo y texto
       legible tanto en claro como en oscuro. */
    .app-search {
        @apply relative flex h-[42px] min-w-0 w-full items-center rounded-xl border border-slate-300 bg-white shadow-sm transition focus-within:border-teal-600 focus-within:ring-2 focus-within:ring-teal-500/20 dark:border-slate-700 dark:bg-slate-950;
    }
    .app-search-icon {
        @apply pointer-events-none absolute left-3.5 h-5 w-5 shrink-0 text-slate-400 dark:text-slate-500;
    }
    .app-search-input {
        @apply h-full min-w-0 w-full border-0 bg-transparent py-2.5 pl-11 pr-3 text-sm font-medium text-slate-900 outline-none placeholder:text-slate-400 focus:ring-0 sm:text-base dark:text-slate-100 dark:placeholder:text-slate-500;
    }
    .container-title {
        @apply flex flex-wrap justify-center items-center gap-2;
    }

    .card-archive {
        @apply flex items-center justify-between gap-4 p-3 bg-gray-100 border border-gray-700 dark:border-gray-500 dark:bg-gray-800 rounded-lg;
    }

    .available {
        @apply border rounded w-full list-none w-full text-xs sm:text-sm text-center;
    }

    .disabled {
        @apply bg-gray-300 dark:bg-gray-700 dark:text-gray-400 border-gray-600 cursor-not-allowed;
    }


    .stat-card {
        @apply rounded-lg p-4 border-2;
    }

    .stat-card-green {
        @apply stat-card bg-green-100 dark:bg-green-900/50 border-green-500/30 dark:border-green-400/50;
    }

    .stat-card-orange {
        @apply stat-card bg-orange-100 dark:bg-orange-900/50 border-orange-500/30 dark:border-orange-400/50;
    }

    .stat-card-blue {
        @apply stat-card bg-blue-100 dark:bg-blue-900/50 border-blue-500/30 dark:border-blue-400/50;
    }

    .stat-number {
        @apply text-3xl font-bold;
    }

    .stat-number-green {
        @apply stat-number text-green-700 dark:text-green-300;
    }

    .stat-number-orange {
        @apply stat-number text-orange-700 dark:text-orange-300;
    }

    .stat-number-blue {
        @apply stat-number text-blue-700 dark:text-blue-300;
    }

    .stat-label {
        @apply text-xs mt-1 text-gray-700 dark:text-gray-300;
    }

    .section-container {
        @apply mt-4 p-4 rounded-xl;
    }

    .section-green {
        @apply section-container bg-green-50 dark:bg-green-950/40 border border-green-200 dark:border-green-700/50;
    }

    .section-orange {
        @apply section-container bg-orange-50 dark:bg-orange-950/40 border border-orange-200 dark:border-orange-700/50;
    }

    .section-red {
        @apply section-container bg-red-50 dark:bg-red-950/40 border border-red-200 dark:border-red-700/50;
    }

    .section-header {
        @apply flex items-center gap-2 font-semibold mb-4 text-gray-900 dark:text-gray-100;
    }

    .section-badge {
        @apply ml-auto px-2 py-1 text-xs rounded-full font-bold;
    }

    .section-badge-green {
        @apply section-badge bg-green-600 dark:bg-green-500 text-white;
    }

    .section-badge-orange {
        @apply section-badge bg-orange-600 dark:bg-orange-500 text-white;
    }

    .section-badge-red {
        @apply section-badge bg-red-600 dark:bg-red-500 text-white;
    }

    .accordion-item {
        @apply mb-3 rounded-lg border overflow-hidden transition-all border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800;
    }

    .accordion-summary {
        @apply cursor-pointer p-3 transition-colors flex items-center justify-between hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-900 dark:text-gray-100;
    }

    .accordion-icon {
        @apply w-4 h-4 transition-transform;
    }

    .accordion-badge {
        @apply px-2 py-1 text-xs rounded-full font-medium;
    }

    .accordion-badge-orange {
        @apply accordion-badge bg-orange-200 dark:bg-orange-800 text-orange-900 dark:text-orange-200;
    }

    .accordion-badge-red {
        @apply accordion-badge bg-red-200 dark:bg-red-800 text-red-900 dark:text-red-200;
    }

    .accordion-content {
        @apply p-3 pt-0 mt-3 border-t border-gray-300 dark:border-gray-600;
    }

    .empty-state {
        @apply text-center py-8;
    }

    .empty-icon {
        @apply w-16 h-16 mx-auto mb-4;
    }

    .empty-text {
        @apply text-sm font-medium text-gray-700 dark:text-gray-300;
    }

    .empty-subtext {
        @apply text-xs mt-1 text-gray-600 dark:text-gray-400;
    }

    .alert-alta {
        @apply mt-4 p-4 rounded-lg border-l-4 bg-red-50 dark:bg-red-950/60 border-red-500 dark:border-red-400 text-red-800 dark:text-red-200;
    }

    .section-description {
        @apply text-xs mb-3 text-gray-700 dark:text-gray-300;
    }
}

/* ---------------------------------------------------------------------------
   Sistema de navegación y encabezados
   Piezas compartidas por todas las pantallas del área privada.
   --------------------------------------------------------------------------- */
@layer components {
    /* --- Navegación lateral --- */
    .nav-section-title {
        @apply px-3 pb-1 pt-4 text-[10px] font-black uppercase tracking-[0.14em] text-slate-400 dark:text-slate-500;
    }
    .nav-link {
        @apply flex items-center gap-3 rounded-xl px-3 py-2 text-sm font-semibold text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-white;
    }
    .nav-link-active {
        @apply flex items-center gap-3 rounded-xl bg-teal-600 px-3 py-2 text-sm font-semibold text-white shadow-sm shadow-teal-900/30 dark:bg-teal-700;
    }
    .nav-hint {
        @apply mt-0.5 block text-[11px] font-normal leading-tight text-slate-400 dark:text-slate-500;
    }

    /* --- Encabezado de pantalla --- */
    .page-header {
        @apply mb-6 flex flex-col gap-3 border-b border-slate-200 pb-4 dark:border-slate-800 sm:flex-row sm:items-end sm:justify-between;
    }
    .page-heading {
        @apply text-2xl font-black tracking-tight text-slate-900 dark:text-slate-100 sm:text-3xl;
    }
    .page-sub {
        @apply mt-1 text-sm text-slate-500 dark:text-slate-400;
    }
    .page-actions {
        @apply flex flex-wrap items-center gap-2;
    }

    /* --- Barra de filtros ---
       En móvil se reparte en dos columnas para no empujar el contenido fuera
       de la pantalla; desde sm vuelve a ser una fila que se acomoda sola. */
    .filter-bar {
        @apply mb-5 grid grid-cols-2 gap-3 rounded-2xl border border-slate-200 bg-white p-3 dark:border-slate-800 dark:bg-slate-900/60 sm:flex sm:flex-row sm:flex-wrap sm:items-end;
    }
    .filter-field {
        @apply flex min-w-0 flex-col gap-1 sm:min-w-[10rem] sm:flex-1;
    }
    .filter-field-wide {
        @apply col-span-2 sm:col-span-1;
    }
    .filter-actions {
        @apply col-span-2 flex gap-2 sm:col-span-1;
    }
    /* Dentro de una barra de filtros los campos ocupan su columna, no un
       ancho fijo: si no, el buscador se monta encima del campo siguiente. */
    .filter-field .app-search,
    .filter-field .input {
        @apply w-full sm:w-full;
    }
    .filter-label {
        @apply text-[11px] font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400;
    }

    /* --- Chips de estado (filtros mutuamente excluyentes) --- */
    .chip {
        @apply inline-flex items-center gap-1.5 rounded-full border border-slate-300 bg-white px-3 py-1.5 text-xs font-semibold text-slate-600 transition-colors hover:border-slate-500 hover:text-slate-900 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 dark:hover:text-white;
    }
    .chip-active {
        @apply inline-flex items-center gap-1.5 rounded-full border border-slate-900 bg-slate-900 px-3 py-1.5 text-xs font-bold text-white dark:border-teal-500 dark:bg-teal-600;
    }
    .chip-count {
        @apply rounded-full bg-black/10 px-1.5 text-[10px] font-black dark:bg-white/20;
    }

    /* --- Tarjetas de indicador del escritorio --- */
    .tile {
        @apply flex flex-col justify-between gap-3 rounded-2xl border border-slate-200 bg-white p-4 transition hover:-translate-y-0.5 hover:border-teal-500 hover:shadow-lg dark:border-slate-800 dark:bg-slate-900;
    }
    .tile-label {
        @apply flex items-center gap-2 text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400;
    }
    .tile-number {
        @apply text-4xl font-black leading-none text-slate-900 dark:text-slate-100;
    }
    .tile-hint {
        @apply text-xs text-slate-500 dark:text-slate-400;
    }

    /* --- Panel plegable de la ficha de mascota --- */
    .panel {
        @apply overflow-hidden rounded-xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900;
    }
    .panel-summary {
        @apply flex cursor-pointer list-none items-center gap-2 px-3 py-2.5 text-sm font-bold text-slate-700 transition-colors hover:bg-slate-50 dark:text-slate-200 dark:hover:bg-slate-800;
    }
    /* Se oculta el triangulito nativo y se usa un chevron propio que gira. */
    .panel-summary::-webkit-details-marker {
        display: none;
    }
    .panel-summary::after {
        content: "";
        @apply ml-auto h-2 w-2 shrink-0 border-b-2 border-r-2 border-slate-400 transition-transform;
        transform: rotate(45deg);
        margin-top: -0.25rem;
    }
    details[open] > .panel-summary::after {
        transform: rotate(225deg);
        margin-top: 0.25rem;
    }
    .panel-body {
        @apply grid grid-cols-2 gap-1.5 border-t border-slate-200 p-2 dark:border-slate-800;
    }
    .panel-action {
        @apply flex items-center justify-between gap-2 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-xs font-semibold text-slate-700 transition-colors hover:border-teal-500 hover:bg-teal-50 hover:text-teal-900 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:border-teal-600 dark:hover:bg-slate-700 dark:hover:text-white;
    }

    /* --- Ficha clínica dentro del modal: rail lateral + contenido --- */
    /* min-h fija la altura del modal: al saltar de una sección a otra el rail
       no se mueve bajo el cursor y no se pierde el sitio donde ibas a pulsar. */
    /* pt-8 en móvil deja el rail por debajo de la X de cerrar del modal.
       En escritorio la altura es fija y el contenido desplaza por dentro: así
       el modal no cambia de tamaño al saltar de sección y el rail no se mueve
       bajo el cursor mientras lo estás usando. */
    .ficha-modal {
        @apply flex min-h-[60vh] flex-col gap-4 pt-8 lg:h-[70vh] lg:flex-row lg:gap-5 lg:pt-0;
    }
    .ficha-modal-contenido {
        @apply min-w-0 flex-1 lg:overflow-y-auto lg:pr-1;
    }
    /* En móvil el rail es una tira horizontal que se desliza: ocupa una línea
       en vez de trece. Desde lg vuelve a ser la columna lateral. */
    .ficha-rail {
        @apply -mx-1 flex shrink-0 flex-row gap-1.5 overflow-x-auto px-1 pb-2
        lg:mx-0 lg:max-h-[75vh] lg:w-56 lg:flex-col lg:gap-0.5 lg:overflow-x-visible lg:overflow-y-auto
        lg:rounded-xl lg:border lg:border-slate-200 lg:bg-slate-50 lg:px-2 lg:pb-2 lg:pt-2
        lg:dark:border-slate-800 lg:dark:bg-slate-900;
    }
    .ficha-rail-pet {
        @apply hidden lg:mb-1 lg:flex lg:items-center lg:gap-2 lg:rounded-lg lg:bg-white lg:px-2 lg:py-2 lg:dark:bg-slate-800;
    }
    .ficha-rail-estado {
        @apply hidden lg:block lg:px-1 lg:pb-1;
    }
    .ficha-rail-titulo {
        @apply hidden lg:block lg:px-2 lg:pb-1 lg:pt-3 lg:text-[10px] lg:font-black lg:uppercase lg:tracking-[0.12em] lg:text-slate-400 lg:dark:text-slate-500;
    }
    .ficha-rail-link {
        @apply flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full border border-slate-300 bg-white px-3 py-1.5 text-xs font-semibold text-slate-600 transition-colors hover:text-slate-900
        dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 dark:hover:text-white
        lg:w-full lg:justify-between lg:rounded-lg lg:border-0 lg:bg-transparent lg:px-2.5 lg:hover:bg-white lg:dark:bg-transparent lg:dark:hover:bg-slate-800;
    }
    .ficha-rail-link-activo {
        @apply flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full border border-teal-600 bg-teal-600 px-3 py-1.5 text-xs font-bold text-white dark:border-teal-700 dark:bg-teal-700
        lg:w-full lg:justify-between lg:rounded-lg lg:px-2.5;
    }
    /* pr-12 deja libre la esquina donde el modal dibuja su botón de cerrar. */
    .seccion-header {
        @apply mb-4 flex flex-col gap-2 border-b border-slate-200 pb-3 pr-12 dark:border-slate-800 sm:flex-row sm:items-center sm:justify-between;
    }
    .seccion-titulo {
        @apply text-xl font-black text-slate-900 dark:text-slate-100;
    }

    /* --- Dosis de un tratamiento --- */
    .dosis-fila {
        @apply rounded-xl border border-slate-200 bg-white p-2.5 dark:border-slate-800 dark:bg-slate-900;
    }
    /* Una hora que ya pasó sin aplicar se ve distinta desde lejos. */
    .dosis-fila-atrasada {
        @apply border-red-300 bg-red-50 dark:border-red-800 dark:bg-red-950/40;
    }
    .dosis-numero {
        @apply flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-slate-200 text-[11px] font-black text-slate-600 dark:bg-slate-700 dark:text-slate-300;
    }
    .dosis-detalle {
        @apply mt-1.5 border-t border-slate-100 pt-1.5 text-xs text-slate-500 dark:border-slate-800 dark:text-slate-400;
    }

    /* --- Formularios: misma estructura en toda la aplicación --- */
    .formulario {
        @apply w-full;
    }
    /* pr-12 deja libre la esquina del botón de cerrar cuando va en ventana. */
    .formulario-cab {
        @apply mb-4 border-b border-slate-200 pb-3 pr-12 dark:border-slate-800;
    }
    .formulario-titulo {
        @apply text-xl font-black text-slate-900 dark:text-slate-100;
    }
    .formulario-sub {
        @apply mt-0.5 text-xs text-slate-500 dark:text-slate-400;
    }
    .formulario-errores {
        @apply mb-4 rounded-xl border-l-4 border-red-500 bg-red-50 p-3 text-sm text-red-800 dark:bg-red-950/50 dark:text-red-200;
    }
    /* Como base no mostramos más de dos columnas. Tres o cuatro columnas
       automáticas dejaban huecos al final de la fila y hacían que campos de
       texto clínico quedaran demasiado angostos. Los pocos grupos que sí se
       entienden mejor en tres columnas (por ejemplo, una pauta) lo declaran en
       su propio parcial. */
    .formulario-campos {
        @apply grid grid-cols-1 gap-x-4 gap-y-3 sm:grid-cols-2;
    }
    /* El alta de mascota contiene muchos datos cortos y sí gana legibilidad
       con una rejilla más densa. Esta excepción conserva los formularios
       clínicos en una o dos columnas. */
    .formulario-campos-mascota {
        @apply xl:grid-cols-4;
    }
    .campo {
        @apply flex min-w-0 flex-col gap-1;
    }
    /* Ocupa la fila entera, sean las columnas que sean. */
    .campo-ancho {
        grid-column: 1 / -1;
    }
    .formulario-acciones {
        @apply sticky bottom-0 z-20 -mx-2 mt-5 flex flex-wrap items-center justify-end gap-2 rounded-xl border border-slate-200 bg-white/95 p-3 shadow-lg backdrop-blur dark:border-slate-700 dark:bg-slate-900/95;
    }
    /* La acción que guarda no se pierde al desplazarse por un formulario
       largo. En móvil ocupa toda la barra; en escritorio conserva un ancho
       reconocible y queda siempre en la misma esquina. */
    .formulario-acciones input[type="submit"],
    .formulario-acciones button[type="submit"] {
        @apply min-h-11 flex-1 sm:min-w-48 sm:flex-none;
    }
    /* Línea de producto dentro de un tratamiento. En teléfono el producto
       ocupa la primera fila; desde 640 px quedan producto, dosis y quitar
       perfectamente alineados, sin cortar la etiqueta de la dosis. */
    /* Dos filas: el producto arriba con todo el ancho y, debajo, los campos
       cortos. Antes iba todo en una fila y el nombre del producto quedaba
       estrangulado en cuanto se le añadió el precio. */
    .linea-producto {
        @apply border-b border-dashed border-slate-200 py-2 first:pt-0 last:border-0 dark:border-slate-700;
    }
    .linea-producto-selector {
        @apply min-w-0;
    }
    /* `items-end` alinea los campos por su base, que es donde está el botón de
       quitar: si se alinearan arriba, quedaría flotando sobre las etiquetas. */
    .linea-producto-detalle {
        @apply mt-2 grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto] items-end gap-2;
    }
    .linea-producto-dosis {
        @apply min-w-0;
    }
    .linea-producto-eliminar {
        @apply self-end;
    }
    .linea-producto-quitar {
        @apply inline-flex h-[2.375rem] w-9 items-center justify-center rounded-lg border border-slate-300 text-slate-500 transition hover:border-red-400 hover:bg-red-50 hover:text-red-600 dark:border-slate-600 dark:text-slate-400 dark:hover:bg-red-950;
    }
    /* Tarjeta repetible de una vacuna, receta, examen o servicio. */
    .linea-clinica {
        @apply rounded-xl border border-slate-300 bg-white p-3 dark:border-slate-600 dark:bg-slate-900;
    }
    .linea-clinica + .linea-clinica {
        @apply mt-3;
    }
    .linea-clinica-campos {
        @apply mt-3 grid grid-cols-1 gap-3 sm:grid-cols-3;
    }
    /* El producto y su precio, en la misma fila. El precio es un campo corto y
       colgarlo debajo estiraba el formulario casi una pantalla por cada fármaco
       de la receta. */
    .linea-clinica-cabecera {
        @apply grid grid-cols-1 gap-3 sm:grid-cols-[minmax(0,1fr)_9rem];
    }

    /* Funciones de una persona en la clínica. Son acumulables, así que van como
       casillas, pero cada una necesita explicar qué habilita. */
    .funcion-usuario {
        @apply block cursor-pointer;
    }
    .funcion-usuario-marco {
        @apply flex h-full flex-col gap-1 rounded-xl border-2 border-slate-200 p-3 transition
        hover:border-teal-300 peer-checked:border-teal-600 peer-checked:bg-teal-50
        peer-focus-visible:ring-2 peer-focus-visible:ring-teal-500 peer-focus-visible:ring-offset-2
        dark:border-slate-700 dark:hover:border-teal-700 dark:peer-checked:border-teal-500 dark:peer-checked:bg-teal-950/40;
    }
    .funcion-usuario-titulo {
        @apply text-sm font-black text-slate-900 dark:text-slate-100;
    }
    .funcion-usuario-detalle {
        @apply text-xs leading-5 text-slate-500 dark:text-slate-400;
    }

    /* Grupo de campos relacionados dentro de un formulario largo. */
    .formulario-grupo {
        @apply col-span-full mt-2 border-t border-slate-100 pt-3 text-xs font-black uppercase tracking-[0.12em] text-slate-400 first:mt-0 first:border-0 first:pt-0 dark:border-slate-800 dark:text-slate-500;
    }

    /* --- Tarjeta de registro clínico (pesos, anamnesis, vacunas…) --- */
    .registro {
        @apply rounded-xl border border-slate-200 bg-white p-3 dark:border-slate-800 dark:bg-slate-900;
    }
    .registro-cab {
        @apply mb-2 flex items-start justify-between gap-3 border-b border-slate-100 pb-2 dark:border-slate-800;
    }
    .registro-fecha {
        @apply text-sm font-black text-slate-900 dark:text-slate-100;
    }
    .registro-quien {
        @apply truncate text-xs text-slate-500 dark:text-slate-400;
    }
    .registro-datos {
        @apply grid gap-x-5 gap-y-0 sm:grid-cols-2;
    }
    .registro-dato {
        @apply flex items-baseline justify-between gap-3 border-b border-dashed border-slate-100 py-1 last:border-0 dark:border-slate-800;
    }
    .registro-clave {
        @apply shrink-0 text-xs text-slate-500 dark:text-slate-400;
    }
    .registro-valor {
        @apply text-right text-sm font-semibold text-slate-800 dark:text-slate-200;
    }
    /* Los textos largos ocupan el ancho completo de la rejilla. */
    .registro-bloque {
        @apply mt-2 border-t border-slate-100 pt-2 dark:border-slate-800 sm:col-span-2;
    }
    .registro-texto {
        @apply whitespace-pre-line text-sm text-slate-800 dark:text-slate-200;
    }
    /* Cada línea de producto de una receta, vacuna o examen. */
    .registro-item {
        @apply mt-2 rounded-lg border border-slate-200 bg-slate-50 p-2 dark:border-slate-700 dark:bg-slate-800 sm:col-span-2;
    }
    .registro-item-titulo {
        @apply mb-1 text-sm font-bold text-slate-900 dark:text-slate-100;
    }
    .registro-acciones {
        @apply mt-3 flex flex-wrap items-center gap-2 border-t border-slate-100 pt-2 dark:border-slate-800;
    }

    /* --- Reserva rápida de cita --- */
    .paso-titulo {
        @apply mb-2 flex items-center gap-2 text-sm font-black text-slate-900 dark:text-slate-100;
    }
    .paso-numero {
        @apply flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-teal-600 text-xs font-black text-white;
    }
    .hora-libre {
        @apply block cursor-pointer;
    }
    .hora-libre-texto {
        @apply block rounded-lg border border-slate-300 bg-white px-2 py-2 text-center text-sm font-semibold text-slate-700 transition-colors hover:border-teal-500 hover:bg-teal-50 peer-checked:border-teal-600 peer-checked:bg-teal-600 peer-checked:text-white peer-focus:ring-2 peer-focus:ring-teal-400 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700;
    }
    .hora-ocupada {
        @apply block cursor-not-allowed rounded-lg border border-dashed border-slate-200 px-2 py-2 text-center text-sm text-slate-300 line-through dark:border-slate-800 dark:text-slate-600;
    }

    /* --- Calendario mensual ---
       El mes debe leerse de un vistazo: celdas compactas, pasado visible y
       citas coloreadas por estado. Al elegir un día conserva el panel lateral
       que ya resuelve horarios, reserva y detalle. */
    .calendar-toolbar {
        @apply mb-3 flex flex-col gap-3 rounded-2xl border border-slate-200 bg-white p-3 shadow-sm dark:border-slate-800 dark:bg-slate-900 sm:flex-row sm:items-center sm:justify-between sm:p-4;
    }
    .calendar-eyebrow {
        @apply text-[10px] font-black uppercase tracking-[0.16em] text-teal-700 dark:text-teal-300;
    }
    .calendar-month-title {
        @apply truncate text-2xl font-black capitalize text-slate-950 dark:text-white sm:text-3xl;
    }
    .calendar-month-total {
        @apply rounded-full bg-slate-100 px-2.5 py-1 text-xs font-bold text-slate-600 dark:bg-slate-800 dark:text-slate-300;
    }
    .calendar-toolbar-help {
        @apply mt-0.5 text-xs text-slate-500 dark:text-slate-400;
    }
    .calendar-month-nav {
        @apply flex shrink-0 items-center gap-1.5 self-start sm:self-auto;
    }
    .calendar-nav-arrow {
        @apply inline-flex h-9 w-9 items-center justify-center rounded-xl border border-slate-300 bg-white text-lg font-black text-slate-700 transition hover:border-teal-500 hover:bg-teal-50 hover:text-teal-800 focus:outline-none focus:ring-2 focus:ring-teal-400 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-200 dark:hover:border-teal-600 dark:hover:bg-teal-950;
    }
    .calendar-today-button {
        @apply inline-flex h-9 items-center justify-center rounded-xl bg-slate-900 px-4 text-xs font-black text-white transition hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-teal-400 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-teal-300;
    }
    .calendar-stat {
        @apply flex items-center justify-between gap-2 rounded-xl border px-3 py-2 sm:justify-start sm:px-4;
    }
    .calendar-stat-number {
        @apply text-xl font-black sm:text-2xl;
    }
    .calendar-stat-label {
        @apply text-[10px] font-black uppercase tracking-wide sm:text-xs;
    }
    .calendar-stat-past {
        @apply border-slate-200 bg-slate-50 text-slate-500 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-400;
    }
    .calendar-stat-today {
        @apply border-teal-200 bg-teal-50 text-teal-800 dark:border-teal-800 dark:bg-teal-950/60 dark:text-teal-200;
    }
    .calendar-stat-future {
        @apply border-sky-200 bg-sky-50 text-sky-800 dark:border-sky-800 dark:bg-sky-950/60 dark:text-sky-200;
    }
    .calendar-legend {
        @apply flex flex-wrap items-center gap-x-3 gap-y-1 rounded-xl border border-slate-200 bg-white px-3 py-2 text-[11px] text-slate-500 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-400;
    }
    .calendar-legend > span {
        @apply inline-flex items-center gap-1.5;
    }
    .calendar-legend > .calendar-legend-help {
        @apply ml-auto hidden text-slate-400 lg:inline-flex;
    }
    .calendar-legend-dot {
        @apply inline-block h-2 w-2 rounded-full;
    }
    .calendar-workspace {
        @apply flex w-full flex-col overflow-hidden rounded-2xl border border-slate-200 bg-slate-50 shadow-sm dark:border-slate-800 dark:bg-slate-950 lg:flex-row;
    }
    .calendar-compact-toolbar {
        @apply flex items-center justify-between gap-2 border-b border-slate-200 bg-white px-2 py-2 dark:border-slate-800 dark:bg-slate-900;
    }
    .calendar-grid-frame {
        @apply overflow-hidden rounded-xl border border-slate-200 bg-slate-200 dark:border-slate-700 dark:bg-slate-800;
    }
    .calendar-grid {
        @apply grid grid-cols-7 gap-px;
    }
    .calendar-weekday {
        @apply bg-slate-900 px-1 py-2 text-center text-[9px] font-black uppercase tracking-wide text-white dark:bg-black sm:text-xs;
    }
    .calendar-day {
        @apply relative flex min-h-[4.5rem] min-w-0 flex-col overflow-hidden bg-white p-1 text-slate-800 transition dark:bg-slate-900 dark:text-slate-200 sm:min-h-[7rem] sm:p-1.5;
    }
    .calendar-day-compact {
        @apply min-h-[3.5rem] p-1 sm:min-h-[4.25rem];
    }
    .calendar-day-clickable {
        @apply cursor-pointer hover:z-10 hover:bg-teal-50 focus:z-10 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 dark:hover:bg-teal-950/40;
    }
    .calendar-day-outside {
        @apply bg-slate-50 text-slate-300 dark:bg-slate-950 dark:text-slate-700;
    }
    .calendar-day-past {
        @apply bg-slate-50/80 text-slate-500 opacity-75 dark:bg-slate-950/70 dark:text-slate-500;
    }
    .calendar-day-today {
        @apply bg-teal-50 text-teal-950 opacity-100 dark:bg-teal-950/50 dark:text-teal-100;
    }
    .calendar-day-selected {
        @apply z-10 bg-teal-50 opacity-100 ring-2 ring-inset ring-teal-500 dark:bg-teal-950/70;
    }
    .calendar-day-closed {
        @apply cursor-default bg-red-50/60 text-slate-400 dark:bg-red-950/20 dark:text-slate-600;
    }
    .calendar-day-heading {
        @apply flex items-start justify-between gap-1;
    }
    .calendar-day-number {
        @apply inline-flex h-6 min-w-6 items-center justify-center rounded-lg px-1 text-xs font-black sm:text-sm;
    }
    .calendar-day-today .calendar-day-number {
        @apply rounded-full bg-teal-700 text-white dark:bg-teal-300 dark:text-teal-950;
    }
    .calendar-day-selected .calendar-day-number {
        @apply rounded-full bg-slate-950 text-white ring-2 ring-teal-400 dark:bg-white dark:text-slate-950;
    }
    .calendar-closed-label {
        @apply inline-flex items-center gap-1 text-[8px] font-bold uppercase text-red-500 dark:text-red-400 lg:text-[9px];
    }
    .calendar-closed-label i {
        @apply h-1.5 w-1.5 rounded-full bg-red-500;
    }
    .calendar-day-count {
        @apply inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-slate-800 px-1 text-[9px] font-black text-white dark:bg-slate-200 dark:text-slate-900;
    }
    .calendar-events {
        @apply mt-1 hidden min-w-0 flex-1 flex-col gap-0.5 sm:flex;
    }
    .calendar-event {
        @apply flex min-w-0 items-center gap-1 rounded-md border px-1.5 py-0.5 text-[9px] leading-4 lg:text-[10px];
    }
    .calendar-event i {
        @apply h-1.5 w-1.5 shrink-0 rounded-full bg-current;
    }
    .calendar-event-atendida {
        @apply border-sky-200 bg-sky-50 text-sky-800 dark:border-sky-800 dark:bg-sky-950/70 dark:text-sky-200;
    }
    .calendar-event-confirmada {
        @apply border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-800 dark:bg-emerald-950/70 dark:text-emerald-200;
    }
    .calendar-event-pendiente {
        @apply border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-800 dark:bg-amber-950/70 dark:text-amber-200;
    }
    .calendar-event-no-asistio {
        @apply border-red-200 bg-red-50 text-red-800 dark:border-red-800 dark:bg-red-950/70 dark:text-red-200;
    }
    .calendar-event-time {
        @apply shrink-0 font-black;
    }
    .calendar-event-pet {
        @apply truncate font-semibold;
    }
    .calendar-more-events {
        @apply px-1 text-[9px] font-black text-slate-500 dark:text-slate-400;
    }
    .calendar-compact-count {
        @apply absolute bottom-1 right-1 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-teal-700 px-1 text-[9px] font-black text-white dark:bg-teal-300 dark:text-teal-950;
    }

    /* --- Agenda clínica Mes / Semana / Día ---
       Traducción del prototipo operativo: controles compactos, información
       densa pero legible y una línea de tiempo que conserva el modal real de
       reservas del sistema. */
    /* Los mismos tokens los usa el tablero de la bandeja de citas, que no
       vive dentro del calendario: sin esta segunda clase las variables no
       existían ahí y las tarjetas salían sin bordes ni fondo. */
    .clinic-calendar,
    .clinic-tokens {
        --clinic-bg: #edf1f4;
        --clinic-surface: #ffffff;
        --clinic-ink: #0d1b2a;
        --clinic-ink-soft: #33475b;
        --clinic-muted: #6b7c8d;
        --clinic-line: #dde4ea;
        --clinic-line-strong: #c6d1da;
        --clinic-teal: #0fb5a8;
        --clinic-teal-deep: #046c64;
        --clinic-teal-soft: #e1f7f4;
        --clinic-amber: #e08700;
        --clinic-amber-deep: #7a4a00;
        --clinic-amber-soft: #fcf1dc;
        --clinic-coral: #e4572e;
        --clinic-coral-deep: #8a2c12;
        --clinic-coral-soft: #fbe8e1;
        --clinic-slate-soft: #e9eef2;
        --clinic-inverse-bg: #0d1b2a;
        --clinic-inverse-fg: #ffffff;
        --clinic-ruler: 62px;
        color: var(--clinic-ink);
        font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
        font-size: 14px;
    }
    .dark .clinic-calendar,
    .dark .clinic-tokens {
        --clinic-bg: #020817;
        --clinic-surface: #0f172a;
        --clinic-ink: #f8fafc;
        --clinic-ink-soft: #d8e0e9;
        --clinic-muted: #94a3b8;
        --clinic-line: #253249;
        --clinic-line-strong: #42526a;
        --clinic-teal-deep: #87ebe3;
        --clinic-teal-soft: #123c3c;
        --clinic-amber-deep: #fbd38d;
        --clinic-amber-soft: #432f12;
        --clinic-coral-deep: #fec4b1;
        --clinic-coral-soft: #48231d;
        --clinic-slate-soft: #1e293b;
        --clinic-inverse-bg: #020617;
        --clinic-inverse-fg: #f8fafc;
    }
    @media (prefers-color-scheme: dark) {
        .clinic-calendar,
        .clinic-tokens {
            --clinic-bg: #020817;
            --clinic-surface: #0f172a;
            --clinic-ink: #f8fafc;
            --clinic-ink-soft: #d8e0e9;
            --clinic-muted: #94a3b8;
            --clinic-line: #253249;
            --clinic-line-strong: #42526a;
            --clinic-teal-deep: #87ebe3;
            --clinic-teal-soft: #123c3c;
            --clinic-amber-deep: #fbd38d;
            --clinic-amber-soft: #432f12;
            --clinic-coral-deep: #fec4b1;
            --clinic-coral-soft: #48231d;
            --clinic-slate-soft: #1e293b;
            --clinic-inverse-bg: #020617;
            --clinic-inverse-fg: #f8fafc;
        }
    }
    .clinic-calendar-toolbar {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 16px;
    }
    .clinic-calendar-date-nav {
        display: flex;
        align-items: center;
        gap: 2px;
        padding: 3px;
        border: 1px solid var(--clinic-line);
        border-radius: 10px;
        background: var(--clinic-surface);
    }
    .clinic-calendar-icon-button {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        border-radius: 7px;
        color: var(--clinic-ink-soft);
        font-size: 22px;
        line-height: 1;
        transition: background-color .14s;
    }
    .clinic-calendar-icon-button:hover { background: var(--clinic-slate-soft); }
    .clinic-calendar-date-label {
        min-width: 200px;
        padding: 0 12px;
        text-align: center;
    }
    .clinic-calendar-date-label strong {
        display: block;
        font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
        font-size: 15px;
        font-weight: 500;
        letter-spacing: -.01em;
    }
    .clinic-calendar-date-label span {
        display: block;
        margin-top: -2px;
        color: var(--clinic-muted);
        font-size: 11px;
    }
    .clinic-calendar-button,
    .clinic-calendar-primary {
        display: inline-flex;
        min-height: 38px;
        align-items: center;
        justify-content: center;
        gap: 5px;
        border: 1px solid var(--clinic-line);
        border-radius: 10px;
        background: var(--clinic-surface);
        padding: 8px 13px;
        color: var(--clinic-ink);
        font-size: 13px;
        font-weight: 500;
        transition: .14s;
    }
    .clinic-calendar-button:hover { border-color: var(--clinic-line-strong); }
    .clinic-calendar-primary {
        border-color: #0f766e;
        background: #0f766e;
        color: #ffffff;
    }
    .clinic-calendar-primary:hover { border-color: #115e59; background: #115e59; color: #ffffff; }
    .clinic-calendar-segmented {
        display: flex;
        gap: 2px;
        padding: 3px;
        border: 1px solid var(--clinic-line);
        border-radius: 10px;
        background: var(--clinic-surface);
    }
    .clinic-calendar-segment {
        border-radius: 7px;
        padding: 6px 13px;
        color: var(--clinic-muted);
        font-size: 13px;
    }
    .clinic-calendar-segment[aria-pressed="true"] {
        background: var(--clinic-ink);
        color: var(--clinic-surface);
    }
    .clinic-calendar-search {
        flex: 1 1 21rem;
        max-width: 30rem;
    }
    .clinic-calendar-search .app-search-input { padding-right: 2.75rem; }
    .clinic-calendar-search-clear {
        position: absolute;
        right: 8px;
        display: grid;
        width: 22px;
        height: 22px;
        place-items: center;
        border-radius: 6px;
        color: var(--clinic-muted);
        font-size: 18px;
    }
    .clinic-calendar-search-clear:hover { background: var(--clinic-slate-soft); color: var(--clinic-ink); }
    .clinic-calendar-toolbar-spacer { margin-left: auto; }
    .clinic-calendar-eyebrow {
        color: var(--clinic-muted);
        font-family: "IBM Plex Mono", ui-monospace, monospace;
        font-size: 10px;
        letter-spacing: .14em;
        text-transform: uppercase;
    }
    .clinic-calendar-vet-picker {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin: -4px 0 12px;
    }
    .clinic-calendar-vet-picker a {
        border: 1px solid var(--clinic-line);
        border-radius: 999px;
        background: var(--clinic-surface);
        padding: 6px 13px;
        color: var(--clinic-muted);
        font-size: 12px;
    }
    .clinic-calendar-vet-picker a[aria-pressed="true"] {
        border-color: var(--clinic-ink);
        background: var(--clinic-ink);
        color: var(--clinic-surface);
    }
    .clinic-calendar-vet-picker-mobile { display: none; }
    .clinic-calendar-stats {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 16px;
    }
    .clinic-calendar-stat {
        position: relative;
        min-height: 104px;
        overflow: hidden;
        border: 1px solid var(--clinic-line);
        border-radius: 10px;
        background: var(--clinic-surface);
        padding: 11px 14px 15px;
    }
    .clinic-calendar-stat > strong {
        display: block;
        margin-top: 3px;
        font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
        font-size: 23px;
        font-weight: 500;
        letter-spacing: -.02em;
    }
    .clinic-calendar-stat > small {
        display: block;
        color: var(--clinic-muted);
        font-size: 11px;
    }
    .clinic-calendar-stat > i {
        position: absolute;
        bottom: 0;
        left: 0;
        display: block;
        height: 3px;
        border-radius: 0 2px 2px 0;
        background: var(--clinic-teal);
        transition: width .4s;
    }
    .clinic-calendar-stat > .clinic-calendar-stat-amber { background: var(--clinic-amber); }
    .clinic-calendar-breakdown {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 9px;
        color: var(--clinic-muted);
        font-size: 10px;
    }
    .clinic-calendar-breakdown b { color: var(--clinic-ink-soft); font-weight: 600; }
    .clinic-calendar-card {
        overflow: hidden;
        border: 1px solid var(--clinic-line);
        border-radius: 14px;
        background: var(--clinic-surface);
        box-shadow: 0 1px 2px rgba(13, 27, 42, .06), 0 8px 24px rgba(13, 27, 42, .07);
    }
    .clinic-calendar-empty {
        display: flex;
        min-height: 260px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 30px;
        color: var(--clinic-muted);
        text-align: center;
    }
    .clinic-calendar-empty strong { color: var(--clinic-ink); font-size: 16px; }
    .clinic-calendar-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        border-top: 1px solid var(--clinic-line);
        background: color-mix(in srgb, var(--clinic-surface) 94%, var(--clinic-slate-soft));
        padding: 12px 16px;
        color: var(--clinic-muted);
        font-size: 12px;
    }
    .clinic-calendar-legend span { display: inline-flex; align-items: center; gap: 6px; }
    .clinic-calendar-legend i { width: 9px; height: 9px; border-radius: 2px; }
    .clinic-legend-confirmed { background: var(--clinic-teal); }
    .clinic-legend-pending { background: var(--clinic-amber); }
    .clinic-legend-missed { background: var(--clinic-coral); }
    .clinic-legend-attended { background: var(--clinic-line-strong); }
    .clinic-calendar-legend-help { margin-left: auto; }

    /* Vista mensual */
    .clinic-calendar .clinic-month-frame {
        overflow: hidden;
        border: 0;
        border-radius: 0;
        background: var(--clinic-line);
    }
    .clinic-calendar .clinic-month-grid { gap: 1px; background: var(--clinic-line); }
    .clinic-calendar .clinic-month-weekday {
        background: var(--clinic-inverse-bg);
        padding: 11px 4px;
        color: var(--clinic-inverse-fg);
        font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
        font-size: 12px;
        letter-spacing: .04em;
    }
    .clinic-calendar .clinic-month-day {
        position: relative;
        min-height: 132px;
        background: var(--clinic-surface);
        padding: 7px;
        color: var(--clinic-ink);
        opacity: 1;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    /* Franja de carga del día: lo primero que se ve al recorrer el mes. */
    .clinic-month-heat {
        position: absolute;
        inset: 0 0 auto 0;
        height: 3px;
    }
    .clinic-month-heat[data-nivel="bajo"] { background: var(--clinic-teal); }
    .clinic-month-heat[data-nivel="medio"] { background: var(--clinic-amber); }
    .clinic-month-heat[data-nivel="alto"] { background: var(--clinic-coral); }

    /* Estado de una cita: botones redondeados en fila, el activo en negativo.
       Se ve en cuál está sin leer y se cambia con un clic. */
    .pastilla-estado {
        display: inline-flex;
        align-items: center;
        border: 1px solid var(--clinic-line-strong);
        border-radius: 999px;
        background: var(--clinic-surface);
        padding: 6px 12px;
        color: var(--clinic-ink-soft);
        font-size: 12px;
        transition: border-color .12s, background-color .12s, color .12s;
    }
    .pastilla-estado:hover { border-color: var(--clinic-teal); color: var(--clinic-teal-deep); }
    .pastilla-estado.is-activa {
        border-color: var(--clinic-ink);
        background: var(--clinic-ink);
        color: var(--clinic-surface);
        font-weight: 700;
    }

    /* ---------- Tablero de la bandeja de citas ---------- */
    .tablero-carril {
        display: flex;
        min-height: 220px;
        flex-direction: column;
        border-radius: 14px;
        border: 1px solid var(--clinic-line);
        background: var(--clinic-surface);
        transition: box-shadow .14s, border-color .14s;
    }
    .tablero-carril.is-drop-target {
        border-color: var(--clinic-teal);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--clinic-teal) 18%, transparent);
    }
    .tablero-carril-cabecera {
        display: flex;
        align-items: center;
        gap: 9px;
        border-bottom: 1px solid var(--clinic-line);
        padding: 12px 14px 10px;
        font-size: 13px;
        color: var(--clinic-ink);
    }
    .tablero-carril-punto { height: 8px; width: 8px; flex: none; border-radius: 50%; background: var(--clinic-line-strong); }
    .tablero-carril-punto[data-etapa="finalizada"] { background: var(--clinic-teal); }
    .tablero-carril-punto[data-etapa="ausente"] { background: var(--clinic-coral); }
    .tablero-carril-conteo { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--clinic-muted); }
    .tablero-carril-cuerpo { display: grid; gap: 9px; padding: 10px; }
    .tablero-carril-vacio {
        border-radius: 10px;
        border: 1.5px dashed var(--clinic-line);
        padding: 20px 12px;
        text-align: center;
        font-size: 12px;
        color: var(--clinic-muted);
    }

    .tablero-tarjeta {
        display: block;
        border-radius: 10px;
        border: 1px solid var(--clinic-line);
        border-left: 3px solid var(--clinic-line-strong);
        background: var(--clinic-surface);
        padding: 10px 11px;
        text-align: left;
        cursor: grab;
        transition: box-shadow .14s, border-color .14s;
    }
    .tablero-tarjeta:hover { border-color: var(--clinic-line-strong); box-shadow: 0 4px 14px rgba(13, 27, 42, .1); }
    .tablero-tarjeta.is-dragging { opacity: .45; cursor: grabbing; }
    .tablero-tarjeta.is-urgente { border-left-color: var(--clinic-coral); }
    .tablero-tarjeta.is-finalizada { border-left-color: var(--clinic-teal); background: color-mix(in srgb, var(--clinic-surface) 92%, var(--clinic-slate-soft)); cursor: default; }
    .tablero-tarjeta.is-ausente { border-left-color: var(--clinic-coral); cursor: default; }
    .tablero-tarjeta-cabecera { display: flex; align-items: baseline; gap: 9px; }
    .tablero-tarjeta-hora { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .tablero-tarjeta-nombre {
        display: block;
        overflow: hidden;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.3;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .tablero-tarjeta-sub {
        display: block;
        overflow: hidden;
        font-size: 11.5px;
        color: var(--clinic-muted);
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .tablero-tarjeta-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 9px; }
    .tablero-tarjeta-medico { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--clinic-muted); }
    .tablero-tarjeta-medico i { height: 7px; width: 7px; border-radius: 50%; background: var(--clinic-teal); }
    .tablero-etiqueta { border-radius: 20px; padding: 2px 8px; font-size: 10.5px; font-weight: 500; white-space: nowrap; }
    .tablero-etiqueta.is-neutra { background: var(--clinic-slate-soft); color: var(--clinic-muted); }
    .tablero-etiqueta.is-ambar { background: var(--clinic-amber-soft); color: var(--clinic-amber-deep); }
    .tablero-etiqueta.is-roja { background: var(--clinic-coral-soft); color: var(--clinic-coral-deep); }

    .clinic-month-day-row { display: flex; align-items: flex-start; gap: 5px; }
    .clinic-month-day-row .clinic-month-day-link { flex: 1; min-width: 0; }

    /* Fuera del mes el contador es una pastilla oscura, que aquí se repetía en
       las 30 celdas y tapaba lo demás. En el mes es un dato de apoyo. */
    .clinic-calendar .clinic-month-day .calendar-day-count {
        height: auto;
        min-width: 0;
        align-self: center;
        border-radius: 0;
        background: transparent;
        padding: 0;
        color: var(--clinic-muted);
        font-size: 10px;
        font-weight: 500;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    /* El botón de reservar aparece al pasar por encima para no competir con la
       información del día; en táctil no hay hover, así que se deja visible. */
    .clinic-month-add {
        position: relative;
        z-index: 2;
        display: grid;
        height: 21px;
        width: 21px;
        flex: none;
        place-items: center;
        border: 1px solid var(--clinic-line);
        border-radius: 6px;
        background: var(--clinic-surface);
        color: var(--clinic-muted);
        font-size: 13px;
        line-height: 1;
        opacity: 0;
        transition: opacity .12s, border-color .12s, color .12s;
    }
    .clinic-month-day:hover .clinic-month-add,
    .clinic-month-add:focus-visible { opacity: 1; }
    .clinic-month-add:hover {
        border-color: var(--clinic-teal);
        background: var(--clinic-teal-soft);
        color: var(--clinic-teal-deep);
    }
    @media (hover: none) { .clinic-month-add { opacity: 1; } }

    /* Una barra por veterinario: dice a quién le queda hueco ese día. */
    .clinic-month-load { display: grid; gap: 3px; }
    .clinic-month-load-row { display: flex; align-items: center; gap: 5px; }
    .clinic-month-load-track {
        flex: 1;
        height: 5px;
        border-radius: 3px;
        background: var(--clinic-slate-soft);
        overflow: hidden;
    }
    .clinic-month-load-track i { display: block; height: 100%; border-radius: 3px; background: var(--clinic-teal); }
    .clinic-month-load-track i[data-nivel="medio"] { background: var(--clinic-amber); }
    .clinic-month-load-track i[data-nivel="alto"] { background: var(--clinic-coral); }
    .clinic-month-load-row small {
        width: 27px;
        text-align: right;
        font-size: 9px;
        font-variant-numeric: tabular-nums;
        color: var(--clinic-muted);
    }

    /* Soltar una cita en otro día. */
    .clinic-month-day.is-drop-target {
        background: var(--clinic-teal-soft);
        box-shadow: inset 0 0 0 2px var(--clinic-teal);
    }
    .calendar-event.is-dragging,
    .clinic-agenda-appointment.is-dragging { opacity: .45; }

    /* Filas de detalle de los dos modales del calendario. El borde es
       deliberadamente más firme que el de una tarjeta: separa pares
       etiqueta/valor sin volver a encajonar cada dato. */
    .clinic-detail-list {
        --clinic-detail-divider: var(--clinic-line-strong);
        border-top: 1px solid var(--clinic-detail-divider);
    }
    .clinic-detail-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        border-bottom: 1px solid var(--clinic-detail-divider);
        padding: 10px 0;
        color: var(--clinic-muted);
        font-size: 13px;
    }
    .clinic-detail-row > span { min-width: 0; }
    .clinic-detail-row > strong,
    .clinic-detail-row > dd {
        min-width: 0;
        margin: 0;
        color: var(--clinic-ink);
        font-weight: 600;
        overflow-wrap: anywhere;
        text-align: right;
    }
    .clinic-detail-row > dt {
        flex: none;
        color: var(--clinic-muted);
    }

    /* Una sola identidad visual para una reserva, tanto en su ficha completa
       como en las listas de la mascota y en el historial modal. */
    .clinic-reservation-card {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 12px;
        border: 1px solid var(--clinic-line);
        border-radius: 14px;
        background: var(--clinic-surface);
        padding: 15px;
        color: var(--clinic-ink);
    }
    .clinic-reservation-summary { min-width: 0; }
    .clinic-reservation-summary-head {
        display: flex;
        min-width: 0;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 13px;
    }
    [data-reservation-details] .clinic-reservation-summary-head { padding-right: 28px; }
    .clinic-reservation-summary-head > .inline-flex { flex: none; }
    .clinic-reservation-eyebrow {
        color: var(--clinic-muted);
        font-family: "IBM Plex Mono", ui-monospace, monospace;
        font-size: 10px;
        font-weight: 500;
        letter-spacing: .1em;
        text-transform: uppercase;
    }
    .clinic-reservation-eyebrow span { letter-spacing: .02em; }
    .clinic-reservation-title {
        margin-top: 3px;
        overflow: hidden;
        color: var(--clinic-ink);
        font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.2;
        text-overflow: ellipsis;
    }
    .clinic-reservation-title span { color: var(--clinic-muted); font-weight: 500; }
    .clinic-reservation-summary.is-compact .clinic-reservation-title { font-size: 17px; }
    .clinic-reservation-summary.is-compact .clinic-detail-row { padding-block: 8px; font-size: 12px; }
    .clinic-reservation-note {
        margin-top: 12px;
        border-left: 3px solid var(--clinic-amber);
        border-radius: 0 8px 8px 0;
        background: var(--clinic-amber-soft);
        padding: 9px 10px;
        color: var(--clinic-ink-soft);
        font-size: 12px;
        line-height: 1.45;
    }
    .clinic-reservation-audit {
        color: var(--clinic-muted);
        font-size: 11px;
        line-height: 1.45;
    }
    .clinic-reservation-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: auto;
        border-top: 1px solid var(--clinic-line-strong);
        padding-top: 12px;
    }
    .clinic-modal-header {
        border-bottom: 1px solid var(--clinic-line-strong);
        padding-bottom: 16px;
        padding-right: 40px;
    }
    .clinic-modal-title {
        margin-top: 4px;
        color: var(--clinic-ink);
        font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
        font-size: 20px;
        font-weight: 800;
        letter-spacing: -.02em;
        line-height: 1.25;
    }
    .clinic-modal-subtitle,
    .clinic-count-summary {
        margin-top: 4px;
        color: var(--clinic-muted);
        font-size: 12px;
    }
    .clinic-count-summary { margin-block: 12px; text-align: center; }
    .clinic-count-summary strong { color: var(--clinic-ink); font-weight: 700; }
    .clinic-section-label {
        margin-bottom: 8px;
        color: var(--clinic-muted);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
    }
    .clinic-timeline {
        margin-left: 4px;
        border-left: 2px solid var(--clinic-line-strong);
        padding-left: 16px;
    }
    .clinic-timeline-item { position: relative; padding-bottom: 12px; font-size: 12px; }
    .clinic-timeline-item:last-child { padding-bottom: 0; }
    .clinic-timeline-dot {
        position: absolute;
        top: 4px;
        left: -21px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--clinic-line-strong);
    }
    .clinic-timeline-dot.is-done { background: var(--clinic-teal); }
    .clinic-timeline-title { display: block; color: var(--clinic-ink); font-weight: 700; }
    .clinic-timeline-detail { display: block; color: var(--clinic-muted); }
    .clinic-modal-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        border-top: 1px solid var(--clinic-line-strong);
        padding-top: 16px;
    }
    .clinic-empty-panel {
        border: 1px dashed var(--clinic-line-strong);
        border-radius: 12px;
        padding: 28px 16px;
        text-align: center;
    }
    .clinic-empty-panel strong { display: block; color: var(--clinic-ink); font-size: 14px; }
    .clinic-empty-panel span { display: block; margin-top: 4px; color: var(--clinic-muted); font-size: 12px; }
    .clinic-detail-dot {
        display: inline-block;
        width: 7px;
        height: 7px;
        margin-right: 7px;
        border-radius: 50%;
        background: var(--clinic-teal);
    }
    .clinic-day-summary-list { border-top: 1px solid var(--clinic-line-strong); }
    .clinic-day-summary-row {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr) auto 10px;
        align-items: center;
        gap: 10px;
        border-bottom: 1px solid var(--clinic-line-strong);
        padding: 11px 2px;
        color: var(--clinic-ink);
        transition: background-color .12s, padding .12s;
    }
    .clinic-day-summary-row:hover {
        background: color-mix(in srgb, var(--clinic-surface) 82%, var(--clinic-slate-soft));
        padding-inline: 7px;
    }
    .clinic-day-summary-time {
        font-family: "IBM Plex Mono", ui-monospace, monospace;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
    }
    .clinic-day-summary-main { min-width: 0; }
    .clinic-day-summary-main strong,
    .clinic-day-summary-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .clinic-day-summary-main strong { font-size: 13px; }
    .clinic-day-summary-main small { color: var(--clinic-muted); font-size: 11px; }
    .clinic-day-summary-status {
        border-radius: 999px;
        background: var(--clinic-slate-soft);
        padding: 2px 8px;
        color: var(--clinic-muted);
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
    }
    .clinic-day-summary-status[data-tone="green"] { background: var(--clinic-teal-soft); color: var(--clinic-teal-deep); }
    .clinic-day-summary-status[data-tone="amber"] { background: var(--clinic-amber-soft); color: var(--clinic-amber-deep); }
    .clinic-day-summary-status[data-tone="red"] { background: var(--clinic-coral-soft); color: var(--clinic-coral-deep); }
    .clinic-day-summary-arrow { color: var(--clinic-muted); font-size: 18px; }

    @media (max-width: 860px) {
        .clinic-calendar .clinic-month-day { min-height: 86px; }
        .clinic-month-load-row small { display: none; }
        .clinic-calendar .clinic-month-events { display: none; }
    }
    .clinic-calendar .clinic-month-day.calendar-day-past { background: color-mix(in srgb, var(--clinic-surface) 90%, var(--clinic-slate-soft)); }
    .clinic-calendar .clinic-month-day.calendar-day-outside { background: color-mix(in srgb, var(--clinic-surface) 72%, var(--clinic-slate-soft)); color: var(--clinic-muted); }
    .clinic-calendar .clinic-month-day.calendar-day-closed {
        background: repeating-linear-gradient(135deg, var(--clinic-surface) 0 7px, var(--clinic-slate-soft) 7px 14px);
    }
    .clinic-calendar .clinic-month-day.calendar-day-today {
        box-shadow: inset 0 0 0 2px var(--clinic-teal);
    }
    .clinic-month-day-link {
        position: relative;
        z-index: 1;
        display: flex;
        min-height: 27px;
        align-items: flex-start;
        justify-content: space-between;
        gap: 5px;
        border-radius: 7px;
    }
    a.clinic-month-day-link:hover { color: var(--clinic-teal-deep); }
    .clinic-month-day-link.is-closed { color: var(--clinic-muted); cursor: not-allowed; }
    .clinic-month-adjacent-link {
        padding-inline: 2px;
        color: var(--clinic-muted);
        transition: background-color .12s, color .12s, opacity .12s;
    }
    .clinic-month-adjacent-link:hover {
        background: var(--clinic-teal-soft);
        color: var(--clinic-teal-deep);
        opacity: 1;
    }
    .clinic-calendar .clinic-month-day .calendar-day-number {
        display: inline-flex;
        height: 25px;
        min-width: 25px;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 12px;
        font-weight: 600;
    }
    .clinic-calendar .clinic-month-day.calendar-day-today .calendar-day-number {
        background: var(--clinic-ink);
        color: var(--clinic-surface);
    }
    .clinic-calendar .clinic-month-events {
        position: relative;
        z-index: 2;
        display: flex;
        margin-top: 5px;
        gap: 3px;
    }
    .clinic-calendar .calendar-event {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: 4px;
        border-radius: 6px;
        padding: 2px 6px;
        font-size: 9px;
        line-height: 15px;
        transition: opacity .15s, box-shadow .15s;
    }
    .clinic-calendar .calendar-event:hover { box-shadow: 0 3px 9px rgba(13, 27, 42, .12); }
    .clinic-calendar .calendar-event-confirmada { border-color: #bce9e4; background: var(--clinic-teal-soft); color: var(--clinic-teal-deep); }
    .clinic-calendar .calendar-event-pendiente { border-color: #f2dfb6; background: var(--clinic-amber-soft); color: var(--clinic-amber-deep); }
    .clinic-calendar .calendar-event-no-asistio { border-color: #f3cdbf; background: var(--clinic-coral-soft); color: var(--clinic-coral-deep); }
    .clinic-calendar .calendar-event-atendida { border-color: var(--clinic-line); background: var(--clinic-slate-soft); color: var(--clinic-muted); }
    .clinic-calendar .is-dimmed { opacity: .18; }

    /* Vistas Día y Semana */
    .clinic-agenda-scroll { max-height: 68vh; overflow: auto; }
    .clinic-agenda-grid { position: relative; display: grid; min-width: 100%; }
    .clinic-agenda-ruler-head,
    .clinic-agenda-column-head {
        position: sticky;
        top: 0;
        z-index: 8;
        border-bottom: 1px solid var(--clinic-line);
        background: var(--clinic-surface);
    }
    .clinic-agenda-ruler-head { left: 0; z-index: 10; }
    .clinic-agenda-column-head { border-left: 1px solid var(--clinic-line); padding: 11px 12px 9px; }
    .clinic-agenda-column-title { display: flex; align-items: center; gap: 9px; }
    .clinic-agenda-avatar {
        display: grid;
        width: 29px;
        height: 29px;
        flex: none;
        place-items: center;
        border-radius: 50%;
        background: var(--clinic-teal-soft);
        color: var(--clinic-teal-deep);
        font-size: 11px;
        font-weight: 600;
    }
    .clinic-agenda-column-copy { min-width: 0; }
    .clinic-agenda-column-copy strong {
        display: block;
        overflow: hidden;
        color: var(--clinic-ink);
        font-size: 13px;
        font-weight: 600;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .clinic-agenda-column-copy small { display: block; color: var(--clinic-muted); font-size: 11px; }
    .clinic-agenda-slot-chip {
        margin-left: auto;
        border: 1px solid var(--clinic-line);
        border-radius: 999px;
        padding: 2px 8px;
        color: var(--clinic-muted);
        font-family: "IBM Plex Mono", ui-monospace, monospace;
        font-size: 10px;
        white-space: nowrap;
    }
    .clinic-agenda-load { display: flex; height: 5px; gap: 2px; margin-top: 9px; }
    .clinic-agenda-load i { flex: 1; border-radius: 1px; background: var(--clinic-slate-soft); }
    .clinic-agenda-load i.is-busy { background: var(--clinic-teal); }
    .clinic-agenda-load i.is-break { background: color-mix(in srgb, var(--clinic-teal) 45%, var(--clinic-slate-soft)); }
    .clinic-agenda-ruler {
        position: sticky;
        left: 0;
        z-index: 6;
        background: var(--clinic-surface);
    }
    .clinic-agenda-tick {
        position: absolute;
        right: 9px;
        color: var(--clinic-muted);
        font-family: "IBM Plex Mono", ui-monospace, monospace;
        font-size: 10px;
        transform: translateY(-50%);
    }
    .clinic-agenda-tick.is-half { opacity: .43; font-size: 9px; }
    .clinic-agenda-column {
        position: relative;
        overflow: hidden;
        border-left: 1px solid var(--clinic-line);
        background: var(--clinic-surface);
    }
    .clinic-agenda-column.is-drop-target {
        background: color-mix(in srgb, var(--clinic-teal-soft) 55%, var(--clinic-surface));
        box-shadow: inset 0 0 0 2px var(--clinic-teal);
    }
    .clinic-agenda-grid-lines { position: absolute; inset: 0; pointer-events: none; }
    .clinic-agenda-grid-lines i { position: absolute; right: 0; left: 0; }
    .clinic-agenda-grid-lines .is-hour { border-top: 1px solid var(--clinic-line); }
    .clinic-agenda-grid-lines .is-half { border-top: 1px dashed color-mix(in srgb, var(--clinic-line) 65%, transparent); }
    .clinic-agenda-off-hours {
        position: absolute;
        z-index: 1;
        right: 0;
        left: 0;
        background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--clinic-surface) 80%, var(--clinic-slate-soft)) 0 6px, var(--clinic-slate-soft) 6px 12px);
        pointer-events: none;
    }
    .clinic-agenda-closed-message {
        position: absolute;
        top: 36px;
        right: 0;
        left: 0;
        z-index: 2;
        color: var(--clinic-muted);
        font-size: 11px;
        font-weight: 600;
        text-align: center;
        text-transform: uppercase;
    }
    .clinic-agenda-break {
        position: absolute;
        right: 0;
        left: 0;
        z-index: 2;
        display: grid;
        place-items: center;
        border-block: 1px solid var(--clinic-line);
        background: repeating-linear-gradient(135deg, var(--clinic-slate-soft) 0 7px, color-mix(in srgb, var(--clinic-slate-soft) 70%, var(--clinic-surface)) 7px 14px);
        color: var(--clinic-muted);
        font-size: 10px;
        text-transform: uppercase;
    }
    .clinic-agenda-free-slot {
        position: absolute;
        right: 4px;
        left: 4px;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        /* Un rastro visible en reposo: invisible hasta el hover dejaba la
           reserva inalcanzable en la tablet de recepción, donde no hay ratón,
           y hacía parecer que el calendario no dejaba reservar. */
        border: 1.5px dashed color-mix(in srgb, var(--clinic-teal) 32%, transparent);
        border-radius: 8px;
        color: color-mix(in srgb, var(--clinic-teal-deep) 62%, transparent);
        font-family: "IBM Plex Mono", ui-monospace, monospace;
        font-size: 10px;
        transition: .12s;
    }
    .clinic-agenda-free-slot:hover,
    .clinic-agenda-free-slot:focus-visible {
        border-color: var(--clinic-teal);
        background: color-mix(in srgb, var(--clinic-teal-soft) 70%, transparent);
        color: var(--clinic-teal-deep);
        outline: none;
    }
    /* Sin ratón no hay estado intermedio: se muestran del todo. */
    @media (hover: none) {
        .clinic-agenda-free-slot {
            border-color: color-mix(in srgb, var(--clinic-teal) 55%, transparent);
            color: var(--clinic-teal-deep);
        }
    }
    /* Las horas de hoy que ya pasaron se rayan en vez de dejarse en blanco:
       un día sin nada que pulsar parece roto, no cerrado. */
    .clinic-agenda-past {
        position: absolute;
        right: 0;
        left: 0;
        z-index: 1;
        background: repeating-linear-gradient(135deg,
            color-mix(in srgb, var(--clinic-line) 34%, transparent) 0 6px,
            transparent 6px 12px);
        pointer-events: none;
    }
    .clinic-agenda-appointment {
        position: absolute;
        right: 4px;
        left: 4px;
        z-index: 4;
        display: block;
        overflow: hidden;
        border: 1px solid transparent;
        border-left-width: 3px;
        border-radius: 8px;
        padding: 5px 8px;
        text-align: left;
        transition: box-shadow .14s, transform .14s, opacity .14s;
    }
    .clinic-agenda-appointment[data-cita-fija="false"] { cursor: grab; touch-action: none; }
    .clinic-agenda-appointment.is-dragging { z-index: 12; cursor: grabbing; pointer-events: none; }
    .clinic-agenda-appointment:hover { z-index: 5; box-shadow: 0 4px 14px rgba(13, 27, 42, .14); transform: translateY(-1px); }
    .clinic-agenda-appointment-confirmada { border-color: #bce9e4; border-left-color: var(--clinic-teal); background: var(--clinic-teal-soft); color: var(--clinic-teal-deep); }
    .clinic-agenda-appointment-pendiente { border-color: #f2dfb6; border-left-color: var(--clinic-amber); background: var(--clinic-amber-soft); color: var(--clinic-amber-deep); }
    .clinic-agenda-appointment-urgencia { border-color: #f3cdbf; border-left-color: var(--clinic-coral); background: var(--clinic-coral-soft); color: var(--clinic-coral-deep); }
    .clinic-agenda-appointment-atendida { border-color: var(--clinic-line); border-left-color: var(--clinic-line-strong); background: var(--clinic-slate-soft); color: var(--clinic-muted); }
    .clinic-agenda-appointment-title {
        display: block;
        overflow: hidden;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .clinic-agenda-appointment-sub {
        display: block;
        overflow: hidden;
        margin-top: 2px;
        font-family: "IBM Plex Mono", ui-monospace, monospace;
        font-size: 9px;
        opacity: .85;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .clinic-agenda-now {
        position: absolute;
        right: 0;
        left: 0;
        z-index: 5;
        height: 0;
        border-top: 1.5px solid var(--clinic-coral);
        pointer-events: none;
    }
    .clinic-agenda-now::before {
        position: absolute;
        top: -4px;
        left: -4px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--clinic-coral);
        content: "";
    }

    /* --- Agenda móvil ---
       En una pantalla angosta el tiempo se comprende mejor como secuencia que
       como columnas comprimidas. Esta vista comparte datos y endpoints con la
       grilla de escritorio, pero tiene jerarquía y objetivos táctiles propios. */
    .clinic-mobile-calendar { display: none; }

    @media (max-width: 780px) {
        .page-header[data-mobile-hidden="true"] { display: none; }
        .clinic-calendar-desktop { display: none; }
        .clinic-mobile-calendar {
            display: block;
            min-height: 70dvh;
            padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
            color: var(--clinic-ink);
        }
        .clinic-mobile-topbar {
            position: sticky;
            top: 0;
            z-index: 12;
            margin: -8px -8px 0;
            border-bottom: 1px solid var(--clinic-line);
            background: color-mix(in srgb, var(--clinic-bg) 94%, transparent);
            padding: 10px 8px 7px;
            backdrop-filter: blur(14px);
        }
        .clinic-mobile-head {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .clinic-mobile-icon-button,
        .clinic-mobile-today {
            display: grid;
            min-width: 42px;
            height: 42px;
            place-items: center;
            border: 1px solid var(--clinic-line);
            border-radius: 12px;
            background: var(--clinic-surface);
            color: var(--clinic-ink-soft);
            font-size: 18px;
            font-weight: 600;
        }
        .clinic-mobile-icon-button.is-active {
            border-color: var(--clinic-ink);
            background: var(--clinic-ink);
            color: var(--clinic-surface);
        }
        .clinic-mobile-today {
            padding-inline: 10px;
            font-size: 12px;
        }
        .clinic-mobile-title {
            min-width: 0;
            flex: 1;
            line-height: 1.15;
        }
        .clinic-mobile-title strong {
            display: block;
            overflow: hidden;
            font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
            font-size: 16px;
            font-weight: 600;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .clinic-mobile-title small {
            display: block;
            margin-top: 3px;
            color: var(--clinic-muted);
            font-size: 10px;
        }
        .clinic-mobile-day-strip,
        .clinic-mobile-vets {
            display: flex;
            overflow-x: auto;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
        }
        .clinic-mobile-day-strip::-webkit-scrollbar,
        .clinic-mobile-vets::-webkit-scrollbar { display: none; }
        .clinic-mobile-day-strip {
            gap: 5px;
            margin-top: 9px;
            scroll-snap-type: x proximity;
        }
        .clinic-mobile-strip-day {
            display: flex;
            width: 52px;
            min-width: 52px;
            min-height: 64px;
            scroll-snap-align: center;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--clinic-line);
            border-radius: 13px;
            background: var(--clinic-surface);
            color: var(--clinic-ink);
        }
        .clinic-mobile-strip-day small {
            color: var(--clinic-muted);
            font-size: 9px;
            letter-spacing: .08em;
            text-transform: uppercase;
        }
        .clinic-mobile-strip-day strong {
            font-family: "IBM Plex Mono", ui-monospace, monospace;
            font-size: 17px;
            font-weight: 500;
        }
        .clinic-mobile-strip-day[aria-current="date"] {
            border-color: var(--clinic-ink);
            background: var(--clinic-ink);
            color: var(--clinic-surface);
        }
        .clinic-mobile-strip-day[aria-current="date"] small { color: color-mix(in srgb, var(--clinic-surface) 65%, var(--clinic-muted)); }
        .clinic-mobile-strip-day.is-today strong { color: var(--clinic-coral); }
        .clinic-mobile-strip-day[aria-current="date"].is-today strong { color: #ffb49a; }
        .clinic-mobile-strip-day.is-closed { opacity: .48; }
        .clinic-mobile-day-dots {
            display: flex;
            min-height: 4px;
            gap: 2px;
            margin-top: 2px;
        }
        .clinic-mobile-day-dots i,
        .clinic-mobile-month-day span i {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--clinic-line-strong);
        }
        .clinic-mobile-day-dots i[data-tone="green"],
        .clinic-mobile-month-day i[data-tone="green"] { background: var(--clinic-teal); }
        .clinic-mobile-day-dots i[data-tone="amber"],
        .clinic-mobile-month-day i[data-tone="amber"] { background: var(--clinic-amber); }
        .clinic-mobile-day-dots i[data-tone="red"],
        .clinic-mobile-month-day i[data-tone="red"] { background: var(--clinic-coral); }
        .clinic-mobile-vets {
            gap: 6px;
            margin: 0 -8px;
            padding: 11px 8px 2px;
        }
        .clinic-mobile-vet-chip {
            display: inline-flex;
            min-height: 40px;
            flex: none;
            align-items: center;
            gap: 7px;
            border: 1px solid var(--clinic-line);
            border-radius: 999px;
            background: var(--clinic-surface);
            padding: 8px 13px;
            color: var(--clinic-ink-soft);
            font-size: 12px;
            white-space: nowrap;
        }
        .clinic-mobile-vet-chip i {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--clinic-teal);
        }
        .clinic-mobile-vet-chip[aria-pressed="true"] {
            border-color: var(--clinic-ink);
            background: var(--clinic-ink);
            color: var(--clinic-surface);
        }
        .clinic-mobile-stats {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 7px;
            padding-top: 10px;
        }
        .clinic-mobile-stats article {
            min-width: 0;
            border: 1px solid var(--clinic-line);
            border-radius: 12px;
            background: var(--clinic-surface);
            padding: 8px 9px;
        }
        .clinic-mobile-stats strong {
            display: block;
            overflow: hidden;
            font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
            font-size: 19px;
            font-weight: 600;
            text-overflow: ellipsis;
        }
        .clinic-mobile-stats span {
            display: block;
            overflow: hidden;
            color: var(--clinic-muted);
            font-size: 9px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .clinic-mobile-agenda-list { padding: 7px 0 20px; }
        .clinic-mobile-period {
            display: flex;
            align-items: center;
            gap: 9px;
            margin: 15px 2px 8px;
            color: var(--clinic-muted);
            font-family: "IBM Plex Mono", ui-monospace, monospace;
            font-size: 9px;
            letter-spacing: .12em;
            text-transform: uppercase;
        }
        .clinic-mobile-period::before,
        .clinic-mobile-period::after {
            height: 1px;
            flex: 1;
            background: var(--clinic-line);
            content: "";
        }
        .clinic-mobile-agenda-row {
            display: flex;
            align-items: stretch;
            gap: 9px;
            margin-bottom: 8px;
        }
        .clinic-mobile-time {
            width: 47px;
            flex: none;
            padding-top: 11px;
            text-align: right;
        }
        .clinic-mobile-time strong,
        .clinic-mobile-time small { display: block; }
        .clinic-mobile-time strong {
            font-family: "IBM Plex Mono", ui-monospace, monospace;
            font-size: 12px;
            font-weight: 600;
        }
        .clinic-mobile-time small { color: var(--clinic-muted); font-size: 9px; }
        .clinic-mobile-appointment-card,
        .clinic-mobile-free-card {
            min-width: 0;
            min-height: 64px;
            flex: 1;
            border: 1px solid var(--clinic-line);
            border-left: 3px solid var(--clinic-line-strong);
            border-radius: 12px;
            background: var(--clinic-surface);
            padding: 10px 11px;
            color: var(--clinic-ink);
        }
        .clinic-mobile-appointment-card[data-tone="green"] { border-left-color: var(--clinic-teal); }
        .clinic-mobile-appointment-card[data-tone="amber"] { border-left-color: var(--clinic-amber); }
        .clinic-mobile-appointment-card[data-tone="red"] { border-left-color: var(--clinic-coral); }
        .clinic-mobile-appointment-card > strong,
        .clinic-mobile-appointment-card > small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .clinic-mobile-appointment-card > strong { font-size: 13px; }
        .clinic-mobile-appointment-card > strong span { color: var(--clinic-muted); font-weight: 400; }
        .clinic-mobile-appointment-card > small { margin-top: 2px; color: var(--clinic-muted); font-size: 10px; }
        .clinic-mobile-card-meta {
            display: flex;
            min-width: 0;
            align-items: center;
            gap: 5px;
            margin-top: 7px;
            color: var(--clinic-muted);
            font-size: 9px;
        }
        .clinic-mobile-card-meta > i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--clinic-teal); }
        .clinic-mobile-card-meta em {
            margin-left: auto;
            border-radius: 999px;
            background: var(--clinic-slate-soft);
            padding: 2px 7px;
            color: var(--clinic-ink-soft);
            font-style: normal;
            white-space: nowrap;
        }
        .clinic-mobile-card-meta em[data-tone="green"] { background: var(--clinic-teal-soft); color: var(--clinic-teal-deep); }
        .clinic-mobile-card-meta em[data-tone="amber"] { background: var(--clinic-amber-soft); color: var(--clinic-amber-deep); }
        .clinic-mobile-card-meta em[data-tone="red"] { background: var(--clinic-coral-soft); color: var(--clinic-coral-deep); }
        .clinic-mobile-free-card {
            display: flex;
            min-height: 55px;
            align-items: center;
            gap: 8px;
            border-style: dashed;
            border-left-width: 1px;
            background: transparent;
            color: var(--clinic-muted);
            font-size: 11px;
        }
        .clinic-mobile-free-card strong { color: var(--clinic-ink-soft); }
        .clinic-mobile-free-card > i {
            display: grid;
            width: 28px;
            height: 28px;
            margin-left: auto;
            flex: none;
            place-items: center;
            border-radius: 50%;
            background: var(--clinic-teal-soft);
            color: var(--clinic-teal-deep);
            font-style: normal;
            font-size: 16px;
        }
        .clinic-mobile-now { display: flex; align-items: center; gap: 7px; margin: 10px 0 10px 56px; }
        .clinic-mobile-now span { border-radius: 5px; background: var(--clinic-coral); padding: 1px 6px; color: white; font-family: "IBM Plex Mono", monospace; font-size: 9px; }
        .clinic-mobile-now i { height: 1.5px; flex: 1; background: var(--clinic-coral); }
        .clinic-mobile-empty {
            display: flex;
            min-height: 220px;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 24px;
            color: var(--clinic-muted);
            text-align: center;
        }
        .clinic-mobile-empty strong { color: var(--clinic-ink); font-size: 14px; }
        .clinic-mobile-empty span,
        .clinic-mobile-hint { margin-top: 4px; color: var(--clinic-muted); font-size: 10px; line-height: 1.5; text-align: center; }
        .clinic-mobile-fab {
            position: fixed;
            right: 14px;
            bottom: calc(14px + env(safe-area-inset-bottom, 0px));
            z-index: 18;
            display: inline-flex;
            min-height: 52px;
            align-items: center;
            gap: 7px;
            border-radius: 16px;
            background: var(--clinic-ink);
            padding: 13px 18px;
            color: var(--clinic-surface);
            font-size: 14px;
            font-weight: 600;
            box-shadow: 0 8px 24px rgba(13, 27, 42, .28);
        }
        .clinic-mobile-month { padding: 12px 0 18px; }
        .clinic-mobile-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
        .clinic-mobile-month-weekday { padding-bottom: 3px; color: var(--clinic-muted); font-size: 9px; text-align: center; text-transform: uppercase; }
        .clinic-mobile-month-day {
            display: flex;
            aspect-ratio: 1;
            min-width: 0;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 3px;
            border: 1px solid var(--clinic-line);
            border-radius: 10px;
            background: var(--clinic-surface);
            color: var(--clinic-ink);
        }
        .clinic-mobile-month-day strong { font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 500; }
        .clinic-mobile-month-day span { display: flex; min-height: 4px; gap: 2px; }
        .clinic-mobile-month-day.is-outside { opacity: .32; }
        .clinic-mobile-month-day.is-closed { background: repeating-linear-gradient(135deg, var(--clinic-surface) 0 5px, var(--clinic-bg) 5px 10px); color: var(--clinic-muted); }
        .clinic-mobile-month-day.is-today { box-shadow: inset 0 0 0 1.5px var(--clinic-ink); }
        .clinic-mobile-month-day.is-selected { border-color: var(--clinic-ink); background: var(--clinic-ink); color: var(--clinic-surface); }

        /* Todos los modales existentes se convierten en hoja inferior. No se
           duplica el formulario ni se crea un sistema paralelo de overlays. */
        [data-modal-overlay] { align-items: flex-end !important; padding: 0 !important; }
        [data-modal-id][data-modal-mobile-sheet="true"] {
            width: 100% !important;
            max-width: none !important;
            max-height: min(90dvh, 760px) !important;
            min-height: 190px;
            border-radius: 20px 20px 0 0 !important;
            padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        }
        [data-modal-id][data-modal-mobile-sheet="true"]::before {
            display: block;
            width: 38px;
            height: 4px;
            margin: 0 auto 4px;
            border-radius: 4px;
            background: var(--clinic-line-strong, #c6d1da);
            content: "";
        }
        [data-modal-id][data-modal-mobile-sheet="true"] .modal-inner { padding-top: 0; }
        [data-modal-id][data-modal-mobile-sheet="true"] input,
        [data-modal-id][data-modal-mobile-sheet="true"] select,
        [data-modal-id][data-modal-mobile-sheet="true"] textarea { font-size: 16px; }
    }

    @media (max-width: 1000px) {
        .clinic-calendar-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .clinic-calendar-search { order: 5; }
        .clinic-calendar-toolbar-spacer { display: none; }
        .clinic-calendar-primary { margin-left: auto; }
    }
    @media (max-width: 860px) {
        .clinic-calendar-date-label { min-width: 132px; padding-inline: 5px; }
        .clinic-calendar-search { display: none; }
        .clinic-calendar-vet-picker-mobile { display: flex; }
        .clinic-agenda-grid[data-view="dia"] { grid-template-columns: var(--clinic-ruler) minmax(230px, 1fr) !important; }
        .clinic-agenda-grid[data-view="dia"] [data-medico-selected="false"] { display: none; }
        .clinic-calendar .clinic-month-day { min-height: 80px; padding: 4px; }
        .clinic-calendar .clinic-month-events { display: none; }
        .clinic-calendar .clinic-month-day .calendar-day-count { display: inline-flex; }
        .clinic-calendar-legend-help { display: none !important; }
    }
    @media (max-width: 560px) {
        .clinic-calendar-toolbar { align-items: stretch; }
        .clinic-calendar-date-nav { order: 1; flex: 1 1 100%; justify-content: space-between; }
        .clinic-calendar-date-label { flex: 1; }
        .clinic-calendar-button { order: 2; }
        .clinic-calendar-segmented { order: 2; flex: 1; }
        .clinic-calendar-segment { flex: 1; padding-inline: 8px; text-align: center; }
        .clinic-calendar-primary { order: 3; width: 100%; margin-left: 0; }
        .clinic-calendar-stats { gap: 7px; }
        .clinic-calendar-stat { min-height: 96px; padding: 9px 10px 13px; }
        .clinic-calendar-breakdown { gap: 3px 6px; }
        .clinic-calendar .clinic-month-weekday { padding: 8px 1px; font-size: 9px; }
        .clinic-calendar .clinic-month-day { min-height: 66px; }
        .clinic-calendar .clinic-month-day .calendar-day-number { height: 22px; min-width: 22px; font-size: 10px; }
        .clinic-day-summary-row { grid-template-columns: 62px minmax(0, 1fr) 10px; }
        .clinic-day-summary-status { display: none; }
    }

    /* --- Botones de acción destacada --- */
    .button-hero {
        @apply inline-flex w-full items-center justify-center gap-2 rounded-xl bg-teal-700 px-4 py-2.5 text-sm font-bold text-white shadow-sm transition hover:bg-teal-800 focus:outline-none focus:ring-2 focus:ring-teal-400;
    }
    .button-hero-danger {
        @apply inline-flex w-full items-center justify-center gap-2 rounded-xl bg-red-700 px-4 py-2.5 text-sm font-bold text-white shadow-sm transition hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-400;
    }
    .button-hero-ghost {
        @apply inline-flex w-full items-center justify-center gap-2 rounded-xl border border-slate-300 bg-white px-4 py-2.5 text-sm font-bold text-slate-800 transition hover:border-slate-900 hover:bg-slate-900 hover:text-white dark:border-slate-600 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-700;
    }
}
.dictado {
    @apply flex flex-col gap-1;
}

.dictado-cabecera {
    @apply flex items-center justify-between gap-3;
}

.dictado-boton {
    @apply inline-flex shrink-0 items-center gap-1.5 rounded-lg border border-slate-300 bg-white px-2.5 py-1.5;
    @apply text-xs font-semibold text-slate-600 transition-colors;
    @apply hover:border-slate-400 hover:text-slate-900;
    @apply dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 dark:hover:text-slate-100;
}

.dictado-boton:disabled {
    @apply cursor-not-allowed opacity-50 hover:border-slate-300 hover:text-slate-600;
}

.dictado-activo .dictado-boton {
    @apply border-red-300 bg-red-50 text-red-700;
    @apply dark:border-red-800 dark:bg-red-950/40 dark:text-red-300;
}

.dictado-onda {
    @apply hidden h-2 w-2 rounded-full bg-red-500;
}

.dictado-activo .dictado-onda {
    @apply block;
    animation: dictado-latido 1.2s ease-in-out infinite;
}

@keyframes dictado-latido {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.6); opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
    .dictado-activo .dictado-onda { animation: none; }
}

.dictado-campo {
    @apply min-h-[6rem] resize-y;
}

.dictado-activo .dictado-campo {
    @apply border-red-300 dark:border-red-800;
}

.dictado-estado {
    @apply text-xs text-slate-500 empty:hidden dark:text-slate-400;
}
.pagy {
    @apply flex space-x-1 font-semibold text-sm text-gray-500;
    a:not(.gap) {
        @apply block rounded-lg px-3 py-1 bg-gray-200;
        &:hover {
            @apply bg-gray-300;
        }
        &:not([href]) {
            @apply text-gray-300 bg-gray-100 cursor-default;
        }
        &.current {
            @apply text-white bg-gray-400;
        }
    }
    label {
        @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
        input {
            @apply bg-gray-100 border-none rounded-md;
        }
    }
}
@layer components {
    [data-popper-arrow] {
        @apply absolute w-0 h-0 border-solid;
        content: "";
    }

    /* TOOLTIP */
    .arrow-tooltip[data-popper-placement^="top"] {
        @apply bottom-[-6px] border-x-[6px] border-x-transparent border-t-[6px] border-t-gray-800;
    }
    .arrow-tooltip[data-popper-placement^="bottom"] {
        @apply top-[-6px] border-x-[6px] border-x-transparent border-b-[6px] border-b-gray-800;
    }
    .arrow-tooltip[data-popper-placement^="left"] {
        @apply right-[-6px] border-y-[6px] border-y-transparent border-l-[6px] border-l-gray-800;
    }
    .arrow-tooltip[data-popper-placement^="right"] {
        @apply left-[-6px] border-y-[6px] border-y-transparent border-r-[6px] border-r-gray-800;
    }

    /* POPOVER */
    
    .arrow-popover[data-popper-placement^="top"] {
        @apply bottom-[-6px] border-x-[6px] border-x-transparent border-t-[6px] border-t-white drop-shadow-md;
    }

    .arrow-popover[data-popper-placement^="bottom"] {
        @apply top-[-6px] border-x-[6px] border-x-transparent border-b-[6px] border-b-white drop-shadow;
    }

    .arrow-popover[data-popper-placement^="left"] {
        @apply right-[-6px] border-y-[6px] border-y-transparent border-l-[6px] border-l-white drop-shadow;
    }

    .arrow-popover[data-popper-placement^="right"] {
        @apply left-[-6px] border-y-[6px] border-y-transparent border-r-[6px] border-r-white drop-shadow;
    }

    /* DROPDOWN */
    .arrow-dropdown[data-popper-placement^="top"] {
        @apply bottom-[-6px] border-x-[6px] border-x-transparent border-t-[6px] border-t-gray-100;
    }
    .arrow-dropdown[data-popper-placement^="bottom"] {
        @apply top-[-6px] border-x-[6px] border-x-transparent border-b-[6px] border-b-gray-100;
    }
    .arrow-dropdown[data-popper-placement^="left"] {
        @apply right-[-6px] border-y-[6px] border-y-transparent border-l-[6px] border-l-gray-100;
    }
    .arrow-dropdown[data-popper-placement^="right"] {
        @apply left-[-6px] border-y-[6px] border-y-transparent border-r-[6px] border-r-gray-100;
    }
}
/* Contenedor general */
.select2-container {
    margin: 0 !important;
    display: block !important;
    width: 100% !important;
}

/* Caja de selección principal */
.select2-container .select2-selection {
    @apply w-full text-gray-900 dark:text-gray-400 text-sm border border-gray-400 rounded-lg p-2 bg-transparent !important;
    height: 2.5rem !important;
    line-height: 1.5rem !important;
}

.select2-container .select2-selection:hover {
    @apply border-black dark:border-gray-400 text-gray-900 dark:text-gray-400 !important;
}

/* Placeholder */
.select2-selection__placeholder {
    @apply text-gray-500 dark:text-gray-500 !important;
}

/* Texto seleccionado */
.select2-selection__rendered {
    @apply text-gray-900 dark:text-gray-300 !important;
}

/* Asegura que el contenedor del arrow tenga posición relativa */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    position: absolute !important;
    top: 50% !important;
    right: 0.75rem !important; /* separa un poco del borde */
    transform: translateY(-50%) !important;
    width: 1rem !important;
    height: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Flecha normal (cerrada) */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #999 transparent transparent transparent !important;
    border-width: 5px 4px 0 4px !important;
    display: block !important;
}

/* Flecha cuando el select está abierto */
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #999 transparent !important;
    border-width: 0 4px 5px 4px !important;
}

/* Dropdown (contenedor del menú) */
.select2-dropdown {
    @apply border border-gray-400 bg-gray-100 dark:bg-gray-950 rounded-b-lg rounded-t-none shadow-lg !important;
    margin-top: -1px !important;
}

/* Área de búsqueda dentro del dropdown */
.app-search-dropdown .select2-search--dropdown {
    @apply relative p-2 bg-gray-100 dark:bg-gray-950 !important;
}

.app-search-dropdown .select2-search--dropdown::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 0.95rem;
    width: 1rem;
    height: 1rem;
    transform: translateY(-50%);
    color: #94a3b8;
    background: currentColor;
    pointer-events: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M8.5 2a6.5 6.5 0 1 0 4.08 11.56l3.93 3.93 1.06-1.06-3.93-3.93A6.5 6.5 0 0 0 8.5 2Zm0 1.5a5 5 0 1 1 0 10 5 5 0 0 1 0-10Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M8.5 2a6.5 6.5 0 1 0 4.08 11.56l3.93 3.93 1.06-1.06-3.93-3.93A6.5 6.5 0 0 0 8.5 2Zm0 1.5a5 5 0 1 1 0 10 5 5 0 0 1 0-10Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Input del buscador */
.app-search-dropdown .select2-search__field {
    @apply h-[42px] w-full rounded-xl border border-slate-300 bg-white py-2 pl-9 pr-3 text-sm font-medium text-slate-900 placeholder:text-slate-400 focus:border-teal-600 focus:outline-none focus:ring-2 focus:ring-teal-500/20 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100 dark:placeholder:text-slate-500 !important;
}

/* Lista de resultados */
.select2-results__options {
    @apply text-gray-900 dark:text-gray-400 font-normal text-sm rounded-lg !important;
    max-height: 17rem; /* cada opción ocupa dos renglones: caben ~6 sin scroll */
    overflow-y: auto;
}

/* Opción de dos renglones: el nombre y, debajo, el detalle que la distingue
   (especie y propietario, documento y teléfono, precio y vencimiento…). */
.s2-opcion {
    @apply flex min-w-0 flex-col leading-tight;
}

.s2-opcion-nombre {
    @apply truncate;
}

.s2-opcion-detalle {
    @apply truncate text-xs text-gray-500 dark:text-gray-400;
}

/* Sobre el fondo oscuro del resaltado, el gris del detalle se pierde */
.select2-results__option--highlighted .s2-opcion-detalle,
.select2-results__option--selected .s2-opcion-detalle {
    @apply text-gray-300 dark:text-gray-300 !important;
}

/* Scroll personalizado */
.select2-results__options::-webkit-scrollbar {
    width: .4rem;
}

.select2-results__options::-webkit-scrollbar-track {
    @apply bg-gray-200 dark:bg-gray-800 rounded-xl !important;
}

.select2-results__options::-webkit-scrollbar-thumb {
    @apply bg-gray-400 rounded-lg !important;
}

/* Resultado destacado (hover o activo) */
.select2-results__option--highlighted {
    @apply bg-gray-700 hover:bg-gray-950 dark:hover:bg-gray-900 text-gray-50 rounded-md !important;
}

/* Mensaje "sin resultados" */
.select2-results__message {
    @apply bg-gray-100 dark:bg-gray-950 text-red-500 font-bold p-2 rounded-md !important;
}

/* Texto coincidente */
.select2-results__option strong {
    @apply bg-green-500 text-green-900 font-bold px-1 rounded !important;
}

/* Deshabilitado */
.select2-container--disabled .select2-selection {
    @apply bg-gray-300 dark:bg-gray-700 dark:text-gray-400 border-gray-600 cursor-not-allowed !important;
}

/* Estado abierto */
.select2-container--open .select2-selection {
    @apply rounded-t-lg rounded-b-none border-gray-400 border-b-0 !important;
}

/* Error visual */
.is-invalid-input .select2-selection {
    @apply border-red-500 w-full !important;
}

/* ✅ Opción seleccionada (no hover) */
.select2-container--default .select2-results__option--selected {
    @apply bg-gray-800 text-gray-100 dark:bg-gray-800 dark:text-gray-100 !important;
}

/* ✅ Opción seleccionada + hover (mantén contraste oscuro) */
.select2-container--default .select2-results__option--selected.select2-results__option--highlighted {
    @apply bg-gray-700 dark:bg-gray-700 text-white !important;
}

.field_with_errors .select2-container .select2-selection {
    border: 1px solid #ef0e0e !important;
    width: 100% !important;
    background-color: #ffe6e6 !important;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */


.turbo-progress-bar {
    visibility: hidden;
}


/* --------------------------------------------------
   Animaciones de los modales Inicio FADE + ZOOM (apertura)
   -------------------------------------------------- */
@keyframes modal-zoom-in {
    0%   { opacity: 0; transform: scale(0.8) translate(-50%, -50%); }
    100% { opacity: 1; transform: scale(1)   translate(-50%, -50%); }
}

/* FADE + ZOOM (cierre) */
@keyframes modal-zoom-out {
    0%   { opacity: 1; transform: scale(1)   translate(-50%, -50%); }
    100% { opacity: 0; transform: scale(0.8) translate(-50%, -50%); }
}

/* Para movimientos laterales (si usas position=“left” o “right”) */
@keyframes modal-slide-in-left {
    0%   { opacity: 0; transform: translateX(-30%) scale(0.85); }
    100% { opacity: 1; transform: translateX(0)    scale(1); }
}
@keyframes modal-slide-out-left {
    0%   { opacity: 1; transform: translateX(0)    scale(1); }
    100% { opacity: 0; transform: translateX(-30%) scale(0.85); }
}

/* Shake y flash-pulse (tus originales) */
@keyframes shake-x {
    0%   { transform: translateX(0); }
    15%  { transform: translateX(-8px); }
    30%  { transform: translateX(6px); }
    45%  { transform: translateX(-4px); }
    60%  { transform: translateX(3px); }
    75%  { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}

@keyframes shake-x-center {
    0%   { transform: translate(-50%, -50%) scale(1) translateX(0); }
    15%  { transform: translate(-50%, -50%) scale(1) translateX(-8px); }
    30%  { transform: translate(-50%, -50%) scale(1) translateX(6px); }
    45%  { transform: translate(-50%, -50%) scale(1) translateX(-4px); }
    60%  { transform: translate(-50%, -50%) scale(1) translateX(3px); }
    75%  { transform: translate(-50%, -50%) scale(1) translateX(-2px); }
    100% { transform: translate(-50%, -50%) scale(1) translateX(0); }
}

.modal[data-modal-id]::before {
    content: "";
    position: absolute;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, white 10%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.5;
    animation: flash-pulse 0.6s ease-out;
    pointer-events: none;
    border-radius: 9999px;
}

@keyframes flash-pulse {
    0%   { transform: translate(-50%, -50%) scale(0);   opacity: 0.8; }
    50%  { transform: translate(-50%, -50%) scale(1);   opacity: 0.4; }
    100% { transform: translate(-50%, -50%) scale(2);   opacity: 0;   }
}

.modal-animate-left {
    transform: translateX(-100%);
    transition: all 0.3s ease;
}

.modal-animate-left.show {
    transform: translateX(0);
    opacity: 1;
}

.modal-animate-right {
    transform: translateX(100%);
    transition: all 0.3s ease;
}
.modal-animate-right.show {
    transform: translateX(0);
    opacity: 1;
}

.modal-animate-top {
    transform: translateY(-100%);
    transition: all 0.3s ease;
}
.modal-animate-top.show {
    transform: translateY(0);
    opacity: 1;
}

.modal-animate-bottom {
    transform: translateY(100%);
    transition: all 0.3s ease;
}
.modal-animate-bottom.show {
    transform: translateY(0);
    opacity: 1;
}

@keyframes fade {
    from { opacity: 0 }
    to   { opacity: 1 }
}

.animate-fade {
    animation: fade 0.3s ease-out;
}

.modal-inner {
    will-change: transform;
}


/* Appointments */
:root {
    --appointment-success: #10b981;
    --appointment-success-light: #d1fae5;
    --appointment-danger: #ef4444;
    --appointment-danger-light: #fee2e2;
    --appointment-warning: #f59e0b;
    --appointment-warning-light: #fef3c7;
    --appointment-info: #3b82f6;
    --appointment-info-light: #dbeafe;
    --shadow-soft: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

@keyframes slideInUp {
    from {
        transform: translateY(10px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


.appointment-slot {
    animation: slideInUp 0.3s ease-out;

    &:nth-child(odd) {
        animation-delay: 0.1s;
    }

    &:nth-child(even) {
        animation-delay: 0.2s;
    }

/ / Estados hover mejorados & . available {
    position: relative;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.1));
        border-radius: 0.5rem;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    &:hover::before {
        opacity: 1;
    }

    &:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-medium);
    }
}

    &.reserved {
        position: relative;

        &::after {
            content: '';
            position: absolute;
            top: 50%;
            right: 1rem;
            width: 8px;
            height: 8px;
            background: var(--appointment-danger);
            border-radius: 50%;
            transform: translateY(-50%);
            animation: pulse 2s infinite;
        }
    }
}

.tooltip {
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);

    .arrow-tooltip {
        &::before {
            content: '';
            position: absolute;
            border-style: solid;
        }

        &[data-placement^="right"] {
            left: -5px;

            &::before {
                border-width: 5px 5px 5px 0;
                border-color: transparent rgba(17, 24, 39, 0.9) transparent transparent;
            }
        }

        &[data-placement^="left"] {
            right: -5px;

            &::before {
                border-width: 5px 0 5px 5px;
                border-color: transparent transparent transparent rgba(17, 24, 39, 0.9);
            }
        }
    }
}

.appointment-details-panel {
    .empty-state {
        animation: fadeIn 0.5s ease-out;

        svg {
            animation: pulse 3s infinite;
        }
    }
}

.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;

    &.available {
        background-color: var(--appointment-success-light);
        color: var(--appointment-success);
    }

    &.reserved {
        background-color: var(--appointment-danger-light);
        color: var(--appointment-danger);
    }

    &.break {
        background-color: var(--appointment-warning-light);
        color: var(--appointment-warning);
    }

    &.closed {
        background-color: #f3f4f6;
        color: #6b7280;
    }
}


@media (max-width: 768px) {
    .appointment-slot {
        margin-bottom: 0.5rem;
    }

    .appointment-details-panel {
        margin-top: 1rem;
    }
}


.appointment-loading {
    .appointment-slot {
        background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
        background-size: 200% 100%;
        animation: loading 2s infinite;
    }
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}


.appointment-header {
    .vet-info {
        transition: all 0.3s ease;

        &:hover {
            transform: scale(1.02);
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.1));
        }
    }
}


.appointment-slot:focus-within {
    outline: 2px solid var(--appointment-info);
    outline-offset: 2px;
}


@media (prefers-color-scheme: dark) {
    :root {
        --appointment-bg: #1f2937;
        --appointment-surface: #374151;
        --appointment-text: #f9fafb;
    }
}


/* Modal SelectPet Animations */
@keyframes slideInFromBottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutToBottom {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

@keyframes slideOutToRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.modal-entering {
    visibility: visible;
}

.modal-entering .modal-overlay {
    animation: fadeIn 0.3s ease-out forwards;
}

.modal-entering .modal-content {
    animation: slideInFromBottom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Para pantallas grandes - deslizar desde la derecha */
@media (min-width: 640px) {
    .modal-entering .modal-content {
        animation: slideInFromRight 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }
}

.modal-leaving .modal-overlay {
    animation: fadeOut 0.2s ease-in forwards;
}

.modal-leaving .modal-content {
    animation: slideOutToBottom 0.2s ease-in forwards;
}

@media (min-width: 640px) {
    .modal-leaving .modal-content {
        animation: slideOutToRight 0.2s ease-in forwards;
    }
}

/* Spinner de carga */
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e5e7eb;
    border-top: 4px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Loading skeleton */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 0.375rem;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Dark mode skeleton */
.dark .skeleton {
    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
    background-size: 200% 100%;
}

/* Dark mode spinner */
.dark .spinner {
    border-color: #4b5563;
    border-top-color: #60a5fa;
}

/* Mejoras adicionales */
.modal-content {
    /* Asegurar que el modal sea visible por defecto para las animaciones */
    opacity: 1;
    /* Mejorar el shadow en dark mode */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.dark .modal-content {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Transiciones suaves para el contenido interno */
.modal-content-transition {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Estados de carga para elementos internos */
.loading-placeholder {
    @apply skeleton h-4 mb-2;
}

.loading-placeholder.large {
    @apply h-8;
}

.loading-placeholder.small {
    @apply h-3;
}

/* Animación pulsante para botones importantes */
.pulse-important {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .7;
    }
}



.flash-border {
    position: relative;
    overflow: hidden;
}

/* SVG Check estilo Dropzone con círculo que se dibuja */
.flash-border::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    /* Por encima de su tarjeta, por debajo del overlay del modal (z-10).
       Con 9999 el resaltado se escapaba y tapaba modal y menú. */
    z-index: 2;
    pointer-events: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"><circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" stroke="%2322c55e" stroke-width="2"/><path class="checkmark__check" fill="none" stroke="%2322c55e" stroke-width="3" stroke-linecap="round" d="M14.1 27.2l7.1 7.2 16.7-16.8"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
    filter: drop-shadow(0 0 20px rgba(34, 197, 94, 0.6));
    animation: checkmark-appear 2.8s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

/* Borde con efectos de brillo mejorados */
.flash-border::after {
    content: "";
    position: absolute;
    inset: -2px;
    pointer-events: none;
    border: 5px solid #22c55e;
    border-radius: 12px;
    box-shadow:
            0 0 20px 4px rgba(34, 197, 94, 0.6),
            0 0 40px 8px rgba(34, 197, 94, 0.4),
            inset 0 0 20px rgba(34, 197, 94, 0.2),
            0 8px 32px rgba(34, 197, 94, 0.3);
    background: linear-gradient(
            135deg,
            rgba(34, 197, 94, 0.2) 0%,
            rgba(34, 197, 94, 0.1) 50%,
            rgba(34, 197, 94, 0.2) 100%
    );
    z-index: 1;
    animation: border-fade-pro 2.8s ease-out forwards;
}

/* Animación del SVG checkmark estilo Dropzone (2.8 segundos) */
@keyframes checkmark-appear {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    3% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
    6% {
        transform: translate(-50%, -50%) scale(0.95);
    }
    8% {
        transform: translate(-50%, -50%) scale(1);
    }
    92% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

/* Animación profesional del borde con pulsos (2.8 segundos) */
@keyframes border-fade-pro {
    0% {
        opacity: 0;
        transform: scale(0.95);
        border-width: 2px;
    }
    2% {
        opacity: 1;
        transform: scale(1);
        border-width: 5px;
    }
    4% {
        transform: scale(1.02);
        box-shadow:
                0 0 30px 8px rgba(34, 197, 94, 0.8),
                0 0 60px 12px rgba(34, 197, 94, 0.5),
                inset 0 0 30px rgba(34, 197, 94, 0.3);
    }
    6% {
        transform: scale(1);
    }
    10% {
        box-shadow:
                0 0 25px 6px rgba(34, 197, 94, 0.7),
                0 0 50px 10px rgba(34, 197, 94, 0.4),
                inset 0 0 25px rgba(34, 197, 94, 0.25);
    }
    92% {
        opacity: 1;
        border-width: 5px;
    }
    100% {
        opacity: 0;
        transform: scale(1.05);
        border-width: 1px;
        box-shadow:
                0 0 10px 2px rgba(34, 197, 94, 0.2),
                0 0 20px 4px rgba(34, 197, 94, 0.1);
    }
}

/* Versión con animación SVG stroke (requiere inline SVG en HTML) */
/* Si quieres el efecto de dibujo animado, usa este HTML:

<div class="flash-border flash-border--svg">
  <svg class="checkmark-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
    <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/>
    <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
  </svg>
</div>

*/

.flash-border--svg .checkmark-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0 0 20px rgba(34, 197, 94, 0.6));
    animation: checkmark-svg-appear 2.8s ease-out forwards;
}

.checkmark__circle {
    stroke: #22c55e;
    stroke-width: 2;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: stroke-circle 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark__check {
    stroke: #22c55e;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke-check 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
}

@keyframes stroke-circle {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes stroke-check {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes checkmark-svg-appear {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    2% {
        opacity: 1;
    }
    3% {
        transform: translate(-50%, -50%) scale(1.1);
    }
    6% {
        transform: translate(-50%, -50%) scale(0.95);
    }
    8% {
        transform: translate(-50%, -50%) scale(1);
    }
    92% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
}