/* ==========================================================================
   VetsClick UI — capa de estandarización
   Pegar en: public/css/vetsclick-ui.css
   Cargar DESPUÉS de bootstrap, semantic.min.css y app.css.
   Paleta tomada del logo: teal #02a8a8 (acción), mint #42e6a4 (positivo),
   navy #1e2b37 (chrome). Nada de esto pisa clases de Bootstrap/Semantic:
   todas las clases llevan prefijo .vc-
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root{
  /* marca */
  --vc-teal:#02a8a8;      --vc-teal-100:#e3f6f6;  --vc-teal-200:#bfe9e9;
  --vc-teal-700:#017e80;  --vc-teal-800:#046063;
  --vc-mint:#42e6a4;      --vc-mint-100:#e4fbf0;  --vc-mint-800:#0d6b48;
  --vc-navy:#1e2b37;      --vc-navy-soft:#2c3e50;

  /* texto y superficies */
  --vc-ink:#1e2b37;       --vc-ink-soft:#2c3e50;
  --vc-muted:#6b7c89;     --vc-muted-2:#98a7b0;
  --vc-ground:#f4f7f8;    --vc-surface:#fff;      --vc-surface-2:#f8fafb;

  /* líneas */
  --vc-line:#e3e9ec;      --vc-line-2:#eef2f4;
  --vc-line-3:#cfd8dd;    --vc-line-4:#dfe6ea;

  /* semánticos */
  --vc-warn:#f2a63b;      --vc-warn-100:#fdf1de;  --vc-warn-800:#8a5a12;
  --vc-danger:#e3342f;    --vc-danger-100:#fdeceb;--vc-danger-700:#c62a25;

  /* estados de cita (los mismos en tabla, calendario y ficha) */
  --vc-st-pendiente:var(--vc-warn);
  --vc-st-confirmada:var(--vc-teal);
  --vc-st-sala:var(--vc-mint);
  --vc-st-consulta:var(--vc-navy-soft);
  --vc-st-finalizada:var(--vc-muted-2);
  --vc-st-cancelada:var(--vc-danger);

  /* forma y ritmo */
  --vc-r-sm:6px; --vc-r:10px; --vc-r-lg:16px; --vc-r-pill:999px;
  --vc-h-control:40px;                 /* alto único de inputs y botones */
  --vc-h-control-touch:48px;           /* táctil: tablet y móvil */
  --vc-sh-1:0 1px 3px rgba(30,43,55,.07);
  --vc-sh-2:0 2px 10px rgba(30,43,55,.10);
  --vc-sh-3:0 18px 40px rgba(30,43,55,.22);
  --vc-font:'Nunito',system-ui,-apple-system,sans-serif;
}

/* --- 2. Base ------------------------------------------------------------- */
.vc-app,.vc-app input,.vc-app select,.vc-app textarea,.vc-app button{font-family:var(--vc-font)}
.vc-app{background:var(--vc-ground);color:var(--vc-ink);-webkit-font-smoothing:antialiased}
.vc-app a{color:var(--vc-teal);text-decoration:none}
.vc-app a:hover{color:var(--vc-teal-700);text-decoration:underline}
.vc-app *:focus-visible{outline:2px solid var(--vc-teal);outline-offset:2px}
.vc-app ::selection{background:var(--vc-teal-200)}
.vc-h1{font:800 24px/1.15 var(--vc-font);color:var(--vc-ink);margin:0}
.vc-h2{font:800 19px/1.2 var(--vc-font);color:var(--vc-ink);margin:0}
.vc-h3{font:800 16px/1.2 var(--vc-font);color:var(--vc-ink);margin:0}
.vc-eyebrow{font:800 10px/1 var(--vc-font);letter-spacing:.12em;text-transform:uppercase;color:var(--vc-muted)}
.vc-sub{font:13px/1.45 var(--vc-font);color:var(--vc-muted)}
.vc-num{font-variant-numeric:tabular-nums}

