:root{
--primary:#2FA84F;
--primary-dark:#1E7E34;
--bg:#F5F7F8;
--surface:#fff;
--border:#E5E7EB;
--text:#333;
--muted:#6B7280;
--danger:#DC2626;
--shadow:0 10px 30px rgba(0,0,0,.06);
--radius:16px
}

*{
box-sizing:border-box
}

body{
margin:0;
background:var(--bg);
color:var(--text);
font-family:Arial,Helvetica,sans-serif
}

a{
text-decoration:none;
color:inherit
}

.app-shell{
display:grid;
grid-template-columns:260px 1fr;
min-height:100vh
}

.sidebar{
background:linear-gradient(180deg,#1E7E34,#166534);
color:#fff;
padding:24px 18px
}

.brand{
font-size:28px;
font-weight:700
}

.brand span{
font-weight:400
}

.unit-box{
margin:18px 0;
padding:14px;
border-radius:12px;
background:rgba(255,255,255,.1);
font-size:14px
}

.sidebar nav{
display:grid;
gap:6px
}

.menu-group{
margin-top:18px;
margin-bottom:6px;
padding:6px 12px;
font-size:11px;
font-weight:bold;
letter-spacing:1px;
text-transform:uppercase;
color:rgba(255,255,255,.6)
}

.sidebar nav a{
display:block;
padding:12px 14px;
border-radius:12px;
background:transparent;
color:#fff;
font-size:14px;
transition:.2s
}

.sidebar nav a:hover{
background:rgba(255,255,255,.12);
transform:translateX(3px)
}

.sidebar nav a.active{
background:rgba(255,255,255,.2);
font-weight:bold
}

.main-content{
padding:24px
}

.topbar{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:20px;
margin-bottom:20px
}

.topbar h1{
margin:0 0 6px
}

.topbar p{
margin:0;
color:var(--muted)
}

.user-pill{
padding:10px 16px;
background:#fff;
border:1px solid var(--border);
border-radius:999px;
box-shadow:var(--shadow)
}

.alert{
padding:14px 16px;
border-radius:12px;
margin:0 0 16px
}

.alert.success{
background:#ecfdf3;
color:#166534;
border:1px solid #bbf7d0
}

.alert.error{
background:#fef2f2;
color:#991b1b;
border:1px solid #fecaca
}

.alert.global{
max-width:420px;
margin:18px auto 0
}

.card{
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:20px
}

.stats-grid,
.grid-2{
display:grid;
gap:18px
}

.stats-grid{
grid-template-columns:repeat(4,minmax(0,1fr));
margin-bottom:18px
}

.grid-2{
grid-template-columns:repeat(2,minmax(0,1fr))
}

.stat-card{
background:#fff;
padding:22px;
border-radius:var(--radius);
border:1px solid var(--border);
box-shadow:var(--shadow)
}

.stat-card span{
display:block;
color:var(--muted);
margin-bottom:8px
}

.stat-card strong{
font-size:34px
}

.section-head{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:14px
}

.section-head.spaced{
margin-top:22px
}

.table{
width:100%;
border-collapse:collapse
}

.table th,
.table td{
padding:10px;
border-bottom:1px solid var(--border);
text-align:left;
font-size:14px;
vertical-align:top
}

.table th{
background:#f9fafb
}

.form-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px
}

.form-grid label{
display:grid;
gap:6px;
font-size:14px
}

.form-grid label.full{
grid-column:1/-1
}

.form-grid .checkbox{
display:flex;
align-items:center;
gap:8px;
padding-top:28px
}

.form-grid input,
.form-grid select,
.form-grid textarea{
width:100%;
padding:11px 12px;
border:1px solid var(--border);
border-radius:12px;
background:#fff
}

.form-grid textarea{
min-height:90px;
resize:vertical
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
border:0;
border-radius:12px;
padding:12px 18px;
font-weight:700;
cursor:pointer;
background:#eef2f7;
color:#333;
white-space:nowrap
}

.btn.primary{
background:var(--primary);
color:#fff
}

.btn.primary:hover{
background:var(--primary-dark)
}

.btn-sm{
padding:8px 12px;
font-size:13px;
border-radius:10px
}

