/*
 * Ajustes de marca Integral Byte sobre el skin larry (Roundcube 1.3).
 * Se carga después de styles.css (y de mail.css/addressbook.css/settings.css) desde includes/links.html.
 * El login tiene su propia hoja (ib_login.css, cargada solo por templates/login.html).
 * Parte 2: acentos de la interfaz (enlaces, selección, foco, paneles): los azules de larry pasan a
 * neutros cálidos con acento naranja.
 * Colores de marca: naranja #F57C00 -> dorado #FED136 (mismo degradado del logo).
 */

/* ===================== Parte 2: acentos de la interfaz ===================== */

/* Enlaces (antes azul #0069a6): naranja oscuro con contraste suficiente sobre blanco */
/* :where() deja la especificidad en la de "a" para no ganarle a reglas como ".listing li a" */
a,
a:where(:visited),
.headers-table td.header a.morelink {
	color: #b35500;
}

/* Texto de listas (antes verde azulado #376572) */
.listing tbody td,
.listing li a {
	color: #4a4a4a;
}

/* Foco de campos y botones (antes brillo azul) */
input[type="text"]:focus,
input[type="password"]:focus,
input.button:focus,
textarea:focus {
	border-color: #f57c00;
	box-shadow: 0 0 5px 2px rgba(245, 124, 0, 0.55);
}

input[type="text"]:required,
input[type="password"]:required {
	border-color: #d9a066;
}

.formbuttons input.button:hover,
.formbuttons input.button:focus,
input.button.mainaction:hover,
input.button.mainaction:focus {
	border-color: #8a5a2b;
	box-shadow: 0 0 5px 2px rgba(245, 124, 0, 0.45);
}

a.button:focus,
input.button:focus {
	border-color: #f57c00;
	box-shadow: 0 0 2px 1px rgba(245, 124, 0, 0.5);
}

a.menuselector:focus,
a.menuselector.focus,
a.iconbutton:focus,
.pagenav a.button:focus {
	border-color: #f57c00;
	box-shadow: 0 0 4px 2px rgba(245, 124, 0, 0.5);
}

/* Paneles laterales (carpetas, contactos, configuración): azul claro -> neutro cálido */
.listbox,
.listbox table.listing,
ul.listing li,
.listbox .boxfooter {
	background-color: #f1efec;
}

.listbox .boxfooter,
ul.listing li ul,
.listing tbody td,
.listing li {
	border-color: #dcd7d1;
}

.boxfooter .listbutton,
.listsearchbox {
	background-color: #e6e2dd;
}

#compose-contacts #directorylist {
	border-bottom-color: #e6e2dd;
}

/* Títulos de panel y encabezados de lista */
.uibox .boxtitle,
.uibox .listing thead th,
.uibox .listing thead td {
	background: #e3dfda;
	color: #3d3d3d;
}

.uibox .listing thead th,
.uibox .listing thead td {
	border-bottom-color: #d3cdc6;
}

.messagelist thead tr th.sortedASC a,
.messagelist thead tr th.sortedDESC a {
	color: #3d3d3d;
}

/* Elemento seleccionado en paneles (carpeta, contacto, sección de configuración) */
.listbox .listitem.selected,
.listbox .tablink.selected,
.listbox .listitem.selected > a,
.listbox .tablink.selected > a,
.listing tbody tr.selected td,
.listing li.selected,
.listing li.selected > a {
	color: #7a3d00;
	background-color: #fbe3c0;
}

.listing.focus tbody tr.focused > td:first-child {
	border-left-color: #f57c00;
}

/* Correo seleccionado en la lista de mensajes */
.records-table tr.selected td {
	color: #7a3d00 !important;
	background-color: #fbe3c0;
}

.records-table.focus tr.selected td {
	color: #fff !important;
	background-color: #c26000 !important;
}

.records-table tr.selected td a,
.records-table tr.selected td span {
	color: inherit !important;
}

