/* ============================================================
   Juanito Platja – Diseño completo desde cero
   Basado en el mockup Combined.tsx
   Paleta: #5C5F7E (brand) · #3D3F57 (dark) · #EEEEF4 (light)
   ============================================================ */

:root {
    --brand:       #5C5F7E;
    --brand-dark:  #3D3F57;
    --brand-med:   #4A4D6A;
    --brand-light: #EEEEF4;
    --brand-hover: #F0F0F6;
    --text-hi:     #202124;
    --text-lo:     #5f6368;
    --text-muted:  #80868b;
    --border:      #e8eaed;
    --border-dark: #dddde8;
    --row-unread:  #ffffff;
    --row-read:    #fafafa;
    --row-hover:   #f0f4ff;
    --row-sel:     #EEEEF4;
}


/* ══════════════════════════════════════════════════════════════
   BASE
   ══════════════════════════════════════════════════════════════ */

html, body {
    font-family: 'Roboto', 'Inter', 'Segoe UI', Arial, sans-serif !important;
    font-size: 14px !important;
    color: var(--text-hi) !important;
    background: #fff !important;
}


/* ══════════════════════════════════════════════════════════════
   1. MENÚ DE TAREAS  (barra lateral izquierda con iconos)
   ══════════════════════════════════════════════════════════════ */

#layout-menu,
#taskmenu {
    background-color: var(--brand-dark) !important;
    border-right: none !important;
}

#taskmenu a,
#layout-menu a {
    color: rgba(255,255,255,0.75) !important;
}

#taskmenu a:hover,
#taskmenu a:focus,
#taskmenu a.selected {
    color: #fff !important;
    background-color: rgba(255,255,255,0.12) !important;
}

/* Logo / email en el popover header del menú */
#layout-menu .popover-header {
    background-color: var(--brand) !important;
    color: rgba(255,255,255,0.9) !important;
    border-bottom: 1px solid var(--brand-med) !important;
}

#layout-menu .popover-header a {
    color: rgba(255,255,255,0.85) !important;
}

/* Separador popover */
#layout-menu .popover-header + .popover-body {
    background-color: var(--brand-dark) !important;
}


/* ══════════════════════════════════════════════════════════════
   2. CABECERAS DE COLUMNA  (barra superior aubergine unificada)
   ══════════════════════════════════════════════════════════════ */

/* Selectores amplios — cubre todas las variantes de anidamiento de Roundcube */
#layout-list .header,
#layout-list > .header,
#layout-content .header[role="toolbar"],
#layout-content > .header,
#layout-sidebar .header,
#layout-sidebar > .header,
div.listbox .header,
div.listbox > .header,
.listbox .header:not(.popover-header) {
    background-color: var(--brand) !important;
    border-bottom: 1px solid var(--brand-med) !important;
    color: #fff !important;
    min-height: 52px !important;
    line-height: 52px !important;
}

/* Texto, títulos e iconos blancos */
#layout-list .header .header-title,
#layout-list .header a.button,
#layout-list .header a.button.icon,
#layout-list .header button,
#layout-content .header .header-title,
#layout-content .header a.button,
#layout-content .header a.button.icon,
#layout-content .header button,
#layout-sidebar .header .header-title,
#layout-sidebar .header a.button,
#layout-sidebar .header button,
.listbox .header a,
.listbox .header span.header-title,
.listbox .header button {
    color: rgba(255,255,255,0.92) !important;
}

.listbox .header a.button:hover,
.listbox .header a.button:focus,
.listbox .header button:hover {
    background-color: rgba(255,255,255,0.15) !important;
    color: #fff !important;
    border-radius: 4px !important;
}

/* Separadores */
.listbox .header .separator,
.listbox .header hr {
    background-color: rgba(255,255,255,0.25) !important;
    border-color: rgba(255,255,255,0.25) !important;
}

/* Título de carpeta activa en el header */
.listbox .header h2,
.listbox .header h1,
.listbox .header .header-title {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 500 !important;
}


/* ══════════════════════════════════════════════════════════════
   3. BARRA DE BÚSQUEDA  (pill redondeada, fondo claro)
   ══════════════════════════════════════════════════════════════ */

.searchbar {
    background-color: var(--brand-light) !important;
    border-bottom: 1px solid var(--border-dark) !important;
    height: 48px !important;
    min-height: 48px !important;
    line-height: 48px !important;
    padding: 6px 10px !important;
    display: flex !important;
    align-items: center !important;
}

