/* Folha de estilo propria do painel Respondedor de Comentarios.
   Sem CDN de framework, tipografia do sistema. Aparencia de painel
   administrativo sobrio, nao de landing de venda. Comentarios em
   portugues por regra do projeto (texto interno). */

:root {
    --cor-fundo: #f4f5f7;
    --cor-superficie: #ffffff;
    --cor-borda: #dde1e6;
    --cor-texto: #1f2430;
    --cor-texto-suave: #5b6270;
    --cor-primaria: #1877f2;
    --cor-primaria-escura: #145dbf;
    --cor-perigo: #c0392b;
    --cor-alerta: #b8860b;
    --cor-sucesso: #1e7e34;
    --raio: 6px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--cor-fundo);
    color: var(--cor-texto);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
}

a {
    color: var(--cor-primaria);
}

/* Pagina inicial e selecao de pagina */

.landing {
    max-width: 640px;
    margin: 8vh auto 0;
    padding: 40px;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    text-align: center;
}

.landing h1 {
    margin-top: 0;
}

.landing .lead {
    color: var(--cor-texto-suave);
    margin-bottom: 32px;
}

.btn-facebook {
    display: inline-block;
    background: var(--cor-primaria);
    color: #fff;
    padding: 12px 24px;
    border: none;
    border-radius: var(--raio);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.btn-facebook:hover {
    background: var(--cor-primaria-escura);
}

.alert {
    background: #fdecea;
    color: var(--cor-perigo);
    border: 1px solid #f5c6cb;
    border-radius: var(--raio);
    padding: 10px 16px;
    margin-bottom: 20px;
}

footer {
    text-align: center;
    margin: 40px auto;
    padding-top: 20px;
    font-size: 14px;
    color: var(--cor-texto-suave);
}

footer a {
    margin: 0 10px;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

.page-list {
    list-style: none;
    padding: 0;
    text-align: left;
}

.page-list li {
    margin-bottom: 12px;
}

.page-list label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    cursor: pointer;
}

.page-list img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

/* Painel autenticado */

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--cor-superficie);
    border-bottom: 1px solid var(--cor-borda);
    padding: 16px 32px;
}

.topbar h1 {
    font-size: 18px;
    margin: 0;
}

.topbar .operador {
    color: var(--cor-texto-suave);
    font-size: 14px;
}

.topbar .logout {
    margin-left: 16px;
    text-decoration: none;
}

.contenido {
    max-width: 1100px;
    margin: 24px auto;
    padding: 0 24px 48px;
}

.card-pagina {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 20px;
    margin-bottom: 24px;
}

.card-pagina img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

.card-pagina > div:first-of-type {
    flex: 1;
}

.estado {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.estado.activo {
    background: #e6f4ea;
    color: var(--cor-sucesso);
}

.estado.inactivo {
    background: #fdecea;
    color: var(--cor-perigo);
}

.contadores {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.contador {
    flex: 1;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 16px 20px;
}

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

.contador .etiqueta {
    color: var(--cor-texto-suave);
    font-size: 13px;
}

.filtros {
    margin-bottom: 12px;
}

.filtros a {
    margin-right: 16px;
    text-decoration: none;
    color: var(--cor-texto-suave);
    font-size: 14px;
}

.filtros a.activo {
    color: var(--cor-primaria);
    font-weight: 600;
}

table.log {
    width: 100%;
    border-collapse: collapse;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    overflow: hidden;
}

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

table.log th {
    background: #fafbfc;
    color: var(--cor-texto-suave);
    font-weight: 600;
}

table.log tr:last-child td {
    border-bottom: none;
}

.respuesta-privada {
    margin-top: 6px;
    color: var(--cor-texto-suave);
    font-size: 12px;
}

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.badge.humano {
    background: #fff3cd;
    color: var(--cor-alerta);
}

.badge.resuelto {
    background: #e6f4ea;
    color: var(--cor-sucesso);
}

.badge.automatico {
    background: #e8eef7;
    color: var(--cor-primaria-escura);
}

.ventana-humano {
    margin-top: 4px;
    font-size: 11px;
    color: var(--cor-texto-suave);
}

.ventana-humano.fuera {
    color: var(--cor-alerta);
    font-weight: 600;
}

.vacio {
    text-align: center;
    color: var(--cor-texto-suave);
    padding: 40px 0;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
}

.paginacion {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    font-size: 14px;
    color: var(--cor-texto-suave);
}

.btn-resolver {
    background: var(--cor-primaria);
    color: #fff;
    border: none;
    border-radius: var(--raio);
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
}

.btn-resolver:hover {
    background: var(--cor-primaria-escura);
}

.btn-resolver:disabled {
    opacity: 0.6;
    cursor: default;
}