/* Hoja de estilos del webmail. Una sola familia (Maven Pro), tamanos en rem
   sobre una base fluida, el armazon en flex; las tablas que quedan son datos
   (la lista de mensajes, los adjuntos). */

:root {
	--azul: #336699;
	--amarillo: #ffcc00;
	--naranja: #f60;
	--crema: #fff7e5;
	--resalte: #ffeeaa;
	--tinta: #1a1a1a;
	--gris: #666;
	--gris-claro: #efefef;
	--linea: #d6d6d6;
	--liga: #000080;
	--liga-hover: #0000ff;
	--lateral: 11rem;	/* ancho de la columna lateral y del espacio del logo */
	--canal: 1.25rem;	/* separacion entre esa columna y el contenido */
}

html { font-size: clamp(16px, 0.98rem + 0.2vw, 18px); height: 100%; }
body {
	margin: 0;
	height: 100%;
	overflow: hidden;	/* el scroll vive en #principal (y en #lateral): cabecera y menu quedan fijos */
	font-family: "Maven Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
	line-height: 1.45;
	font-weight: 450;	/* Maven Pro es delgada en 400; es variable, asi que 450 existe */
	color: var(--tinta);
	background-color: #fff;
}
table { font-family: inherit; font-size: inherit; }
button, input, select, textarea { font-family: inherit; font-size: 0.9rem; }
img { border: 0; }

a:link		{ color: var(--liga); }
a:visited	{ color: var(--liga); }
a:hover		{ color: var(--liga-hover); }

a.interface:link	{ color: var(--liga); }
a.interface:visited	{ color: var(--liga); }
a.interface:hover	{ color: var(--liga-hover); }