.searchbar form {
    background: #fff !important;
    border-radius: 24px !important;
    border: 1px solid var(--border-dark) !important;
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
    height: 36px !important;
    transition: box-shadow 0.15s, border-color 0.15s !important;
    overflow: hidden !important;
}

.searchbar form:before {
    color: var(--brand) !important;
    height: 36px !important;
    line-height: 36px !important;
    margin: 0 0 0 12px !important;
    font-size: 1rem !important;
    flex-shrink: 0 !important;
}

.searchbar input {
    height: 36px !important;
    line-height: 36px !important;
    font-size: 14px !important;
    color: var(--text-hi) !important;
    padding: 0 8px !important;
    background: transparent !important;
    border: 0 !important;
    flex: 1 !important;
}

.searchbar input::placeholder {
    color: #9090a8 !important;
    opacity: 1 !important;
}

.searchbar form:focus-within {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 2px rgba(92,95,126,0.2) !important;
}

.searchbar a,
.searchbar a:before {
    color: var(--brand) !important;
}

.searchbar a.selected {
    color: var(--brand-dark) !important;
}


/* ══════════════════════════════════════════════════════════════
   4. SIDEBAR – LISTA DE CARPETAS  (Gmail pill style)
   ══════════════════════════════════════════════════════════════ */

#layout-list {
    background-color: #fff !important;
    border-right: 1px solid var(--border) !important;
}

/* Botón Redactar – píldora con sombra */
.floating-action-buttons {
    position: absolute !important;
    bottom: 16px !important;
    left: 16px !important;
    right: 16px !important;
}

.floating-action-buttons a.button.compose,
a.button.compose:not(#taskmenu a) {
    background-color: var(--brand-light) !important;
    color: var(--brand-dark) !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.14) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 20px !important;
    width: 100% !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: box-shadow 0.15s !important;
}

.floating-action-buttons a.button.compose:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
    background-color: #dddde8 !important;
}

#taskmenu a.compose {
    background-color: var(--brand) !important;
    color: #fff !important;
    border-radius: 4px !important;
}

#taskmenu a.compose:hover {
    background-color: var(--brand-med) !important;
}

/* Items de carpeta */
.folderlist li > a {
    border-radius: 0 18px 18px 0 !important;
    margin-right: 8px !important;
    padding-left: 22px !important;
    height: 34px !important;
    line-height: 34px !important;
    font-size: 14px !important;
    color: var(--text-hi) !important;
    font-weight: 400 !important;
    transition: background-color 0.12s !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.folderlist li > a:hover {
    background-color: var(--brand-hover) !important;
    color: var(--brand-dark) !important;
}

/* Carpeta activa */
.folderlist li.selected > a,
.folderlist li.focused > a {
    background-color: var(--brand-light) !important;
    color: var(--brand-dark) !important;
    font-weight: 700 !important;
}

/* Indicador vertical izquierdo */
.folderlist li.selected::before,
.folderlist li.focused::before {
    background-color: var(--brand) !important;
}

/* Contador de no leídos */
.folderlist li.mailbox .unreadcount {
    background: transparent !important;
    color: var(--brand-dark) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    line-height: 34px !important;
    padding: 0 6px 0 0 !important;
    border-radius: 0 !important;
    min-width: auto !important;
    margin: 0 !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
}

.folderlist li.selected .unreadcount,
.folderlist li.focused .unreadcount {
    color: var(--brand) !important;
}

/* Icono de carpeta */
.folderlist li > a:before {
    color: var(--text-lo) !important;
    margin-right: 14px !important;
}

.folderlist li.selected > a:before,
.folderlist li.focused > a:before {
    color: var(--brand) !important;
}

/* Barra de cuota en pie del sidebar */
.quota .bar .current,
#quotadisplay .bar > span {
    background-color: var(--brand) !important;
}

.quota-info,
.quota-widget {
    color: var(--text-lo) !important;
    font-size: 12px !important;
}


/* ══════════════════════════════════════════════════════════════
   5. LISTA DE MENSAJES  (filas limpias, sin snippet)
   ══════════════════════════════════════════════════════════════ */

/* Tabla */
.messagelist {
    font-family: inherit !important;
    border-collapse: collapse !important;
    width: 100% !important;
}

/* Filas */
.messagelist tbody tr {
    border-bottom: 1px solid #f1f3f4 !important;
    cursor: pointer !important;
    transition: background-color 0.08s !important;
}

.messagelist tbody tr.unread td {
    background-color: var(--row-unread) !important;
}

.messagelist tbody tr:not(.unread) td {
    background-color: var(--row-read) !important;
}

