/**
 * CantikSalud CRM - Estilos base
 * Complemento a Tailwind CSS (cargado desde CDN).
 *
 * Las variables CSS --cs-primary-contrast y --cs-primary-hover
 * se calculan automáticamente desde PHP (contraste WCAG) y se inyectan
 * desde templates/layouts/app.php.
 */

/* ───────────────────────────────────────────────
   Fuente Inter
   ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ───────────────────────────────────────────────
   Variables CSS por defecto (se sobreescriben desde PHP)
   ─────────────────────────────────────────────── */
:root {
	--cs-ink:              #1a1a1a;
	--cs-ink-contrast:     #ffffff;
	--cs-paper:            #fafafa;
	--cs-surface:          #ffffff;
	--cs-surface-2:        #f5f5f7;
	--cs-soft:             #f5f5f7;
	--cs-muted:            #737373;
	--cs-border:           #e5e5e5;
	--cs-primary:          #1a1a1a;
	--cs-primary-contrast: #ffffff;
	--cs-primary-hover:    #000000;
	--cs-accent:           #1a1a1a;
	--cs-accent-contrast:  #ffffff;
	--cs-accent-hover:     #000000;
}

/* ───────────────────────────────────────────────
   Reset completo del body cuando estamos en el panel
   ─────────────────────────────────────────────── */
body.cantiksalud-panel {
	margin: 0 !important;
	padding: 0 !important;
	background: var(--cs-paper) !important;
	color: var(--cs-ink) !important;
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	min-height: 100vh;
}

body.cantiksalud-panel * {
	box-sizing: border-box;
}

body.cantiksalud-panel h1,
body.cantiksalud-panel h2,
body.cantiksalud-panel h3,
body.cantiksalud-panel h4,
body.cantiksalud-panel p,
body.cantiksalud-panel ul,
body.cantiksalud-panel ol {
	margin: 0;
	padding: 0;
}

body.cantiksalud-panel ul,
body.cantiksalud-panel ol {
	list-style: none;
}

body.cantiksalud-panel a {
	color: inherit;
	text-decoration: none;
}

body.cantiksalud-panel button {
	font-family: inherit;
	cursor: pointer;
	border: none;
	background: none;
}

body.cantiksalud-panel input,
body.cantiksalud-panel textarea,
body.cantiksalud-panel select {
	font-family: inherit;
	font-size: inherit;
}

/* ───────────────────────────────────────────────
   Scrollbar minimalista
   ─────────────────────────────────────────────── */
body.cantiksalud-panel ::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
body.cantiksalud-panel ::-webkit-scrollbar-track {
	background: transparent;
}
body.cantiksalud-panel ::-webkit-scrollbar-thumb {
	background: var(--cs-border);
	border-radius: 4px;
}
body.cantiksalud-panel ::-webkit-scrollbar-thumb:hover {
	background: var(--cs-muted);
}

/* ───────────────────────────────────────────────
   Focus rings
   ─────────────────────────────────────────────── */
