/* Vahu-Vet · Portal de citas — apariencia igual a vahu-vet.com
   Se activa solo en las vistas que usan <div class="vv"> (no afecta el panel interno).
   Cargar DESPUES de style.css. */
@import url("https://fonts.googleapis.com/css2?family=Baloo+Thambi+2:wght@600;700;800&family=Montserrat:wght@500;600;700;800&display=swap");
:root{--vv-turq:#1ecad3;--vv-slate:#323e48;--vv-sol:#ffd35c;--vv-rosa:#ffe3e8;--vv-t100:#c9f2f5;--vv-t50:#e9fafb;--vv-coral:#ff8aa1;
--vv-display:"Baloo Thambi 2","Trebuchet MS",sans-serif;--vv-font:"Montserrat",Arial,sans-serif;--vv-pattern:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%20viewBox='0%200%20180%20180'%3E%3Cg%20fill='%2317b6bf'%20fill-opacity='.55'%3E%3Cg%20transform='translate%2824%2024%29%20rotate%28-16%29'%3E%3Cellipse%20cx='4'%20cy='12'%20rx='3.2'%20ry='4.4'/%3E%3Cellipse%20cx='11'%20cy='5'%20rx='3.2'%20ry='4.4'/%3E%3Cellipse%20cx='20'%20cy='5'%20rx='3.2'%20ry='4.4'/%3E%3Cellipse%20cx='27'%20cy='12'%20rx='3.2'%20ry='4.4'/%3E%3Cpath%20d='M15.5%2014c-5.5%200-10%205-10%209.3%200%203%202.5%204.2%205.2%204.2%201.8%200%203-.8%204.8-.8s3%20.8%204.8.8c2.7%200%205.2-1.2%205.2-4.2C25.5%2019%2021%2014%2015.5%2014z'/%3E%3C/g%3E%3Cg%20transform='translate%28112%2096%29%20rotate%2814%29'%3E%3Cellipse%20cx='4'%20cy='12'%20rx='3.2'%20ry='4.4'/%3E%3Cellipse%20cx='11'%20cy='5'%20rx='3.2'%20ry='4.4'/%3E%3Cellipse%20cx='20'%20cy='5'%20rx='3.2'%20ry='4.4'/%3E%3Cellipse%20cx='27'%20cy='12'%20rx='3.2'%20ry='4.4'/%3E%3Cpath%20d='M15.5%2014c-5.5%200-10%205-10%209.3%200%203%202.5%204.2%205.2%204.2%201.8%200%203-.8%204.8-.8s3%20.8%204.8.8c2.7%200%205.2-1.2%205.2-4.2C25.5%2019%2021%2014%2015.5%2014z'/%3E%3C/g%3E%3Cg%20transform='translate%28108%2022%29%20rotate%28-38%29'%3E%3Crect%20x='6'%20y='9'%20width='30'%20height='7'%20rx='3.5'/%3E%3Ccircle%20cx='6'%20cy='8'%20r='5'/%3E%3Ccircle%20cx='6'%20cy='17'%20r='5'/%3E%3Ccircle%20cx='36'%20cy='8'%20r='5'/%3E%3Ccircle%20cx='36'%20cy='17'%20r='5'/%3E%3C/g%3E%3Cg%20transform='translate%2822%20108%29%20rotate%2830%29'%3E%3Crect%20x='6'%20y='9'%20width='30'%20height='7'%20rx='3.5'/%3E%3Ccircle%20cx='6'%20cy='8'%20r='5'/%3E%3Ccircle%20cx='6'%20cy='17'%20r='5'/%3E%3Ccircle%20cx='36'%20cy='8'%20r='5'/%3E%3Ccircle%20cx='36'%20cy='17'%20r='5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
body:has(.vv){background:var(--vv-turq) !important;background-image:var(--vv-pattern) !important;font-family:var(--vv-font);font-size:1rem;font-weight:500;color:var(--vv-slate)}
body:has(.vv) footer{background:var(--vv-slate);color:var(--vv-t100);margin-top:2rem}
body:has(.vv) footer .copy{color:var(--vv-t100);padding:1rem 0;font-size:.85rem;font-weight:600}
body:has(.vv) .message.success{background:var(--vv-t100);color:var(--vv-slate);border-bottom:2.5px solid var(--vv-slate)}
body:has(.vv) .message.error{background:var(--vv-rosa);color:var(--vv-slate);border-bottom:2.5px solid var(--vv-slate)}

.vv{display:flex;flex-direction:column;align-items:center;gap:1.6rem;padding:1.4rem 1rem 1rem}
.vv *{box-sizing:border-box}
.vv-logo{display:block;border-radius:22px;-webkit-tap-highlight-color:transparent}
.vv-logo img{display:block;width:150px;height:auto;background:#fff;border:2.5px solid var(--vv-slate);border-radius:22px;padding:.5rem .9rem;box-shadow:4px 4px 0 var(--vv-slate)}
.vv-card{position:relative;width:min(440px,94vw);background:#fff;border:2.5px solid var(--vv-slate);border-radius:44px 44px 44px 90px;padding:2rem 1.8rem 1.8rem;box-shadow:7px 7px 0 var(--vv-slate)}
.vv-card.ancha{width:min(900px,94vw)}
.vv h1{font:800 clamp(1.7rem,5vw,2.2rem)/1.05 var(--vv-display);margin:0 0 .5rem;color:var(--vv-slate)}
.vv h2{font:800 1.25rem var(--vv-display);margin:1.3rem 0 .6rem;color:var(--vv-slate)}
.vv .vv-lead{margin:0 0 1.2rem;font-weight:600;line-height:1.5}
.vv label{display:block;font-weight:700;font-size:.95rem;margin:0 0 .4rem;color:var(--vv-slate)}
.vv .input{margin-bottom:1rem}

/* Campos (anula los estilos globales de style.css) */
.vv input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]),.vv select,.vv textarea{width:100%;font:600 1.05rem var(--vv-font) !important;color:var(--vv-slate) !important;background-color:var(--vv-t50) !important;border:2.5px solid var(--vv-slate) !important;border-radius:18px !important;padding:.75rem 1rem !important;height:auto !important;box-shadow:none !important;margin:0 !important}
.vv textarea{min-height:5.5rem;border-radius:22px !important}
.vv input:not([type=checkbox]):not([type=radio]):focus,.vv select:focus,.vv textarea:focus{box-shadow:0 0 0 4px var(--vv-sol) !important}
.vv input::placeholder,.vv textarea::placeholder{color:#6b7782;font-weight:500;padding-left:0}
.vv select{-webkit-appearance:none;appearance:none;padding-right:2.4rem !important;background-image:linear-gradient(45deg,transparent 50%,var(--vv-slate) 50%),linear-gradient(135deg,var(--vv-slate) 50%,transparent 50%) !important;background-position:calc(100% - 22px) 55%,calc(100% - 16px) 55% !important;background-size:6px 6px !important;background-repeat:no-repeat !important}

/* Casillas como botones redondos (sub-servicios, bloques horarios) */
.vv .checkbox{display:inline-block;margin:0 .5rem .6rem 0}
.vv .checkbox label{position:relative;display:inline-block;margin:0;cursor:pointer;border:2px solid var(--vv-slate);border-radius:99px;padding:.45rem 1rem;font-weight:700;font-size:.95rem;background:#fff;transition:transform .15s}
.vv .checkbox input[type=checkbox]{position:absolute;opacity:0;width:0;height:0;margin:0 !important}
.vv .checkbox label:has(input:checked){background:var(--vv-sol);box-shadow:3px 3px 0 var(--vv-slate);transform:rotate(-2deg)}
.vv .checkbox label:has(input:focus-visible){box-shadow:0 0 0 4px var(--vv-turq)}
.vv .checkbox input[type=checkbox]:checked+label{background:var(--vv-sol);box-shadow:3px 3px 0 var(--vv-slate);transform:rotate(-2deg)}

/* Datos de la mascota */
.vv-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem;margin:.4rem 0 1rem}
.vv-dato{background:var(--vv-t50);border:2px solid var(--vv-slate);border-radius:18px;padding:.5rem .8rem;line-height:1.3}
.vv-dato small{display:block;font:700 .7rem var(--vv-font);letter-spacing:.06em;text-transform:uppercase;color:#4e5a64}
.vv-dato b{font-weight:800}
.vv-dato.cli{background:var(--vv-sol)}

/* Datos de la cita: las secciones se muestran a medida que el sistema las habilita */
.vv-cita{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 1.2rem}
.vv-cita #subservicios,.vv-cita #bloques,.vv-cita #notas{grid-column:1/-1}

/* Botones */
.vv button.button,.vv .button{cursor:pointer;font:800 1.05rem var(--vv-font) !important;color:#fff !important;background:var(--vv-slate) !important;border:2.5px solid var(--vv-slate);border-radius:99px;padding:.85rem 1.4rem;box-shadow:4px 4px 0 var(--vv-sol);margin:1.1rem 0 0;width:100%;transition:transform .15s}
.vv button.button:hover,.vv .button:hover{background:var(--vv-slate) !important;transform:translate(-1px,-1px) rotate(-.6deg)}
.vv-acciones{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:.6rem;flex-wrap:wrap}
.vv .vv-acciones button.button{width:auto;padding-inline:2.4rem}

.vv-aviso{margin:0 0 1rem;background:var(--vv-rosa);border:2.5px solid var(--vv-slate);border-radius:18px;padding:.7rem 1rem;font-weight:700}
.vv-aviso[hidden]{display:none}
.vv .error-message{font-size:.85rem;font-weight:700;margin:-.6rem 0 1rem;color:#c0334a}
.vv .form-error{border-bottom:2.5px solid #c0334a !important}
@media (max-width:600px){.vv-card{padding:1.8rem 1.2rem 1.4rem;border-radius:36px 36px 36px 70px}.vv .vv-acciones button.button{width:100%}}

/* Pantalla de mascota y resumen de la cita */
.vv-link{display:block;text-align:center;margin-top:1rem;font-weight:800;font-size:.95rem}
.vv-link a{color:var(--vv-slate) !important;text-decoration:underline !important}
.vv-exito{text-align:center;margin-bottom:.4rem}
.vv-exito .check{width:84px;height:84px;margin:0 auto .8rem;border-radius:50%;background:var(--vv-turq);border:2.5px solid var(--vv-slate);display:grid;place-items:center;box-shadow:5px 5px 0 var(--vv-slate);animation:vvpop .6s cubic-bezier(.3,1.6,.5,1)}
.vv-exito .check svg{width:44px;height:44px;fill:none;stroke:var(--vv-slate);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
@keyframes vvpop{from{transform:scale(.2) rotate(-30deg);opacity:0}}
.vv-resumen{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin-top:1rem}
.vv-bloque{background:var(--vv-t50);border:2px solid var(--vv-slate);border-radius:24px;padding:1rem 1.2rem;line-height:1.55;overflow-wrap:anywhere}
.vv-bloque h2{margin:0 0 .5rem;font-size:1.1rem}
.vv-bloque small{display:block;font:700 .7rem var(--vv-font);letter-spacing:.06em;text-transform:uppercase;color:#4e5a64;margin-top:.5rem}
.vv-bloque small:first-of-type{margin-top:0}
.vv-bloque b{font-weight:800}
.vv-bloque.cita{grid-column:1/-1;background:var(--vv-sol);box-shadow:5px 5px 0 var(--vv-slate)}
.vv-bloque.cita .vv-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.4rem 1.4rem}
.vv-bloque ul{margin:0;padding-left:1.1rem}
.vv-estado{display:inline-block;border:2px solid var(--vv-slate);border-radius:99px;background:#fff;padding:.1rem .8rem;font-weight:800;font-size:.85rem}
#imgfoto{display:block;max-width:100%;max-height:170px;border:2.5px solid var(--vv-slate);border-radius:20px;margin:.3rem 0 .6rem;object-fit:cover}

/* Logo animado: entra con rebote, flota suave y se mueve al pasar el cursor; al hacer clic vuelve a vahu-vet.com */
.vv-logo img{transition:transform .2s ease,box-shadow .2s ease;animation:vvlogo-in .7s cubic-bezier(.3,1.5,.5,1) both,vvlogo-flota 4s ease-in-out .8s infinite}
.vv-logo:hover img,.vv-logo:focus-visible img{animation:vvlogo-mueve .6s ease-in-out;box-shadow:6px 6px 0 var(--vv-sol),6px 6px 0 2px var(--vv-slate)}
.vv-logo:active img{transform:scale(.94)}
.vv-logo:focus-visible{outline:4px solid var(--vv-sol);outline-offset:4px}
@keyframes vvlogo-in{from{transform:translateY(-40px) scale(.6) rotate(-8deg);opacity:0}}
@keyframes vvlogo-flota{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-6px) rotate(1.5deg)}}
@keyframes vvlogo-mueve{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-6deg) scale(1.08)}50%{transform:rotate(5deg) scale(1.1)}75%{transform:rotate(-3deg) scale(1.05)}}
@media (prefers-reduced-motion:reduce){.vv-logo img,.vv-logo:hover img{animation:none}}

/* Botón secundario (Cancelar) */
.vv a.button.vv-cancelar{display:inline-block;width:auto;margin:1.1rem 0 0;text-align:center;text-decoration:none !important;background:#fff !important;color:var(--vv-slate) !important;box-shadow:4px 4px 0 var(--vv-slate);padding:.85rem 1.6rem}
.vv a.button.vv-cancelar:hover{background:var(--vv-rosa) !important}
@media (max-width:600px){.vv-acciones{flex-direction:column-reverse;align-items:stretch}.vv a.button.vv-cancelar,.vv .vv-acciones button.button{width:100%}}

/* Registro de clientes */
.vv-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:0 1.2rem}
.vv-g>*{min-width:0}
.vv-g .span2{grid-column:span 2}
@media (max-width:600px){.vv-g .span2{grid-column:auto}}
.vv fieldset{border:2px solid var(--vv-slate);border-radius:26px;background:#fff;padding:1.2rem 1.3rem .4rem;margin:0 0 1.3rem;min-width:0}
.vv legend{background:var(--vv-sol);border:2px solid var(--vv-slate);border-radius:99px;padding:.15rem 1rem;font:800 1.05rem var(--vv-display);color:var(--vv-slate)}
.vv-id{display:flex;gap:.5rem}
.vv-id .select-tipo{flex:0 0 40%;width:auto !important;min-width:0;float:none !important;margin:0 !important}
.vv-id .identificacion{flex:1 1 0;width:auto !important;min-width:0}
.vv-ayuda-campo{margin:-.6rem 0 1rem;font-size:.85rem;font-weight:600;color:#4e5a64}
.vv .message{height:auto !important;opacity:1 !important;padding:.7rem 1rem !important;margin:0 0 1rem !important;border-radius:18px;border:2.5px solid var(--vv-slate);font-weight:700;text-align:left;cursor:default}
.vv-g .input:has(.vv-f){grid-column:span 2}
@media (max-width:600px){.vv-g .input:has(.vv-f){grid-column:auto}}
.vv-card.media{width:min(560px,94vw)}
.vv-g.dos{grid-template-columns:repeat(2,minmax(0,1fr))}
.vv-g.dos .input:has(.vv-f){grid-column:auto}
@media (max-width:600px){.vv-g.dos{grid-template-columns:minmax(0,1fr)}}

/* Fecha (día / mes / año): una sola fila. Sirve también fuera de .vv (p. ej. en el panel) */
.input:has(select.vv-f){display:flex;flex-wrap:wrap;gap:0 .5rem}
.input:has(select.vv-f) label{flex-basis:100%}
.input:has(select.vv-f) select{flex:1 1 0;width:auto !important;min-width:0;margin:0 !important}
.input:has(select.vv-f) select.fDc{flex-grow:.9}
.input:has(select.vv-f) select.fMc{flex-grow:1.7}
.input:has(select.vv-f) select.fYc{flex-grow:1.2}
.vv .input:has(select.vv-f) select{padding-inline:.8rem 2rem !important}
@media (max-width:420px){.input:has(select.vv-f) select{font-size:.95rem !important}}

/* Contenido del panel (listados): se aplica solo dentro de <div class="vvp"> y no toca el menú lateral */
.vvp{font-family:var(--vv-font);color:var(--vv-slate)}
.vvp .vvp-cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.2rem}
.vvp .vvp-nota{flex:1 1 320px;background:var(--vv-sol);border:2.5px solid var(--vv-slate);border-radius:22px 22px 22px 8px;padding:.8rem 1.1rem;font-weight:600;line-height:1.5;box-shadow:4px 4px 0 var(--vv-slate)}
.vvp .vvp-nota i{display:inline-grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;background:#fff;border:2px solid var(--vv-slate);font-size:.8rem}
.vvp a.button.vvp-nuevo{background:var(--vv-slate) !important;color:#fff !important;border:2.5px solid var(--vv-slate);border-radius:99px;padding:.8rem 1.5rem;font:800 1rem var(--vv-font) !important;box-shadow:4px 4px 0 var(--vv-sol);margin:0;text-decoration:none !important;transition:transform .15s}
.vvp a.button.vvp-nuevo:hover{transform:translate(-1px,-1px) rotate(-.6deg)}
.vvp .vvp-tabla{overflow-x:auto;background:#fff;border:2.5px solid var(--vv-slate);border-radius:26px;box-shadow:5px 5px 0 var(--vv-slate)}
.vvp table{width:100%;margin:0;border-collapse:separate;border-spacing:0;font-size:.95rem;background:transparent}
.vvp thead{background:var(--vv-turq) !important;color:var(--vv-slate)}
.vvp thead th{text-align:left;font:800 .8rem var(--vv-font);letter-spacing:.05em;text-transform:uppercase;padding:.8rem 1rem;white-space:nowrap;border-bottom:2.5px solid var(--vv-slate)}
.vvp thead th a{color:var(--vv-slate) !important;font-weight:800 !important;text-decoration:none !important}
.vvp tbody td{padding:.75rem 1rem;border-bottom:1px solid var(--vv-t100);font-weight:600}
.vvp tbody tr:last-child td{border-bottom:0}
.vvp tbody tr,.vvp tbody tr:nth-child(even){background:#fff;border:0}
.vvp tbody tr:hover,.vvp tbody tr:nth-child(even):hover{background:var(--vv-t50)}
.vvp tbody td a:not(.vvp-ico){font-weight:800 !important;text-decoration:underline !important;text-underline-offset:3px}
.vvp a.vvp-ico{display:inline-grid;place-items:center;width:2.3rem;height:2.3rem;margin-left:.3rem;border-radius:50%;background:var(--vv-t100);border:2px solid var(--vv-slate);color:var(--vv-slate) !important;text-decoration:none !important;transition:transform .15s}
.vvp a.vvp-ico:hover{background:var(--vv-sol);transform:rotate(-8deg) scale(1.08)}
.vvp a.vvp-ico i{padding:0}
.vvp .paginator{margin-top:1.2rem;text-align:center}
.vvp .pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin:0;padding:0;list-style:none}
.vvp .pagination li{display:inline-block;margin:0;border:2px solid var(--vv-slate);border-radius:99px;background:#fff;overflow:hidden}
.vvp .pagination li a,.vvp .pagination li span{display:block;padding:.35rem .9rem;font-weight:800;text-decoration:none !important;color:var(--vv-slate) !important;background:transparent}
.vvp .pagination li:hover{background:var(--vv-t100)}
.vvp .pagination li.active,.vvp .pagination li.current{background:var(--vv-sol)}
.vvp .pagination li.disabled{opacity:.45}

/* Formularios del panel (misma apariencia que las pantallas públicas) */
.vvp label{display:block;font-weight:700;font-size:.95rem;margin:0 0 .4rem;color:var(--vv-slate)}
.vvp .input{margin-bottom:1rem}
.vvp input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]),.vvp select,.vvp textarea{width:100%;font:600 1.05rem var(--vv-font) !important;color:var(--vv-slate) !important;background-color:var(--vv-t50) !important;border:2.5px solid var(--vv-slate) !important;border-radius:18px !important;padding:.75rem 1rem !important;height:auto !important;box-shadow:none !important;margin:0 !important}
.vvp textarea{min-height:5.5rem;border-radius:22px !important}
.vvp input:not([type=checkbox]):not([type=radio]):focus,.vvp select:focus,.vvp textarea:focus{box-shadow:0 0 0 4px var(--vv-sol) !important}
.vvp input::placeholder,.vvp textarea::placeholder{color:#6b7782;font-weight:500;padding-left:0}
.vvp select{-webkit-appearance:none;appearance:none;padding-right:2.4rem !important;background-image:linear-gradient(45deg,transparent 50%,var(--vv-slate) 50%),linear-gradient(135deg,var(--vv-slate) 50%,transparent 50%) !important;background-position:calc(100% - 22px) 55%,calc(100% - 16px) 55% !important;background-size:6px 6px !important;background-repeat:no-repeat !important}
.vvp .checkbox{display:inline-block;margin:0 .5rem .6rem 0}
.vvp .checkbox label{position:relative;display:inline-block;margin:0;cursor:pointer;border:2px solid var(--vv-slate);border-radius:99px;padding:.45rem 1rem;font-weight:700;font-size:.95rem;background:#fff;transition:transform .15s}
.vvp .checkbox input[type=checkbox]{position:absolute;opacity:0;width:0;height:0;margin:0 !important}
.vvp .checkbox label:has(input:checked){background:var(--vv-sol);box-shadow:3px 3px 0 var(--vv-slate);transform:rotate(-2deg)}
.vvp .checkbox label:has(input:focus-visible){box-shadow:0 0 0 4px var(--vv-turq)}
.vvp .checkbox input[type=checkbox]:checked+label{background:var(--vv-sol);box-shadow:3px 3px 0 var(--vv-slate);transform:rotate(-2deg)}
.vvp button.button,.vvp .button{cursor:pointer;font:800 1.05rem var(--vv-font) !important;color:#fff !important;background:var(--vv-slate) !important;border:2.5px solid var(--vv-slate);border-radius:99px;padding:.85rem 1.4rem;box-shadow:4px 4px 0 var(--vv-sol);margin:1.1rem 0 0;width:100%;transition:transform .15s}
.vvp button.button:hover,.vvp .button:hover{background:var(--vv-slate) !important;transform:translate(-1px,-1px) rotate(-.6deg)}
.vvp .vv-acciones button.button{width:auto;padding-inline:2.4rem}
.vvp .error-message{font-size:.85rem;font-weight:700;margin:-.6rem 0 1rem;color:#c0334a}
.vvp .form-error{border-bottom:2.5px solid #c0334a !important}
.vvp a.button.vv-cancelar{display:inline-block;width:auto;margin:1.1rem 0 0;text-align:center;text-decoration:none !important;background:#fff !important;color:var(--vv-slate) !important;box-shadow:4px 4px 0 var(--vv-slate);padding:.85rem 1.6rem}
.vvp a.button.vv-cancelar:hover{background:var(--vv-rosa) !important}
.vvp fieldset{border:2px solid var(--vv-slate);border-radius:26px;background:#fff;padding:1.2rem 1.3rem .4rem;margin:0 0 1.3rem;min-width:0}
.vvp legend{background:var(--vv-sol);border:2px solid var(--vv-slate);border-radius:99px;padding:.15rem 1rem;font:800 1.05rem var(--vv-display);color:var(--vv-slate)}
.vvp .input:has(select.vv-f) select{padding-inline:.8rem 2rem !important}
.vvp .vv-acciones,.vvp .vv-acciones{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:.6rem}
.vvp .vv-mascota{display:grid;grid-template-columns:minmax(200px,260px) minmax(0,1fr);gap:1.6rem;align-items:start}
@media (max-width:760px){.vvp .vv-mascota{grid-template-columns:minmax(0,1fr)}.vvp .vv-acciones{flex-direction:column-reverse;align-items:stretch}}
.vvp .vv-foto{background:#fff;border:2.5px solid var(--vv-slate);border-radius:30px 30px 30px 60px;padding:1.2rem;box-shadow:5px 5px 0 var(--vv-slate);text-align:center}
.vvp #imgfoto{display:block;width:100%;max-width:200px;height:auto;margin:0 auto .8rem;border:2.5px solid var(--vv-slate);border-radius:24px;background:var(--vv-t50)}
.vvp .vv-foto label.button{margin:.2rem 0 0;font-size:.95rem !important;text-align:center;cursor:pointer}
.vvp .vvp-pie{margin-top:.2rem}
.vvp .vvp-pie small{display:block;margin-top:.4rem;color:#4e5a64;font-weight:600;font-size:.8rem}
.vvp *{box-sizing:border-box}
.vv-g .input.textarea{grid-column:1/-1}

/* Selectores con buscador (select2): mismo aspecto que el resto de campos.
   El menú desplegable se dibuja fuera de .vv/.vvp, por eso estas reglas no están acotadas. */
.vv select.select2-hidden-accessible,.vvp select.select2-hidden-accessible{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;opacity:0 !important}
.vv .select2-container,.vvp .select2-container{width:100% !important}
.select2-container--default .select2-selection--single{height:auto !important;min-height:0;display:flex;align-items:center;background:#e9fafb !important;border:2.5px solid #323e48 !important;border-radius:18px !important;box-shadow:none !important}
.select2-container--default .select2-selection--single .select2-selection__rendered{width:100%;line-height:1.4 !important;padding:.6rem 2.4rem .6rem 1rem !important;font:600 1.05rem "Montserrat",Arial,sans-serif !important;color:#323e48 !important;background:transparent !important;border:0 !important;box-shadow:none !important}
.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#6b7782 !important}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:100% !important;top:0 !important;right:12px !important}
.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#323e48 transparent transparent !important}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #323e48 !important}
.select2-container--default.select2-container--open .select2-selection--single,.select2-container--default.select2-container--focus .select2-selection--single{box-shadow:0 0 0 4px #ffd35c !important}
.select2-container--open .select2-dropdown{margin-top:6px;border:2.5px solid #323e48 !important;border-radius:18px !important;overflow:hidden;background:#fff;box-shadow:4px 4px 0 #323e48}
.select2-container--open .select2-dropdown--above{margin-top:-6px}
.select2-search--dropdown{padding:.6rem .7rem .3rem !important}
.select2-search--dropdown .select2-search__field{width:100%;font:600 1rem "Montserrat",Arial,sans-serif !important;color:#323e48 !important;background:#e9fafb !important;border:2px solid #323e48 !important;border-radius:12px !important;padding:.5rem .8rem !important;box-shadow:none !important;outline:0 !important}
.select2-container--default .select2-results__option{padding:.55rem 1rem !important;font:600 .98rem "Montserrat",Arial,sans-serif;color:#323e48}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:#ffd35c !important;color:#323e48 !important}
.select2-container--default .select2-results__option[aria-selected=true]{background:#c9f2f5;color:#323e48}
.vvp .vv-datos{margin-top:.2rem}
.vvp .vv-dato.ancho{grid-column:1/-1}
.vvp a.vvp-pill{display:inline-flex;align-items:center;gap:.4rem;border:2px solid var(--vv-slate);border-radius:99px;padding:.3rem .9rem;background:var(--vv-t100);color:var(--vv-slate) !important;font-weight:800;text-decoration:none !important;transition:transform .15s}
.vvp a.vvp-pill:hover{background:var(--vv-sol);transform:rotate(-2deg)}
.vvp .vvp-vacio{text-align:center;padding:1.2rem 1rem;color:#4e5a64;font-weight:600}
.vvp fieldset .vvp-tabla{box-shadow:none;margin-bottom:.9rem}
.vvp a.button:link:not(.vv-cancelar):not(.vvp-nuevo),.vvp a.button:visited:not(.vv-cancelar):not(.vvp-nuevo){color:#fff !important;text-decoration:none !important}
.vvp .vvp-pie .button{display:block;text-align:center;margin:.2rem 0 0;font-size:.95rem !important}