/* PHropiedades: grafito y azul, los mismos colores de phropiedades.com.co. */
:root {
  --m-azul: #3f7cb0; --m-azul2: #2c6598; --m-claro: #8fb5d6; --m-grafito: #11151a; --m-tinta: #1a2027;
  --m-mut: #6b747d; --m-linea: #e3e7eb; --m-campo: #f5f6f8; --m-fondo: #f4f6f8;
}

/* ============================ INGRESO ============================ */
body.task-login, .task-login #layout, .task-login #layout-content { background: #fff !important; }
.task-login #layout-content { display: flex !important; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 32px 20px !important; }
.task-login #logo, .task-login #login-form { position: static !important; top: auto !important; }
.task-login #logo { display: block; width: auto !important; max-width: 300px !important; height: auto !important; max-height: 64px !important; margin: 0 auto 14px !important; }
.vjsmarca-sub { margin: 0; text-align: center; color: var(--m-mut); font: 400 15px/1.3 "Segoe UI", Inter, system-ui, sans-serif; }
.vjsmarca-linea { display: block; width: 100%; max-width: 380px; height: 2px; margin: 22px auto 26px; border-radius: 2px; background: linear-gradient(90deg, var(--m-tinta), var(--m-azul)); }
.task-login #login-form { width: 100%; max-width: 380px; margin: 0 auto; }
.task-login #login-form table, .task-login #login-form tbody, .task-login #login-form tr, .task-login #login-form td { display: block; width: 100%; }
.task-login #login-form td.title { display: none !important; }
.task-login #login-form tr { margin-bottom: 16px; }
.vjsmarca-etiqueta { display: block; margin: 0 0 7px; text-align: left; text-transform: uppercase; font: 700 12px/1 "Segoe UI", Inter, system-ui, sans-serif; letter-spacing: .05em; color: var(--m-mut); }
.task-login #login-form td.input-group { display: flex !important; }
.task-login #login-form td.input-group > input.form-control { flex: 1 1 auto; width: 100% !important; }
.task-login #login-form .input-group-prepend, .task-login #login-form .input-group-text { display: none !important; }
.task-login #login-form input.form-control { height: 48px !important; padding: 0 15px !important; background: var(--m-campo) !important; border: 1px solid var(--m-linea) !important; border-radius: 11px !important; font-size: 15px !important; color: var(--m-tinta) !important; box-shadow: none !important; }
.task-login #login-form input.form-control::placeholder { color: #aab1bb; }
.task-login #login-form input.form-control:focus { border-color: var(--m-azul) !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(63, 124, 176, .15) !important; }
.task-login #login-form .formbuttons { margin: 8px 0 0 !important; }
.task-login #rcmloginsubmit { width: 100%; height: 50px; border: 0 !important; border-radius: 11px !important; background: var(--m-azul) !important; color: #fff !important; font: 700 15px/1 "Segoe UI", Inter, system-ui, sans-serif !important; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 8px 20px rgba(63, 124, 176, .3) !important; }
.task-login #rcmloginsubmit:hover { background: var(--m-azul2) !important; }
.task-login #login-footer { margin-top: 26px !important; color: var(--m-mut) !important; font-size: 12px !important; letter-spacing: .04em; text-align: center; text-transform: uppercase; }
@media (max-width: 420px) { .task-login #logo { max-height: 52px !important; } }

.task-login .vjsmarca-derechos { margin: 10px 0 0; text-align: center; color: #9aa3ad; font: 400 11.5px/1.5 "Segoe UI", Inter, system-ui, sans-serif; }
.task-login .vjsmarca-derechos b { color: var(--m-tinta); font-weight: 700; letter-spacing: .03em; }

/* ======================= INTERFAZ DEL CORREO ======================= */
body { font-family: "Segoe UI", Inter, system-ui, -apple-system, Roboto, Arial, sans-serif !important; }
#layout { background: var(--m-fondo) !important; }

/* Menú principal (barra oscura) */
#layout-menu, #taskmenu, #layout-menu .popover-header { background: var(--m-grafito) !important; border: 0 !important; }
#layout-menu #logo, #layout-menu .popover-header img { max-height: 34px !important; width: auto !important; margin: 0 auto !important; }
#taskmenu a { color: #a3adb7 !important; position: relative; transition: color .15s, background .15s; }
#taskmenu a:hover { color: #fff !important; background: rgba(255, 255, 255, .05) !important; }
#taskmenu a.selected { color: #fff !important; background: rgba(63, 124, 176, .22) !important; }
#taskmenu a.selected:after { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--m-claro); }
#taskmenu .action-buttons a.compose { color: #fff !important; background: var(--m-azul) !important; margin: 6px 7px 10px !important; width: auto !important; border-radius: 12px !important; box-shadow: 0 8px 18px rgba(0, 0, 0, .35) !important; }
#taskmenu .action-buttons a.compose:hover { background: var(--m-azul2) !important; }
#taskmenu a.logout { color: #c99 !important; }
#taskmenu a.logout:hover { color: #ff9b9b !important; background: rgba(255, 90, 90, .08) !important; }
#taskmenu a.theme, #taskmenu a.about, #layout-menu a.theme, #layout-menu a.about { display: none !important; }

/* Carpetas */
#layout-sidebar { background: #f8f9fb !important; border-right: 1px solid var(--m-linea) !important; }
#layout-sidebar > .header { background: #fff !important; border-bottom: 1px solid var(--m-linea) !important; }
#layout-sidebar .header-title.username { color: var(--m-tinta) !important; font-weight: 700 !important; font-size: 14.5px !important; }
#folderlist-content ul li { border: 0 !important; }
#folderlist-content ul li > a { color: #3b444e !important; }
#folderlist-content ul li > a:hover { background: rgba(63, 124, 176, .07) !important; }
#folderlist-content ul li.selected { background: rgba(63, 124, 176, .12) !important; box-shadow: inset 3px 0 0 var(--m-azul); }
#folderlist-content ul li.selected > a { background: transparent !important; color: var(--m-azul2) !important; font-weight: 700; }
#folderlist-content ul li.selected > a:before { color: var(--m-azul) !important; }
.unreadcount, .listing li .unreadcount, #folderlist-content .unreadcount { background: var(--m-azul) !important; color: #fff !important; border-radius: 20px !important; font-weight: 700 !important; }

/* Lista de mensajes */
#layout-list { background: #fff !important; }
.header, .toolbar, #layout-list > .header, #layout-content > .header { background: #fff !important; border-bottom: 1px solid var(--m-linea) !important; }
.header .header-title, .boxtitle { color: var(--m-tinta) !important; font-weight: 700 !important; }
.toolbar a.button, .header a.button { color: #46505a !important; }
.toolbar a.button:not(.disabled):hover { color: var(--m-azul) !important; }
.searchbar, #layout-list .searchbar { background: var(--m-campo) !important; border-radius: 10px; margin: 8px 10px !important; border: 1px solid var(--m-linea) !important; }
table.messagelist tr td { border-color: #eef1f4 !important; }
table.messagelist tr:hover { background: #f6f9fc !important; }
table.messagelist tr.selected { background-color: rgba(63, 124, 176, .12) !important; box-shadow: inset 3px 0 0 var(--m-azul); }
table.messagelist tr.selected td, table.messagelist tr.focused td, table.messagelist tr:hover td { background: transparent !important; }
table.messagelist tr.unread .subject a, table.messagelist tr.unread td.subject span.subject { color: var(--m-tinta) !important; font-weight: 700; }
table.messagelist tr.unread .msgicon.status:before, table.messagelist tr.unread span.status:before { color: var(--m-azul) !important; }
table.messagelist td.subject span.fromto, table.messagelist .date { color: var(--m-mut) !important; }
.pagenav, #layout-list .footer, .footer.toolbar { background: #fbfcfd !important; border-top: 1px solid var(--m-linea) !important; }

/* Botones y campos */
.btn-primary, .button.mainaction, button.mainaction { background: var(--m-azul) !important; border-color: var(--m-azul) !important; color: #fff !important; border-radius: 9px !important; }
.btn-primary:hover, .button.mainaction:hover { background: var(--m-azul2) !important; border-color: var(--m-azul2) !important; }
input.form-control:focus, select.form-control:focus, textarea.form-control:focus { border-color: var(--m-azul) !important; box-shadow: 0 0 0 3px rgba(63, 124, 176, .15) !important; }
.listing li.selected > a, .listing li.selected { background-color: rgba(63, 124, 176, .1) !important; color: var(--m-tinta) !important; }
.listing li.selected > a:before { color: var(--m-azul) !important; }
.floating-action-buttons a.button, .floating-action-buttons .button { background: var(--m-azul) !important; color: #fff !important; box-shadow: 0 8px 20px rgba(63, 124, 176, .35) !important; }
.badge { background: var(--m-azul) !important; color: #fff !important; }

/* Mensaje abierto: enlaces en su azul y texto legible (no de máquina de escribir) */
#message-header a, .header-links a, #messagebody a, .message-part a, a.link, .formcontent a:not(.button):not(.btn) { color: var(--m-azul2) !important; }
#messagebody div.pre, div.message-part div.pre { font-family: "Segoe UI", Inter, system-ui, sans-serif !important; font-size: 14.5px !important; line-height: 1.65 !important; color: var(--m-tinta); }
#message-header h2.subject { color: var(--m-tinta) !important; }

/* Pie: derechos reservados y patrocinio (solo en la ventana principal) */
html.vjsmarca-con-pie body:not(.task-login) #layout { height: calc(100% - 32px) !important; }
html.vjsmarca-con-pie #taskmenu .special-buttons { bottom: 32px !important; }
#vjsmarca-pie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px; background: #fff; border-top: 1px solid var(--m-linea); color: #8a939c; font: 400 12px/1 "Segoe UI", Inter, system-ui, sans-serif; white-space: nowrap; overflow: hidden; }
#vjsmarca-pie b { color: var(--m-tinta); font-weight: 700; letter-spacing: .03em; }
#vjsmarca-pie .vjsmarca-pie-vjs:before { content: ""; display: inline-block; vertical-align: 1px; margin-right: 7px; width: 7px; height: 7px; border-radius: 50%; background: #f2b705; }
@media (max-width: 760px) {
  html.vjsmarca-con-pie body:not(.task-login) #layout { height: calc(100% - 44px) !important; }
  #vjsmarca-pie { height: 44px; flex-direction: column; justify-content: center; gap: 4px; font-size: 10.5px; padding: 0 10px; }
  .floating-action-buttons { bottom: 100px !important; }
  html.vjsmarca-con-pie #taskmenu .special-buttons { bottom: 44px !important; }
}
#vjsmarca-pie a, .task-login .vjsmarca-derechos a { color: var(--m-tinta) !important; font-weight: 700; text-decoration: none; letter-spacing: .03em; }
#vjsmarca-pie a:hover, .task-login .vjsmarca-derechos a:hover { color: var(--m-azul) !important; }