body.cantiksalud-panel *:focus-visible {
	outline: 2px solid var(--cs-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ───────────────────────────────────────────────
   HTMX loading states
   ─────────────────────────────────────────────── */
.htmx-indicator {
	opacity: 0;
	transition: opacity 200ms ease-in;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
	opacity: 1;
}

/* ═══════════════════════════════════════════════
   COMPONENTES
   ═══════════════════════════════════════════════ */

/* ───────────────────────────────────────────────
   Card
   ─────────────────────────────────────────────── */
.cs-card {
	background: #ffffff;
	border: 1px solid var(--cs-border);
	border-radius: 8px;
	padding: 1.5rem;
}

/* ───────────────────────────────────────────────
   BOTONES
   Todos los botones heredan el mismo layout base
   para garantizar alineación de iconos + texto
   ─────────────────────────────────────────────── */
.cs-btn-primary,
.cs-btn-secondary,
.cs-btn-danger,
.cs-btn-ghost {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem !important;
	padding: 0.5rem 1rem !important;
	border-radius: 6px !important;
	font-weight: 500 !important;
	font-size: 0.875rem !important;
	line-height: 1.25rem !important;
	cursor: pointer !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease !important;
	border: 1px solid transparent !important;
}

/* Iconos dentro de botones: tamaño y alineación consistentes */
.cs-btn-primary svg,
.cs-btn-secondary svg,
.cs-btn-danger svg,
.cs-btn-ghost svg {
	width: 1rem !important;
	height: 1rem !important;
	flex-shrink: 0 !important;
	display: inline-block !important;
	vertical-align: middle !important;
}

/* Botón primario */
.cs-btn-primary {
	background: var(--cs-primary) !important;
	color: var(--cs-primary-contrast) !important;
	border-color: var(--cs-primary) !important;
}
.cs-btn-primary:hover,
.cs-btn-primary:focus {
	background: var(--cs-primary-hover) !important;
	color: var(--cs-primary-contrast) !important;
	border-color: var(--cs-primary-hover) !important;
}
.cs-btn-primary:disabled {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
}

/* Botón secundario */
.cs-btn-secondary {
	background: #ffffff !important;
	color: var(--cs-ink) !important;
	border-color: var(--cs-border) !important;
}
.cs-btn-secondary:hover,
.cs-btn-secondary:focus {
	background: var(--cs-paper) !important;
	color: var(--cs-ink) !important;
	border-color: var(--cs-muted) !important;
}

/* Botón peligro (borrar) */
.cs-btn-danger {
	background: #dc2626 !important;
	color: #ffffff !important;
	border-color: #dc2626 !important;
}
.cs-btn-danger:hover,
.cs-btn-danger:focus {
	background: #b91c1c !important;
	color: #ffffff !important;
	border-color: #b91c1c !important;
}

/* Botón fantasma (sin fondo) */
.cs-btn-ghost {
	background: transparent !important;
	color: var(--cs-muted) !important;
	border-color: transparent !important;
}
.cs-btn-ghost:hover,
.cs-btn-ghost:focus {
	background: var(--cs-paper) !important;
	color: var(--cs-ink) !important;
}

/* ───────────────────────────────────────────────
   INPUT
   ─────────────────────────────────────────────── */
.cs-input {
	display: block;
	background: #ffffff;
	color: var(--cs-ink);
	border: 1px solid var(--cs-border);
	border-radius: 6px;
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	width: 100%;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}
.cs-input:focus {
	outline: none;
	border-color: var(--cs-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cs-primary) 15%, transparent);
}

/* Label */
.cs-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--cs-ink);
	margin-bottom: 0.375rem;
}

/* Helper text */
.cs-help {
	font-size: 0.75rem;
	color: var(--cs-muted);
	margin-top: 0.375rem;
}

/* ───────────────────────────────────────────────
   REPEATER / SORTABLE
   ─────────────────────────────────────────────── */
.cs-repeater-ghost {
	opacity: 0.4;
	background: var(--cs-primary) !important;
	color: var(--cs-primary-contrast) !important;
}

.cs-repeater-drag-handle:hover {
	color: var(--cs-ink) !important;
}

.cs-gallery-item {
	transition: transform 150ms ease;
}
.cs-gallery-item:hover {
	transform: scale(1.05);
}

/* ───────────────────────────────────────────────
   LIGHTBOX
   ─────────────────────────────────────────────── */
.cs-lightbox button:hover,
.cs-lightbox .cs-lb-download:hover {
	background: rgba(255, 255, 255, 0.2) !important;
}
.cs-lightbox .cs-lb-img {
	will-change: transform;
}
.cs-lightbox[style*="flex"] {
	animation: csLbFade 150ms ease;
}
@keyframes csLbFade {
	from { opacity: 0; }
	to { opacity: 1; }
}

.cs-file-link:hover {
	color: var(--cs-primary) !important;
}

/* ───────────────────────────────────────────────
   BADGES / CHIPS
   ─────────────────────────────────────────────── */