.login-wrap{
min-height:100vh;
display:grid;
place-items:center;
padding:24px;
background:linear-gradient(135deg,#f5f7f8,#eefcf1)
}

.login-card{
max-width:420px;
width:100%
}

.login-card h2{
margin:0 0 8px
}

.login-card p{
margin:0 0 18px;
color:var(--muted)
}

.login-card .hint{
margin-top:14px;
color:var(--muted);
font-size:13px
}

/* TUTORES */
.tutor-page{
align-items:start
}

.tutor-form{
grid-template-columns:repeat(12,minmax(0,1fr));
gap:14px
}

.tutor-form label{
display:grid;
gap:6px;
font-size:14px;
grid-column:span 4
}

.tutor-form label.full{
grid-column:1 / -1
}

.tutor-form .checkbox{
display:flex;
align-items:center;
gap:8px;
padding-top:10px
}

.form-section-title{
grid-column:1 / -1;
margin-top:10px;
padding-top:10px;
padding-bottom:6px;
font-size:18px;
font-weight:700;
color:#2563eb;
border-top:1px solid var(--border)
}

.form-actions{
display:flex;
justify-content:flex-end;
gap:10px;
margin-top:8px;
flex-wrap:wrap
}

.tutor-list-head{
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
flex-wrap:wrap
}

.tutor-search{
display:flex;
gap:8px;
flex-wrap:wrap
}

.tutor-search input{
min-width:280px;
padding:11px 12px;
border:1px solid var(--border);
border-radius:12px;
background:#fff
}

/* TERMOS */
.variaveis-box{
margin-top:6px;
padding:14px 16px;
border:1px dashed var(--border);
border-radius:12px;
background:#f9fafb
}

.variaveis-box strong{
display:block;
margin-bottom:10px;
font-size:14px
}

.variaveis-lista{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:10px
}

.variaveis-lista span{
display:inline-block;
padding:8px 10px;
border-radius:10px;
background:#eefcf1;
border:1px solid #bbf7d0;
color:#166534;
font-size:13px;
font-weight:bold
}

.variaveis-box small{
display:block;
color:var(--muted);
font-size:12px
}

/* PETS */
.pets-page{
grid-template-columns:minmax(420px,1fr) minmax(620px,1.2fr);
align-items:start
}

.table-responsive{
width:100%;
overflow-x:auto
}

.pets-table{
min-width:980px
}

.actions-cell{
display:flex;
flex-wrap:wrap;
gap:8px;
align-items:center;
min-width:320px
}

.actions-cell form{
margin:0
}

.pet-list-thumb{
width:52px;
height:52px;
border-radius:999px;
object-fit:cover;
border:1px solid var(--border);
background:#f3f4f6
}

.pet-list-thumb-empty{
display:flex;
align-items:center;
justify-content:center;
font-size:10px;
color:var(--muted);
text-align:center;
padding:4px
}

.pet-photo-box{
display:flex;
align-items:center;
gap:16px;
padding-bottom:10px;
border-bottom:1px solid var(--border);
margin-bottom:6px
}

.pet-photo-preview{
width:110px;
height:110px;
border-radius:999px;
overflow:hidden;
border:1px solid var(--border);
background:#f3f4f6;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0
}

.pet-photo-preview img{
width:100%;
height:100%;
object-fit:cover
}

.pet-photo-placeholder{
font-size:13px;
color:var(--muted);
text-align:center;
padding:10px
}

.pet-photo-actions{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap
}

.pet-vetus-form{
grid-template-columns:repeat(12,minmax(0,1fr));
gap:14px
}

.pet-vetus-form label{
display:grid;
gap:6px;
font-size:14px;
grid-column:span 4
}

.pet-vetus-form label.full{
grid-column:1 / -1
}

.radio-line{
display:flex;
gap:18px;
flex-wrap:wrap;
padding-top:4px
}

.radio-line label{
display:flex;
align-items:center;
gap:6px;
font-size:14px
}

.pet-box{
margin-top:24px;
padding-top:10px;
border-top:1px solid var(--border)
}

.pet-form{
margin-top:10px;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px
}

.pet-form label.full{
grid-column:1 / -1
}

.quick-actions{
display:flex;
gap:10px;
flex-wrap:wrap
}

@media(max-width:1400px){
.pets-page{
grid-template-columns:1fr
}
}

@media(max-width:1100px){
.stats-grid{
grid-template-columns:repeat(2,minmax(0,1fr))
}

.grid-2,
.form-grid{
grid-template-columns:1fr
}

.tutor-form{
grid-template-columns:repeat(2,minmax(0,1fr))
}

.tutor-form label,
.tutor-form label.full,
.pet-vetus-form label,
.pet-vetus-form label.full{
grid-column:auto
}

.form-section-title,
.form-actions{
grid-column:1 / -1
}

.pet-vetus-form{
grid-template-columns:repeat(2,minmax(0,1fr))
}

.pet-photo-box{
flex-direction:column;
align-items:flex-start
}
}

@media(max-width:820px){
.app-shell{
grid-template-columns:1fr
}

.sidebar{
padding-bottom:10px
}

.topbar{
flex-direction:column
}

.stats-grid{
grid-template-columns:1fr
}
}

@media(max-width:700px){
.tutor-form,
.pet-vetus-form,
.pet-form{
grid-template-columns:1fr
}

.tutor-search input{
min-width:100%
}

.actions-cell{
min-width:220px

}
.pet-photo-box{
display:flex;
align-items:center;
gap:16px;
padding-bottom:10px;
border-bottom:1px solid var(--border);
margin-bottom:6px;
}

.pet-photo-preview{
width:130px;
height:130px;
border-radius:999px;
overflow:hidden;
border:2px solid var(--border);
background:#f3f4f6;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}

.pet-photo-preview img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.pet-photo-placeholder{
font-size:13px;
color:var(--muted);
text-align:center;
padding:10px;
}

.pet-photo-actions{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:10px;
flex-wrap:wrap;
}

.pet-list-thumb{
width:44px;
height:44px;
border-radius:999px;
object-fit:cover;
border:1px solid var(--border);
background:#f3f4f6;
display:block;
}

.pet-list-thumb-empty{
display:flex;
align-items:center;
justify-content:center;
font-size:10px;
color:var(--muted);
text-align:center;
padding:4px;
width:44px;
height:44px;
border-radius:999px;
border:1px solid var(--border);
background:#f3f4f6;
}
}