/* --- 3. Shell: sidebar + barra superior --------------------------------- */
.vc-shell{display:flex;min-height:100vh}
.vc-side{width:232px;flex:none;background:var(--vc-navy);display:flex;flex-direction:column;padding:18px 14px;gap:20px}
.vc-side__logo{height:56px;width:auto;margin:0 auto;display:block}
.vc-side__nav{display:flex;flex-direction:column;gap:2px}
.vc-side__link{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--vc-r);color:#9fb3c2;font:600 13.5px var(--vc-font);text-decoration:none}
.vc-side__link:hover{background:var(--vc-navy-soft);color:#fff;text-decoration:none}
.vc-side__link.is-active{background:var(--vc-teal);color:#fff;font-weight:800}
.vc-side__sep{height:1px;background:var(--vc-navy-soft);margin:12px 4px}
.vc-side__title{font:800 9.5px var(--vc-font);letter-spacing:.13em;text-transform:uppercase;color:#7fd8d8;padding:14px 12px 4px}
.vc-side__group{display:flex;align-items:center;gap:11px;width:100%;margin-top:10px;padding:10px 12px;border:0;border-radius:var(--vc-r);background:transparent;color:#9fb3c2;font:600 13.5px var(--vc-font);text-align:left;cursor:pointer}
.vc-side__group:hover{background:var(--vc-navy-soft);color:#fff}
.vc-side__group span{flex:1}
.vc-side__group .vc-side__chev{margin:0;transition:transform .15s}
.vc-side__group[aria-expanded="true"] .vc-side__chev{transform:rotate(180deg)}
.vc-side__sub{display:flex;flex-direction:column;gap:2px}
.vc-side__sub[hidden]{display:none}
.vc-side__foot{margin-top:auto}

/* selector de clínica: visible, con nombre y acción explícita */
.vc-clinic{background:var(--vc-navy-soft);border-radius:12px;padding:10px 12px;border:0;width:100%;text-align:left;cursor:pointer}
.vc-clinic__label{font:800 9.5px var(--vc-font);letter-spacing:.13em;text-transform:uppercase;color:#7fd8d8;margin-bottom:7px}
.vc-clinic__row{display:flex;align-items:center;gap:9px}
.vc-clinic__badge{width:28px;height:28px;border-radius:9px;background:var(--vc-mint);color:#0d3b2b;display:grid;place-items:center;font:800 11px var(--vc-font);flex:none}
.vc-clinic__name{font:700 13px/1.25 var(--vc-font);color:#fff;flex:1}
.vc-clinic__cta{font:700 11.5px var(--vc-font);color:var(--vc-mint);margin-top:8px}
/* versión clara, para la barra superior en tablet/móvil */
.vc-clinic--light{background:var(--vc-surface);border:1px solid var(--vc-line-4);border-radius:12px;display:flex;align-items:center;gap:10px;height:44px;padding:0 12px}
.vc-clinic--light .vc-clinic__name{color:var(--vc-ink)}
.vc-clinic--light .vc-clinic__badge{background:var(--vc-teal);color:#fff}

.vc-main{flex:1;display:flex;flex-direction:column;min-width:0}
.vc-topbar{background:var(--vc-surface);border-bottom:1px solid var(--vc-line);padding:14px 24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.vc-topbar__title{margin-right:auto}
.vc-content{padding:20px 24px 28px;flex:1;min-width:0}

/* --- 4. Botones ---------------------------------------------------------- */
/* !important en las 4 propiedades que Semantic sigue pisando cuando un boton
   conserva clases suyas (.ui.button, 2 selectores de clase) ademas de .vc-btn
   (1 solo): con esa combinacion Semantic gana por especificidad en radio,
   relleno y tipografia aunque .vc-btn se cargue despues en el HTML, dejando
   los botones mas cuadrados y con otra fuente que en el mockup. */
.vc-btn{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;height:var(--vc-h-control);padding:0 18px!important;border-radius:var(--vc-r)!important;border:1px solid transparent!important;font:700 14px var(--vc-font)!important;cursor:pointer;transition:background .12s,border-color .12s,color .12s;white-space:nowrap}
.vc-btn:disabled{opacity:.45;cursor:not-allowed}
.vc-input:disabled{background:var(--vc-surface-2);color:var(--vc-muted);cursor:not-allowed}
/* !important en color: cuando el boton es un <a> (p.ej. "Inventario", los
   nuevos de la landing), .vc-app a{color:var(--vc-teal)} (1 clase + 1
   elemento) le gana en especificidad a estos modificadores (1 sola clase),
   dejando texto teal sobre fondo teal en .vc-btn--primary -- invisible. */
.vc-btn--primary,.ui.button.vc-btn--primary{background:var(--vc-teal)!important;color:#fff!important}
.vc-btn--primary:hover,.ui.button.vc-btn--primary:hover{background:var(--vc-teal-700)!important}
.vc-btn--primary:active,.ui.button.vc-btn--primary:active{background:var(--vc-teal-800)!important}
.vc-btn--secondary{background:var(--vc-surface)!important;border-color:var(--vc-line-3)!important;color:var(--vc-ink-soft)!important}
.vc-btn--secondary:hover{background:var(--vc-teal-100)!important;border-color:var(--vc-teal-200)!important;color:var(--vc-teal-800)!important}
.vc-btn--ghost{background:transparent!important;color:var(--vc-teal)!important;padding:0 14px!important}
.vc-btn--ghost:hover{background:var(--vc-teal-100)!important}
.vc-btn--danger{background:var(--vc-danger-100)!important;border-color:#f6cfcd!important;color:var(--vc-danger-700)!important}
.vc-btn--danger:hover{background:var(--vc-danger)!important;border-color:var(--vc-danger)!important;color:#fff!important}
.vc-btn--icon{width:var(--vc-h-control);padding:0!important;background:var(--vc-surface);border-color:var(--vc-line-3)!important;color:var(--vc-ink-soft)}
/* Semantic siempre le pone margin-right a <i class="...icon"> (i.icon{margin:0
   .25rem 0 0}), pensado para dejarle espacio a un texto al lado. En un boton
   .vc-btn--icon no hay texto, asi que ese margen descentra el icono dentro
   del cuadrado -- se ve "mal posicionado" (Editar/Eliminar en las tablas,
   Cerrar/Imprimir en los modales, etc.) */
.vc-btn--icon i.icon{margin:0}
.vc-btn--icon:hover{background:var(--vc-teal-100);border-color:var(--vc-teal-200)!important}
.vc-btn--block{width:100%}
.vc-btn--sm{height:34px;padding:0 13px!important;font-size:12.5px!important}
.vc-btn--lg{height:50px;padding:0 22px!important;font-size:15px!important}
.vc-btn--icon.vc-btn--sm{width:34px;padding:0!important}
.vc-btn svg{width:16px;height:16px;stroke-width:1.8;flex:none}
/* Una sola acción primaria por pantalla. Nunca tres botones sólidos en una fila. */

/* --- 5. Chips de estado -------------------------------------------------- */
.vc-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:var(--vc-r-pill);font:700 12px var(--vc-font);background:#f1f4f6;color:var(--vc-ink-soft);white-space:nowrap}
/* Chip enlazado (VETSCLICK-178): conserva el color del chip frente a .vc-app a */
.vc-app a.vc-chip{color:var(--vc-ink-soft);text-decoration:none;cursor:pointer;transition:filter .12s}
.vc-app a.vc-chip:hover{text-decoration:none;filter:brightness(.93)}
@media (max-width:640px){.vc-app a.vc-chip{min-height:32px}}
.vc-chip__dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.vc-chip--pendiente{background:var(--vc-warn-100);color:var(--vc-warn-800)}
.vc-chip--pendiente  .vc-chip__dot{background:var(--vc-st-pendiente)}
.vc-chip--confirmada{background:var(--vc-teal-100);color:var(--vc-teal-800)}
.vc-chip--confirmada .vc-chip__dot{background:var(--vc-st-confirmada)}
.vc-chip--sala{background:var(--vc-mint-100);color:var(--vc-mint-800)}
.vc-chip--sala       .vc-chip__dot{background:var(--vc-st-sala)}
.vc-chip--consulta{background:#e8edf1;color:var(--vc-navy-soft)}
.vc-chip--consulta   .vc-chip__dot{background:var(--vc-st-consulta)}
.vc-chip--finalizada{background:#f1f4f6;color:#5c6b76}
.vc-chip--finalizada .vc-chip__dot{background:var(--vc-st-finalizada)}
.vc-chip--cancelada{background:var(--vc-danger-100);color:var(--vc-danger-700)}
.vc-chip--cancelada  .vc-chip__dot{background:var(--vc-st-cancelada)}
.vc-chip--filter{height:28px;padding:0 6px 0 11px;background:var(--vc-teal-100);color:var(--vc-teal-800);cursor:pointer}
.vc-chip--count{background:#f1f4f6;color:var(--vc-muted);height:22px;padding:0 9px;font-size:11.5px}
/* "Activa" (mascota con dueño, mockup 1a) -- las tablas de Mascotas/Padres/
   Consultas no tienen estados propios en vetsclick-ui.css todavia. */
.vc-chip--activa{background:var(--vc-mint-100);color:var(--vc-mint-800)}
.vc-app a.vc-chip--activa{color:var(--vc-mint-800)}
.vc-chip--activa .vc-chip__dot{background:var(--vc-mint)}

/* Avatar circular con iniciales para filas de tabla (Mascotas/Padres/
   Consultas, mockup 1a/5c/5d): el color de fondo refleja el estado de la
   fila, igual que el mockup (verde/teal si esta "bien", gris neutro si no
   aplica un estado especial). */
.vc-avatar-row{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font:800 11px var(--vc-font);flex:none}
.vc-avatar-row--teal{background:var(--vc-teal-100);color:var(--vc-teal)}
.vc-avatar-row--neutral{background:#e8edf1;color:var(--vc-ink-soft)}

/* Menu "..." por fila (regla del sistema: nunca 3 botones de color por fila,
   pasan a un menu). <details>/<summary> nativos -- sin JS nuevo por fila. */
.vc-menu{position:relative;display:inline-block}
.vc-menu>summary{list-style:none;cursor:pointer}
.vc-menu>summary::-webkit-details-marker{display:none}
.vc-menu[open]>summary .vc-btn--icon{background:var(--vc-line-2)}
.vc-menu__list{position:absolute;right:0;top:calc(100% + 4px);background:var(--vc-surface);border:1px solid var(--vc-line-3);border-radius:10px;box-shadow:var(--vc-sh-3);min-width:150px;z-index:20;overflow:hidden;padding:6px;display:flex;flex-direction:column;gap:2px}
.vc-menu__item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:0;background:transparent;font:700 13px var(--vc-font);color:var(--vc-ink);text-align:left;cursor:pointer;border-radius:7px;text-decoration:none;white-space:nowrap}
.vc-menu__item:hover{background:var(--vc-teal-100);color:var(--vc-teal-800)}
.vc-menu__item--danger:hover{background:var(--vc-danger-100);color:var(--vc-danger-700)}

/* --- 6. Formularios ------------------------------------------------------ */
.vc-form{display:grid;gap:16px}
.vc-form--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.vc-form--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.vc-form--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.vc-form__full{grid-column:1/-1}
.vc-field>label{display:block;font:700 12.5px var(--vc-font);color:var(--vc-ink-soft);margin-bottom:6px}
.vc-input,.vc-select,.vc-textarea{width:100%;box-sizing:border-box;height:var(--vc-h-control);padding:0 12px;border:1px solid var(--vc-line-3);border-radius:var(--vc-r);background:var(--vc-surface);font:14px var(--vc-font);color:var(--vc-ink)}
.vc-textarea{height:auto;min-height:80px;padding:10px 12px;resize:vertical}
.vc-input::placeholder,.vc-textarea::placeholder{color:var(--vc-muted-2)}
.vc-input:hover,.vc-select:hover,.vc-textarea:hover{border-color:var(--vc-muted-2)}
.vc-input:focus,.vc-select:focus,.vc-textarea:focus{border-color:var(--vc-teal);box-shadow:0 0 0 3px var(--vc-teal-100);outline:none}
.vc-select,select.vc-input{appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b7c89' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.vc-help{font:12px/1.4 var(--vc-font);color:var(--vc-muted);margin-top:5px}
.vc-error{display:flex;align-items:center;gap:5px;font:700 12px/1.4 var(--vc-font);color:var(--vc-danger-700);margin-top:5px}
.list.error{padding-left:0}
.vc-field.is-invalid .vc-input,.vc-field.is-invalid .vc-select{border:1.5px solid var(--vc-danger)}
/* segmentado, switch, checkbox */
.vc-seg{display:inline-flex;border:1px solid var(--vc-line-3);border-radius:var(--vc-r);overflow:hidden;background:var(--vc-surface);height:var(--vc-h-control)}
/* display:inline-flex + gap (no el "grid;place-items:center" original):
   la ficha de mascota (VETSCLICK-62, 4a) le agrega un .vc-chip--count a cada
   pestaña ("Vacunas 6") y sin gap el numero quedaba pegado al texto. No
   afecta a los .vc-seg de solo texto (Rejilla/Tablero/Mes/Agenda en
   citas.blade.php): un solo nodo de texto se centra igual con inline-flex. */
.vc-seg__opt{padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font:700 13px var(--vc-font);color:var(--vc-muted);border:0;border-left:1px solid var(--vc-line-3);background:transparent;cursor:pointer}
.vc-seg__opt:first-child{border-left:0}
.vc-seg__opt:hover{background:var(--vc-teal-100);color:var(--vc-teal-800)}
.vc-seg__opt.is-active{background:var(--vc-teal);color:#fff}
.vc-switch{width:40px;height:23px;border-radius:var(--vc-r-pill);background:var(--vc-line-3);position:relative;display:inline-block;cursor:pointer;transition:background .15s}
.vc-switch::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;transition:left .15s}
.vc-switch.is-on{background:var(--vc-teal)}
.vc-switch.is-on::after{left:20px}
.vc-check{width:18px;height:18px;border-radius:var(--vc-r-sm);border:1.5px solid var(--vc-line-3);background:var(--vc-surface);display:inline-grid;place-items:center;cursor:pointer}
.vc-check.is-on{border-color:var(--vc-teal);background:var(--vc-teal)}
.vc-check.is-on::after{content:"";width:10px;height:6px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg) translateY(-1px)}
.vc-choice{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font:14px/1.5 var(--vc-font);color:var(--vc-ink)}
.vc-choice__input{position:absolute;opacity:0;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vc-choice .vc-check,.vc-choice .vc-switch{flex:none;transition:background .15s,border-color .15s,box-shadow .15s}
.vc-choice .vc-check{align-self:flex-start;margin-top:calc((1.5em - 18px) / 2)}
.vc-choice__input:checked + .vc-check{border-color:var(--vc-teal);background:var(--vc-teal)}
.vc-choice__input:checked + .vc-check::after{content:"";width:10px;height:6px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg) translateY(-1px)}
.vc-choice__input:checked + .vc-switch{background:var(--vc-teal)}
.vc-choice__input:checked + .vc-switch::after{left:20px}
.vc-choice__input:focus-visible + .vc-check,.vc-choice__input:focus-visible + .vc-switch{box-shadow:0 0 0 3px var(--vc-teal-100)}
.vc-choice__input:disabled + .vc-check,.vc-choice__input:disabled + .vc-switch{opacity:.5;cursor:not-allowed}
label.vc-seg__opt{margin:0;cursor:pointer;user-select:none}
.vc-seg__opt:has(.vc-choice__input:focus-visible){box-shadow:inset 0 0 0 2px var(--vc-teal-800)}

/* Pestañas planas (ficha de mascota, VETSCLICK-62 4a): mismo submenu de
   Vacunas/Historial medico/Recetas del mockup -- no es el .vc-seg de botones
   segmentados (eso es para Rejilla/Tablero/Mes/Agenda). La activa se marca
   con color+box-shadow inset (una linea de 3px abajo, sin mover el layout
   como haria un border-bottom real), no con fondo solido. */
.vc-tabs-flat{display:flex;gap:26px;flex-wrap:wrap}
.vc-tabs-flat__opt{padding:0 2px 12px;font:700 14px var(--vc-font);color:var(--vc-muted);background:transparent;border:0;cursor:pointer}
.vc-tabs-flat__opt.is-active{font-weight:800;color:var(--vc-teal);box-shadow:inset 0 -3px 0 var(--vc-teal)}
.vc-tabs-flat__count{font-size:12px;color:var(--vc-muted);margin-left:3px}

/* Pares etiqueta/valor de solo lectura (PERFIL y RESPONSABLE de la misma
   ficha): el mockup los muestra como texto plano, no como <input readonly>
   dentro de una caja -- eso se quedo reservado para formularios que si se
   editan directo (Nueva/Editar mascota). */
.vc-kv__label{font:700 10.5px var(--vc-font);letter-spacing:.07em;text-transform:uppercase;color:var(--vc-muted);margin-bottom:2px}
.vc-kv__value{color:var(--vc-ink);font:14px/1.4 var(--vc-font)}

/* --- 7. Tarjetas y tablas ------------------------------------------------ */
.vc-card{background:var(--vc-surface);border:1px solid var(--vc-line);border-radius:12px}
.vc-card--pad{padding:18px 20px}
.vc-panel{background:var(--vc-surface);border:1px solid var(--vc-line);border-radius:12px;overflow:hidden}
.vc-panel__head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--vc-line-2);flex-wrap:wrap}
.vc-panel__tools{margin-left:auto;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.vc-panel__filters{display:flex;align-items:center;gap:8px;padding:10px 18px;background:var(--vc-surface-2);border-bottom:1px solid var(--vc-line-2);flex-wrap:wrap}
.vc-panel__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;background:var(--vc-surface-2);border-top:1px solid var(--vc-line-2);font:13px var(--vc-font);color:var(--vc-muted);flex-wrap:wrap}

.vc-search{position:relative}
.vc-search .vc-input{padding-left:34px;height:38px}
.vc-search::before{content:"";position:absolute;left:11px;top:11px;width:16px;height:16px;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b7c89' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='7.3' cy='7.3' r='4.7'/%3E%3Cpath d='m13.3 13.3-2.3-2.3'/%3E%3C/svg%3E") no-repeat center}

.vc-table{width:100%;border-collapse:collapse;font:13.5px var(--vc-font);color:var(--vc-ink)}
.vc-table th{padding:9px 12px;text-align:left;font:800 11px var(--vc-font);letter-spacing:.06em;text-transform:uppercase;color:var(--vc-muted);background:var(--vc-surface);white-space:nowrap}
.vc-table th.is-sortable{cursor:pointer}
.vc-table th.is-sorted{color:var(--vc-teal-800)}
.vc-table td{padding:11px 12px;border-top:1px solid var(--vc-line-2);vertical-align:middle}
.vc-table td.vc-td--fecha{white-space:nowrap}
.vc-table tbody tr:hover{background:var(--vc-surface-2)}
.vc-table tbody tr.is-selected{background:#f3fbfb}
.vc-table th:first-child,.vc-table td:first-child{padding-left:18px}
.vc-table th:last-child,.vc-table td:last-child{padding-right:18px;text-align:right}
.vc-table--compact td{padding:8px 12px}
.vc-avatar{width:32px;height:32px;border-radius:var(--vc-r);background:var(--vc-teal-100);color:var(--vc-teal);display:grid;place-items:center;font:800 12px var(--vc-font);flex:none}
.vc-cell{display:flex;align-items:center;gap:10px}
.vc-cell__sub{display:block;font-size:12.5px;color:var(--vc-muted)}
.vc-pager{display:flex;gap:6px;align-items:center}
.vc-pager__i{min-width:32px;height:32px;padding:0 6px;border:1px solid var(--vc-line-4);border-radius:9px;background:var(--vc-surface);display:grid;place-items:center;font:700 13px var(--vc-font);color:var(--vc-ink-soft);cursor:pointer}
.vc-pager__i:hover{background:var(--vc-teal-100);border-color:var(--vc-teal-200)}
.vc-pager__i.is-active{background:var(--vc-teal);border-color:var(--vc-teal);color:#fff!important}
.vc-pager__i.is-disabled{color:var(--vc-muted-2);cursor:not-allowed;background:var(--vc-surface)}
.vc-empty{padding:52px 24px;text-align:center}
.vc-empty__art{width:96px;height:96px;margin:0 auto 16px;border-radius:var(--vc-r-lg);background:var(--vc-teal-100);display:grid;place-items:center}
.vc-empty__title{font:800 16px var(--vc-font);color:var(--vc-ink);margin-bottom:6px}
.vc-empty__text{font:13.5px/1.5 var(--vc-font);color:var(--vc-muted);max-width:38ch;margin:0 auto 16px}

/* --- 8. Modal, drawer y sheet ------------------------------------------- */
.vc-backdrop{position:fixed;inset:0;background:rgba(30,43,55,.42);z-index:1000;display:grid;place-items:center;padding:26px}
.vc-modal{background:var(--vc-surface);border-radius:14px;box-shadow:var(--vc-sh-3);width:100%;max-width:560px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.vc-modal--wide{max-width:820px}
.vc-modal__head{display:flex;align-items:flex-start;gap:12px;padding:18px 20px 14px;border-bottom:1px solid var(--vc-line-2)}
.vc-modal__icon{width:38px;height:38px;border-radius:11px;background:var(--vc-teal-100);color:var(--vc-teal);display:grid;place-items:center;flex:none}
.vc-modal__title{font:800 17px/1.2 var(--vc-font);color:var(--vc-ink)}
.vc-modal__sub{font:13px/1.3 var(--vc-font);color:var(--vc-muted)}
.vc-modal__x{width:32px;height:32px;border:0;background:transparent;border-radius:9px;color:var(--vc-muted);cursor:pointer;display:grid;place-items:center;margin-left:auto}
.vc-modal__x:hover{background:var(--vc-line-2);color:var(--vc-ink)}
.vc-modal__body{padding:18px 20px;overflow:auto}
/* VETSCLICK-186: Semantic pone display:block en linea al abrir (.ui.modal), asi que el flex de .vc-modal no
   aplica y el pie quedaba fuera del 90vh recortado. Aqui el scroll lo hace el cuerpo y un modal que abre
   encima de otro (.second) baja un poco para no tapar el titulo del de abajo. */
.ui.modal.vc-modal{max-height:none;overflow:visible}
.ui.modal.vc-modal>.vc-modal__body{max-height:calc(100vh - 210px);max-height:calc(100dvh - 210px);overflow:auto}
.ui.modal.vc-modal.second{margin-top:12vh!important}
/* El mockup agrupa Cancelar+Guardar juntos a la derecha del pie (nunca
   Cancelar a la izquierda y Guardar solo al otro extremo), asi que el pie
   empuja todo el grupo a la derecha; una nota/hora a la izquierda (si la
   hay) usa margin-right:auto para quedarse pegada al borde opuesto. */
.vc-modal__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px;padding:14px 20px;background:var(--vc-surface-2);border-top:1px solid var(--vc-line-2)}
.vc-modal__foot>.vc-modal__note{font:12.5px var(--vc-font);color:var(--vc-muted);margin-right:auto}
/* VETSCLICK-177: acciones de la cita a la izquierda del pie; Cancelar/Guardar a la derecha; si no caben, baja a otra fila */
.vc-modal__foot>.vc-modal__acciones{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-right:auto}

.vc-steps{display:flex;gap:6px;margin-top:12px}
.vc-steps__b{height:4px;flex:1;border-radius:var(--vc-r-pill);background:var(--vc-line-4)}
.vc-steps__b.is-done{background:var(--vc-teal)}
.vc-steps__labels{display:flex;gap:16px;margin-top:10px;font:700 12px var(--vc-font);color:var(--vc-muted-2)}
.vc-steps__labels .is-current{color:var(--vc-teal)}
/* Tarjeta de elección (asistente «Nueva mascota/cita» y «Asignar mascota» de Responsables; antes scoped en el asistente) */
.vc-pick{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--vc-line);border-radius:12px;cursor:pointer;background:var(--vc-surface)}
.vc-pick.is-on{border-color:var(--vc-teal);background:var(--vc-teal-100);cursor:default}
.vc-pick__name{font:800 14px var(--vc-font);color:var(--vc-ink)}
.vc-pick__foto{width:40px;height:40px;border-radius:10px;object-fit:cover;flex:none}
.vc-pick__meta{font:13px var(--vc-font);color:var(--vc-muted)}
/* Regla: hasta 6 campos -> .vc-modal. Más de 6, o con búsqueda de otro registro -> .vc-modal--wide con pasos
   (.vc-modal__head--pasos) que no se cierra con clic fuera y pide confirmar si hay avance
   (resources/js/mixins/cierreConfirmado.js). Desde VETSCLICK-165 los asistentes «Nueva mascota», «Nueva cita»
   y «Nueva consulta» van así, y desde VETSCLICK-164 también «Asignar responsable» (ficha) y «Asignar mascota»
   (Responsables); ya no hay panel lateral. */

/* --- 9. Calendario: rejilla (FullCalendar) ------------------------------- */
.vc-cal{background:var(--vc-surface);border:1px solid var(--vc-line);border-radius:var(--vc-r-lg);overflow:hidden}
.vc-cal .fc{--fc-border-color:var(--vc-line-2);--fc-page-bg-color:var(--vc-surface);
  --fc-today-bg-color:#f8fdfd;--fc-now-indicator-color:var(--vc-danger);
  --fc-neutral-bg-color:var(--vc-surface-2);font-family:var(--vc-font)}
.vc-cal .fc .fc-toolbar.fc-header-toolbar{display:none} /* la barra la controla la app, no FullCalendar */
.vc-cal .fc .fc-col-header-cell{background:var(--vc-surface);padding:10px 8px}
.vc-cal .fc .fc-col-header-cell-cushion{font:800 13px var(--vc-font);color:var(--vc-ink);text-decoration:none}
.vc-cal .fc .fc-timegrid-slot{height:34px;border-color:var(--vc-line-2)}
.vc-cal .fc .fc-timegrid-slot-minor{border-top-style:solid;border-top-color:#f6f8f9}
.vc-cal .fc .fc-timegrid-axis-cushion,.vc-cal .fc .fc-timegrid-slot-label-cushion{font:700 11px var(--vc-font);color:var(--vc-muted-2)}
.vc-cal .fc .fc-timegrid-col.fc-day-today{background:#f8fdfd}
/* FullCalendar v4 real (v5+ usa fc-timegrid-col arriba): el "hoy" por defecto
   se pinta amarillo (.fc-unthemed td.fc-today{background:#fcf8e3}); el mockup
   no distingue el dia de hoy con color de fondo, solo con la linea roja de
   "ahora" (nowIndicator). */
.vc-cal .fc-unthemed td.fc-today{background:var(--vc-surface)}
.vc-cal .fc .fc-daygrid-day-number{font:700 12px var(--vc-font);color:var(--vc-ink-soft);text-decoration:none}
.vc-cal .fc .fc-highlight{background:rgba(2,168,168,.10);border:2px dashed var(--vc-teal);border-radius:9px}
.vc-cal .fc .fc-event{border:0;background:transparent;box-shadow:none}
.vc-cal .fc .fc-event-main{padding:0}
.vc-cal .fc .fc-timegrid-event{border-radius:9px;overflow:hidden}
.vc-cal .fc .fc-timegrid-event .fc-event-main{border-radius:9px}
.vc-cal .fc .fc-non-business{background:repeating-linear-gradient(45deg,#e8edf1 0 5px,#f4f7f8 5px 10px)}

/* pinta el evento con eventClassNames: ['vc-ev','vc-ev--'+cita.estado].
   .fc-event-main es la clase de FullCalendar v5+; este proyecto usa
   @fullcalendar/core 4.4.0, cuyo DOM real es .fc-content — se listan ambas
   para no depender de la version instalada. */
.vc-ev .fc-event-main,.vc-ev .fc-content{padding:6px 9px;border-radius:9px;background:var(--vc-teal-100);border-left:3px solid var(--vc-teal);color:var(--vc-ink)}
.vc-ev__title{font:800 12.5px/1.2 var(--vc-font);color:inherit;display:block}
.vc-ev__meta{font:11.5px/1.3 var(--vc-font);opacity:.85;display:block}
/* VETSCLICK-163: etiqueta de una cita agendada en sobrecupo (rejilla) */
.vc-ev__tag{display:inline-block;margin-left:6px;padding:0 6px;border-radius:var(--vc-r-pill);background:rgba(255,255,255,.85);color:var(--vc-danger-700);font:800 9.5px/14px var(--vc-font);text-transform:uppercase;letter-spacing:.03em;vertical-align:middle}
/* VETSCLICK-163: aviso de choque de agenda dentro del modal de la cita */
.vc-conflicto{border:1px solid #f6cfcd;background:#fff;border-radius:var(--vc-r);padding:14px}
.vc-conflicto__msg{background:var(--vc-danger-100);color:var(--vc-danger-700);font:700 13px/1.4 var(--vc-font);border-radius:var(--vc-r-sm);padding:10px 12px;margin-bottom:10px}
.vc-conflicto__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.vc-conflicto__chips .vc-chip{border:0;cursor:pointer}
.vc-ev--pendiente  .fc-event-main,.vc-ev--pendiente  .fc-content{background:var(--vc-warn-100);border-left-color:var(--vc-st-pendiente);color:var(--vc-warn-800)}
.vc-ev--confirmada .fc-event-main,.vc-ev--confirmada .fc-content{background:var(--vc-teal-100);border-left-color:var(--vc-st-confirmada);color:var(--vc-teal-800)}
.vc-ev--sala       .fc-event-main,.vc-ev--sala       .fc-content{background:var(--vc-mint-100);border-left-color:var(--vc-st-sala);color:var(--vc-mint-800)}
.vc-ev--consulta   .fc-event-main,.vc-ev--consulta   .fc-content{background:var(--vc-navy-soft);border-left-color:var(--vc-navy);color:#fff}
.vc-ev--finalizada .fc-event-main,.vc-ev--finalizada .fc-content{background:#f1f4f6;border-left-color:var(--vc-st-finalizada);color:#5c6b76}
.vc-ev--cancelada  .fc-event-main,.vc-ev--cancelada  .fc-content{background:var(--vc-danger-100);border-left-color:var(--vc-st-cancelada);color:var(--vc-danger-700)}
.vc-ev--cancelada  .vc-ev__title{text-decoration:line-through}
.vc-ev--bloqueo    .fc-event-main,.vc-ev--bloqueo    .fc-content{background:repeating-linear-gradient(45deg,#e8edf1 0 5px,#f4f7f8 5px 10px);border:1px dashed var(--vc-line-3);border-left-width:1px;color:var(--vc-muted);display:grid;place-items:center;font-weight:700}
.vc-ev.fc-event-mirror .fc-event-main,.vc-ev.fc-event-mirror .fc-content{opacity:.75}
.vc-cal-legend{display:flex;align-items:center;gap:16px;font:12.5px var(--vc-font);color:var(--vc-muted);flex-wrap:wrap}
.vc-cal-legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:6px}

/* columna por veterinario (cabecera propia, encima de la rejilla) */
.vc-vet-head{display:flex;align-items:center;gap:9px;padding:10px 12px;border-left:1px solid var(--vc-line-2)}
.vc-vet-head__av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:800 11px var(--vc-font);background:var(--vc-teal-100);color:var(--vc-teal)}
.vc-vet-head__name{font:800 13px/1.2 var(--vc-font);color:var(--vc-ink)}
.vc-vet-head__meta{font:11.5px var(--vc-font);color:var(--vc-muted)}

/* popover de cita (mismo contenido que el sheet móvil) */
.vc-pop{width:264px;background:var(--vc-surface);border:1px solid var(--vc-line);border-radius:14px;box-shadow:0 16px 38px rgba(30,43,55,.22);overflow:hidden;z-index:20}
.vc-pop__head{display:flex;gap:11px;padding:14px 15px 12px}
.vc-pop__ph{width:52px;height:52px;border-radius:12px;background:var(--vc-line-2);border:1px dashed var(--vc-line-3);display:grid;place-items:center;font:700 9px var(--vc-font);color:var(--vc-muted-2);text-align:center;flex:none}
.vc-pop__name{font:800 15px/1.2 var(--vc-font);color:var(--vc-ink)}
.vc-pop__sub{font:12px/1.35 var(--vc-font);color:var(--vc-muted)}
.vc-pop__body{padding:0 15px 12px;display:grid;gap:7px;font:12.5px/1.35 var(--vc-font);color:var(--vc-ink-soft)}
.vc-pop__row{display:flex;gap:8px}
.vc-pop__row>span:first-child{color:var(--vc-muted-2);width:64px;flex:none}
.vc-pop__foot{display:flex;gap:8px;padding:11px 15px;background:var(--vc-surface-2);border-top:1px solid var(--vc-line-2)}

/* --- 10. Calendario: tablero del día ------------------------------------ */
.vc-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:start}
.vc-ficha-grid{margin-bottom:16px}
.vc-ficha-grid__main{min-width:0}
/* VETSCLICK-248: Perfil y Responsable dentro del encabezado, en dos mitades; por debajo de 1024px uno arriba del otro */
.vc-ficha-datos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:20px}
.vc-ficha-datos>.vc-panel{box-shadow:none;border:1px solid var(--vc-line);min-width:0}
.vc-ficha-perfil{display:grid;grid-template-columns:1fr 1fr;gap:13px 14px}
.vc-ficha-tabs--cabecera{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.vc-ficha-tabs--cabecera::-webkit-scrollbar{display:none}
.vc-ficha-tabs--cabecera .vc-tabs-flat__opt{white-space:nowrap;flex:none}
.vc-ficha-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.vc-ficha-kpis--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.vc-ficha-kpi{border:1px solid var(--vc-line);border-radius:var(--vc-r);padding:12px 14px;background:var(--vc-surface);min-width:0}
.vc-ficha-kpi__v{font:800 22px/1.1 var(--vc-font);color:var(--vc-ink);font-variant-numeric:tabular-nums}
.vc-ficha-kpi__v--ok{color:var(--vc-mint-800)}
.vc-ficha-kpi__v--mal{color:var(--vc-danger-700)}
.vc-ficha-kpi__l{font:700 11.5px var(--vc-font);color:var(--vc-muted);margin-top:4px}
/* resumen de lealtad: en el encabezado (por mascota) y en el Responsable (por cliente) */
.vc-lealtad{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:4px;min-width:0}
.vc-ficha-head .vc-lealtad{grid-column:2}
.vc-lealtad__titulo{margin:0}
.vc-lealtad__item{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.vc-lealtad__sellos{display:inline-flex;gap:3px;margin-left:6px;flex-wrap:wrap}
.vc-lealtad__sellos i{width:9px;height:9px;border-radius:9px;border:1.5px dashed var(--vc-line-3)}
.vc-lealtad__sellos i.on{background:var(--vc-teal);border:1.5px solid var(--vc-teal)}
@media (max-width:1023px){
  .vc-ficha-datos{grid-template-columns:1fr}
  .vc-ficha-perfil{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* las tablas de la ficha pasan a tarjetas antes que el resto (mismas reglas que en celular) */
  .vc-ficha-grid__main .vc-table--cards thead{display:none}
  .vc-ficha-grid__main .vc-table--cards tr{display:block;background:var(--vc-surface);border:1px solid var(--vc-line);border-radius:12px;margin-bottom:10px;padding:6px 4px}
  .vc-ficha-grid__main .vc-table--cards td{display:flex;justify-content:space-between;gap:12px;border:0;padding:7px 12px;text-align:left}
  .vc-ficha-grid__main .vc-table--cards td::before{content:attr(data-label);font:800 11px var(--vc-font);letter-spacing:.05em;text-transform:uppercase;color:var(--vc-muted-2)}
  .vc-ficha-grid__main .vc-table--cards td:first-child,.vc-ficha-grid__main .vc-table--cards td:last-child{padding-left:12px;padding-right:12px;text-align:left}
}
@media (max-width:767px){.vc-ficha-kpis,.vc-ficha-kpis--3{grid-template-columns:repeat(2,minmax(0,1fr))}.vc-ficha-head .vc-lealtad{grid-column:1 / -1}.vc-lealtad .vc-chip{flex-wrap:wrap;height:auto;white-space:normal;padding-top:5px;padding-bottom:5px;row-gap:5px}.vc-lealtad__sellos{flex-basis:100%;margin-left:0}}
@media (max-width:599px){.vc-ficha-perfil{grid-template-columns:1fr 1fr}}
.vc-ficha-head{display:grid;grid-template-columns:120px 1fr;column-gap:20px;row-gap:8px;align-items:start}
.vc-ficha-head__foto{grid-row:1 / span 4;width:120px;height:120px;border-radius:12px;object-fit:cover}
.vc-ficha-head__titulo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.vc-ficha-head__datos{color:var(--vc-muted);font:14px/1.5 var(--vc-font);min-width:0}
.vc-ficha-head__linea{display:flex;flex-wrap:wrap;column-gap:5px}
.vc-ficha-head__linea span{white-space:nowrap}
.vc-ficha-head__ids{display:flex;flex-wrap:wrap;gap:8px}
.vc-ficha-head__id{white-space:nowrap;background:var(--vc-line-2);border-radius:8px;padding:3px 10px;font:13px var(--vc-font);color:var(--vc-muted)}
.vc-ficha-head__id b{color:var(--vc-ink)}
.vc-ficha-head__acciones{display:flex;flex-wrap:wrap;gap:8px}
.vc-board__col{display:flex;flex-direction:column;min-width:0}
.vc-board__head{display:flex;align-items:center;gap:8px;padding:0 4px 11px}
.vc-board__title{font:800 13.5px var(--vc-font);color:var(--vc-ink)}
.vc-board__list{background:#eef2f4;border-radius:var(--vc-r-lg);padding:10px;display:flex;flex-direction:column;gap:10px;min-height:120px}
.vc-board__drop{border:1.5px dashed var(--vc-line-3);border-radius:12px;padding:13px;text-align:center;font:700 11.5px var(--vc-font);color:var(--vc-muted-2)}
.vc-board__list.is-over .vc-board__drop{border-color:var(--vc-teal);color:var(--vc-teal-800);background:var(--vc-teal-100)}
.vc-tcard{background:var(--vc-surface);border-radius:12px;padding:11px 12px;box-shadow:var(--vc-sh-1);border-left:3px solid var(--vc-line-3);cursor:grab}
.vc-tcard--pendiente{border-left-color:var(--vc-st-pendiente)}
.vc-tcard--sala{border-left-color:var(--vc-st-sala)}
.vc-tcard--consulta{border-left-color:var(--vc-st-consulta)}
.vc-tcard--cobrar{border-left-color:var(--vc-st-confirmada)}
.vc-tcard--active{background:var(--vc-navy);border-left:0;box-shadow:0 2px 8px rgba(30,43,55,.16)}
.vc-tcard--active .vc-tcard__name{color:#fff}
.vc-tcard--active .vc-tcard__meta{color:#9fb3c2}
.vc-tcard__row{display:flex;gap:9px;align-items:center}
.vc-tcard__ph{width:34px;height:34px;border-radius:11px;background:var(--vc-line-2);border:1px dashed var(--vc-line-3);display:grid;place-items:center;font:700 8px var(--vc-font);color:var(--vc-muted-2);flex:none}
.vc-tcard__name{font:800 13.5px/1.2 var(--vc-font);color:var(--vc-ink)}
.vc-tcard__meta{font:11.5px var(--vc-font);color:var(--vc-muted);display:block}
.vc-tcard__time{font:800 12.5px var(--vc-font);color:var(--vc-ink);margin-left:auto}
.vc-tcard__actions{display:flex;gap:7px;margin-top:10px}
.vc-progress{height:6px;border-radius:var(--vc-r-pill);background:var(--vc-line-2);overflow:hidden}
.vc-progress>i{display:block;height:100%;background:linear-gradient(90deg,var(--vc-teal),var(--vc-mint))}

/* --- 11. Móvil: barra inferior y sheet ---------------------------------- */
.vc-tabbar{display:none}
.vc-sheet{position:fixed;left:0;right:0;bottom:0;background:var(--vc-surface);border-radius:20px 20px 0 0;padding:10px 18px calc(22px + env(safe-area-inset-bottom));box-shadow:0 -12px 34px rgba(30,43,55,.25);z-index:1002;max-height:88vh;overflow:auto}
.vc-sheet__grab{width:38px;height:4px;border-radius:var(--vc-r-pill);background:var(--vc-line-4);margin:0 auto 14px}
.vc-fab{position:fixed;right:16px;bottom:calc(78px + env(safe-area-inset-bottom));height:52px;padding:0 20px;border:0;border-radius:26px;background:var(--vc-teal);color:#fff;font:800 14px var(--vc-font);box-shadow:0 8px 20px rgba(2,168,168,.4);display:inline-flex;align-items:center;gap:8px;z-index:900}
.vc-alert{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:11px;font:700 12.5px/1.35 var(--vc-font)}
.vc-alert--danger{background:var(--vc-danger-100);color:var(--vc-danger-700)}
.vc-alert--info{background:var(--vc-teal-100);color:var(--vc-teal-800)}
.vc-alert--warn{background:var(--vc-warn-100);color:var(--vc-warn-800)}
.vc-alert--ok{background:var(--vc-mint-100);color:var(--vc-mint-800)}

/* --- Calendario: rejilla + panel lateral (VETSCLICK-155) ----------------
   Antes eran estilos en linea, que ademas anulaban .vc-aside{display:none}.
   Escritorio: identico a lo anterior. Movil (<768): ver seccion 12. */
.vc-cal-layout{display:flex;gap:16px;align-items:flex-start}
.vc-cal-main{flex:1;min-width:0}
.vc-cal-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.vc-cal-aside{width:280px;flex:none;display:flex;flex-direction:column;gap:14px}
.vc-btn.vc-cal-resumen-btn{display:none!important}

/* --- 12. Responsive ----------------------------------------------------- */
/* 1024–1279: sidebar a iconos, panel derecho oculto tras un botón */
@media (max-width:1279px){
  .vc-side{width:72px;padding:16px 0;align-items:center}
  .vc-side__link{justify-content:center;padding:0;width:48px;height:48px;border-radius:13px}
  .vc-side__link span,.vc-clinic__label,.vc-clinic__name,.vc-clinic__cta{display:none}
  .vc-side__title{font-size:0;height:1px;width:48px;padding:0;margin:8px auto;background:var(--vc-navy-soft)}
  .vc-side__group{justify-content:center;width:48px;height:48px;padding:0;margin:0;border-radius:13px}
  .vc-side__group span,.vc-side__group .vc-side__chev{display:none}
  .vc-side .vc-clinic{width:48px;padding:8px;background:transparent}
  .vc-aside{display:none}
  .vc-board{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* 768–1023: táctil */
@media (max-width:1023px){
  :root{--vc-h-control:var(--vc-h-control-touch)}
  .vc-btn--sm{height:40px}
  .vc-btn--icon.vc-btn--sm{width:40px}
  .vc-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vc-cal .fc .fc-timegrid-slot{height:40px}
  .vc-modal{max-width:none;width:100%}
  .vc-modal .vc-form--3,.vc-modal .vc-form--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* < 768: móvil */
@media (max-width:767px){
  /* calendario (rejilla): columna unica, doctores deslizables, panel tras boton */
  .vc-cal-layout{flex-direction:column;align-items:stretch;gap:12px}
  .vc-cal-main{flex:none;width:100%}
  .vc-cal-cols{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .vc-cal-col{flex:0 0 85%;min-width:0;scroll-snap-align:start}
  .vc-cal-col:only-child{flex-basis:100%}
  .vc-cal-aside{display:none;width:100%}
  .vc-cal-aside.is-open{display:flex}
  .vc-btn.vc-cal-resumen-btn{display:inline-flex!important}
  .vc-shell{display:block}
  .vc-side{display:none}
  .vc-content{padding:14px 16px calc(84px + env(safe-area-inset-bottom))}
  .vc-topbar{padding:10px 16px;gap:10px}
  .vc-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;background:var(--vc-surface);border-top:1px solid var(--vc-line);padding:8px 4px calc(4px + env(safe-area-inset-bottom));z-index:950}
  .vc-tabbar__i{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font:700 10px var(--vc-font);color:var(--vc-muted-2);text-decoration:none;min-height:44px}
  .vc-tabbar__i.is-active{color:var(--vc-teal);font-weight:800}
  .vc-board{grid-template-columns:1fr}
  .vc-ficha-head{grid-template-columns:88px 1fr;column-gap:14px}
  .vc-ficha-head__foto{grid-row:1 / span 2;width:88px;height:88px}
  .vc-ficha-head__ids,.vc-ficha-head__acciones{grid-column:1 / -1}
  .vc-ficha-head__acciones{flex-direction:column}
  .vc-ficha-head__acciones .vc-btn{width:100%}
  .vc-form--2,.vc-form--3,.vc-form--4,.vc-modal .vc-form--3,.vc-modal .vc-form--4{grid-template-columns:1fr}
  /* modal a pantalla completa */
  .vc-backdrop{padding:0}
  .vc-modal{max-width:none;height:100%;max-height:none;border-radius:0}
  /* la tabla se vuelve lista de tarjetas: marcar la tabla con .vc-table--cards y
     poner data-label en cada td */
  .vc-table--cards thead{display:none}
  .vc-table--cards tr{display:block;background:var(--vc-surface);border:1px solid var(--vc-line);border-radius:12px;margin-bottom:10px;padding:6px 4px}
  .vc-table--cards td{display:flex;justify-content:space-between;gap:12px;border:0;padding:7px 12px;text-align:left}
  .vc-table--cards td::before{content:attr(data-label);font:800 11px var(--vc-font);letter-spacing:.05em;text-transform:uppercase;color:var(--vc-muted-2)}
  .vc-table--cards td:first-child,.vc-table--cards td:last-child{padding-left:12px;padding-right:12px;text-align:left}
  .vc-table--cards td.vc-td--hide{display:none}
}
@media print{.vc-side,.vc-tabbar,.vc-fab,.vc-panel__tools{display:none!important}.vc-app{background:#fff}}

/* --- 13. Login ----------------------------------------------------------- */
.vc-login{min-height:100vh;display:flex;background:var(--vc-surface)}
.vc-login__aside{width:44%;flex:none;background:var(--vc-navy);padding:44px 40px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.vc-login__aside::before,.vc-login__aside::after{content:"";position:absolute;border-radius:50%}
.vc-login__aside::before{right:-90px;top:-90px;width:280px;height:280px;background:rgba(2,168,168,.18)}
.vc-login__aside::after{right:-40px;bottom:-120px;width:240px;height:240px;background:rgba(66,230,164,.12)}
.vc-login__logo{height:64px;width:auto;align-self:flex-start;position:relative}
.vc-login__pitch{margin-top:auto;position:relative}
.vc-login__pitch h2{font:800 30px/1.2 var(--vc-font);color:#fff;margin:0 0 14px;text-wrap:pretty}
.vc-login__pitch p{font:15px/1.6 var(--vc-font);color:#9fb3c2;margin:0;max-width:34ch}
.vc-login__panel{flex:1;padding:44px 48px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.vc-login__form{max-width:400px;width:100%}
.vc-login__form .vc-input{height:46px;font-size:14.5px}
.vc-login__form .vc-btn{height:50px;font-size:15.5px!important}
.vc-login__note{display:flex;align-items:flex-start;gap:9px;margin-top:16px;padding:11px 13px;background:var(--vc-teal-100);border-radius:var(--vc-r);font:12.5px/1.45 var(--vc-font);color:var(--vc-teal-800)}
.vc-login__note>svg{flex:none;margin-top:1px}
.vc-login__note>span{flex:1}          /* la frase entera en UN hijo flex */
@media (max-width:900px){
  .vc-login{display:block}
  .vc-login__aside{width:auto;border-radius:0 0 22px 22px;padding:26px 22px 30px}
  .vc-login__aside .vc-login__pitch{margin-top:14px}
  .vc-login__aside .vc-login__pitch h2{display:none}
  .vc-login__panel{padding:26px 22px}
  .vc-login__form{max-width:none}
}

/* Selector de clínica: es el modal estándar, sin CSS nuevo.
   .vc-backdrop > .vc-modal, y cada opción es .vc-clinic-opt */
.vc-clinic-opt{display:flex;align-items:center;gap:12px;padding:12px 13px;border:1px solid var(--vc-line-4);border-radius:12px;background:var(--vc-surface);cursor:pointer;width:100%;text-align:left;font-family:var(--vc-font)}
.vc-clinic-opt:hover{border-color:var(--vc-teal-200);background:var(--vc-teal-100)}
.vc-clinic-opt.is-active{border:1.5px solid var(--vc-teal);background:var(--vc-teal-100)}
.vc-clinic-opt__badge{width:38px;height:38px;border-radius:11px;background:var(--vc-line-2);color:var(--vc-ink-soft);display:grid;place-items:center;font:800 13px var(--vc-font);flex:none}
.vc-clinic-opt.is-active .vc-clinic-opt__badge{background:var(--vc-teal);color:#fff}
.vc-clinic-opt__name{font:800 14.5px/1.2 var(--vc-font);color:var(--vc-ink);display:block}
.vc-clinic-opt__meta{font:12.5px var(--vc-font);color:var(--vc-muted);display:block}

/* --- 14. Landing --------------------------------------------------------- */
.vc-lp{background:var(--vc-surface)}
.vc-lp__nav{display:flex;align-items:center;gap:16px;padding:16px 48px;border-bottom:1px solid var(--vc-line);flex-wrap:wrap}
.vc-lp__nav img{height:40px;width:auto}
.vc-lp__nav-links{margin-left:auto;display:flex;align-items:center;gap:26px;font:700 13.5px var(--vc-font)}
.vc-lp__hero{padding:64px 48px 56px;background:var(--vc-navy);position:relative;overflow:hidden}
.vc-lp__hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.vc-lp__hero h1{font:800 46px/1.1 var(--vc-font);color:#fff;margin:0 0 18px;text-wrap:pretty}
.vc-lp__hero p{font:16.5px/1.65 var(--vc-font);color:#9fb3c2;margin:0 0 28px;max-width:52ch}
.vc-lp__kicker{font:800 10px/1 var(--vc-font);letter-spacing:.14em;text-transform:uppercase;color:var(--vc-teal);margin-bottom:12px}
.vc-lp__sec{padding:56px 48px}
.vc-lp__sec--alt{background:var(--vc-ground)}
.vc-lp__sec--dark{background:var(--vc-navy)}
.vc-lp__sec h2{font:800 33px/1.15 var(--vc-font);color:var(--vc-ink);margin:0 0 12px}
.vc-lp__sec--dark h2{color:#fff}
.vc-lp__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.vc-lp__card{border:1px solid var(--vc-line);border-radius:14px;padding:22px}
.vc-lp__card-ico{width:42px;height:42px;border-radius:12px;background:var(--vc-teal-100);display:grid;place-items:center;margin-bottom:16px}
.vc-lp__card h3{font:800 17px/1.2 var(--vc-font);color:var(--vc-ink);margin:0 0 8px}
.vc-lp__card p{font:14px/1.6 var(--vc-font);color:var(--vc-muted);margin:0}
.vc-lp__card--rol{border-top:3px solid var(--vc-teal);padding:24px}
.vc-lp__owners{margin:0 48px 56px;padding:38px 40px;background:var(--vc-teal-100);border:1px solid var(--vc-teal-200);border-radius:var(--vc-r-lg);display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.vc-lp__contacto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:48px;align-items:start}
.vc-lp__demo{min-width:0;background:#fff;border-radius:14px;padding:28px}
.vc-lp__foot{padding:34px 48px;background:#16212b;display:flex;align-items:flex-start;gap:48px;flex-wrap:wrap}
.vc-lp__foot a{color:#9fb3c2}
.vc-lp__legal{padding:14px 48px;background:#0f1821;font:12px var(--vc-font);color:#5f7382}
@media (max-width:1023px){
  .vc-lp__hero-grid,.vc-lp__owners{grid-template-columns:1fr}
  .vc-lp__contacto{grid-template-columns:minmax(0,1fr);gap:32px}
  .vc-lp__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .vc-lp__nav,.vc-lp__hero,.vc-lp__sec{padding-left:20px;padding-right:20px}
  .vc-lp__nav-links{display:none}
  .vc-lp__hero h1{font-size:32px}
  .vc-lp__grid{grid-template-columns:1fr}
  .vc-lp__owners{margin:0 20px 40px;padding:24px}
  .vc-lp__demo{padding:20px}
  .vc-lp__foot{padding:24px 20px;gap:26px}
}

/* VETSCLICK-31 (hallazgo del usuario, se repite en mas pantallas de las que
   se penso al principio): Semantic pone flex-wrap:nowrap en .ui.form
   .fields siempre -- en cualquier formulario con 3+ campos por fila, si la
   ventana real del usuario es mas angosta que la suma de esos campos,
   Semantic los encoge en vez de bajarlos de linea, y el texto de los
   <select> se corta ("Sel" en vez de "Seleccione"). No es un problema solo
   del drawer nuevo: le pasa a cualquier .ui.form de la app (ej. "Nueva
   venta", con 4 campos en una fila). Se vuelve regla global -- quebrar
   filas es estrictamente mejor que truncar texto, en cualquier formulario.*/
.ui.form .fields{flex-wrap:wrap;row-gap:14px}

/* VETSCLICK-31 (hallazgo del usuario, con captura real): el texto de los
   <select class="ui ... dropdown"> se veia con el pie de la letra (la "c",
   la "n") cortado contra el borde inferior de la caja. Causa real
   confirmada inspeccionando el elemento en vivo: estos <select> en la app
   siempre llevan tambien las clases "selection"/"search" (Semantic los
   marca asi), y semantic.min.css define '.ui.selection.dropdown' con
   padding/line-height propios (0.785714em..., line-height:1em) que por
   tener 3 clases en el selector le ganan en especificidad CSS a un
   'select.ui.dropdown{...}' de 2 clases, sin importar el orden de carga de
   las hojas de estilo -- por eso una correccion anterior con esa misma
   forma de selector no llegaba a aplicarse en el texto real de "Seleccione"
   aunque si se veia en el DevTools que la regla "existia". La correccion
   real es igualar/superar esa especificidad apuntando tambien a
   'select.ui.selection.dropdown' explicitamente. Se usa min-height (la
   caja crece si hace falta, nunca corta el texto) con mas aire vertical.*/
select.ui.dropdown,
select.ui.selection.dropdown{height:auto;min-height:42px;padding:9px 2.1em 9px 1em;line-height:1.3}

.ui.form select:not(.dropdown):not(.vc-select):not(.vc-input){
  -webkit-appearance:none;appearance:none;
  padding:.67857143em 2.4em .67857143em 1em;line-height:1.21428571em;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0h8L4 5z' fill='%23000' fill-opacity='.8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center}

/* --- Páginas de error (VETSCLICK-143) ------------------------------------ */
.vc-errorpage{min-height:100vh;display:flex;flex-direction:column;background:var(--vc-ground)}
.vc-errorpage__brand{background:var(--vc-navy);padding:18px 24px;position:relative;overflow:hidden;display:flex;justify-content:center}
.vc-errorpage__brand::before,.vc-errorpage__brand::after{content:"";position:absolute;border-radius:50%}
.vc-errorpage__brand::before{right:-60px;top:-90px;width:220px;height:220px;background:rgba(2,168,168,.18)}
.vc-errorpage__brand::after{left:-50px;bottom:-110px;width:190px;height:190px;background:rgba(66,230,164,.12)}
.vc-errorpage__brand a,.vc-errorpage__brand img{position:relative;display:block;height:52px;width:auto}
.vc-errorpage__main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:32px 16px}
.vc-errorpage__card{width:100%;max-width:520px;background:var(--vc-surface);border:1px solid var(--vc-line);border-radius:var(--vc-r-lg);box-shadow:var(--vc-sh-2);padding:40px 36px 34px;text-align:center}
.vc-errorpage__icon{width:72px;height:72px;margin:0 auto 18px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.vc-errorpage__icon--teal{background:var(--vc-teal-100);color:var(--vc-teal-700)}
.vc-errorpage__icon--warn{background:var(--vc-warn-100);color:var(--vc-warn-800)}
.vc-errorpage__icon--danger{background:var(--vc-danger-100);color:var(--vc-danger-700)}
.vc-errorpage__code{font:800 11px/1 var(--vc-font);letter-spacing:.14em;text-transform:uppercase;color:var(--vc-muted);margin:0 0 10px}
.vc-errorpage__title{font:800 26px/1.2 var(--vc-font);color:var(--vc-ink);margin:0 0 12px;text-wrap:balance}
.vc-errorpage__text{font:15px/1.6 var(--vc-font);color:var(--vc-ink-soft);margin:0 auto;max-width:42ch}
.vc-errorpage__detail{margin:16px 0 0;padding:10px 14px;background:var(--vc-surface-2);border:1px solid var(--vc-line-2);border-radius:var(--vc-r);font:700 13px/1.45 var(--vc-font);color:var(--vc-muted)}
.vc-errorpage__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px}
.vc-errorpage__help{margin:0;font:13px/1.45 var(--vc-font);color:var(--vc-muted);text-align:center}
@media (max-width:767px){
  .vc-errorpage__brand{padding:14px 16px}
  .vc-errorpage__brand a,.vc-errorpage__brand img{height:44px}
  .vc-errorpage__main{justify-content:flex-start;padding:22px 16px 28px}
  .vc-errorpage__card{padding:30px 20px 24px}
  .vc-errorpage__icon{width:64px;height:64px}
  .vc-errorpage__title{font-size:22px}
  .vc-errorpage__actions{flex-direction:column}
  .vc-errorpage__actions .vc-btn{width:100%;height:var(--vc-h-control-touch)}
}

/* --- VETSCLICK-156: campos clinicos de la consulta (camposConsulta.vue) ----------------- */
.vc-sec{margin-top:20px}
.vc-cc .vc-sec{margin-top:0}
.vc-cc + .vc-cc{margin-top:22px}
.vc-cc:empty{display:none}
.vc-yn{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--vc-line-2)}
.vc-yn:last-child{border-bottom:0}
.vc-yn__lbl{font:700 13.5px var(--vc-font);color:var(--vc-ink-soft)}
.vc-yn .vc-seg{height:34px}
.vc-yn .vc-seg__opt{padding:0 14px;min-width:46px}
.vc-seg.is-readonly{pointer-events:none}
.vc-seg.is-readonly .vc-seg__opt:not(.is-active){opacity:.55}
.vc-checks{display:flex;flex-wrap:wrap;gap:10px 22px}
/* Sarro dental y otras opciones de mas de dos: en pantallas angostas la etiqueta va arriba y el segmentado a lo ancho. */
@media (max-width:480px){
  .vc-yn--multi{flex-wrap:wrap}
  .vc-yn--multi .vc-seg{flex:1 1 100%}
  .vc-yn--multi .vc-seg__opt{flex:1;padding:0 6px;min-width:0}
}

/* --- VETSCLICK-156: selector de producto (productosConsulta.vue) -------------------------- */
.vc-combo{position:relative}
.vc-combo__lista{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;margin:0;padding:4px;list-style:none;max-height:240px;overflow:auto;background:var(--vc-surface);border:1px solid var(--vc-line-3);border-radius:var(--vc-r);box-shadow:var(--vc-sh-2)}
.vc-combo__op{display:flex;flex-direction:column;gap:1px;padding:9px 11px;border-radius:8px;cursor:pointer;font:700 13.5px var(--vc-font);color:var(--vc-ink)}
.vc-combo__op:hover{background:var(--vc-teal-100);color:var(--vc-teal-800)}
.vc-combo__meta{font:12px var(--vc-font);color:var(--vc-muted);font-weight:400}
.vc-combo__vacio{padding:12px;font:13px/1.45 var(--vc-font);color:var(--vc-muted)}

/* --- VETSCLICK-156: formato de los mockups --------------------------------------------- */
/* Etiquetas de los pasos alineadas con su barra (una columna por paso, mismo espacio que .vc-steps) */
.vc-steps__labels--grid{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:6px}
.vc-steps__labels--grid span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* VETSCLICK-165: cabecera de modal con pasos (título + «Paso X de Y» + X, debajo las barras y sus etiquetas) */
.vc-modal__head--pasos{flex-direction:column;align-items:stretch;gap:0}
.vc-modal__titlerow{display:flex;align-items:center;gap:10px}
.vc-modal__paso{margin-left:auto;font:700 12px var(--vc-font);color:var(--vc-muted);white-space:nowrap}
.vc-modal__titlerow .vc-modal__x{margin-left:0}
/* En celular el modal ocupa la pantalla: el cuerpo toma el alto libre para que el pie quede abajo */
.vc-modal__head--pasos + .vc-modal__body{flex:1}
/* Texto de casillas como en los mockups («Avisar al responsable…»): 700 13px, gris oscuro, 9px de separacion */
.vc-choice--md{align-items:flex-start;gap:9px;font:700 13px/1.4 var(--vc-font);color:var(--vc-ink-soft)}
.vc-choice--md .vc-check{margin-top:1px}
.vc-choice__sub{display:block;font:12px/1.4 var(--vc-font);font-weight:400;color:var(--vc-muted);margin-top:2px}


/* VETSCLICK-223: calificacion del cliente (5 niveles), avisos y condiciones especiales de la mascota */
.vc-nv{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font:800 12px var(--vc-font);white-space:nowrap}
.vc-nv i{font-style:normal;font-size:12px}
.vc-nv--destacado{background:var(--vc-mint-100);color:var(--vc-mint-800)}
.vc-nv--seguimiento{background:#e3ecfb;color:#244a96}
.vc-nv--precaucion{background:var(--vc-warn-100);color:var(--vc-warn-800)}
.vc-nv--problematico{background:#fde6d3;color:#9a4509}
.vc-nv--noatender{background:var(--vc-danger-100);color:var(--vc-danger-700)}
.vc-ins{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;font:800 11px var(--vc-font);flex:none;font-style:normal}
.vc-ins--destacado{background:var(--vc-mint);color:#fff}
.vc-ins--seguimiento{background:#3b6fd4;color:#fff}
.vc-ins--precaucion{background:var(--vc-warn);color:var(--vc-navy)}
.vc-ins--problematico{background:#e0791f;color:#fff}
.vc-ins--noatender{background:var(--vc-danger);color:#fff}
.vc-ins--mascota{border-radius:5px;background:#e8edf1;color:var(--vc-navy-soft)}
.vc-ev--noatender .fc-content,.vc-ev--noatender .fc-event-main{box-shadow:inset 0 0 0 2px var(--vc-danger)}
.vc-ev__ins{display:inline-flex;gap:3px;flex:none;margin-left:auto;padding-left:6px}
.vc-ev--marcada .fc-content{display:flex;align-items:center;gap:0;padding-top:2px;padding-bottom:2px}
.vc-ev--marcada .fc-time{flex:none;white-space:nowrap}
.vc-ev--marcada .fc-title{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vc-ev__ins .vc-ins{width:15px;height:15px;font-size:9.5px}
.fc-list-item .vc-ev__ins{float:right;margin-left:6px}
/* Mes en pantalla angosta: la celda no alcanza para hora + iconos; la cita marcada muestra solo sus iconos */
@media (max-width:640px){
  .fc-day-grid-event.vc-ev--marcada .fc-time,.fc-day-grid-event.vc-ev--marcada .fc-title{display:none}
  .fc-day-grid-event.vc-ev--marcada .fc-content{justify-content:center}
  .fc-day-grid-event.vc-ev--marcada .vc-ev__ins{margin:0;padding:0;flex-wrap:wrap;justify-content:center}
}
.vc-aviso{display:flex;gap:12px;align-items:flex-start;border-radius:12px;padding:12px 14px;font:600 13.5px/1.45 var(--vc-font)}
.vc-aviso b{font-weight:800}
.vc-aviso>div{min-width:0;overflow-wrap:anywhere}
.vc-aviso small{display:block;font:600 12.5px/1.45 var(--vc-font);opacity:.9;margin-top:2px}
.vc-aviso--destacado{background:var(--vc-mint-100);color:var(--vc-mint-800)}
.vc-aviso--seguimiento{background:#e3ecfb;color:#244a96}
.vc-aviso--precaucion{background:var(--vc-warn-100);color:var(--vc-warn-800)}
.vc-aviso--problematico{background:#fde6d3;color:#9a4509}
.vc-aviso--noatender{background:var(--vc-danger-100);color:var(--vc-danger-700);border:1px solid #f0b9b5}
.vc-aviso--mascota{background:#e8edf1;color:var(--vc-navy)}
.vc-nivel-opc{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--vc-line-3);border-radius:12px;padding:10px 14px;background:#fff;cursor:pointer}
.vc-nivel-opc.is-on{border-color:var(--vc-teal);box-shadow:0 0 0 3px var(--vc-teal-100)}
.vc-nivel-opc__rad{width:18px;height:18px;border-radius:50%;border:2px solid var(--vc-line-3);flex:none;margin-top:3px;box-sizing:border-box}
.vc-nivel-opc.is-on .vc-nivel-opc__rad{border:5px solid var(--vc-teal)}
.vc-nivel-opc__ley{font:600 12.5px/1.4 var(--vc-font);color:var(--vc-muted);margin-top:3px}
.vc-cond{display:inline-flex;align-items:center;gap:6px;min-height:28px;max-width:100%;padding:4px 12px;border-radius:14px;border:1px solid var(--vc-line-3);font:700 12.5px/1.3 var(--vc-font);background:#fff;color:var(--vc-ink-soft);cursor:pointer;user-select:none;white-space:normal;text-align:left}
.vc-cond.is-on{background:#e8edf1;border-color:var(--vc-navy-soft);color:var(--vc-navy)}
.vc-cond--fija{cursor:default}

/* VETSCLICK-223: ventanas con cabecera larga y pie de varios botones; el cuerpo deja lugar para ambos en pantallas bajas */
@media (max-width:767px){
  .ui.modal.vc-modal--calif>.vc-modal__body{max-height:calc(100vh - 330px);max-height:calc(100dvh - 330px)}
  .vc-modal--calif .vc-modal__foot .button{flex:1 1 auto;white-space:normal;text-align:center}
}

/* VETSCLICK-245: campos obligatorios de la consulta, marca de obligatorio y opcional, aviso de identificacion repetida */
.vc-obl{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
.vc-obl__main{flex:1 1 560px;max-width:640px}
.vc-obl__side{flex:1 1 260px;max-width:300px;display:flex;flex-direction:column;gap:12px}
.vc-obl__tabla td{vertical-align:middle}
.vc-obl__grupo td{text-align:left!important;background:var(--vc-surface-2);font:800 11px var(--vc-font);letter-spacing:.08em;text-transform:uppercase;color:var(--vc-muted)}
.vc-req{color:var(--vc-danger);font-weight:800;margin-left:3px}
.vc-opc{font:600 12px var(--vc-font);color:var(--vc-muted-2);margin-left:4px}
.vc-input.is-error,.vc-textarea.is-error,.vc-select.is-error{border-color:var(--vc-danger);box-shadow:0 0 0 3px var(--vc-danger-100)}
.vc-dup{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
@media (max-width:767px){.vc-obl__side{max-width:none}}
/* VETSCLICK-240: asa para mover una cita (Rejilla y Mes, solo PC). Solo desde aqui se arrastra la cita;
   el contenido reserva su espacio para que el asa no tape el nombre. */
.vc-ev.fc-draggable .fc-content{padding-right:26px}
.vc-ev__mover{position:absolute;top:3px;right:3px;z-index:3;display:inline-flex;align-items:center;justify-content:center;width:20px;height:18px;border-radius:var(--vc-r-sm);background:rgba(255,255,255,.85);color:var(--vc-ink);cursor:move;font-size:11px;line-height:1}
.vc-ev__mover .icon{margin:0;width:auto;height:auto;font-size:11px}
.vc-ev__mover:hover{background:#fff;box-shadow:0 0 0 1px var(--vc-teal)}
.vc-ev:not(.fc-draggable) .vc-ev__mover{display:none}
/* VETSCLICK-243: candado de la cita en consulta, finalizada o cancelada (no se arrastra ni se estira) */
.vc-ev__candado{position:absolute;top:3px;right:3px;z-index:3;display:inline-flex;align-items:center;justify-content:center;width:20px;height:18px;border-radius:var(--vc-r-sm);background:rgba(255,255,255,.85);color:var(--vc-ink-soft);cursor:not-allowed;font-size:11px;line-height:1}
.vc-ev__candado .icon{margin:0;width:auto;height:auto;font-size:11px}
.vc-cal-legend__fijo{display:inline-flex;align-items:center;gap:6px;color:var(--vc-ink-soft);font-weight:700}
.vc-cal-legend__fijo .vc-ev__candado{position:static;background:var(--vc-surface-2)}
.vc-tip{z-index:1100;width:220px;box-sizing:border-box;background:var(--vc-ink);color:#fff;font:700 12px/1.35 var(--vc-font);padding:7px 10px;border-radius:8px;box-shadow:var(--vc-sh-2);pointer-events:none}
.vc-tip:after{content:"";position:absolute;top:-5px;right:14px;border:5px solid transparent;border-top:0;border-bottom-color:var(--vc-ink)}
.vc-nota-bloqueo{display:flex;gap:7px;align-items:flex-start;margin:0 14px 12px;padding:8px 10px;border-radius:9px;background:var(--vc-surface-2);font:600 12px/1.35 var(--vc-font);color:var(--vc-ink-soft)}
.vc-nota-bloqueo .icon{flex:none;margin:1px 0 0;font-size:11px}
.vc-fijo{display:inline-flex;align-items:center;gap:3px;margin-left:6px;font:700 11px var(--vc-font);color:var(--vc-muted-2)}
.vc-fijo .icon{margin:0;font-size:10px}
.vc-seg--fijo{background:var(--vc-surface-2)}
.vc-seg--fijo .vc-seg__opt{color:var(--vc-muted-2);cursor:not-allowed}
.vc-seg--fijo .vc-seg__opt:hover{background:transparent;color:var(--vc-muted-2)}
.vc-seg--fijo .vc-seg__opt.is-active{background:#c9d3da;color:#fff}
.vc-modal .ui.disabled.dropdown{opacity:1;background:var(--vc-surface-2);color:var(--vc-muted)}
.vc-conflicto__fijo{font-weight:700;color:var(--vc-ink-soft)}
.fc-day-grid-event.vc-ev{position:relative}
.vc-modal__foot .vc-btn .loading.icon{margin:0 6px 0 0}

/* VETSCLICK-249: modulo Hospedaje (calendario de ocupacion, reserva, salida, configuracion) */
.vc-hsp-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}
.vc-hsp-kpi{padding:16px 18px;min-width:0}
.vc-hsp-kpi__valor{font:800 26px/1.05 var(--vc-font);font-variant-numeric:tabular-nums;color:var(--vc-ink)}
.vc-hsp-kpi__valor small{font-size:16px;color:var(--vc-muted);font-weight:800}
.vc-hsp-kpi__nota{font:700 12px var(--vc-font);margin-top:6px;color:var(--vc-muted)}
.vc-hsp-fila{display:grid;gap:14px;margin-bottom:14px;grid-template-columns:minmax(0,2.5fr) minmax(0,1fr)}
.vc-hsp-fila--2{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.vc-hsp-fila--modal{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);margin:0}
.vc-hsp-fila--modal-salida{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);margin:0}
.vc-hsp-card{padding:18px 20px;min-width:0}
.vc-hsp-card__head{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.vc-hsp-card__titulo{font:800 14.5px var(--vc-font);color:var(--vc-ink);flex:1;min-width:0}
.vc-hsp-scroll{overflow-x:auto}
.vc-gantt{width:100%;min-width:760px;border-collapse:separate;border-spacing:0;font:12.5px var(--vc-font);table-layout:fixed}
.vc-gantt th{font:800 11px var(--vc-font);color:var(--vc-muted);padding:6px 2px;text-align:center;border-bottom:1px solid var(--vc-line)}
.vc-gantt th.hoy{color:var(--vc-teal);background:var(--vc-teal-100);border-radius:8px 8px 0 0}
.vc-gantt th.finde{color:var(--vc-ink-soft)}
.vc-gantt td{height:34px;border-bottom:1px solid var(--vc-line-2);border-left:1px solid var(--vc-line-2);padding:3px 0;position:relative}
.vc-gantt td.libre{cursor:pointer}
.vc-gantt td.libre:hover{background:var(--vc-teal-100)}
.vc-gantt td.esp{border-left:0;font:800 12.5px var(--vc-font);color:var(--vc-ink);padding-left:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-gantt td.hoy{background:rgba(0,128,128,.05)}
.vc-gantt tr.grupo td{height:auto;padding:12px 0 6px;border-left:0;font:800 11.5px var(--vc-font);color:var(--vc-muted);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.vc-gantt tr.grupo td span{text-transform:none;letter-spacing:0;font-weight:700;color:var(--vc-ink-soft);margin-left:8px}
.vc-bar{position:absolute;top:4px;bottom:4px;left:2px;border-radius:7px;padding:0 8px;display:flex;align-items:center;gap:5px;font:800 11.5px var(--vc-font);white-space:nowrap;overflow:hidden;z-index:2;cursor:pointer;border:0;text-align:left}
.vc-bar--en{background:var(--vc-teal);color:#fff}
.vc-bar--res{background:var(--vc-surface);color:var(--vc-teal-800);border:2px dashed var(--vc-teal)}
.vc-bar--sale{background:var(--vc-warn-100);color:var(--vc-warn-800);border:2px solid var(--vc-warn)}
.vc-bar--dia{background:var(--vc-mint-100);color:var(--vc-mint-800);border:1px solid var(--vc-mint-800);position:static;display:inline-block;height:auto;padding:2px 7px;border-radius:999px}
.vc-gantt tr.libres td{height:auto;padding:5px 0;text-align:center;font:800 11px var(--vc-font);color:var(--vc-mint-800);border-bottom:1px solid var(--vc-line)}
.vc-gantt tr.libres td.cero{color:var(--vc-danger-700)}
.vc-gantt tr.libres td.esp{color:var(--vc-muted);text-align:left}
.vc-gantt td.dia{text-align:center}
.vc-gantt td.cerrado{color:var(--vc-muted);font-weight:700}
.vc-hsp-leyenda{display:flex;gap:16px;flex-wrap:wrap;font:700 12px var(--vc-font);color:var(--vc-ink-soft);margin-top:12px}
.vc-hsp-leyenda i{display:inline-block;width:22px;height:12px;border-radius:4px;vertical-align:-1px;margin-right:6px}
.vc-hsp-mov{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--vc-line-2)}
.vc-hsp-mov:first-of-type{border-top:0;padding-top:0}
.vc-hsp-mov__hora{font:800 13.5px var(--vc-font);width:46px;flex:0 0 auto}
.vc-hsp-mov__t{font:800 13.5px var(--vc-font);color:var(--vc-ink)}
.vc-hsp-mov__d{font:12.5px var(--vc-font);color:var(--vc-ink-soft)}
.vc-hsp-mov__a{margin-left:auto;flex:0 0 auto;display:flex;align-items:center;gap:6px}
.vc-hsp-mov>div:nth-child(2){min-width:0;flex:1 1 auto}
.vc-hsp-cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.vc-hsp-cat{border:1px solid var(--vc-line);border-radius:var(--vc-r);padding:12px;background:var(--vc-surface);text-align:left;cursor:pointer;font-family:var(--vc-font)}
.vc-hsp-cat.is-on{border:2px solid var(--vc-teal);background:var(--vc-teal-100);padding:11px}
.vc-hsp-cat.is-off{opacity:.6;cursor:not-allowed}
.vc-hsp-cat__n{font:800 14px var(--vc-font);color:var(--vc-ink)}
.vc-hsp-cat__p{font:800 13px var(--vc-font);color:var(--vc-teal-800);margin-top:4px}
.vc-hsp-cat__d{font:12px/1.35 var(--vc-font);color:var(--vc-ink-soft);margin-top:4px}
.vc-hsp-cat__l{font:700 11.5px var(--vc-font);color:var(--vc-mint-800);margin-top:6px}
.vc-hsp-cat__l.cero{color:var(--vc-danger-700)}
.vc-hsp-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.vc-hsp-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px 14px}
.vc-hsp-chk{display:flex;gap:8px;flex-wrap:wrap}
.vc-hsp-chk button{font:700 12.5px var(--vc-font);border:1px solid var(--vc-line);border-radius:999px;padding:5px 11px;color:var(--vc-ink-soft);background:var(--vc-surface);cursor:pointer}
.vc-hsp-chk button.on{background:var(--vc-teal-100);border-color:var(--vc-teal-200);color:var(--vc-teal-800)}
.vc-hsp-chk button:disabled{cursor:default;opacity:.8}
.vc-hsp-sec{font:800 12px var(--vc-font);letter-spacing:.06em;text-transform:uppercase;color:var(--vc-muted);margin:16px 0 10px}
.vc-hsp-sec:first-child{margin-top:0}
.vc-hsp-total{display:flex;justify-content:space-between;gap:10px;padding:6px 0;font:13.5px var(--vc-font);color:var(--vc-ink-soft)}
.vc-hsp-total b{color:var(--vc-ink);font-variant-numeric:tabular-nums}
.vc-hsp-total--big{font:800 18px var(--vc-font);color:var(--vc-ink);border-top:1px solid var(--vc-line);padding-top:10px;margin-top:4px}
.vc-hsp-banner{display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:var(--vc-teal-100);border:1px solid var(--vc-teal-200);border-radius:var(--vc-r);padding:12px 14px;margin-bottom:14px}
.vc-hsp-banner__txt{flex:1;min-width:200px;font:12.5px var(--vc-font);color:var(--vc-ink-soft)}
.vc-hsp-banner__txt b{display:block;font:800 15px var(--vc-font);color:var(--vc-teal-800)}
.vc-hsp-inline{border:2px solid var(--vc-line);border-radius:var(--vc-r);padding:12px 14px;margin-top:12px;background:var(--vc-surface)}
.vc-hsp-lbl{display:block;font:700 12px var(--vc-font);color:var(--vc-muted);margin-bottom:5px}
.vc-hsp-quitar{border:0;background:transparent;color:var(--vc-muted);cursor:pointer;font-size:14px;padding:0 4px}
.vc-hsp-quitar:hover{color:var(--vc-danger-700)}
.vc-hsp-resp{max-height:180px;overflow:auto;border:1px solid var(--vc-line);border-radius:var(--vc-r);margin-top:4px}
.vc-hsp-resp button{display:block;width:100%;text-align:left;padding:8px 12px;background:var(--vc-surface);border:0;border-bottom:1px solid var(--vc-line-2);font:600 13px var(--vc-font);color:var(--vc-ink);cursor:pointer}
.vc-hsp-resp button:hover{background:var(--vc-teal-100)}
.vc-hsp-tabs{display:flex;gap:8px;align-items:flex-end;margin-bottom:16px;flex-wrap:wrap}
.vc-hsp-tabs .vc-tabs-flat{flex:1}
.vc-hsp-tabs__acc{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:8px}
@media (max-width:1100px){
  .vc-hsp-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vc-hsp-fila,.vc-hsp-fila--2{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .vc-hsp-kpis{gap:10px}
  .vc-hsp-kpi__valor{font-size:22px}
  .vc-hsp-cats{grid-template-columns:minmax(0,1fr)}
  .vc-hsp-grid2,.vc-hsp-grid3,.vc-hsp-fila--modal,.vc-hsp-fila--modal-salida{grid-template-columns:minmax(0,1fr)}
  .vc-hsp-card{padding:14px}
  .vc-hsp-barras .vc-hsp-barra{min-width:5px}
  .vc-hsp-barras .vc-hsp-barra:not(:nth-child(5n+1)) span{visibility:hidden}
}
.vc-table .num{text-align:right;font-variant-numeric:tabular-nums}
/* VETSCLICK-250: barras de ocupacion por dia (Reportes → Hospedaje) */
.vc-hsp-barras{display:flex;align-items:flex-end;gap:2px;height:170px;padding:8px 0 0;overflow-x:auto}
.vc-hsp-barra{flex:1 1 0;min-width:9px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}
.vc-hsp-barra i{display:block;width:100%;max-width:22px;background:var(--vc-teal);border-radius:4px 4px 0 0;min-height:2px}
.vc-hsp-barra i.lleno{background:var(--vc-danger)}
.vc-hsp-barra span{font:700 9px var(--vc-font);color:var(--vc-muted)}
/* VETSCLICK-251: confirmacion de correccion de datos de una mascota (antes / despues) */
.vc-correccion{width:100%;border-collapse:collapse;font:13.5px var(--vc-font);color:var(--vc-ink);margin:12px 0 14px}
.vc-correccion th{text-align:left;font:800 11px var(--vc-font);letter-spacing:.06em;text-transform:uppercase;color:var(--vc-muted);padding:8px 10px;border-bottom:1px solid var(--vc-line-2)}
.vc-correccion td{padding:9px 10px;border-bottom:1px solid var(--vc-line-2);overflow-wrap:anywhere}
.vc-correccion__antes{color:var(--vc-muted);text-decoration:line-through}
.vc-correccion__despues{font-weight:800}