/* Links de la barra de navegacion	*/
a.navLink { color: #ffffcc; text-decoration: none; }
a.navLink:hover { color: var(--amarillo); }

/* Styles del Editor de Mozilla 1.3b	*/
.imagebutton	{ border: #ECE9D8 1px solid;  }
.toolbar		{ background-color: #C0C0C0;}

.tablaCuadroSecc { background-color: var(--azul); color: white; font-weight: bold; }
.toolbarText	{ font-size: 0.95rem; font-weight: bold; }

/* Formas y botones */
.submits { background-color: var(--amarillo); color: black; border: #c90 1px solid; border-radius: 0.2rem; padding: 0.15rem 0.5rem; cursor: pointer; }
.formas { background-color: white; border: #7F9DB9 1px solid; border-radius: 0.2rem; padding: 0.2rem 0.35rem; }
.formas2 { background-color: white; border: #7F9DB9 1px solid; padding: 0.4em; }
input.formas { padding: 0.2rem 0.35rem; }

/* Lineas de los meiles para el INBOX	*/
.mailRou { font-size: 0.85rem; }
.mailRou-nuevo { background-color: var(--crema); font-size: 0.85rem; }
.mailRou-leido { background-color: #fff; font-size: 0.85rem; }
.mailRou-borrado { background-color: #eee; text-decoration: line-through; font-size: 0.85rem; }
.toolBarTable { border: #fff 1px solid; cursor: pointer; }
.sangoMatic { background-color: #eee; font-size: 0.85rem; }
.sangoMatic #desBloq { border-width: 1px; background-color: var(--amarillo); }
.losBotonesDeLaTulbarSon { font-size: 0.85rem; }

/* Links de "Contestar" y demas controles */
.linkDeLaTulBarMor:link { color: #666666; text-decoration: none; font-weight: bold; }
.linkDeLaTulBarMor:visited { color: #666666; text-decoration: none; font-weight: bold; }
.linkDeLaTulBarMor:hover { color: #000000; }

/* ===== Armazon: cabecera, columna lateral y contenido (site.lib.php) ===== */
#hermes { max-width: 1400px; margin: 0 auto; padding: 0 1rem; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }

#cabecera { flex: none; display: flex; align-items: stretch; flex-wrap: wrap; gap: 0.5rem var(--canal); padding: 0.75rem 0 0.5rem; }
/* El logo lo cambia cada cuenta (webmail_logo), asi que la caja manda: la imagen
   se escala hasta tocar el primer borde y queda centrada, sin deformarse. */
/* El logo va de la parte alta de la toolbar al pie de la subbarra (la busqueda rapida es otro
   renglon del header, asi no cuenta) y llena esa caja sin deformarse */
/* La imagen va en absoluto: asi no le da altura a la caja (en un flex con wrap el
   height:100% de un hijo normal no resuelve y la imagen crecia a su ancho natural). */
#marca { flex: 0 0 var(--lateral); min-width: 0; position: relative; }
#marca img#logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; }
#cabecera-derecha { flex: 1 1 16rem; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }

/* Toolbar principal (los iconos son los gifs de siempre) */
#main_toolbar { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; }
#main_toolbar div {
	padding-left: 2.4rem;
	padding-right: 0.5rem;
	font-weight: 600;
	background-position: 0.2rem 50%;
	background-repeat: no-repeat;
	border: 1px solid transparent;
	border-radius: 0.3rem;
	cursor: pointer;
}
#main_toolbar div a { text-decoration: none; display: block; padding: 0.45rem 0; font-size: 1.15rem; color: var(--tinta); }
#main_toolbar div:hover { background-color: var(--gris-claro); border-color: var(--linea); }
#main_toolbar div#btn_home { background-image: url(partes/toolbar.home.gif); }
#main_toolbar div#btn_inbox { background-image: url(partes/toolbar.inbox.gif); }
#main_toolbar div#btn_nuevo { background-image: url(partes/toolbar.compose.gif); }
#main_toolbar div#btn_abook { background-image: url(partes/toolbar.abook.gif); }

/* Subbarra: cuenta/folder a la izquierda, opciones/buscar/salir a la derecha */
#subbarra { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.9rem; }
#sb_ad { color: #333; }
#folderlink { color: #333; text-decoration: none; }
#folderlink span { color: var(--gris); }
#folderlink:hover { color: #111; background-color: #f8f8f8; }
#sb_mn { font-weight: normal; color: var(--gris); text-align: right; }
#sb_mn a { text-decoration: none; }
#sb_mn a:hover { text-decoration: underline; }
#sb_mn a span { text-decoration: underline; }

/* Busqueda rapida (Alt+S) */
#buscadorRapido { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; padding: 0.4rem 0.6rem; font-size: 0.9rem; background-color: var(--gris-claro); border: var(--linea) 1px solid; border-radius: 0.3rem; }
#buscadorRapido label { font-weight: 600; color: var(--gris); }
#buscadorRapido input#tbBuscador { flex: 1 1 8rem; min-width: 0; }

#cuerpo { flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; gap: var(--canal); border-top: var(--linea) 1px solid; }
#lateral { flex: 0 0 var(--lateral); min-width: 0; font-size: 0.9rem; overflow-y: auto; overscroll-behavior: contain; padding: 0.75rem 0 1rem; }
#principal { flex: 1 1 0; min-width: 0; overflow: auto; overscroll-behavior: contain; padding: 0.75rem 0.25rem 0.75rem 0; }

/* Controles de la lista: borra, mueve, indicador de espacio */
#rBar { margin: 0 0 0.75rem; }
#rBar .msg_tool { display: flex; align-items: center; gap: 0.4rem; margin: 0.4rem 0; font-weight: 600; }
input.msg_tool { font-size: 0.8rem; border: #999 1px solid; border-radius: 0.2rem; background-color: #fff; padding: 0.1rem 0.4rem; cursor: pointer; }
input.msg_tool:hover { background-color: var(--resalte); }
img#icn_borra { width: 49px; height: 17px; }
img#icn_mueve { width: 49px; height: 15px; }
select#selBuzones { flex: 1 1 0; min-width: 0; font-size: 0.8rem; font-weight: normal; }

/* Columna lateral de escribe.php (lista rapida, mi grupo) y folders.php */
#lateral h4 { margin: 0.75rem 0 0.25rem; font-size: 0.9rem; background-color: #eee; padding: 0.1rem 0.3rem; }
#lateral iframe { width: 100%; border: 0; display: block; }
#lateral form.formaFolder { margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.3rem; }
#lateral form.formaFolder b { display: block; }
#lateral form.formaFolder .renglon { display: flex; align-items: center; gap: 0.3rem; }
#lateral form.formaFolder .renglon input.formas, #lateral form.formaFolder select.formas { flex: 1 1 0; min-width: 0; }

/* Estilos de los folders	*/
.tablaAttach { font-size: 0.85rem; }
.tablaFolderzor { border: #ffffff 1px solid; cursor: pointer; }
.flLink { color: black; text-decoration: none; }
.flLink:hover { color: #333333; }

#newFolderList { list-style: none; margin: 0; padding: 0; }
#newFolderList li { display: block; list-style: none; margin: 0 0 0.2em; padding: 0; background-image: url(/webmail/partes/icono.folder.cierra.gif); background-repeat: no-repeat; background-position: 0 50%; }
#newFolderList li a { text-decoration: none; margin-left: 25px; line-height: 1.75rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 0.2rem; padding: 0 0.3rem; }
#newFolderList li a:hover { background-color: #eee; }

#newFolderList li.fo { background-image: url(/webmail/partes/icono.folder.gif); background-color: var(--resalte); }
#newFolderList li.mo { cursor: row-resize; background-image: url(/webmail/partes/icono.folder-sub.gif); background-color: var(--resalte); }
#newFolderList li.mc { cursor: row-resize; background-image: url(/webmail/partes/icono.folder.cierra-sub.gif); }
#newFolderList li.fo a { font-weight: bold; }
#newFolderList li.mo a { font-weight: bold; }
#newFolderList li.fo a:hover { background-color: var(--resalte); }
#newFolderList li.mo a:hover { background-color: var(--resalte); }
#newFolderList li.s { display: none; border-left: #ccc 2px dashed; margin-left: 8px; background-position: 8px 50%; }
#newFolderList li.s a { margin-left: 32px; }

/* SPANs de Warnings	*/
.warnifica { font-size: 0.85rem; border: black 1px solid; padding: 0.6rem; margin: 0.6rem; background-color: white; }

/* Explicaciones de las opciones	*/
.explica { font-size: 0.8rem; color: var(--gris); padding-bottom: 1rem; }

/* Editor de Folders (folders.php): la lista es una tabla de datos */
.celdaEditaFolder { border-bottom: #6699cc 1px solid; }
table#fList { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: 0.95rem; }
table#fList thead td { font-weight: 600; background-color: var(--azul); color: #fff; padding: 0.4rem 0.5rem; white-space: nowrap; }
table#fList td { padding: 0.4rem 0.5rem; border-bottom: #99c 1px solid; vertical-align: middle; }
table#fList td:first-child { width: 1.75rem; text-align: center; padding-left: 0.5rem; }
table#fList td img, table#fList img.icono { width: 20px; height: 21px; vertical-align: middle; }
table#fList td a { text-decoration: none; }
table#fList td a:hover { text-decoration: underline; }
table#fList td:last-child { white-space: nowrap; text-align: right; }
table#fList td:last-child a, table#fList span.conMsg { margin-left: 0.5rem; }
table#fList tfoot td { background-color: var(--gris-claro); border-bottom: 0; font-weight: 600; color: var(--gris); }
span.conMsg { color: #bbb; cursor: default; }
.seccionOpcion h3 img { vertical-align: middle; margin-right: 0.25rem; }
.seccionOpcion .campo .renglon { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.seccionOpcion .campo .renglon select.formas { flex: 1 1 auto; max-width: 20rem; }

/* Etiqueta de Megas en spam y basura */
.FinfoLabel { color: var(--gris); font-size: 0.8rem; }

/* Estilos del buzon (mailbox.php): la lista de mensajes es una tabla de datos */
/* El buzon es un recuadro como el mensaje y el composer: la tabla lo llena sin
   margen y escrolea dentro de #listaMensajes con la barra azul pegada arriba */
#buzon #listaMensajes { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
#mboxTbl { width: 100%; table-layout: fixed; border-collapse: collapse; }
#mboxTbl col.cIconos { width: 2.7rem; }
#mboxTbl col.cCheck { width: 1.8rem; }
#mboxTbl col.cDe { width: 26%; }
#mboxTbl col.cFecha { width: 5rem; }
#mboxTbl col.cTam { width: 4.6rem; }
/* De y Asunto no se parten: lo que no cabe se corta con puntos suspensivos */
#mboxTbl td.de a, #mboxTbl td.asunto div { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mboxTbl td.de a { margin-right: 0.5rem; }
#mboxTbl td.asunto { cursor: pointer; }
/* La barra azul se queda pegada arriba mientras la lista escrolea dentro de #principal */
#mboxTbl tr.columnBar td { white-space: nowrap; overflow: hidden; position: sticky; top: 0; z-index: 1; background-color: var(--azul); }
#mboxTbl tr.columnBar { font-size: 0.85rem; color: white; background-color: var(--azul); }
#mboxTbl tr.columnBar img { width: auto; height: auto; }
#mboxTbl tr.columnBar table { font-size: 0.85rem; }
#mboxTbl tr.columnBar a.sortLink { font-weight: bold; color: white; text-decoration: none; }
#mboxTbl tr.columnBar a.sortLink:hover { color: var(--amarillo); }
#mboxTbl tr td { border-bottom: #99c 1px solid; cursor: default; padding: 0.3rem 0.2rem; vertical-align: middle; }
#mboxTbl td.columnBar { border-width: 0px; }
#mboxTbl td.sz  { text-align: right; }
#mboxTbl td.fc  { white-space: nowrap; text-align: right; }
/* Marca de "contestado" sobre el icono del mensaje */
#mboxTbl td.icono { text-align: center; padding-left: 0.6rem; }
.iconoMensaje { position: relative; display: inline-block; line-height: 0; }
.iconoMensaje.respondido::after { content: "<"; position: absolute; left: -0.15rem; bottom: -0.35rem; font-size: 0.8rem; line-height: 1; font-weight: 800; color: #366; text-shadow: 0 0 2px #fff, 0 0 2px #fff; }
#mboxTbl img { width: 25px; height: 17px; margin: 0 1px; vertical-align: middle; }

/* Herramientas del spambox	*/
#spamTools { font-size: 0.9rem; padding: 0.6rem; background-color: var(--gris-claro); }
#spamTools #spamStatus { color: var(--gris); font-weight: bold; }
#spamTools #explicaSpam { font-size: 0.85rem; }
#spamTools #spamButBox { text-align: right; }
#spamTools #spamButBox input { border-width: 1px; background-color: #c33; color: white; padding: 2px; }

/* Pagina principal de opciones: secciones con titulo, cada opcion es un titulo con su liga y su explicacion */
#menuOpciones { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; padding: 0.5rem 0.25rem; }
#menuOpciones section { flex: 1 1 18rem; max-width: 26rem; }
#menuOpciones h2, .seccionOpcion h2 { font-size: 1.3rem; font-weight: 600; margin: 0 0 0.5rem; padding-bottom: 0.25rem; border-bottom: var(--linea) 1px solid; }
#menuOpciones h3 { font-size: 1rem; font-weight: 600; margin: 0.9rem 0 0.1rem; }
#menuOpciones h3 a { text-decoration: none; }
#menuOpciones h3 a:hover { text-decoration: underline; }
#menuOpciones p, .seccionOpcion p { margin: 0; color: var(--gris); font-size: 0.9rem; }

/* Una opcion sola (firma, etc.): titulo, explicacion, el control a lo ancho y sus botones */
.seccionOpcion { max-width: 40rem; padding: 0.5rem 0.25rem; margin: 0; }
.seccionOpcion textarea { display: block; width: 100%; box-sizing: border-box; min-height: 8rem; margin: 0.75rem 0; }
.seccionOpcion .controles { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.seccionOpcion h3 { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 0.2rem; }
.seccionOpcion h2 img { vertical-align: middle; margin-right: 0.25rem; }
.seccionOpcion .campo { margin: 1rem 0; }
.seccionOpcion .campo > label { display: block; font-weight: 600; margin-bottom: 0.2rem; }
.seccionOpcion .campo input.formas { display: block; width: 100%; max-width: 28rem; box-sizing: border-box; }
.seccionOpcion .campo input.formas.corto { width: 4rem; }
.seccionOpcion .campo.opcion > label { display: flex; align-items: center; gap: 0.5rem; }
.seccionOpcion p.explica { margin: 0.25rem 0 0; padding: 0; font-size: 0.85rem; }
.seccionOpcion form.estado { margin: 1.25rem 0; padding: 0.6rem 0.75rem; background-color: var(--gris-claro); border-radius: 0.3rem; }
.seccionOpcion .apagado { color: #c33; }
.seccionOpcion .prendido { color: #363; }
.seccionOpcion .escala { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0.5rem 0; padding: 0.5rem 0.75rem; border: var(--linea) 1px solid; background-color: var(--gris-claro); border-radius: 0.3rem; font-size: 0.85rem; }
.seccionOpcion .escala input { margin: 0; }
.seccionOpcion select.lista { display: block; width: 100%; box-sizing: border-box; margin: 0.5rem 0; }
.submits.peligro { background-color: #c33; color: #eee; border-color: #922; }
.submits.ok { background-color: #060; color: #eee; border-color: #040; }
.submits.gris { background-color: var(--gris-claro); color: var(--tinta); border-color: #bbb; }
a.submits { display: inline-block; text-decoration: none; font-size: 0.9rem; line-height: normal; }
.seccionOpcion .controles .derecha { display: flex; align-items: center; gap: 0.5rem; }

/* Menu de opciones */
div.optsbox h4 { font-size: 0.9rem; margin: 0; }
div.optsbox ul { list-style: none; padding: 0; margin-top: 0; font-size: 0.9rem; }
div.optsbox li span { color: var(--naranja); font-weight: bold; }
div.optsbox li { white-space: nowrap; }
div.optsbox li a { text-decoration: none; }
div.optsbox li a:hover { text-decoration: underline; }

/* ===== Recuadro del mensaje (mensaje.php) y del composer (escribe.php) ===== */
/* El recuadro ocupa el panel completo (mismo margen arriba y abajo) y el panel no escrolea: lo
   que escrolea es el cuerpo del mensaje, normalmente el iframe, que crece hasta el borde. */
#principal:has(> .recuadro) { overflow: hidden; display: flex; flex-direction: column; }
#principal > #buscadorRapido { flex: none; margin-bottom: 0.75rem; }
.recuadro { border: var(--linea) 1px solid; border-radius: 0.4rem; overflow: hidden; box-sizing: border-box; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.recuadro > * { flex: none; }
.recuadro #msg_body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: auto; overscroll-behavior: contain; }
#msg_body > * { flex: none; }
#msg_body > iframe.cuerpoHtml { flex: 1 1 auto; }

/* Composer: los campos son inputs, el area de texto llena hasta la barra de adjuntos */
.barraMensaje input.manda { font-weight: 600; padding: 0.3rem 0.9rem; }
.camposComposer dt, .camposComposer dd { min-height: 2rem; display: flex; align-items: center; }	/* mismo alto con o sin input */
.camposComposer dd { gap: 0.4rem; min-width: 0; }
.camposComposer dd input.formas { flex: 1 1 auto; min-width: 0; max-width: 42rem; }
.camposComposer dd.deLine { color: var(--gris); display: block; line-height: 2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.camposComposer img.limpia { cursor: pointer; flex: none; }
.cuerpoComposer { padding: 0; }
#msg_body.cuerpoComposer > textarea { flex: 1 1 auto; width: 100%; min-height: 10rem; box-sizing: border-box; margin: 0; padding: 0.6rem 0.75rem; border: 0; border-top: var(--linea) 1px solid; resize: none; font: inherit; line-height: 1.45; outline: none; }
#msMtools.adjuntos { justify-content: flex-start; gap: 0.5rem 0.75rem; font-size: 0.85rem; }
#msMtools.adjuntos .archivos { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
#msMtools.adjuntos label.original { margin-left: auto; }
.barraMensaje { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; padding: 0.5rem 0.75rem; background-color: var(--gris-claro); border-bottom: var(--linea) 1px solid; font-size: 0.9rem; }
.barraMensaje nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; }
.barraMensaje nav img { vertical-align: middle; }
.barraMensaje .posicion { color: var(--gris); }
.recuadro h1.asunto { font-size: 1.1rem; font-weight: 600; line-height: 1.3; margin: 0.75rem 0.75rem 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.camposMensaje { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.15rem 1rem; margin: 0; padding: 0.25rem 0.75rem 0.75rem; font-size: 0.9rem; }
.camposMensaje dt { color: var(--gris); font-weight: 600; }
.camposMensaje dd { margin: 0; overflow-wrap: anywhere; }
.camposMensaje dd .masDestinatarios { cursor: pointer; color: #999; }
.camposMensaje dd .masDestinatarios:hover { color: black; }
.avisoSpam { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0 0.75rem 0.75rem; padding: 0.5rem 0.75rem; background-color: var(--crema); border: var(--amarillo) 1px solid; border-radius: 0.3rem; font-size: 0.9rem; }
.avisoSpam input { border-width: 1px; background-color: var(--amarillo); border-radius: 0.2rem; padding: 0.15rem 0.5rem; cursor: pointer; }

/* menusito de herramientitas (headers, baja msg, etc) */
#msMtools { display: flex; justify-content: flex-end; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.35rem 0.75rem; font-size: 0.8rem; background-color: var(--gris-claro); border-top: var(--linea) 1px solid; border-bottom: var(--linea) 1px solid; }
#msMtools img { width: 12px; height: 12px; vertical-align: middle; }
#msMtools a { font-weight: normal; }

#msg_body { padding: 0.5rem 0.5rem 0; }
.cuerpoHtml { width: 100%; border: 0; display: block; min-height: 12rem; }

/* Firma digital (S/MIME) del mensaje */
.firmaOk, .firmaMal { padding: 0.4rem 0.75rem; margin: 0 0 0.5rem; border-radius: 0.3rem; font-size: 0.9rem; }
.firmaOk { background-color: #e6f2e6; border: #669966 1px solid; color: #243; }
.firmaOk span { color: var(--gris); }
.firmaMal { background-color: #fbe9e9; border: #c33 1px solid; color: #611; }

/* Cargador de imagenes */
#unshadower { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.5rem 0.75rem; margin: 0 0 0.75rem; font-size: 0.9rem; border: var(--amarillo) 1px solid; border-radius: 0.3rem; background-color: #ffc; }
#unshadower input { order: 2; margin-left: auto; border-width: 1px; }
#unshadower span { flex: 1 1 16rem; }

/* Cosas de la pagina de login */
div#lg_hdr { padding: 2px 0 0 0.5em; margin-bottom: 0.5em; font-size: 90%; font-weight: bold; color: #eee; background-color: var(--azul); border-bottom: var(--naranja) 1px solid; }
input#lg_btn { font-size: 0.85rem; border-width: 1px; background-color: var(--amarillo); color: black; cursor: pointer; }
input#lg_btn:hover { color: #ffc; }

/* Dialogos en la pagina (<dialog>): el editor del nombre del contacto */
dialog.hermesDialogo { border: var(--linea) 1px solid; border-radius: 0.4rem; padding: 1rem 1.25rem; min-width: min(24rem, 90vw); box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2); color: var(--tinta); }
dialog.hermesDialogo::backdrop { background-color: rgba(0, 0, 0, 0.35); }
dialog.hermesDialogo h3 { margin: 0 0 0.75rem; font-size: 1.1rem; font-weight: 600; }
dialog.hermesDialogo .fila { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 0.5rem; align-items: center; margin: 0.4rem 0; font-size: 0.9rem; }
dialog.hermesDialogo .fila > span { color: var(--gris); }
dialog.hermesDialogo .fila input.formas, dialog.hermesDialogo .fila select.formas { width: 100%; box-sizing: border-box; }
dialog.hermesDialogo .controles { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; }
dialog.hermesDialogo .controles .derecha { display: flex; gap: 0.5rem; }
button.submits { font-size: 0.9rem; }

/* visor de headers del mensaje: */
#visor_headers { height: 350px; background-color: white; border: #999 2px solid; width: 66%; }
#visor_headers h3 { margin: 0; background-color: #999; color: white; padding-top: 3px; padding-bottom: 3px; }
#visor_headers h3 button { float: right; margin-right: 1em; }
#visor_headers div.escroller { overflow: auto; height: 285px; font-family: monospace; white-space: pre; margin: 12px; }
#visor_headers div.btnbar { text-align: right; }
#visor_headers label { display: block; margin-left: 33%; margin-top: 5em; background-position: 5px 50%; background-image: url(/weblets/ufoundry/common/loading-round.gif); background-repeat: no-repeat; }
#visor_headers label span { margin-left: 27px; line-height: 25px; font-size: 175%; color: var(--gris); }

/* visor inline de imagenes */
.img_view_img { max-width: 100%; border: #999 1px solid; }
.img_view_data { max-width: 512px; font-size: 0.85rem; margin: 0.25em 0 1em; }
.img_view_data a { float: right; text-decoration: none; }
.img_view_data a:hover { background-color: var(--resalte); }
.img_view_data span { color: #484848; }

/* Contactos: tarjetas en una cuadricula, la lista y las categorias como tablas de datos */
.seccionOpcion.ancha { max-width: none; }
#tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.75rem; margin-top: 1rem; }
.tarjeta { border: var(--linea) 1px solid; border-radius: 0.4rem; padding: 0.6rem 0.75rem; background-color: #fafafa; min-width: 0; }
.tarjeta h3 { margin: 0 0 0.3rem; font-size: 1rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarjeta h3 a { text-decoration: none; }
.tarjeta h3 a:hover { text-decoration: underline; }
.tarjeta .mail, .tarjeta .tel { font-size: 0.9rem; overflow-wrap: anywhere; }
.tarjeta .mail a { color: var(--tinta); text-decoration: none; }
.tarjeta .mail a:hover { text-decoration: underline; }
.tarjeta .tel { color: var(--gris); }

table.tablaDatos { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: 0.95rem; }
table.tablaDatos thead td { font-weight: 600; background-color: var(--azul); color: #fff; padding: 0.4rem 0.5rem; white-space: nowrap; }
table.tablaDatos td { padding: 0.4rem 0.5rem; border-bottom: #99c 1px solid; vertical-align: middle; }
table.tablaDatos td.centro { text-align: center; }
table.tablaDatos td a { text-decoration: none; }
table.tablaDatos td a:hover { text-decoration: underline; }
table.tablaDatos tbody tr:hover td { background-color: var(--resalte); }
table.tablaDatos .sinNombre { font-style: italic; color: #999; }
table.tablaDatos .si { color: #363; font-weight: 700; }
table.tablaDatos .no { color: #bbb; }
.seccionOpcion .campo label.opcion { display: flex; align-items: center; gap: 0.5rem; font-weight: 450; margin: 0.75rem 0; }

/* Editor de contacto: fichas (nombre, telefonos, direccion, en linea) en una cuadricula */
.principales { margin: 0.75rem 0 1rem; }
.principales .fila { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.5rem; align-items: center; margin: 0.4rem 0; }
.principales .fila > span { font-weight: 600; }
.principales input.formas, .principales select.formas { width: 100%; box-sizing: border-box; min-width: 0; }
.principales .renglonDoble { display: flex; gap: 1rem; align-items: center; }
.principales .renglonDoble .mail { flex: 0 0 75%; min-width: 0; }
.principales .renglonDoble .cat { flex: 1 1 0; min-width: 0; grid-template-columns: auto minmax(0, 1fr); }
.seccionOpcion.contacto { max-width: 56rem; }
.seccionOpcion .compartida { background-color: #ffc; border: var(--amarillo) 1px solid; border-radius: 0.3rem; padding: 0.4rem 0.6rem; font-size: 0.9rem; color: var(--tinta); }
.fichas { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; margin: 1rem 0; }
fieldset.ficha { border: var(--linea) 1px solid; border-radius: 0.4rem; padding: 0.4rem 0.75rem 0.75rem; margin: 0; min-width: 0; }
fieldset.ficha legend { font-weight: 600; padding: 0 0.3rem; display: flex; align-items: center; gap: 0.4rem; }
.ficha .fila { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.5rem; align-items: center; margin: 0.35rem 0; font-size: 0.9rem; }
.ficha .fila > span:first-child { color: var(--gris); }
.ficha .fila input.formas { width: 100%; box-sizing: border-box; min-width: 0; }
.ficha .fila .valor { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha .fila .valor a { text-decoration: none; }
.ficha .fila .valor a:hover { text-decoration: underline; }
.seccionOpcion .controles .izquierda { display: flex; align-items: center; gap: 0.75rem; }
.seccionOpcion .controles .izquierda a { text-decoration: none; display: inline-flex; align-items: center; gap: 0.25rem; }

/* "nuevo contacto": grande, a lo ancho de la columna lateral, sin subrayado */
#nvcard { margin-top: 0.5rem; }	/* mismo arranque que el h2 del panel (padding de .seccionOpcion) */
#nvcard a { display: block; padding: 0 0 0 1.6rem; line-height: 1.885rem; font-size: 1.15rem; font-weight: 600; text-decoration: none; white-space: nowrap; border-radius: 0.3rem; background-image: url(/webmail/partes/icono.agreaga_vcard.gif); background-repeat: no-repeat; background-position: 0 50%; }
#nvcard a:hover { background-color: #bcd35f; }

#sl_letras { margin-top: 1em; width: 100%; border: #999 1px solid; font-size: 90%; color: #999; }
#sl_letras option { color: #111; }

#h3cat { line-height: 1.75rem; background-repeat: no-repeat; background-image: url(/webmail/partes/icono.categorias.gif); background-position: 0 50%; font-size: 0.9rem; font-weight: normal; color: #111; margin: 0; border-bottom: #999 1px solid; }	/* el tamano de la lista de folders */
#h3cat span { margin-left: 18px; }
#h3cat a { font-size: 80%; float: right; text-decoration: none; }
#h3cat a:hover { background-color: var(--resalte); }
#categorias { margin-top: 1.5rem; }	/* el font-size: 11px inline que traia se fue: hereda el de la columna */
#cat_list { list-style: none; margin: 0.25rem 0 0; padding: 0; }
#cat_list li { list-style: none; margin: 0 0 0.2em; padding: 0 0.3rem; display: block; line-height: 1.75rem; border-radius: 0.2rem; }
#cat_list li a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cat_list li a:hover { background-color: #eee; }
#cat_list li a { text-decoration: none; color: black; }
#curcat { background-color: var(--resalte); }
#curcat li { font-weight: bold; }
#cat_list li.seccat a { color: #333; font-style: italic; }
#cat_list li.g { background-color: #eee; }

/* ===== Pantallas angostas: la columna lateral pasa arriba, los folders en fila ===== */
@media (max-width: 720px) {
	/* En pantallas angostas todo se apila y es la pagina la que escrolea. */
	html, body { height: auto; }
	body { overflow: auto; }
	#hermes { padding: 0 0.75rem 1rem; height: auto; display: block; }
	#lateral, #principal { overflow: visible; padding: 0.5rem 0 0; }
	#cabecera { align-items: center; }
	#marca { flex: 0 0 6rem; align-self: center; height: 3rem; }
	#cuerpo { flex-direction: column; gap: 0.75rem; }
	#lateral { flex: none; width: 100%; }
	#newFolderList { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
	#newFolderList li { margin: 0; padding-left: 0; }
	#newFolderList li.s { margin-left: 0; border-left: 0; }
	#rBar .msg_tool { margin: 0.25rem 0; }
	.camposMensaje { grid-template-columns: 1fr; gap: 0; }
	.camposMensaje dt { margin-top: 0.4rem; }
	#visor_headers { width: 95%; }
	.principales .renglonDoble { flex-direction: column; align-items: stretch; gap: 0; }
	.principales .renglonDoble .mail { flex: none; }
	.principales .renglonDoble .cat { grid-template-columns: 7rem minmax(0, 1fr); }
}

@media (prefers-reduced-motion: no-preference) {
	#main_toolbar div, input.msg_tool, #newFolderList li a { transition: background-color 120ms ease; }
}