/* =====================================================================
   DC Eléctricos · Panel de Correos
   Línea gráfica oficial (verde de marca) + apariencia de cliente de correo
   ===================================================================== */
:root {
    --dc-verde:      #93c121;
    --dc-verde-osc:  #6c8f1a;
    --dc-verde-claro:#eaf4d4;
    --dc-tinta:      #1f2937;
    --dc-gris:       #6b7280;
    --dc-borde:      #e5e7eb;
    --dc-fondo:      #f5f6f4;
    --dc-rojo:       #ef4444;
    --topbar-h:      60px;
    --sidebar-w:     250px;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--dc-fondo);
    color: var(--dc-tinta);
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
a { text-decoration: none; }

/* ===== Barra superior ===== */
.topbar {
    height: var(--topbar-h);
    background: linear-gradient(90deg, var(--dc-verde-osc), var(--dc-verde));
    display: flex;
    align-items: center;
    padding: 0 16px;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.topbar .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}
.topbar .brand img { height: 36px; width: 36px; object-fit: contain;
    background: #fff; border-radius: 8px; padding: 3px; }
.topbar .search {
    flex: 1;
    max-width: 640px;
    margin: 0 24px;
}
.topbar .search input {
    width: 100%;
    border: none;
    border-radius: 24px;
    padding: 9px 18px;
    background: rgba(255, 255, 255, .92);
    font-size: .92rem;
}
.topbar .search input:focus { outline: 2px solid rgba(255,255,255,.6); }
.topbar .user {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}
.topbar .user .badge-admin {
    background: #fff; color: var(--dc-verde-osc);
    font-size: .68rem; padding: 2px 7px; border-radius: 10px; font-weight: 700;
}
.topbar .user a.salir { color: #fff; opacity: .9; }
.topbar .user a.salir:hover { opacity: 1; }

/* ===== Estructura general (shell) ===== */
.app-shell {
    display: flex;
    min-height: calc(100vh - var(--topbar-h));
}
.sidebar {
    width: var(--sidebar-w);
    background: #fff;
    border-right: 1px solid var(--dc-borde);
    padding: 16px 12px;
    flex-shrink: 0;
}
.app-main {
    flex: 1;
    min-width: 0;
    padding: 0;
}

/* ===== Botón Redactar ===== */
.btn-redactar {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    border: none;
    background: var(--dc-verde);
    color: #fff;
    font-weight: 600;
    padding: 12px 18px;
    border-radius: 28px;
    box-shadow: 0 2px 6px rgba(108, 143, 26, .35);
    margin-bottom: 18px;
    cursor: pointer;
    transition: .15s;
}
.btn-redactar:hover { background: var(--dc-verde-osc); color: #fff; }

/* ===== Carpetas ===== */
.folder-list { list-style: none; padding: 0; margin: 0; }
.folder-list a {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 16px;
    border-radius: 0 20px 20px 0;
    color: var(--dc-tinta);
    font-size: .92rem;
    margin-bottom: 2px;
}
.folder-list a i { font-size: 1.05rem; color: var(--dc-gris); }
.folder-list a:hover { background: var(--dc-verde-claro); }
.folder-list a.active { background: var(--dc-verde-claro); font-weight: 700; }
.folder-list a.active i { color: var(--dc-verde-osc); }
.folder-list a .count { margin-left: auto; font-size: .75rem; color: var(--dc-gris); }

.sidebar-title {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .5px;
    color: var(--dc-gris); font-weight: 700;
    padding: 14px 16px 6px;
}

/* Switcher de cuentas (buzones asignados) */
.cuenta-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px; border-radius: 8px;
    font-size: .86rem; color: var(--dc-tinta); margin-bottom: 2px;
}
.cuenta-item:hover { background: #f3f4f6; }
.cuenta-item.active { background: var(--dc-verde-claro); font-weight: 600; }
.cuenta-item .avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--dc-verde); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .82rem; flex-shrink: 0;
}
.cuenta-item .meta { overflow: hidden; }
.cuenta-item .meta b { display: block; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; font-weight: 600; }
.cuenta-item .meta small { color: var(--dc-gris); }

/* ===== Lista de correos (apariencia bandeja) ===== */
.mail-toolbar {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 20px; background: #fff;
    border-bottom: 1px solid var(--dc-borde);
}
.mail-list { background: #fff; }
.mail-row {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 20px; border-bottom: 1px solid #f0f1ef;
    cursor: pointer;
}
.mail-row:hover { box-shadow: inset 0 0 0 1px var(--dc-borde); z-index: 1; }
.mail-row.no-leido { background: #fbfdf6; }
.mail-row.no-leido .remitente,
.mail-row.no-leido .asunto { font-weight: 700; }
.mail-row .remitente { width: 200px; flex-shrink: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.mail-row .asunto { flex: 1; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; color: var(--dc-tinta); }
.mail-row .asunto .preview { color: var(--dc-gris); font-weight: 400; }
.mail-row .fecha { width: 90px; text-align: right; color: var(--dc-gris);
    font-size: .8rem; flex-shrink: 0; }

/* Estado vacío */
.empty-state { text-align: center; color: var(--dc-gris); padding: 64px 20px; }
.empty-state i { font-size: 3rem; color: #cdd3c2; }

/* ===== Panel de contenido (cuentas admin) ===== */
.content-pad { padding: 24px; }
.card-dc {
    border: 1px solid var(--dc-borde); border-radius: 12px;
    background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.btn-dc { background: var(--dc-verde); border-color: var(--dc-verde); color:#fff; }
.btn-dc:hover { background: var(--dc-verde-osc); border-color: var(--dc-verde-osc); color:#fff; }
.text-dc { color: var(--dc-verde-osc); }
.badge-activo { background: var(--dc-verde-claro); color: var(--dc-verde-osc); }
.badge-inactivo { background: #fde2e2; color: var(--dc-rojo); }

/* ===== Login ===== */
.login-body {
    min-height: 100vh; margin: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--dc-verde-osc), var(--dc-verde));
}
.login-card-buzon {
    width: 100%; max-width: 390px; background: #fff;
    padding: 2.4rem 2rem; border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}
.login-logo { width: 84px; height: 84px; margin: 0 auto; }
.login-logo img { width: 100%; height: 100%; object-fit: contain; }

/* Responsive */
@media (max-width: 768px) {
    .sidebar { display: none; }
    .topbar .search { margin: 0 10px; }
    .mail-row .remitente { width: 130px; }
}