/* =============================================================================
   ECA · Publisher (Post Box) — Facebook-style modal + collapsed pill en feed
   - Estado collapsed (sin focus): pill compacta ecav4 original
   - Estado focused/modal: layout Facebook (identity-bar arriba, textarea grande,
     bottom action bar con iconos de color, botón submit full-width)
   - Grid de attachments responsive (1/2/3/4+ imágenes)
   - SIN cambios JS — solo HTML insertado + CSS
   ============================================================================= */

/* --------------------------------------------------------------------------- */
/*  CARD BASE                                                                  */
/* --------------------------------------------------------------------------- */
.publisher {
	margin-bottom: 20px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
	padding: 0 !important;
	position: relative;
}
body.night-mode .publisher { background: var(--card-dark-color, #1e2e1e); }
body.publisher-focus .publisher {
	z-index: 1003;
	box-shadow: 0 12px 48px rgba(35, 75, 54, .18);
}
.publisher.mini { margin-bottom: 0; border-radius: 0; }

/* loader / close */
.publisher-loader { display: none; position: absolute; top: 8px; right: 12px; z-index: 1; }
.publisher-close  { position: absolute; top: 8px; right: 12px; z-index: 2; }

/* --------------------------------------------------------------------------- */
/*  IDENTITY BAR (avatar + nombre + privacy)                                   */
/*  Se oculta en estado collapsed, se muestra en focused/modal                 */
/* --------------------------------------------------------------------------- */
.publisher-identity-bar {
	display: none;
	align-items: center;
	gap: 10px;
	padding: 14px 16px 0;
}
body.publisher-focus .publisher-identity-bar,
.publisher[data-modal-mode="true"] .publisher-identity-bar,
#publisher-wapper-modal .publisher-identity-bar {
	display: flex;
}
.publisher-identity-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 1px solid #efefef;
}
body.night-mode .publisher-identity-avatar { border-color: var(--card-dark-divider, #2a3a2a); }
.publisher-identity-meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.publisher-identity-name {
	font-weight: 700;
	font-size: 15px;
	color: #1c1e21;
	line-height: 1.2;
}
body.night-mode .publisher-identity-name { color: #e4e6eb; }

/* Mover privacy pill al slot del identity-bar (orden visual) */
body.publisher-focus .publisher-footer-buttons,
.publisher[data-modal-mode="true"] .publisher-footer-buttons,
#publisher-wapper-modal .publisher-footer-buttons { position: relative; }

body.publisher-focus .publisher-footer-buttons .btn-group.js_publisher-privacy {
	/* visual: el dropdown queda en el footer pero achicado */
}
body.publisher-focus .btn-group.js_publisher-privacy > .btn,
.publisher[data-modal-mode="true"] .btn-group.js_publisher-privacy > .btn,
#publisher-wapper-modal .btn-group.js_publisher-privacy > .btn {
	background: #e4e6eb !important;
	color: #050505 !important;
	border: 0 !important;
	border-radius: 6px !important;
	padding: 4px 10px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	box-shadow: none !important;
}
body.night-mode.publisher-focus .btn-group.js_publisher-privacy > .btn { background: #3a3b3c !important; color: #e4e6eb !important; }

/* --------------------------------------------------------------------------- */
/*  MESSAGE ROW (textarea + avatar interno + emoji)                            */
/* --------------------------------------------------------------------------- */
.publisher-message {
	position: relative !important;
	padding: 15px 15px 20px 65px !important;
	transition: none !important;
	background: transparent !important;
	border-radius: 0 !important;
}
.publisher-message.no-avatar { padding-left: 15px !important; }

/* En modo focused/modal: ocultar avatar interno (ya está en identity-bar) y dar aire */
body.publisher-focus .publisher-message:not(.colored),
.publisher[data-modal-mode="true"] .publisher-message:not(.colored),
#publisher-wapper-modal .publisher-message:not(.colored) {
	padding: 16px 16px 8px !important;
}
body.publisher-focus .publisher-message:not(.colored) > .publisher-avatar,
.publisher[data-modal-mode="true"] .publisher-message:not(.colored) > .publisher-avatar,
#publisher-wapper-modal .publisher-message:not(.colored) > .publisher-avatar {
	display: none !important;
}

/* colored posts */
.publisher-message.colored,
.post-colored,
.post-colored-preview {
	height: 300px;
	padding: 30px;
	background-repeat: no-repeat !important;
	background-size: cover !important;
}
.publisher-message.colored { border-radius: 2px 2px 0 0; }
.publisher-message.colored .colored-text-wrapper,
.post-colored-text-wrapper {
	height: 240px;
	display: flex;
	text-align: center;
}
.publisher-message.colored .colored-text-wrapper { overflow-x: auto; }

/* wrapper textarea — sin pill en cualquier estado (ya no queremos el gris) */
.publisher-message:not(.colored) .colored-text-wrapper {
	height: auto !important;
	display: block !important;
	align-items: initial !important;
	background: transparent !important;
	border-radius: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
}

/* AVATAR interno (collapsed state) */
.publisher-avatar {
	position: absolute !important;
	left: 15px !important;
	top: 15px !important;
	width: 40px !important;
	height: 40px !important;
	padding: 2px;
	border: 1px solid #efefef;
	border-radius: 50%;
}
body.night-mode .publisher-avatar { border-color: var(--card-dark-divider, #2a3a2a); }
.publisher-message.colored .publisher-avatar { display: none; }

/* --------------------------------------------------------------------------- */
/*  TEXTAREA                                                                   */
/*  SIN !important en height/min-height — js_autosize necesita escribir inline */
/* --------------------------------------------------------------------------- */
.publisher textarea:not(.form-control) {
	background: transparent !important;
	direction: ltr;
	resize: none;
	outline: none;
	width: 100%;
	margin-top: 5px;
	padding: 0 !important;
	font-size: 16px;
	line-height: 24px;
	height: 24px;
	border: 0 none !important;
	font-weight: 400 !important;
	text-align: left !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: #1c1e21;
}
body.night-mode .publisher textarea:not(.form-control) { color: #e4e6eb; }

.publisher textarea:not(.form-control)::placeholder { color: #65676b; opacity: 1; }
.publisher textarea:not(.form-control):-ms-input-placeholder { color: #65676b; opacity: 1; }

/* Modo focused/modal → fuente grande tipo Facebook */
body.publisher-focus .publisher-message:not(.colored) .colored-text-wrapper textarea,
.publisher[data-modal-mode="true"] .publisher-message:not(.colored) .colored-text-wrapper textarea,
#publisher-wapper-modal .publisher-message:not(.colored) .colored-text-wrapper textarea {
	font-size: 24px !important;
	line-height: 32px !important;
	min-height: 140px;
	font-weight: 400 !important;
}
/* Si hay attachments, achicar fuente (como Facebook) */
body.publisher-focus .publisher.has-attachments .publisher-message:not(.colored) .colored-text-wrapper textarea,
.publisher.has-attachments[data-modal-mode="true"] .publisher-message:not(.colored) .colored-text-wrapper textarea,
#publisher-wapper-modal .publisher.has-attachments .publisher-message:not(.colored) .colored-text-wrapper textarea {
	font-size: 17px !important;
	line-height: 24px !important;
	min-height: 48px;
}

.publisher-message.colored textarea,
.post-colored .post-text {
	text-align: center;
	font-size: 25px;
	line-height: 30px;
	font-weight: 600;
	margin: auto;
}
.publisher-message.colored textarea { min-height: 60px; }

/* emoji icon (esquina derecha) */
.publisher-emojis {
	display: none;
	position: absolute;
	bottom: 8px;
	right: 12px;
}
body.publisher-focus .publisher-emojis,
.publisher[data-modal-mode="true"] .publisher-emojis,
#publisher-wapper-modal .publisher-emojis { display: block; }
.publisher-emojis .far { cursor: pointer; color: #65676b; font-size: 22px; }
body.night-mode .publisher-emojis .far { color: var(--body-color-dark, #b0c4b0); }

/* --------------------------------------------------------------------------- */
/*  SLIDER + SCRAPER + ATTACHMENTS                                             */
/* --------------------------------------------------------------------------- */
.publisher-slider { display: none; }

.publisher-scraper { display: none; position: relative; padding: 0 16px 12px; }
.publisher-scraper video { width: 100%; border-radius: 12px; }
.publisher-scraper img { width: 100%; height: auto; border-radius: 12px; }
.publisher-scraper-remover {
	position: absolute; top: 8px; right: 24px;
	width: 28px; height: 28px;
	background: rgba(0,0,0,.6); border: 0;
	border-radius: 50%; z-index: 1;
	display: flex; align-items: center; justify-content: center;
}
.publisher-scraper-remover button.close { opacity: 1; color: #fff; }

/* Attachments GRID (Facebook-style 1/2/3/4+) */
.publisher-attachments {
	padding: 0 16px 12px !important;
	display: grid;
	gap: 4px;
	grid-template-columns: 1fr;
}
.publisher-attachments:empty,
.publisher-attachments.x-hidden { display: none !important; }

.publisher-attachments .publisher-photo-item,
.publisher-attachments .attachment-item,
.publisher-attachments > div:not(.x-hidden) {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	background: #f0f2f5;
}
.publisher-attachments img,
.publisher-attachments video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 12px;
}
/* 2 imágenes → 2 columnas */
.publisher-attachments:has(> div:not(.x-hidden):nth-child(2)):not(:has(> div:not(.x-hidden):nth-child(3))) {
	grid-template-columns: 1fr 1fr;
}
/* 3 imágenes → 1 grande + 2 chicas */
.publisher-attachments:has(> div:not(.x-hidden):nth-child(3)):not(:has(> div:not(.x-hidden):nth-child(4))) {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
}
.publisher-attachments:has(> div:not(.x-hidden):nth-child(3)):not(:has(> div:not(.x-hidden):nth-child(4))) > div:nth-child(1) {
	grid-row: span 2;
}
/* 4+ → grid 2x2 */
.publisher-attachments:has(> div:not(.x-hidden):nth-child(4)) {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 200px 200px;
}
/* Altura única para 1 imagen */
.publisher-attachments:not(:has(> div:not(.x-hidden):nth-child(2))) > div:not(.x-hidden) {
	max-height: 400px;
}
/* Botón X remover por miniatura */
.publisher-attachments .btn-close,
.publisher-attachments .x-image-remover,
.publisher-attachments [class*="remove"] {
	position: absolute !important;
	top: 8px;
	right: 8px;
	width: 28px;
	height: 28px;
	background: rgba(0,0,0,.65) !important;
	border-radius: 50% !important;
	color: #fff !important;
	opacity: 1 !important;
	z-index: 2;
}

/* --------------------------------------------------------------------------- */
/*  PUBLISHER-META (album, location, gif, poll inputs)                         */
/* --------------------------------------------------------------------------- */
.publisher-meta {
	position: relative;
	border-top: 1px dashed #eee;
	font-weight: 600;
	margin: 0 16px;
	padding: 8px 0;
	display: none;
}
body.night-mode .publisher-meta { border-color: var(--card-dark-divider, #2a3a2a); }
.publisher-meta.top { border-top: 0; border-bottom: 1px dashed #eee; }
.publisher-meta .svg-container { position: absolute; top: 18px; left: 14px; }
.publisher-meta .svg-container.static { position: static; }
.publisher-meta input {
	background: #f0f2f5;
	width: 100%;
	color: #1c1e21;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	padding: 12px 16px 12px 40px;
	outline: 0 none;
	border: 0 none;
	border-radius: 12px;
}
.publisher-meta input.no-icon { padding: 12px 16px; }
body.night-mode .publisher-meta input { color: #e4e6eb; background: #3a3b3c; }

/* --------------------------------------------------------------------------- */
/*  TOOLS TABS — Facebook bottom action bar                                    */
/*  Estado collapsed (sin focus): oculto                                       */
/*  Estado focused/modal: card "Añadir a tu publicación" con iconos color      */
/* --------------------------------------------------------------------------- */
.publisher-tools-tabs {
	display: none;
	margin: 0 16px 12px !important;
	padding: 8px 12px !important;
	border: 1px solid #ced0d4 !important;
	border-radius: 12px !important;
	background: #fff !important;
	position: relative;
}
body.publisher-focus .publisher-tools-tabs,
.publisher[data-modal-mode="true"] .publisher-tools-tabs,
#publisher-wapper-modal .publisher-tools-tabs {
	display: block;
}
body.night-mode .publisher-tools-tabs {
	background: var(--card-dark-color, #1e2e1e) !important;
	border-color: var(--card-dark-divider, #3a3b3c) !important;
}

/* Label "Añadir a tu publicación" (lo agrega CSS antes del UL) */
.publisher-tools-tabs::before {
	content: "Añadir a tu publicación";
	display: block;
	float: left;
	font-weight: 600;
	font-size: 14px;
	color: #050505;
	line-height: 36px;
	padding-left: 4px;
}
body.night-mode .publisher-tools-tabs::before { color: #e4e6eb; }

/* UL → flex row alineado derecha */
.publisher-tools-tabs > ul.row {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 2px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}
.publisher-tools-tabs > ul.row > li {
	width: auto !important;
	max-width: none !important;
	flex: 0 0 auto !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Cada chip → icono circular 36px */
.publisher-tools-tab {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 36px !important;
	height: 36px !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 50% !important;
	padding: 0 !important;
	margin: 0 !important;
	color: transparent !important; /* ocultar texto */
	font-size: 0 !important;
	transition: background .15s;
	cursor: pointer;
	overflow: hidden;
}
.publisher-tools-tab:hover { background: #f0f2f5 !important; }
body.night-mode .publisher-tools-tab:hover { background: #3a3b3c !important; }

/* Iconos SVG dentro del chip — restaurar visibilidad y dar color */
.publisher-tools-tab .svg-container,
.publisher-tools-tab svg,
.publisher-tools-tab i,
.publisher-tools-tab .main-icon {
	color: inherit;
	font-size: 22px !important;
	width: 22px !important;
	height: 22px !important;
}

/* Colores Facebook por tipo de tab */
.publisher-tools-tab[data-tab="photos"]   { color: #45bd62 !important; }
.publisher-tools-tab[data-tab="video"]    { color: #e74c3c !important; }
.publisher-tools-tab[data-tab="reel"]     { color: #e74c3c !important; }
.publisher-tools-tab[data-tab="location"] { color: #f3425f !important; }
.publisher-tools-tab[data-tab="gif"]      { color: #6a40d9 !important; }
.publisher-tools-tab[data-tab="poll"]     { color: #f7b928 !important; }
.publisher-tools-tab[data-tab="audio"]    { color: #1877f2 !important; }
.publisher-tools-tab[data-tab="file"]     { color: #65676b !important; }
.publisher-tools-tab[data-tab="live"]     { color: #e74c3c !important; }
.publisher-tools-tab.js_publisher-feelings { color: #f7b928 !important; }

/* SVG fill heredado del color */
.publisher-tools-tab svg [fill]:not([fill="none"]) { fill: currentColor !important; }
.publisher-tools-tab svg [stroke]:not([stroke="none"]) { stroke: currentColor !important; }

/* "Aa" colored posts → botón cuadrado con gradiente */
.publisher-tools-tab[data-tab="colored"] {
	width: 36px !important;
	height: 36px !important;
	background: linear-gradient(135deg, #f44336 0%, #9c27b0 35%, #2196f3 65%, #4caf50 100%) !important;
	border-radius: 8px !important;
	color: #fff !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	position: relative;
}
.publisher-tools-tab[data-tab="colored"] .svg-container,
.publisher-tools-tab[data-tab="colored"] svg,
.publisher-tools-tab[data-tab="colored"] i,
.publisher-tools-tab[data-tab="colored"] .main-icon {
	display: none !important;
}
.publisher-tools-tab[data-tab="colored"]::after {
	content: "Aa";
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: -0.5px;
}

/* Tabs ocultos (link a página externa) que no van en la bottom bar Facebook */
.publisher-tools-tab[data-tab="blog"],
.publisher-tools-tab[data-tab="product"],
.publisher-tools-tab[data-tab="funding"],
.publisher-tools-tab[data-tab="offer"],
.publisher-tools-tab[data-tab="job"],
.publisher-tools-tab[data-tab="album"],
.publisher-tools-tab[data-tab="voice_notes"] {
	display: none !important;
}

/* Activated state */
.publisher-tools-tab.activated {
	background: #e7f3ff !important;
	color: var(--main-btn) !important;
}
body.night-mode .publisher-tools-tab.activated { background: #263951 !important; }

/* Disabled */
.publisher-tools-tab.disabled { opacity: .4; cursor: not-allowed; }

/* --------------------------------------------------------------------------- */
/*  FOOTER — opciones + privacy + botón submit full-width                      */
/* --------------------------------------------------------------------------- */
.publisher-footer {
	text-align: left;
	padding: 0 16px 16px;
}
.publisher-footer-options {
	text-align: left;
	border-bottom: 1px solid #ced0d4;
	margin-bottom: 16px;
	padding-bottom: 8px;
}
body.night-mode .publisher-footer-options { border-color: var(--card-dark-divider, #3a3b3c); }

.publisher-footer-buttons {
	display: flex;
	gap: 8px;
	align-items: center;
}

/* Privacy pill chico estilo FB en footer */
.publisher-footer .btn-group.js_publisher-privacy {
	flex: 0 0 auto;
}
.publisher-footer .btn-group.js_publisher-privacy > .btn {
	background: #e4e6eb !important;
	color: #050505 !important;
	border: 0 !important;
	border-radius: 8px !important;
	padding: 6px 12px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	box-shadow: none !important;
}
body.night-mode .publisher-footer .btn-group.js_publisher-privacy > .btn {
	background: #3a3b3c !important; color: #e4e6eb !important;
}
.publisher-footer .btn-group.js_publisher-privacy .btn-group-icon { font-size: 12px; margin-right: 4px !important; }

/* Submit FULL-WIDTH */
.publisher-footer .d-grid {
	flex: 1 1 auto;
}
.publisher-footer .btn-primary,
.publisher-footer button[type="submit"],
.js_publisher-publish,
.js_publisher-btn,
.js_publisher {
	width: 100% !important;
	background: var(--main-btn) !important;
	border-color: var(--main-btn) !important;
	color: #fff !important;
	border-radius: 8px !important;
	padding: 10px 16px !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	line-height: 1.2 !important;
	margin: 0 !important;
}
.publisher-footer .btn-primary i,
.publisher-footer button[type="submit"] i {
	display: none !important;
}
.publisher-footer .btn-primary span,
.publisher-footer button[type="submit"] span,
.js_publisher span {
	display: inline-block !important;
	margin: 0 !important;
}
.publisher-footer .btn-primary:hover,
.js_publisher:hover { opacity: .92 !important; }

/* Estado deshabilitado (sin texto/media) — Facebook gris */
.publisher-footer .btn-primary:disabled,
.publisher-footer .btn-primary.disabled,
.js_publisher:disabled,
.js_publisher.disabled {
	background: #e4e6eb !important;
	border-color: #e4e6eb !important;
	color: #bcc0c4 !important;
	cursor: not-allowed;
}
body.night-mode .publisher-footer .btn-primary:disabled,
body.night-mode .js_publisher:disabled {
	background: #3a3b3c !important;
	color: #65676b !important;
}

/* --------------------------------------------------------------------------- */
/*  MODAL MODE — full screen overlay tipo Facebook                             */
/* --------------------------------------------------------------------------- */
#publisher-wapper-modal {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,.6);
	z-index: 1050;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 40px 16px;
	overflow-y: auto;
}
#publisher-wapper-modal .publisher {
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
	border-radius: 12px !important;
	box-shadow: 0 12px 48px rgba(0,0,0,.25);
}
#publisher-wapper-modal .publisher-close {
	top: 12px; right: 12px;
	width: 36px; height: 36px;
	background: #e4e6eb;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
#publisher-wapper-modal .publisher::before {
	content: "Crear publicación";
	display: block;
	text-align: center;
	font-weight: 700;
	font-size: 18px;
	color: #050505;
	padding: 16px 48px;
	border-bottom: 1px solid #ced0d4;
}
body.night-mode #publisher-wapper-modal .publisher::before {
	color: #e4e6eb;
	border-bottom-color: #3a3b3c;
}

/* --------------------------------------------------------------------------- */
/*  RESPONSIVE                                                                 */
/* --------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
	#publisher-wapper-modal { padding: 0; }
	#publisher-wapper-modal .publisher {
		max-width: 100%;
		min-height: 100vh;
		border-radius: 0 !important;
	}
	.publisher-tools-tabs::before { display: none; }
	.publisher-tools-tabs > ul.row { justify-content: space-around; }
	body.publisher-focus .publisher-message:not(.colored) .colored-text-wrapper textarea {
		font-size: 20px !important;
		line-height: 28px !important;
		min-height: 100px;
	}
}