/* =========================
ROOT
========================= */

:root{

--primary:#1677f2;
--primary-dark:#2563eb;

--bg:#f4f7fb;

--card:#ffffff;

--text:#111827;

--muted:#64748b;

--border:#dbe3ef;

--soft:#f8fafc;

--danger:#dc2626;

--radius:18px;

}

/* =========================
RESET
========================= */

*{

margin:0;
padding:0;
box-sizing:border-box;

font-family:'Inter',sans-serif;

}

body{

background:var(--bg);

color:var(--text);

}

/* =========================
APP
========================= */

.app{

width:100%;

min-height:100vh;

padding:24px;

}

/* =========================
LAYOUT
========================= */

.content{

width:100%;

max-width:1200px;

margin:0 auto;

padding:28px;

background:var(--card);

border-radius:24px;

box-shadow:
0 10px 40px rgba(0,0,0,.05);

overflow:hidden;

}

/* =========================
SECTIONS
========================= */

.page-section{

display:none;

flex-direction:column;

gap:24px;

width:100%;

min-width:0;

}

.page-section.active{

display:flex;

animation:fade .15s ease;

}

/* =========================
ANIMATION
========================= */

@keyframes fade{

from{

opacity:0;

transform:translateY(4px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* =========================
SECTION HEADER
========================= */

.section-header{

display:flex;

flex-direction:column;

gap:8px;

}

.section-title{

font-size:26px;

font-weight:800;

letter-spacing:-1px;

color:var(--primary);

}

.section-description{

font-size:15px;

line-height:1.6;

color:var(--muted);

}

/* =========================
TABS
========================= */

.tabs{

display:flex;

gap:12px;

margin-bottom:28px;

flex-wrap:wrap;

}

.tab-btn{

border:none;

background:#eef4ff;

color:var(--primary);

padding:14px 20px;

border-radius:16px;

font-size:14px;

font-weight:700;

cursor:pointer;

transition:.2s;

}

.tab-btn:hover{

transform:translateY(-2px);

}

.tab-btn.active{

background:var(--primary);

color:white;

}

/* =========================
TOPBAR
========================= */

.topbar{

display:flex;

flex-direction:column;

gap:12px;

}

.topbar-row{

display:flex;

gap:12px;

align-items:stretch;

width:100%;

min-width:0;

}

/* =========================
SEARCH
========================= */

.search-wrapper{

position:relative;

flex:1;

min-width:0;

width:100%;

}

.search-icon{

position:absolute;

left:16px;

top:50%;

transform:translateY(-50%);

font-size:14px;

opacity:.7;

pointer-events:none;

z-index:5;

}

.search-wrapper input{

padding-left:46px !important;

}

/* =========================
INPUTS
========================= */

input,
select,
textarea{

width:100%;

height:54px;

border:1px solid var(--border);

background:var(--soft);

border-radius:16px;

padding:0 16px;

font-size:15px;

outline:none;

transition:.2s;

color:var(--text);

}

textarea{

padding:16px;

height:auto;

resize:none;

}

input:focus,
select:focus,
textarea:focus{

border-color:var(--primary);

background:white;

box-shadow:
0 0 0 4px rgba(22,119,242,.10);

}

#tipoTom,
#cantorSelecionado{

width:180px;

min-width:180px;

max-width:180px;

height:54px;

flex-shrink:0;

}

/* =========================
TABLE WRAPPERS
========================= */

.lista-harpa,
.lista-congregacional{

overflow:hidden;

border-radius:14px;

background:white;

box-shadow:
0 4px 20px rgba(0,0,0,.04);

width:100%;

min-width:0;

}

/* =========================
TABLE
========================= */

.tabela-hinos{

width:100%;

border-collapse:collapse;

table-layout:auto;

}

.tabela-hinos thead{

background:
linear-gradient(
135deg,
var(--primary),
var(--primary-dark)
);

}

.tabela-hinos th{

padding:16px;

font-size:14px;

font-weight:700;

text-align:left;

color:white;

}

.tabela-hinos td{

padding:14px 16px;

font-size:15px;

border-bottom:
1px solid #edf2f7;

word-break:break-word;

}

.tabela-hinos tbody tr{

transition:.2s;

}

.tabela-hinos tbody tr:nth-child(even){

background:#f8fafc;

}

.tabela-hinos tbody tr:hover{

background:#eef4ff;

}

.col-numero{

width:100px;

color:var(--text);

}

.col-tonalidade{

width:30px;

font-weight:700;

text-align:center;

}

.col-youtube{

width:30px;

text-align:center;

}

/* =========================
ADMIN BLOCK
========================= */

.admin-block{

display:flex;

flex-direction:column;

gap:20px;

margin-top:40px;

}

/* =========================
ADMIN TITLES
========================= */

.admin-section-title{

font-size:24px;

font-weight:800;

letter-spacing:-0.5px;

color:var(--primary);

}

/* =========================
GRIDS
========================= */

.cadastro-grid,
.admin-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));