.records-table.focus tr.selected td a,
.records-table.focus tr.selected td span {
	color: #fff !important;
}

/* Contador de no leídos */
.folderlist li.mailbox.selected > a .unreadcount {
	background: #b35500;
}

.folderlist li.mailbox.recent > a .unreadcount {
	background: #d46a00;
}

/* Carpeta con correo nuevo (antes azul) */
.folderlist li.recent > a {
	color: #b35500;
}

/* Encabezados de la lista de correos y de contactos (antes azul claro) */
.records-table thead th,
.records-table thead td {
	background: #e3dfda;
	border-left-color: #d3cdc6;
}

.records-table thead th,
.records-table thead td,
.records-table thead th a,
.records-table thead td a,
.records-table thead th span,
.records-table thead td span {
	color: #6b6259;
}

/* Fondo general detrás de los paneles (antes gris azulado #cad2d9) */
body {
	background-color: #d8d5d1;
}

/* Barra superior: sección activa y foco. El icono de la sección activa es azul dentro del sprite
   buttons.png; hue-rotate lo lleva (con el texto, que conserva su azul original) al naranja. */
#taskbar a.button-selected span.button-inner {
	filter: hue-rotate(187deg) saturate(1.15);
}

#taskbar a:focus {
	background-color: rgba(245, 124, 0, 0.55);
}

/* ===================== Tipografía más suave ===================== */
/* Larry usa Lucida Grande/Verdana a 11 px y negritas completas: se ve pesada. Segoe UI (Windows),
   San Francisco (Mac) o Roboto (Android) a 12 px ocupan casi el mismo ancho que Verdana a 11 px. */
body,
input,
textarea,
select,
button {
	font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
}

body {
	font-size: 12px;
	color: #3a3a3a;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Negritas de no leídos: seminegrita en vez de negrita completa */
.messagelist tr.unread,
.folderlist li.unread,
.listbox .listitem.selected,
.listbox .tablink.selected,
.listing tbody tr.selected td,
.listing li.selected,
.listing li.selected > a {
	font-weight: 600;
}

.widescreen .messagelist td.subject span.subject {
	font-size: 13px;
}

.widescreen .messagelist td.subject span.fromto,
.widescreen .messagelist td.subject span.date {
	color: #77706a;
}

/* Correo con foco en la lista: borde izquierdo naranja (antes azul) */
.records-table.focus tbody tr.focused > td:first-child {
	border-left-color: #f57c00;
}

/* ===================== Vista moderna (2026-10-12) ===================== */

/* 1. Paneles como tarjetas: sombra suave y esquinas de 8 px en lugar del borde gris marcado */
.uibox {
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.uibox .boxtitle,
.uibox .listing thead th:first-child,
.widescreen #messagelistheader {
	border-radius: 8px 8px 0 0;
}

.uibox .boxfooter {
	border-radius: 0 0 8px 8px;
}

.widescreen #messagelistheader {
	background: #f7f5f2;
	border-bottom-color: #ece8e3;
}

#messagelistfooter {
	background: #f7f5f2;
	border-top-color: #ece8e3;
}

/* 2. Separadores finos y divisores entre columnas casi invisibles */
.records-table tbody td {
	border-bottom-color: #f0ece8;
	border-left-color: #f0ece8;
}

.listing tbody td,
.listing li,
ul.listing li ul,
.listbox .boxfooter {
	border-color: #ebe7e2;
}

.splitter {
	opacity: 0.35;
}

.splitter:hover {
	opacity: 0.8;
}

/* 3. Línea de marca bajo la barra superior */
#topnav::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, #f57c00, #fed136);
	pointer-events: none;
}

/* 4-5. Lista de correos: filas más amplias, respuesta al pasar el ratón y selección ligera
   (fondo naranja claro + barra naranja a la izquierda en vez de bloque sólido) */
