/**
 * Estilos publicos base del Wedding Planner.
 *
 * Estetica de boda minimalista y elegante:
 * fondo nude suave, acentos coral/rosa, tipografia limpia,
 * iconos de linea fina (Lucide), sombras sutiles.
 *
 * Disposicion vertical: barra unificada > area de contenido.
 *
 * @package PabloPonceWeddingPlanner
 * @since   1.0.0
 */

@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Great+Vibes&display=swap');

/* --- Reset y variables CSS ------------------------------------------------ */
:root {
	--ppwp-bg-main: #f5efeb;           /* Fondo suave nude / rosa pastel neutro */
	--ppwp-bg-card: #ffffff;           /* Tarjetas y contenedores en blanco puro */
	--ppwp-text-primary: #1a1a1a;      /* Texto e iconos en negro suave */
	--ppwp-text-muted: #71717a;        /* Texto secundario en gris */
	--ppwp-accent: #e17575;            /* Color de acento/subrayado (Coral/Rosa) */
	--ppwp-accent-hover: #c96060;      /* Hover del acento */
	--ppwp-border-color: #e4e4e7;      /* Bordes finos y discretos */
	--ppwp-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

	/* Alias para retrocompatibilidad */
	--ppwp-primary: var(--ppwp-accent);
	--ppwp-primary-hover: var(--ppwp-accent-hover);
	--ppwp-bg: var(--ppwp-bg-main);
	--ppwp-white: var(--ppwp-bg-card);
	--ppwp-text: var(--ppwp-text-primary);
	--ppwp-text-light: var(--ppwp-text-muted);
	--ppwp-border: var(--ppwp-border-color);
	--ppwp-radius: 8px;
	--ppwp-header-height: 56px;        /* Altura compacta de la barra unificada */
	--ppwp-transition: 0.2s ease;
}

/* --- Contenedor principal (layout vertical) ------------------------------- */
.ppwp-wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: var(--ppwp-bg-main);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--ppwp-text-primary);
}

/* --- Decoraciones florales (acuarela) en esquinas ------------------------- */
.ppwp-dashboard-container {
	position: relative;
	/* overflow visible: el dropdown de proyectos debe poder flotar sobre los
	   modulos del dashboard sin ser recortado por el contenedor padre. */
	overflow: visible;
}

/* Esquina superior derecha: ramillete de rosas */
.ppwp-dashboard-container::before {
	content: "";
	position: absolute;
	top: -30px;
	right: -30px;
	width: 300px;
	height: 300px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='%23e1757580'%3E%3Ccircle cx='160' cy='50' r='28'/%3E%3Ccircle cx='130' cy='65' r='22'/%3E%3Ccircle cx='150' cy='80' r='20'/%3E%3Ccircle cx='120' cy='45' r='18'/%3E%3Ccircle cx='140' cy='35' r='16'/%3E%3Ccircle cx='170' cy='70' r='15'/%3E%3Ccircle cx='110' cy='60' r='14'/%3E%3C/g%3E%3Cg fill='%23d4838f60'%3E%3Ccircle cx='155' cy='55' r='18'/%3E%3Ccircle cx='135' cy='70' r='15'/%3E%3Ccircle cx='125' cy='50' r='12'/%3E%3Ccircle cx='145' cy='40' r='13'/%3E%3C/g%3E%3Cg fill='%23f5efeb' opacity='0.6'%3E%3Ccircle cx='148' cy='58' r='12'/%3E%3Ccircle cx='132' cy='62' r='9'/%3E%3C/g%3E%3Cg stroke='%2395a07a' stroke-width='1.2' fill='none' opacity='0.5'%3E%3Cpath d='M80 90 Q85 60 100 50'/%3E%3Cpath d='M85 85 Q95 55 105 45'/%3E%3Cpath d='M75 80 Q80 70 90 55'/%3E%3Cpath d='M95 75 Q100 60 115 48'/%3E%3Cpath d='M100 85 Q105 65 120 52'/%3E%3C/g%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0.25;
	pointer-events: none;
	z-index: 0;
	/* Recorta solo la parte de la decoracion que sobresale del contenedor,
	   ya que el contenedor padre ahora es overflow: visible. */
	clip-path: inset(30px 30px 0 0);
}