.messagelist tbody tr:hover td {
    background-color: var(--row-hover) !important;
}

.messagelist tbody tr.selected td {
    background-color: var(--row-sel) !important;
}

/* Columna: Remitente */
.messagelist td.sender,
.messagelist td.from {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--text-hi) !important;
    white-space: nowrap !important;
}

.messagelist tr.unread td.sender,
.messagelist tr.unread td.from {
    font-weight: 700 !important;
}

/* Columna: Asunto – solo asunto, sin snippet */
.messagelist td.subject span.subject {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--text-lo) !important;
}

.messagelist tr.unread td.subject span.subject {
    font-weight: 700 !important;
    color: var(--text-hi) !important;
}

/* OCULTAR TEXTO DE PREVIEW / SNIPPET */
.messagelist td.subject small,
.messagelist td.subject .preview,
.messagelist td.subject span.preview,
.messagelist td.subject .msgfolder,
.messagelist td.subject .subject-secondary,
.messagelist span.preview {
    display: none !important;
}

/* Columna: Fecha */
.messagelist td.date {
    font-size: 12px !important;
    color: var(--text-lo) !important;
    white-space: nowrap !important;
}

.messagelist tr.unread td.date {
    font-weight: 600 !important;
    color: var(--brand-dark) !important;
}

/* Icono de estrella / flagged */
.messagelist span.flagged:before {
    color: #f4b400 !important;
}

.messagelist tr:not(.flagged) span.flagged:before,
.messagelist span.unflagged:before {
    color: #dadada !important;
}

/* Icono de estado / leído */
.messagelist span.msgicon.status:before {
    color: var(--brand-light) !important;
}

.messagelist tr.unread span.msgicon.status:before {
    color: var(--brand) !important;
}

/* Checkbox de selección */
.messagelist th.checkbox-cell,
.messagelist td.checkbox-cell {
    width: 36px !important;
    min-width: 36px !important;
}

/* "No hay mensajes" centrado */
.listing-info {
    color: #9090a8 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
}


/* ══════════════════════════════════════════════════════════════
   6. VISTA DE CORREO ABIERTO  (pantalla completa, centrado)
   ══════════════════════════════════════════════════════════════ */

#layout-content {
    background-color: #fff !important;
}

#layout-content.only {
    background-color: #fff !important;
}

/* Contenedor del mensaje */
#messagecontainer,
#layout-content .message-part,
#layout-content > .content {
    max-width: 860px !important;
    margin: 0 auto !important;
}

/* Cabecera del mensaje */
#message-header {
    padding: 28px 40px 20px !important;
    border-bottom: 1px solid var(--border) !important;
}

#message-header > .subject {
    font-size: 22px !important;
    font-weight: 400 !important;
    color: var(--text-hi) !important;
    margin-bottom: 18px !important;
    line-height: 1.3 !important;
}

#message-header .contact-photo {
    background-color: var(--brand) !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
}

#message-header .sender {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-hi) !important;
}

#message-header .address {
    font-size: 13px !important;
    color: var(--text-lo) !important;
}

/* Cuerpo del correo */
.message-htmlpart,
.message-part {
    padding: 24px 40px !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: var(--text-hi) !important;
}

/* Acciones de mensaje (Responder, Reenviar) */
.message-toolbar a.button.reply,
.message-toolbar a.button.forward,
#message-header .header-links a {
    color: var(--brand) !important;
}

/* Separador entre columnas */
.column-resizer {
    background: transparent !important;
    border-right: 1px solid var(--border) !important;
    width: 4px !important;
}

/* Panel de lectura vacío (ocultar decoración 3D) */
#layout-content > .content:not(:has(iframe)):not(:has(#message-header)) {
    background-color: #fafbff !important;
}

body.task-mail #layout-content > .scroller > *:not(.toolbar):not(.header):not(#messagecontent):not(.iframe-wrapper) {
    display: none !important;
}


/* ══════════════════════════════════════════════════════════════
   7. BOTÓN REDACTAR EN TAREAS (sidebar estrecho)
   ══════════════════════════════════════════════════════════════ */

#taskmenu a.compose {
    background-color: var(--brand) !important;
    color: #fff !important;
    border-radius: 4px !important;
    margin: 6px !important;
}

#taskmenu a.compose:hover {
    background-color: var(--brand-med) !important;
}

#taskmenu span.action-buttons a {
    background-color: var(--brand) !important;
    color: #fff !important;
    border-radius: 4px !important;
}