gap:24px;

}

/* =========================
CARDS
========================= */

.cadastro-card,
.admin-card{

background:white;

padding:24px;

border-radius:22px;

box-shadow:
0 4px 18px rgba(0,0,0,.04);

display:flex;

flex-direction:column;

gap:16px;

border:1px solid #eef2f7;

min-width:0;

}

.card-title{

font-size:18px;

font-weight:700;

color:var(--text);

letter-spacing:-0.5px;

}

/* =========================
BUTTONS
========================= */

button{

height:52px;

border:none;

border-radius:16px;

font-size:14px;

font-weight:700;

cursor:pointer;

transition:.2s;

}

button:hover{

transform:translateY(-2px);

}

.cadastro-card button{

background:var(--primary);

color:white;

}

.secondary-btn{

background:#e2e8f0 !important;

color:var(--text) !important;

}

/* =========================
LISTA CANTORES
========================= */

.lista-cantores{

display:flex;

flex-direction:column;

gap:12px;

}

.linha-cantor{

display:grid;

grid-template-columns:
1fr 120px;

gap:12px;

}

/* =========================
EMPTY
========================= */

.empty{

background:white;

padding:50px;

border-radius:20px;

text-align:center;

font-size:16px;

font-weight:700;

color:var(--muted);

}

/* =========================
ADMIN LISTA
========================= */

.admin-lista{

display:flex;

flex-direction:column;

gap:12px;

margin-top:6px;

max-height:420px;

overflow:auto;

padding-right:4px;

}

.admin-item{

display:flex;

justify-content:space-between;

align-items:center;

gap:14px;

padding:16px;

border-radius:14px;

background:#f8fafc;

border:1px solid #eef2f7;

transition:.2s;

}

.admin-item:hover{

background:#eef4ff;

}

.admin-info{

display:flex;

flex-direction:column;

gap:4px;

min-width:0;

}

.admin-numero{

font-size:13px;

font-weight:700;

color:var(--muted);

}

.admin-titulo{

font-size:15px;

font-weight:700;

line-height:1.4;

word-break:break-word;

}

.admin-acoes{

display:flex;

gap:8px;

flex-shrink:0;

}

.admin-btn{

padding:10px 16px;

border-radius:12px;

font-size:13px;

font-weight:700;

}

.admin-editar{

background:#dbeafe;

color:#2563eb;

}

.admin-excluir{

background:#fee2e2;

color:var(--danger);

}

/* =========================
SCROLLBAR
========================= */

::-webkit-scrollbar{

width:8px;

height:8px;

}

::-webkit-scrollbar-thumb{

background:#dbe3ef;

border-radius:999px;

}

.col-youtube a{

text-decoration:none;

font-size:18px;

display:inline-block;

transition:.2s;

}

.col-youtube a:hover{

transform:scale(1.15);

}

/* =========================
MOBILE
========================= */

@media(max-width:768px){

.app{

padding:0;

}

.content{

padding:16px;

border-radius:0;

box-shadow:none;

}

.tabs{

flex-direction:column;

}

.tab-btn{

width:100%;

}

.section-title{

font-size:24px;

}

.topbar-row{

flex-direction:column;

}

#tipoTom,
#cantorSelecionado{

width:100%;

max-width:100%;

min-width:100%;

}

.tabela-hinos th,
.tabela-hinos td{

padding:10px 8px;

font-size:13px;

}

.col-numero{

width:55px;

}

.col-tonalidade{

width:70px;

}

.col-youtube{

width:40px;

}

.cadastro-grid,
.admin-grid{

grid-template-columns:1fr;

}

.linha-cantor{

grid-template-columns:1fr;

}

.admin-item{

flex-direction:column;

align-items:flex-start;

}

.admin-acoes{

width:100%;

}

.admin-btn{

flex:1;

}

}