.cs-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.125rem 0.5rem;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1rem;
	white-space: nowrap;
}
.cs-badge-primary {
	background: var(--cs-primary);
	color: var(--cs-primary-contrast);
}
.cs-badge-accent {
	background: var(--cs-accent);
	color: var(--cs-accent-contrast);
}


/* ───────────────────────────────────────────────
   MODAL GENÉRICO cs-modal-*
   CSS autocontenido (no depende de Tailwind).
   Usado por: modal de cita, personalizar dashboard,
   y cualquier otro modal del plugin.

   NOTA SOBRE !important: lo usamos deliberadamente.
   Tailwind CDN y themes pueden inyectar reglas
   genéricas que sobrescriben nuestros estilos
   (por ejemplo "body * { background: transparent }"
   en algunos themes de clínicas).
   Usamos selectores doblados (con y sin body) para
   subir especificidad sin depender del contexto.
   ─────────────────────────────────────────────── */

/* Wrapper del modal: cubre toda la pantalla, encima de todo */
body .cs-modal-root,
.cs-modal-root {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	z-index: 99999 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Overlay oscuro OPACO */
body .cs-modal-root .cs-modal-overlay,
.cs-modal-root .cs-modal-overlay {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	background-color: rgba(17, 24, 39, 0.70) !important;
	background-image: none !important;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	z-index: 1 !important;
	margin: 0 !important;
	border: 0 !important;
}

/* Contenedor flexbox para centrar */
body .cs-modal-root .cs-modal-container,
.cs-modal-root .cs-modal-container {
	position: relative !important;
	z-index: 2 !important;
	width: 100% !important;
	min-height: 100vh !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 24px 16px !important;
	overflow-y: auto !important;
	box-sizing: border-box !important;
}

/* Tarjeta del modal: fondo BLANCO SÓLIDO.
   Triple refuerzo (background, background-color, background-image)
   para sobrevivir cualquier regla genérica del theme. */
body .cs-modal-root .cs-modal-card,
.cs-modal-root .cs-modal-card {
	position: relative !important;
	width: 100% !important;
	max-width: 640px !important;
	background: #ffffff !important;
	background-color: #ffffff !important;
	background-image: none !important;
	color: #111827 !important;
	border-radius: 14px !important;
	box-shadow: 0 25px 50px -12px rgba(0,0,0,0.35), 0 10px 20px -5px rgba(0,0,0,0.15) !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	max-height: 90vh !important;
	box-sizing: border-box !important;
}

/* Header */
body .cs-modal-root .cs-modal-header,
.cs-modal-root .cs-modal-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	padding: 16px 20px !important;
	border-bottom: 1px solid #e5e7eb !important;
	background: #f9fafb !important;
	background-color: #f9fafb !important;
	flex-shrink: 0 !important;
}
body .cs-modal-root .cs-modal-close,
.cs-modal-root .cs-modal-close {
	background: transparent !important;
	border: none !important;
	font-size: 28px !important;
	line-height: 1 !important;
	padding: 4px 10px !important;
	cursor: pointer !important;
	color: #6b7280 !important;
	border-radius: 6px !important;
	transition: background 0.15s;
}
body .cs-modal-root .cs-modal-close:hover,
.cs-modal-root .cs-modal-close:hover { background: #e5e7eb !important; color: #1f2937 !important; }

/* Body scrollable, fondo BLANCO */
body .cs-modal-root .cs-modal-body,
.cs-modal-root .cs-modal-body {
	padding: 20px !important;
	overflow-y: auto !important;
	flex: 1 !important;
	background: #ffffff !important;
	background-color: #ffffff !important;
	color: #111827 !important;
}

/* Footer */
body .cs-modal-root .cs-modal-footer,
.cs-modal-root .cs-modal-footer {
	padding: 16px 20px !important;
	border-top: 1px solid #e5e7eb !important;
	background: #f9fafb !important;
	background-color: #f9fafb !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	flex-shrink: 0 !important;
	flex-wrap: wrap !important;
}