.widescreen .messagelist td {
	padding: 5px 4px !important;
}

.records-table tbody tr:hover td {
	background-color: #faf6f1;
}

.records-table tr.selected td,
.records-table.focus tr.selected td {
	color: #3a2a1a !important;
	background-color: #fde9cf !important;
}

.records-table.focus tr.selected td {
	background-color: #fcdcb2 !important;
}

.records-table tr.selected td a,
.records-table tr.selected td span,
.records-table.focus tr.selected td a,
.records-table.focus tr.selected td span {
	color: inherit !important;
}

.records-table.focus tr.selected td span.fromto,
.records-table.focus tr.selected td span.date,
.records-table tr.selected td span.fromto,
.records-table tr.selected td span.date {
	color: #8a5a2b !important;
}

.records-table tbody tr.selected > td:first-child,
.records-table.focus tbody tr.focused > td:first-child {
	box-shadow: inset 3px 0 0 #f57c00;
}

/* 7. Asuntos largos: una sola línea con "…" (antes bajaban dejando la estrella sola) */
.widescreen .messagelist td.subject span.subject {
	white-space: nowrap;
}

/* 8. Carpetas: selección como píldora redondeada dentro del panel */
.folderlist li.mailbox,
.folderlist li.mailbox.selected {
	background: transparent;
	border-bottom: 0;
}

.folderlist li.mailbox > a {
	margin: 2px 6px;
	border-radius: 6px;
}

.folderlist li.mailbox > a:hover {
	background-color: #e9e4de;
}

.folderlist li.mailbox.selected > a {
	background-color: #fde3c0;
}

.folderlist li.mailbox .unreadcount {
	top: 5px;
	right: 12px;
	background: #9b8f84;
	font-weight: 600;
}

#mailboxlist {
	padding-top: 4px;
}

/* 9. Barra de herramientas: fondo redondeado al pasar el ratón; deshabilitados más tenues */
.toolbar a.button {
	border-radius: 6px;
}

.toolbar a.button:hover {
	background-color: rgba(0, 0, 0, 0.05);
}

.toolbar a.button.disabled,
.toolbar a.button.disabled:hover {
	opacity: 0.3;
	background-color: transparent;
}

.toolbar a.button:focus {
	color: #3a3a3a;
	background-color: rgba(245, 124, 0, 0.18);
	border-radius: 6px;
}

.toolbar a.button.selected {
	color: #b35500;
}

/* 10. Campos, búsqueda y selectores */
input[type="text"],
input[type="password"],
textarea {
	border-color: #d3ccc4;
	border-radius: 6px;
}

.searchbox input,
#quicksearchbar input {
	background: #fff;
	border-color: #d3ccc4;
	border-radius: 6px;
	font-weight: normal;
	font-size: 12px;
}

a.menuselector,
select.decorated {
	border-color: #d3ccc4;
	border-radius: 6px;
	background: #fff;
}

/* 11. Botones planos redondeados; principales con el degradado de la marca */
input.button,
.formbuttons input.button {
	color: #3a3a3a;
	padding: 5px 12px;
	border: 1px solid #d3ccc4;
	border-radius: 6px;
	background: #fff;
	box-shadow: none;
	text-shadow: none;
}

input.button:hover,
.formbuttons input.button:hover {
	background: #f6f3ef;
}