/* Esquina inferior izquierda: ramillete floral */
.ppwp-dashboard-container::after {
	content: "";
	position: absolute;
	bottom: -30px;
	left: -20px;
	width: 260px;
	height: 260px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='%23d4838f80'%3E%3Ccircle cx='50' cy='160' r='26'/%3E%3Ccircle cx='75' cy='150' r='22'/%3E%3Ccircle cx='60' cy='140' r='19'/%3E%3Ccircle cx='85' cy='165' r='16'/%3E%3Ccircle cx='45' cy='145' r='14'/%3E%3Ccircle cx='70' cy='135' r='13'/%3E%3C/g%3E%3Cg fill='%23e1757560'%3E%3Ccircle cx='55' cy='155' r='17'/%3E%3Ccircle cx='72' cy='148' r='14'/%3E%3Ccircle cx='62' cy='143' r='11'/%3E%3C/g%3E%3Cg fill='%23f5efeb' opacity='0.6'%3E%3Ccircle cx='60' cy='150' r='10'/%3E%3Ccircle cx='73' cy='144' r='8'/%3E%3C/g%3E%3Cg stroke='%2395a07a' stroke-width='1.2' fill='none' opacity='0.5'%3E%3Cpath d='M120 120 Q115 145 105 155'/%3E%3Cpath d='M115 115 Q110 140 100 150'/%3E%3Cpath d='M125 130 Q120 140 110 155'/%3E%3C/g%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0.22;
	pointer-events: none;
	z-index: 0;
	/* Recorta solo la parte de la decoracion que sobresale del contenedor,
	   ya que el contenedor padre ahora es overflow: visible. */
	clip-path: inset(0 0 30px 20px);
}

/* Asegurar que los elementos esten por encima de las flores */
.ppwp-dashboard-container > .ppwp-header-bar,
.ppwp-dashboard-container > .ppwp-content-area {
	position: relative;
	z-index: 1;
}

/* El header debe apilarse por encima del area de contenido; de lo contrario
   el dropdown de proyectos queda oculto detras de los modulos del dashboard
   (ambos tenian z-index: 1 y el contenido, al ir despues en el DOM, se pinta
   por encima). Se fija como `sticky` con z-index 1000 para quedar SIEMPRE en
   la parte superior, por delante del contenido y de la sub-barra de acciones
   del editor de notas, pero por debajo de los overlays (modal global 9999,
   editor de notas 99999). */
.ppwp-dashboard-container > .ppwp-header-bar {
	position: sticky;
	top: 0;
	z-index: 1000;
}

/* --- Barra superior unificada (brand | nav | acciones) -------------------- */
.ppwp-header-bar {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 0;
	height: var(--ppwp-header-height);
	padding: 0 20px;
	background: var(--ppwp-bg-card);
	border-bottom: 1px solid var(--ppwp-border-color);
	border-radius: 12px 12px 0 0;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
	flex-shrink: 0;
	/* Nunca recortar los desplegables que salen de la barra superior. */
	overflow: visible !important;
}

/* --- Branding (izquierda) ------------------------------------------------- */
.ppwp-brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 2px;
	flex-shrink: 0;
	margin-right: 20px;
}

.ppwp-brand__title {
	font-size: 15px;
	font-weight: 600;
	color: var(--ppwp-text-primary);
	margin: 0;
	line-height: 1.1;
	letter-spacing: 0.3px;
	white-space: nowrap;
	display: block;
}

.ppwp-brand__subtitle {
	font-size: 0.65rem;
	font-weight: 500;
	color: var(--ppwp-text-muted);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 1;
	display: block;
}

/* --- Navegacion de pestanas (centro) -------------------------------------- */
.ppwp-main-nav {
	flex: 1;
	overflow-x: auto;
	overflow-y: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ppwp-nav-tabs {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 4px;
}

.ppwp-nav-tabs__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 6px 14px;
	cursor: pointer;
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--ppwp-text-muted);
	border-bottom: 3px solid transparent;
	transition: all 0.2s ease;
	white-space: nowrap;
	border-radius: 0;
	height: var(--ppwp-header-height);
	box-sizing: border-box;
}

.ppwp-nav-tabs__item:hover {
	color: var(--ppwp-text-primary);
	background: rgba(225, 117, 117, 0.04);
}

.ppwp-nav-tabs__item.active {
	color: var(--ppwp-text-primary);
	border-bottom-color: var(--ppwp-accent, #e17575);
}

.ppwp-nav-tabs__item .ppwp-icon {
	font-size: 1.1rem;
	margin-bottom: 2px;
	width: 16px;
	height: 16px;
	stroke-width: 1.8;
	color: inherit;
}

.ppwp-nav-tabs__item.active .ppwp-icon {
	color: var(--ppwp-accent);
}

/* --- Acciones (derecha) --------------------------------------------------- */
.ppwp-header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	margin-left: 20px;
}

.ppwp-btn-fullscreen {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--ppwp-border-color);
	border-radius: 8px;
	background: var(--ppwp-bg-card);
	cursor: pointer;
	color: var(--ppwp-text-muted);
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.ppwp-btn-fullscreen:hover {
	background: rgba(225, 117, 117, 0.06);
	color: var(--ppwp-accent);
	border-color: var(--ppwp-accent);
}

.ppwp-btn-fullscreen .ppwp-icon {
	width: 16px;
	height: 16px;
	stroke-width: 1.8;
}

/* --- Iconos Lucide (uso general) ------------------------------------------ */
.ppwp-icon {
	width: 18px;
	height: 18px;
	stroke-width: 1.8;
	color: inherit;
}

/* --- Area de contenido principal ------------------------------------------ */
.ppwp-content-area {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	background: var(--ppwp-bg-main);
}