/* ══════════════════════════════════════════════════════════════
   8. BOTONES PRIMARIOS Y FORMULARIOS
   ══════════════════════════════════════════════════════════════ */

.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary,
a.btn-primary {
    background-color: var(--brand) !important;
    border-color: var(--brand-med) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--brand-med) !important;
    border-color: var(--brand-dark) !important;
    color: #fff !important;
}

#rcmloginsubmit {
    background-color: var(--brand) !important;
    border-color: var(--brand-med) !important;
    color: #fff !important;
}

/* Focus en inputs */
.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 0.2rem rgba(92,95,126,0.25) !important;
    outline: none !important;
}

/* Checkbox y radio */
.custom-control-input:checked ~ .custom-control-label::before,
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    accent-color: var(--brand) !important;
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
}


/* ══════════════════════════════════════════════════════════════
   9. SELECCIÓN EN LISTAS (contactos, ajustes, etc.)
   ══════════════════════════════════════════════════════════════ */

.listing li.selected > a,
.listing li.selected > span,
.listing tbody tr.selected td,
table.listing tr.selected td {
    background-color: var(--brand-light) !important;
    color: var(--brand-dark) !important;
}

.listing li.selected::before,
.listing li.focused::before {
    background-color: var(--brand) !important;
}


/* ══════════════════════════════════════════════════════════════
   10. BADGES / CONTADORES
   ══════════════════════════════════════════════════════════════ */

/* Badge global (notificaciones, etc.) */
span.badge,
.badge {
    background-color: var(--brand) !important;
    color: #fff !important;
}

/* En la lista de carpetas ya estilado arriba sin fondo */


/* ══════════════════════════════════════════════════════════════
   11. PESTAÑAS
   ══════════════════════════════════════════════════════════════ */

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.active .nav-link {
    color: var(--brand) !important;
    border-bottom-color: var(--brand) !important;
    font-weight: 600 !important;
}

.nav-tabs .nav-link:hover {
    color: var(--brand-med) !important;
}


/* ══════════════════════════════════════════════════════════════
   12. MENÚS DESPLEGABLES
   ══════════════════════════════════════════════════════════════ */

.popupmenu li a:hover,
.popupmenu li a:focus,
.menu li a:hover,
.menu li a:focus {
    background-color: var(--brand) !important;
    color: #fff !important;
}

.popupmenu li a.selected,
.menu li a.selected {
    color: var(--brand) !important;
    font-weight: 600 !important;
}


/* ══════════════════════════════════════════════════════════════
   13. PÁGINA DE LOGIN
   ══════════════════════════════════════════════════════════════ */

#login-form {
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 16px rgba(92,95,126,0.18) !important;
    padding: 32px 40px !important;
}

body.task-login {
    background-color: var(--brand-light) !important;
}

body.task-login #logo,
body.task-login .login-header {
    color: var(--brand) !important;
}

#rcmloginsubmit {
    width: 100% !important;
    padding: 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
}


/* ══════════════════════════════════════════════════════════════
   14. REDACTAR CORREO
   ══════════════════════════════════════════════════════════════ */

#compose-container .header,
#compose-container .compose-header {
    background-color: var(--brand) !important;
    color: #fff !important;
}

#compose-container .compose-subject input {
    font-size: 16px !important;
    font-weight: 400 !important;
    border-bottom: 1px solid var(--border) !important;
}

/* Barra herramientas editor */
.html-editor .editor-toolbar,
.tox .tox-toolbar {
    background-color: #f8f8fb !important;
    border-bottom: 1px solid var(--border) !important;
}


/* ══════════════════════════════════════════════════════════════
   15. AJUSTES / PREFERENCIAS
   ══════════════════════════════════════════════════════════════ */

#layout-sidebar {
    background-color: #fff !important;
    border-right: 1px solid var(--border) !important;
}

#layout-sidebar > .header {
    background-color: var(--brand) !important;
    color: #fff !important;
}

#settings-tabs .nav-link.active,
#settings-tabs .nav-item.show .nav-link {
    color: var(--brand) !important;
    border-color: var(--brand) !important;
}


/* ══════════════════════════════════════════════════════════════
   16. AJUSTES FINOS DE RESPONSIVO
   ══════════════════════════════════════════════════════════════ */

@media screen and (max-width: 768px) {
    .listbox .header {
        min-height: 44px !important;
        line-height: 44px !important;
    }

    .searchbar {
        height: 40px !important;
        min-height: 40px !important;
    }

    .folderlist li > a {
        height: 40px !important;
        line-height: 40px !important;
        font-size: 15px !important;
    }
}