/* ============================================================
   Plataforma de Acopios — Oryan Surveyors
   Sistema de diseño basado en Meta for Developers
   ============================================================ */

:root{
	--bg:#F2F2F2;
	--card:#FFFFFF;
	--ink:#1C2B33;
	--ink-secondary:#465A69;
	--muted:#64778A;
	--blue:#0A78BE;
	--blue-dark:#086DAD;
	--blue-soft:#E1EDF7;
	--line:#CBD2D9;
	--line-soft:#E4E6EB;
	--input-ro:#F1F4F7;
	--green:#1E7E4A;
	--green-soft:rgba(31,151,90,.12);
	--red:#B8341B;
	--red-soft:rgba(184,52,27,.08);
	--font:-apple-system,system-ui,Roboto,Arial,Helvetica,sans-serif;
	--radius:8px;
	--radius-sm:4px;
}

*{margin:0;padding:0;box-sizing:border-box}

html,body{height:100%}

body{
	font-family:var(--font);
	background:var(--bg);
	color:var(--ink);
	font-size:14px;
	line-height:1.45;
	-webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-weight:700;letter-spacing:0}

a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

/* Fondo degradado pastel (exacto del panel de Meta) */
.page-gradient{
	background:
		radial-gradient(103.89% 81.75% at 95.41% 106.34%,#eaf8ef 6%,#eaf8ef00 79.68%),
		radial-gradient(297.85% 151.83% at -21.39% 8.81%,#faf1f1 0% 15.29%,#f3edf5 21.39%,#e5f0fa 40.79%);
}

/* ---------- Botones ---------- */
.btn{
	display:inline-flex;align-items:center;justify-content:center;gap:6px;
	font-family:var(--font);font-weight:600;font-size:14px;
	height:36px;padding:0 16px;border-radius:6px;border:1px solid transparent;
	cursor:pointer;white-space:nowrap;
	transition:background .12s ease,border-color .12s ease;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-dark)}
.btn-secondary{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-secondary:hover{background:#F5F7F9}
.btn-block{width:100%}

/* ---------- Formularios ---------- */
.field{margin-bottom:16px;text-align:left}
.field label{
	display:block;font-size:14px;font-weight:700;color:var(--ink);
	margin-bottom:6px;
}
.field input{
	width:100%;height:36px;padding:7px 11px;font-size:14px;font-family:var(--font);
	border:1px solid var(--line);border-radius:var(--radius-sm);
	background:#fff;color:var(--ink);
	transition:border-color .12s ease,box-shadow .12s ease;
}
.field input::placeholder{color:#8A9AA9}
.field input:focus{
	outline:none;border-color:var(--blue);
	box-shadow:0 0 0 1px var(--blue);
}
.field input[readonly],.field input[disabled]{background:var(--input-ro)}

/* ---------- Login ---------- */
.login-wrap{
	min-height:100vh;display:flex;align-items:center;justify-content:center;
	padding:24px;
}
.login-card{
	width:100%;max-width:400px;background:var(--card);
	border-radius:var(--radius);
	box-shadow:0 2px 12px rgba(28,43,51,.1);
	padding:40px 36px;text-align:center;
}
.login-card .logo{max-width:220px;width:100%;height:auto;margin-bottom:10px}
.login-card .tagline{
	font-size:13px;font-weight:600;color:var(--muted);
	text-transform:uppercase;letter-spacing:.08em;
	margin-bottom:28px;
}
.login-error{
	background:var(--red-soft);color:var(--red);border:1px solid rgba(184,52,27,.3);
	border-radius:var(--radius-sm);padding:9px 12px;font-size:13px;margin-bottom:16px;
	text-align:left;
}
.login-foot{margin-top:24px;font-size:12px;color:var(--muted)}

.alert-ok{
	background:var(--green-soft);color:var(--green);border:1px solid rgba(31,151,90,.3);
	border-radius:var(--radius-sm);padding:9px 12px;font-size:13px;margin-bottom:16px;
}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin-bottom:8px}
@media (max-width:700px){.form-grid{grid-template-columns:1fr}}

/* ---------- Barra superior ---------- */
.topbar{
	height:56px;background:#fff;border-bottom:1px solid var(--line-soft);
	display:flex;align-items:center;gap:18px;padding:0 16px;
	position:sticky;top:0;z-index:20;
}
.topbar .brand{display:flex;align-items:center;flex-shrink:0}
.topbar .brand img{height:38px;width:auto;display:block}
.topbar .top-nav{display:flex;align-items:center;gap:4px}
.topbar .top-nav a{
	color:var(--ink);font-size:14px;font-weight:600;
	padding:8px 12px;border-radius:var(--radius-sm);
}
.topbar .top-nav a:hover{background:#F0F2F5;text-decoration:none}
.topbar .top-nav a.active{background:var(--blue-soft);color:var(--blue);font-weight:700}
.topbar .top-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.topbar .search{
	display:flex;align-items:center;gap:8px;
	height:36px;padding:0 12px;min-width:210px;
	border:1px solid var(--line);border-radius:var(--radius-sm);
	color:#8A9AA9;font-size:14px;background:#fff;
}
.topbar .search svg{width:15px;height:15px;flex-shrink:0}
.topbar .avatar{
	width:36px;height:36px;border-radius:50%;background:var(--blue);color:#fff;
	display:flex;align-items:center;justify-content:center;
	font-weight:700;font-size:14px;flex-shrink:0;overflow:hidden;
}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

/* ---------- Menús de la topbar (engranaje + usuario) ---------- */
.menu-drop{position:relative}
.user-menu{position:relative}

/* Engranaje de configuración */
.config-btn{
	width:40px;height:40px;border-radius:50%;
	background:none;border:0;cursor:pointer;padding:0;
	display:flex;align-items:center;justify-content:center;
	color:var(--ink-secondary);transition:background .12s ease,color .12s ease;
}
.config-btn:hover{background:#F0F2F5;color:var(--ink)}
.menu-drop.open .config-btn{background:var(--blue-soft);color:var(--blue)}
.config-btn svg{width:21px;height:21px}
.user-chip{
	display:flex;align-items:center;gap:10px;
	background:none;border:0;cursor:pointer;font-family:var(--font);
	padding:4px 8px 4px 4px;border-radius:999px;
	transition:background .12s ease;text-align:left;
}
.user-chip:hover{background:#F0F2F5}
.user-chip .avatar{
	width:36px;height:36px;border-radius:50%;background:var(--blue);color:#fff;
	display:flex;align-items:center;justify-content:center;
	font-weight:700;font-size:14px;flex-shrink:0;overflow:hidden;
}
.user-chip-info{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.user-chip-nombre{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;max-width:170px;overflow:hidden;text-overflow:ellipsis}
.user-chip-rol{font-size:12px;color:var(--muted);white-space:nowrap}
.user-chip-flecha{width:15px;height:15px;color:var(--ink-secondary);flex-shrink:0;transition:transform .15s ease}
.user-menu.open .user-chip-flecha{transform:rotate(180deg)}
@media (max-width:760px){.user-chip-info,.user-chip-flecha{display:none}}
.user-dropdown{
	display:none;position:absolute;top:calc(100% + 8px);right:0;
	width:240px;background:#fff;
	border-radius:var(--radius);
	box-shadow:0 4px 16px rgba(0,0,0,.15);
	padding:6px;z-index:50;
}
.menu-drop.open .user-dropdown{display:block}
.user-dropdown-head{
	display:flex;align-items:center;gap:11px;
	padding:10px 12px;margin-bottom:4px;
	border-bottom:1px solid var(--line-soft);
}
.user-dropdown-head .avatar{
	width:38px;height:38px;border-radius:50%;background:var(--blue);color:#fff;
	display:flex;align-items:center;justify-content:center;
	font-weight:700;font-size:14px;flex-shrink:0;overflow:hidden;
}
.user-dropdown-head .who{min-width:0}
.user-dropdown-head .name{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-dropdown-head .role{font-size:12px;color:var(--muted);text-transform:capitalize}
.user-dropdown-item{
	display:flex;align-items:center;gap:11px;
	padding:9px 12px;border-radius:var(--radius-sm);
	font-size:14px;font-weight:500;color:var(--ink);
}
.user-dropdown-item svg{width:18px;height:18px;flex-shrink:0;color:var(--ink-secondary)}
.user-dropdown-item:hover{background:#F0F2F5;text-decoration:none}
.user-dropdown-item.danger{color:var(--red)}
.user-dropdown-item.danger svg{color:var(--red)}
.user-dropdown-item.danger:hover{background:var(--red-soft)}
.user-dropdown-sep{height:1px;background:var(--line-soft);margin:4px 0}

/* ---------- Layout del panel ---------- */
.app{display:flex;min-height:calc(100vh - 56px);align-items:stretch}

.sidebar{
	width:280px;flex-shrink:0;background:#fff;
	display:flex;flex-direction:column;
	position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto;
}
.nav{padding:14px 8px;flex:1}
.nav a{
	display:flex;align-items:center;gap:14px;
	padding:10px 14px;border-radius:var(--radius-sm);margin-bottom:2px;
	font-size:15px;font-weight:400;color:var(--ink);
}
.nav a svg{width:20px;height:20px;flex-shrink:0;stroke:currentColor}
.nav a:hover{background:#F0F2F5;text-decoration:none}
.nav a.active{color:var(--blue);font-weight:700;background:var(--blue-soft)}

.main{flex:1;padding:28px 32px;min-width:0}
.main-contenida{max-width:1180px;margin-left:auto;margin-right:auto;width:100%}

.page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.page-head h1{font-size:24px;font-weight:700}
.page-head .sub{color:var(--ink);font-size:14px}

/* ---------- Tarjetas de estadísticas ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}
.stat-card{
	background:var(--card);border-radius:var(--radius);
	box-shadow:0 1px 4px rgba(28,43,51,.09);
	padding:18px 20px;
	display:flex;flex-direction:column;gap:4px;
}
.stat-card .icon{
	width:38px;height:38px;border-radius:var(--radius-sm);
	display:flex;align-items:center;justify-content:center;margin-bottom:8px;
	background:var(--blue-soft);color:var(--blue);
}
.stat-card .icon svg{width:20px;height:20px}
.stat-card .value{font-size:28px;font-weight:700;line-height:1.1}
.stat-card .label{font-size:13px;color:var(--ink-secondary)}

/* ---------- Paneles / tablas ---------- */
.panel{
	background:var(--card);border-radius:var(--radius);
	box-shadow:0 1px 4px rgba(28,43,51,.09);
	overflow:hidden;margin-bottom:22px;
}
.panel-head{
	padding:16px 20px;border-bottom:1px solid var(--line-soft);
	display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.panel-head h2{font-size:18px;font-weight:700}
.panel-body{padding:20px}

.table-wrap{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:14px}
table.data th{
	text-align:left;padding:10px 20px;font-size:12px;font-weight:700;
	color:var(--ink-secondary);text-transform:uppercase;letter-spacing:.04em;
	border-bottom:1px solid var(--line-soft);background:#F7F8FA;
}
table.data td{padding:12px 20px;border-bottom:1px solid var(--line-soft)}
table.data tr:last-child td{border-bottom:0}
table.data tr:hover td{background:#F7F8FA}

.badge{
	display:inline-block;padding:3px 10px;border-radius:999px;
	font-size:12px;font-weight:600;
}
.badge-borrador{background:var(--line-soft);color:var(--ink-secondary)}
.badge-en_curso{background:var(--blue-soft);color:var(--blue)}
.badge-en_revision{background:rgba(230,144,0,.14);color:#9A6200}
.badge-finalizada{background:var(--green-soft);color:var(--green)}

.empty{text-align:center;padding:52px 24px;color:var(--ink-secondary)}
.empty .empty-icon{
	width:60px;height:60px;margin:0 auto 14px;border-radius:50%;
	background:var(--blue-soft);color:var(--blue);
	display:flex;align-items:center;justify-content:center;
}
.empty .empty-icon svg{width:28px;height:28px}
.empty h3{font-size:16px;color:var(--ink);margin-bottom:4px}
.empty p{font-size:13.5px;max-width:380px;margin:0 auto 18px}

/* ---------- Planilla de acopios (edición in situ) ---------- */
.hint{font-size:12.5px;color:var(--ink-secondary)}
.head-actions{display:flex;align-items:center;gap:10px}
.breadcrumb{font-size:13px;margin-bottom:4px}
.btn-volver{
	display:inline-flex;align-items:center;gap:7px;
	font-size:13.5px;font-weight:600;color:var(--ink-secondary);
	margin-bottom:6px;
}
.btn-volver svg{width:16px;height:16px}
.btn-volver:hover{color:var(--blue);text-decoration:none}
.oculto{display:none}

.select{
	height:36px;padding:0 32px 0 12px;font-size:14px;font-family:var(--font);
	border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;color:var(--ink);
	appearance:none;-webkit-appearance:none;cursor:pointer;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231C2B33' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:right 10px center;
}
.select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}

.btn-chico{height:30px;padding:0 12px;font-size:13px}
.select-chico{height:30px;padding:0 26px 0 10px;font-size:13px;background-position:right 8px center}
.chip-yo{display:inline-block;margin-left:6px;font-size:11px;font-weight:700;color:var(--blue);background:var(--blue-soft);border-radius:999px;padding:1px 7px;vertical-align:middle}
.acciones-usuario{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:nowrap;white-space:nowrap}
.btn-icono{width:32px;padding:0;flex-shrink:0}
.btn-icono svg{width:15px;height:15px}
.btn.peligro{color:var(--red)}
.btn.peligro:hover{background:var(--red-soft);border-color:rgba(184,52,27,.4)}

.form-subir{display:flex;align-items:center;gap:8px}
.input-archivo{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.form-subir label{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;line-height:34px}
.acciones-archivo{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.table-wrap.sin-scroll{overflow:visible}
.form-grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.form-grid-4{grid-template-columns:1fr 1fr}}

/* Pestañas del panel de auditoría */
.tabs{display:flex;gap:2px;padding:0 14px;border-bottom:1px solid var(--line-soft)}
.tab{
	background:none;border:0;cursor:pointer;font-family:var(--font);
	padding:14px 16px;font-size:14.5px;font-weight:600;color:var(--ink-secondary);
	border-bottom:3px solid transparent;margin-bottom:-1px;
	display:inline-flex;align-items:center;gap:7px;
	transition:color .12s ease;
}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--blue);border-bottom-color:var(--blue)}
.tab-badge{
	background:var(--blue-soft);color:var(--blue);border-radius:999px;
	font-size:11.5px;font-weight:700;padding:1px 8px;
}
.tab.active .tab-badge{background:var(--blue);color:#fff}
.tab-pane{padding:0 0 4px}
.pane-toolbar{
	display:flex;align-items:center;justify-content:space-between;gap:14px;
	padding:14px 20px 4px;flex-wrap:wrap;
}
.pane-toolbar.solo-form{justify-content:flex-end}
.pane-msg{padding:10px 20px 0}
.tab-pane .datos-aud{padding:12px 20px 20px}
.tab-pane .table-wrap{margin-top:8px}
.dato-ancho{grid-column:span 2}

/* Datos de la auditoría (edición al clic) */
.datos-aud{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 20px}
@media (max-width:900px){.datos-aud{grid-template-columns:1fr 1fr}}
.dato-label{font-size:12px;font-weight:700;color:var(--ink-secondary);margin-bottom:4px}
.dato-valor{
	min-height:36px;display:flex;align-items:center;
	padding:7px 11px;border:1px solid var(--line);border-radius:var(--radius-sm);
	font-size:14.5px;cursor:text;background:#fff;
	transition:border-color .12s ease,background .12s ease;
}
.dato-valor:hover{border-color:var(--blue);background:#F5FAFF}
.dato-valor.vacio{color:#8A9AA9;font-style:italic}
.dato-valor.editing{padding:0;border-color:var(--blue);box-shadow:0 0 0 1px var(--blue);background:#fff}
.dato-valor .cell-input{height:34px;border-radius:var(--radius-sm)}
.dato-valor.flash-ok{animation:flashOk 1.2s ease-out}
.dato-valor.flash-err{animation:flashErr 1.2s ease-out}

.matrix-wrap{position:relative;max-width:100%}

.matrix-scroller{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.matrix-scroller::-webkit-scrollbar{display:none}

/* Sombreado en el borde derecho: hay más columnas para ver */
.matrix-view{position:relative}
.matrix-view::after{
	content:"";position:absolute;top:0;right:0;height:100%;width:52px;
	background:linear-gradient(to left, rgba(28,43,51,.16), transparent);
	pointer-events:none;opacity:0;transition:opacity .2s ease;z-index:5;
}
.matrix-wrap.can-right .matrix-view::after{opacity:1}

/* Sombra general del bloque de columnas fijas: hay contenido oculto a la izquierda */
.matrix-sombra-izq{
	position:absolute;top:0;height:100%;width:52px;left:0;
	background:linear-gradient(to right, rgba(28,43,51,.16), transparent);
	pointer-events:none;opacity:0;transition:opacity .2s ease;z-index:5;
}
.matrix-wrap.can-left .matrix-sombra-izq{opacity:1}

/* Barra de desplazamiento horizontal, debajo de la planilla */
.matrix-bar{padding:14px 18px 12px;background:#fff}
.matrix-bar-track{
	position:relative;height:16px;border-radius:8px;
	background:#E8ECF0;box-shadow:inset 0 1px 2px rgba(28,43,51,.12);
	cursor:pointer;
}
.matrix-bar-thumb{
	position:absolute;top:2px;left:0;height:12px;min-width:60px;
	border-radius:6px;background:var(--blue);cursor:grab;
	display:flex;align-items:center;justify-content:center;gap:3px;
	transition:background .12s ease;
}
.matrix-bar-thumb:hover{background:var(--blue-dark)}
.matrix-bar-thumb.arrastrando{cursor:grabbing;background:var(--blue-dark)}
.matrix-bar-thumb span{width:2px;height:6px;border-radius:1px;background:rgba(255,255,255,.65)}
.matrix-bar-hint{
	text-align:center;font-size:12px;color:var(--ink-secondary);
	margin-top:8px;user-select:none;
}
table.matrix{border-collapse:separate;border-spacing:0;font-size:13px;width:max-content;min-width:100%}
.matrix th,.matrix td{border-bottom:1px solid var(--line-soft);border-right:1px solid var(--line-soft)}

.matrix thead .grp th{
	padding:8px 12px;font-size:11.5px;font-weight:700;letter-spacing:.06em;
	text-transform:uppercase;text-align:center;white-space:nowrap;
}
/* Escala de azules: de más claro a más oscuro, en el orden de la planilla */
.g-b1{background:#A9CDE9;color:#123A5C}
.g-b2{background:#6FAEDC;color:#0C2F4D}
.g-b3{background:#3D8CC7;color:#fff}
.g-b4{background:#1A69A8;color:#fff}
.g-b5{background:#0E4C7E;color:#fff}
.g-blank{background:#fff;border-right:1px solid var(--line-soft)}

.matrix thead .cols th{
	padding:8px 10px;font-size:11px;font-weight:700;color:var(--ink);
	background:#F7F8FA;text-align:center;white-space:nowrap;vertical-align:middle;
}
.matrix thead .cols th.col-rojo{background:#D93025;color:#fff}

.matrix td{
	padding:8px 12px;background:#fff;white-space:nowrap;
	min-width:86px;height:38px;
}
.matrix td.num{text-align:right}
.matrix td.txt{text-align:left}
.matrix td.col-rojo{background:#FDF3F2}

.matrix td.editable{cursor:cell}
.matrix td.editable:hover{background:#EAF3FB}
.matrix td.editing{padding:0;box-shadow:inset 0 0 0 2px var(--blue)}
.matrix td.saving{opacity:.55}

.matrix td.calc{background:var(--input-ro);color:var(--ink-secondary)}

.cell-input{
	width:100%;height:100%;border:0;padding:8px 12px;margin:0;
	font:inherit;color:var(--ink);background:#fff;text-align:inherit;
	box-sizing:border-box;min-width:0;
}
.cell-input:focus{outline:none}

.matrix .stick0{position:sticky;left:0;z-index:3}
.matrix .stick1{position:sticky;left:58px;z-index:3}
.matrix .stick2{position:sticky;left:115px;z-index:3;min-width:150px}
.matrix thead .stick0,.matrix thead .stick1,.matrix thead .stick2{z-index:4;background:#F7F8FA}
.matrix thead .grp .stick0{background:#fff}
.matrix td.stick0,.matrix td.stick1,.matrix td.stick2{background:#fff}
.matrix td.stick2{border-right:1px solid var(--line)}
.matrix td.stick0{width:58px;min-width:58px;max-width:58px;padding:8px 6px}
.matrix th.stick0{width:58px;min-width:58px}
.matrix td.stick1{min-width:57px;text-align:center}

/* Acciones de fila: arrastrar y eliminar */
.fila-acciones{text-align:center}
.fila-acciones .drag-handle,
.fila-acciones .btn-borrar-fila{
	display:inline-flex;align-items:center;justify-content:center;
	width:22px;height:22px;border:0;background:none;padding:0;
	color:#B9C4CE;border-radius:4px;vertical-align:middle;
}
.fila-acciones .drag-handle{cursor:grab}
.fila-acciones .drag-handle:active{cursor:grabbing}
.fila-acciones .drag-handle svg{width:15px;height:15px}
.fila-acciones .btn-borrar-fila{cursor:pointer}
.fila-acciones .btn-borrar-fila svg{width:14px;height:14px}
.matrix tr:hover .fila-acciones .drag-handle{color:var(--ink-secondary)}
.matrix tr:hover .fila-acciones .btn-borrar-fila{color:var(--red)}
.fila-acciones .btn-borrar-fila:hover{background:var(--red-soft)}
.matrix tr.arrastrando-fila td{background:#EAF3FB !important;opacity:.85}

@keyframes flashOk{0%{background:#D7F0E1}100%{background:inherit}}
@keyframes flashErr{0%{background:#F8DAD5}100%{background:inherit}}
.matrix td.flash-ok{animation:flashOk 1.2s ease-out}
.matrix td.flash-err{animation:flashErr 1.2s ease-out}

/* ---------- Tooltip ---------- */
[data-tooltip]{position:relative}
[data-tooltip]::after{
	content:attr(data-tooltip);
	position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);
	background:var(--ink);color:#fff;font-size:12px;font-weight:500;
	padding:5px 10px;border-radius:6px;white-space:nowrap;
	opacity:0;visibility:hidden;pointer-events:none;
	transition:opacity .12s ease;z-index:60;
}
[data-tooltip]::before{
	content:"";position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);
	border:5px solid transparent;border-top-color:var(--ink);
	opacity:0;visibility:hidden;pointer-events:none;
	transition:opacity .12s ease;z-index:60;
}
[data-tooltip]:hover::after,[data-tooltip]:hover::before{opacity:1;visibility:visible}
/* Variante: el tooltip crece hacia la izquierda (para botones pegados al borde derecho) */
.tooltip-izq::after{left:auto;right:0;transform:none}

/* ---------- Foto de perfil + editor de encuadre ---------- */
.perfil-foto{display:flex;align-items:center;gap:20px}
.avatar-grande{
	width:96px;height:96px;border-radius:50%;background:var(--blue);color:#fff;
	display:flex;align-items:center;justify-content:center;
	font-weight:700;font-size:36px;flex-shrink:0;overflow:hidden;
	border:1px solid var(--line-soft);
}
.perfil-foto-acciones{display:flex;gap:10px;align-items:center}
.perfil-foto-acciones label{cursor:pointer}

.cropper{
	width:320px;height:320px;margin:0 auto;position:relative;
	overflow:hidden;border-radius:var(--radius-sm);background:#0f1418;
	cursor:grab;touch-action:none;
}
.cropper.arrastrando{cursor:grabbing}
.cropper img{
	position:absolute;top:0;left:0;max-width:none;
	user-select:none;pointer-events:none;
}
/* guía circular del recorte */
.cropper::after{
	content:"";position:absolute;inset:0;pointer-events:none;
	border-radius:50%;box-shadow:0 0 0 400px rgba(15,20,24,.45);
}
.cropper-zoom{
	display:flex;align-items:center;gap:12px;justify-content:center;
	margin:16px auto 0;max-width:320px;color:var(--ink-secondary);
}
.cropper-zoom svg{width:16px;height:16px;flex-shrink:0}
.cropper-zoom input[type=range]{flex:1;accent-color:var(--blue)}

/* ---------- Modal ---------- */
.modal-overlay{
	position:fixed;inset:0;background:rgba(28,43,51,.55);
	display:none;align-items:center;justify-content:center;
	padding:20px;z-index:100;
}
.modal-overlay.abierto{display:flex}
.modal{
	background:#fff;border-radius:var(--radius);max-width:460px;width:100%;
	box-shadow:0 8px 32px rgba(0,0,0,.25);padding:24px;
}
.modal h3{font-size:18px;margin-bottom:12px}
.modal p{font-size:14px;margin-bottom:10px}
.modal ul{margin:0 0 12px 20px;font-size:14px}
.modal ul li{margin-bottom:4px}
.modal-aviso{color:var(--red);font-weight:600}
.modal .field{margin-top:16px}
.modal-error{
	background:var(--red-soft);color:var(--red);border:1px solid rgba(184,52,27,.3);
	border-radius:var(--radius-sm);padding:9px 12px;font-size:13px;margin-bottom:6px;
}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.btn-danger{background:var(--red);color:#fff}
.btn-danger:hover{background:#9C2C17}
.btn-danger:disabled{opacity:.45;cursor:not-allowed}
.btn-danger:disabled:hover{background:var(--red)}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
	.topbar .search{display:none}
	.app{flex-direction:column}
	.sidebar{width:100%;height:auto;position:static;overflow:visible}
	.nav{display:flex;overflow-x:auto;padding:8px}
	.nav a{white-space:nowrap;margin-bottom:0}
	.main{padding:20px 16px}
}