/* --- Paneles de contenido (pestanas) -------------------------------------- */
.ppwp-tab-content {
	display: none;
}

.ppwp-tab-content--active {
	display: block;
}

/* --- Modo fullscreen ------------------------------------------------------ */
.ppwp-wrapper.ppwp-wrapper--fullscreen {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: var(--ppwp-bg-main);
}

/* --- Botones globales ----------------------------------------------------- */
.ppwp-btn {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid var(--ppwp-border-color);
	border-radius: 6px;
	background: var(--ppwp-bg-card);
	color: var(--ppwp-text-primary);
	font-size: 14px;
	cursor: pointer;
	text-decoration: none;
	transition: all var(--ppwp-transition);
}

.ppwp-btn:hover {
	background: #fafafa;
	border-color: #d4d4d8;
}

.ppwp-btn--primary {
	background: var(--ppwp-accent);
	color: #fff;
	border-color: var(--ppwp-accent);
}

.ppwp-btn--primary:hover {
	background: var(--ppwp-accent-hover);
	border-color: var(--ppwp-accent-hover);
}

.ppwp-btn--danger {
	background: #e74c3c;
	color: #fff;
	border-color: #e74c3c;
}

.ppwp-btn--danger:hover {
	background: #c0392b;
}

.ppwp-btn--small {
	padding: 4px 10px;
	font-size: 12px;
}

/* --- Formularios globales ------------------------------------------------- */
.ppwp-form-group {
	margin-bottom: 15px;
}

.ppwp-form-group label {
	display: block;
	margin-bottom: 5px;
	font-weight: 500;
	font-size: 13px;
	color: var(--ppwp-text-muted);
}

.ppwp-form-group input,
.ppwp-form-group select,
.ppwp-form-group textarea {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--ppwp-border-color);
	border-radius: 6px;
	font-size: 14px;
	transition: border-color var(--ppwp-transition);
	color: var(--ppwp-text-primary);
	background: var(--ppwp-bg-card);
}

.ppwp-form-group input:focus,
.ppwp-form-group select:focus,
.ppwp-form-group textarea:focus {
	border-color: var(--ppwp-accent);
	outline: none;
	box-shadow: 0 0 0 3px rgba(225, 117, 117, 0.12);
}

/* --- Modal global --------------------------------------------------------- */
.ppwp-modal-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9999;
	align-items: center;
	justify-content: center;
}

.ppwp-modal-overlay--open {
	display: flex;
}

.ppwp-modal {
	background: var(--ppwp-bg-card);
	border-radius: var(--ppwp-radius);
	padding: 30px;
	max-width: 500px;
	width: 90%;
	max-height: 80vh;
	overflow-y: auto;
	box-shadow: var(--ppwp-shadow);
}

.ppwp-modal__title {
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 20px 0;
	color: var(--ppwp-text-primary);
}

.ppwp-modal__actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 20px;
}

/* --- Utilidades ----------------------------------------------------------- */
.ppwp-text-center {
	text-align: center;
}

.ppwp-mt-20 {
	margin-top: 20px;
}

.ppwp-mb-20 {
	margin-bottom: 20px;
}

.ppwp-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.3px;
}

.ppwp-badge--success {
	background: #ecfdf5;
	color: #065f46;
}

.ppwp-badge--warning {
	background: #fffbeb;
	color: #92400e;
}

.ppwp-badge--danger {
	background: #fef2f2;
	color: #991b1b;
}

.ppwp-badge--info {
	background: #eff6ff;
	color: #1e40af;
}

/* --- Mensajes de feedback ------------------------------------------------- */
.ppwp-notice {
	padding: 12px 16px;
	border-radius: 6px;
	margin-bottom: 15px;
	font-size: 14px;
}

.ppwp-notice--success {
	background: #ecfdf5;
	color: #065f46;
	border: 1px solid #a7f3d0;
}

.ppwp-notice--error {
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

.ppwp-notice--info {
	background: #eff6ff;
	color: #1e40af;
	border: 1px solid #bfdbfe;
}

/* --- Responsive ----------------------------------------------------------- */
@media ( max-width: 768px ) {
	.ppwp-header-bar {
		padding: 0 12px;
		gap: 0;
	}

	.ppwp-brand {
		margin-right: 10px;
		gap: 6px;
	}

	.ppwp-brand__title {
		font-size: 13px;
	}

	.ppwp-brand__subtitle {
		font-size: 8px;
		letter-spacing: 1px;
	}

	.ppwp-main-nav {
		justify-content: flex-start;
	}

	.ppwp-nav-tabs {
		gap: 0;
	}

	.ppwp-nav-tabs__item {
		padding: 6px 10px;
		font-size: 0.7rem;
	}

	.ppwp-nav-tabs__item .ppwp-icon {
		width: 14px;
		height: 14px;
		font-size: 0.95rem;
	}

	.ppwp-header-actions {
		margin-left: 10px;
	}

	.ppwp-btn-fullscreen {
		width: 30px;
		height: 30px;
	}
}