/* ============================================================
   Tema Huella — implementación del handoff "Panel de veterinaria"
   (Claude Design). Tokens: Inter, teal #0FB5A6, bordes suaves,
   radios 12px, sidebar #FAFAFB. Se carga vía render hook, sin build.
   ============================================================ */

:root {
    --huella-border: #ececef;
    --huella-border-strong: #e2e2e6;
    --huella-border-bold: #cacad1;
    --huella-bg-soft: #fafafb;
    --huella-bg-sunken: #f4f4f6;
    --huella-text-1: #0e0e10;
    --huella-text-3: #55555c;
    --huella-text-4: #86868e;
    --huella-acc: #0fb5a6;
    --huella-shadow-xs: 0 1px 2px rgba(16, 16, 20, 0.04);
    --huella-shadow-sm: 0 2px 4px rgba(16, 16, 20, 0.05);
    --huella-shadow-md: 0 4px 12px rgba(16, 16, 20, 0.06), 0 2px 4px rgba(16, 16, 20, 0.04);
    --huella-shadow-lg: 0 12px 28px rgba(16, 16, 20, 0.10), 0 4px 8px rgba(16, 16, 20, 0.05);
    --huella-ease: cubic-bezier(.4, 0, .2, 1);
    --huella-ease-out: cubic-bezier(.16, 1, .3, 1);
    --huella-dur: .16s;
    --huella-ring: 0 0 0 3px rgba(15, 181, 166, 0.26);
    --sidebar-width: 15.5rem;
}

/* ---- Base ---- */
.fi-body {
    background: #ffffff;
    color: #2a2a2e;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    -webkit-font-smoothing: antialiased;
}

/* ---- Sidebar ---- */
.fi-sidebar,
.fi-main-sidebar {
    background: var(--huella-bg-soft);
    border-right: 1px solid var(--huella-border);
}

.fi-sidebar-header {
    background: transparent;
    box-shadow: none;
}

.fi-sidebar-item-button,
.fi-sidebar-item a {
    border-radius: 7px;
    font-size: 13px;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-button,
.fi-sidebar-item a[aria-current="page"] {
    background: #ffffff;
    box-shadow: var(--huella-shadow-xs);
    border: 1px solid var(--huella-border);
    color: var(--huella-text-1);
    font-weight: 600;
}

/* ---- Topbar ---- */
.fi-topbar > nav,
.fi-topbar nav.fi-topbar-nav {
    height: 56px;
    min-height: 56px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--huella-border);
    box-shadow: none;
}

/* ---- Superficies: secciones, tablas, widgets ---- */
.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    border: 1px solid var(--huella-border-strong);
    border-radius: 12px;
    box-shadow: var(--huella-shadow-xs);
}

/* ---- Tabla ---- */
.fi-ta-header-cell {
    background: var(--huella-bg-soft);
}

.fi-ta-header-cell .fi-ta-header-cell-label,
.fi-ta-header-cell button span {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--huella-text-4);
}

.fi-ta-row {
    border-color: var(--huella-border);
}

.fi-ta-row:hover {
    background: var(--huella-bg-soft);
}

.fi-ta-cell {
    font-size: 13px;
}

/* ---- Badges: pills suaves como el diseño ---- */
.fi-badge {
    border-radius: 999px;
    font-weight: 500;
}

/* ---- KPIs (stats overview) ---- */
.fi-wi-stats-overview {
    gap: 14px;
}

.fi-wi-stats-overview-stat {
    padding: 16px 18px;
}

.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--huella-text-1);
}

.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--huella-text-3);
}

.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description {
    font-size: 11.5px;
    color: var(--huella-text-4);
}

/* ---- Encabezado de página ---- */
.fi-header-heading {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--huella-text-1);
}

.fi-header-subheading {
    font-size: 13px;
    color: var(--huella-text-4);
}

/* ---- Botones ---- */
.fi-btn {
    border-radius: 8px;
    font-size: 13px;
}

/* ---- Tabs del listado ---- */
.fi-tabs {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.fi-tabs-item {
    border-radius: 7px;
    font-size: 13px;
}

/* ---- Slide-over (ficha) ---- */
.fi-modal-slide-over-window {
    box-shadow: var(--huella-shadow-lg);
}

/* ---- Inputs ---- */
.fi-input-wrp {
    border-radius: 8px;
}

/* ---- Avatar circular de mascota (usado por la tabla y la ficha) ---- */
.huella-avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.huella-mono {
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 11px;
    color: var(--huella-text-4);
}

/* ============================================================
   Motion y pulido — lleva los formularios crear/editar (chrome
   estándar de Filament) al nivel del shell del diseño.
   ============================================================ */

/* Gutter y ancho máximo de crear/editar dentro del shell propio.
   Al reemplazar el layout de Filament se perdió el contenedor con
   padding (.fi-main-ctn); lo recuperamos aquí para que el contenido
   no quede pegado al sidebar. Solo aplica a .fi-page (crear/editar);
   los listados usan vistas Blade propias y no se ven afectados. */
.fi-panel-admin .fi-page {
    padding: 28px 32px;
    margin-inline: auto;
    width: 100%;
    max-width: 1360px;
}

@media (max-width: 1024px) {
    .fi-panel-admin .fi-page {
        padding: 20px 20px;
    }
}

::selection {
    background: #c4ede8;
    color: #0a776c;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--huella-border-strong);
    border-radius: 9px;
    border: 3px solid #fff;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--huella-border-bold);
}

/* Entrada suave de las secciones del formulario */
@keyframes huellaRise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.fi-main .fi-section,
.fi-main .fi-fo-component-ctn > .fi-section {
    animation: huellaRise 0.42s var(--huella-ease-out) both;
    transition: box-shadow var(--huella-dur) var(--huella-ease),
                border-color var(--huella-dur) var(--huella-ease);
}

.fi-main .fi-section:hover {
    box-shadow: var(--huella-shadow-sm);
}

/* Botones con feedback táctil */
.fi-btn {
    transition: background-color var(--huella-dur) var(--huella-ease),
                border-color var(--huella-dur) var(--huella-ease),
                color var(--huella-dur) var(--huella-ease),
                box-shadow var(--huella-dur) var(--huella-ease),
                transform var(--huella-dur) var(--huella-ease);
}

.fi-btn:hover {
    transform: translateY(-1px);
}

.fi-btn:active {
    transform: translateY(0) scale(0.98);
}

/* Ítems del sidebar y de tabla con transición */
.fi-sidebar-item-button,
.fi-sidebar-item a {
    transition: background-color var(--huella-dur) var(--huella-ease),
                color var(--huella-dur) var(--huella-ease);
}

.fi-ta-row {
    transition: background-color var(--huella-dur) var(--huella-ease);
}

/* Foco accesible y consistente en inputs */
.fi-input-wrp {
    transition: border-color var(--huella-dur) var(--huella-ease),
                box-shadow var(--huella-dur) var(--huella-ease);
}

.fi-input-wrp:focus-within {
    border-color: var(--huella-acc);
    box-shadow: var(--huella-ring);
}

/* Acciones dentro de tablas y encabezados con leve realce */
.fi-ta-actions .fi-icon-btn,
.fi-ac-action.fi-icon-btn {
    transition: background-color var(--huella-dur) var(--huella-ease),
                color var(--huella-dur) var(--huella-ease),
                transform var(--huella-dur) var(--huella-ease);
}

.fi-ta-actions .fi-icon-btn:active,
.fi-ac-action.fi-icon-btn:active {
    transform: scale(0.9);
}

/* Respeta la preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .fi-btn:hover,
    .fi-btn:active {
        transform: none;
    }
}