input.button.mainaction,
.formbuttons input.button.mainaction {
	color: #222;
	font-weight: 600;
	border-color: #e08a12;
	background: linear-gradient(100deg, #f57c00 0%, #fed136 100%);
}

input.button.mainaction:hover,
.formbuttons input.button.mainaction:hover {
	color: #111;
	background: linear-gradient(100deg, #f78a1a 0%, #fed850 100%);
}

/* 12. Barras de desplazamiento delgadas */
* {
	scrollbar-width: thin;
	scrollbar-color: #cfc8c0 transparent;
}

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-thumb {
	background: #cfc8c0;
	border-radius: 4px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

/* 13. Aviso flotante ("Actualizando…", "Mensaje enviado") */
#messagestack div {
	border: 0;
	border-radius: 8px;
	background: rgba(34, 34, 34, 0.92);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	font-weight: 600;
}

/* Transiciones cortas (respuesta visual al pasar el ratón / seleccionar) */
.records-table tbody td,
.folderlist li.mailbox > a,
.toolbar a.button,
input.button,
input[type="text"],
input[type="password"],
textarea,
a.menuselector {
	transition: background-color 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}
}

/* ===================== Acento secundario violeta (2026-10-12) ===================== */
/* El violeta del logo Web·Mail (#6A1B9A -> #B868D0) marca la navegación y la selección dentro del
   webmail; el naranja queda para la marca Integral Byte (logo, línea superior, botones principales).
   Tonos: #5e1a85 texto sobre claro · #7b2a9e acento (contraste 7:1 sobre blanco) · #f1e6f7 / #e7d3f2
   fondos de selección. Para regresar al naranja basta con borrar este bloque. */

/* Enlaces */
a,
a:where(:visited),
.headers-table td.header a.morelink,
.folderlist li.recent > a {
	color: #7b2a9e;
}

/* Foco de campos y controles */
input[type="text"]:focus,
input[type="password"]:focus,
input.button:focus,
textarea:focus,
a.button:focus,
a.menuselector:focus,
a.menuselector.focus,
a.iconbutton:focus,
.pagenav a.button:focus {
	border-color: #8e3fb0;
	box-shadow: 0 0 0 3px rgba(142, 63, 176, 0.22);
}

input[type="text"]:required,
input[type="password"]:required {
	border-color: #c9a6da;
}

/* Elemento seleccionado en paneles (carpeta, contacto, sección de configuración) */
.listbox .listitem.selected,
.listbox .tablink.selected,
.listbox .listitem.selected > a,
.listbox .tablink.selected > a,
.listing tbody tr.selected td,
.listing li.selected,
.listing li.selected > a,
.folderlist li.mailbox.selected > a {
	color: #5e1a85;
	background-color: #f1e6f7;
}

.listing.focus tbody tr.focused > td:first-child {
	border-left-color: #7b2a9e;
}

/* Correo seleccionado: fondo violeta claro + barra violeta a la izquierda */
.records-table tr.selected td,
.records-table.focus tr.selected td {
	color: #3b1452 !important;
	background-color: #f4ecf8 !important;
}

.records-table.focus tr.selected td {
	background-color: #ead9f3 !important;
}

.records-table.focus tr.selected td span.fromto,
.records-table.focus tr.selected td span.date,
.records-table tr.selected td span.fromto,
.records-table tr.selected td span.date {
	color: #7a5a8c !important;
}

.records-table tbody tr.selected > td:first-child,
.records-table.focus tbody tr.focused > td:first-child {
	box-shadow: inset 3px 0 0 #7b2a9e;
	border-left-color: #7b2a9e;
}

/* Contadores de no leídos */
.folderlist li.mailbox.selected > a .unreadcount,
.folderlist li.mailbox.recent > a .unreadcount {
	background: #7b2a9e;
}

/* Barra de herramientas y barra superior */
.toolbar a.button:focus {
	background-color: rgba(142, 63, 176, 0.14);
}

.toolbar a.button.selected {
	color: #7b2a9e;
}

/* Sección activa (Correo/Contactos/Configuración): el sprite y el texto son azules (#20a6fb, tono 203°);
   girar 62° (el giro de CSS no es exacto en tono) los lleva al violeta del logo, legible sobre la barra negra */
#taskbar a.button-selected span.button-inner {
	filter: hue-rotate(62deg) saturate(0.8) brightness(1.05);
}

#taskbar a:focus {
	background-color: rgba(142, 63, 176, 0.55);
}