/* ===== tables.css ===== */
.table-wrap{
	width:100%;
	overflow-x:auto;
	overflow-y:visible;
	padding:0 20px 20px;
	-webkit-overflow-scrolling:touch;
	scrollbar-width:auto;
	scrollbar-color:rgba(13,30,48,.65) rgba(255,255,255,.06);
	border-radius:18px;
}

.table-wrap{
	background:transparent;
}

.data-table.data-table-div,
.data-table-div{
	background:transparent;
}

.data-table-div .data-table-head,
.data-table-div .data-table-body,
.data-table-div .data-row,
.data-table-div .data-cell{
	background:transparent;
}

.table-wrap::-webkit-scrollbar{ height:14px; width:14px; }
.table-wrap::-webkit-scrollbar-thumb{ background:rgba(13,30,48,.65); border-radius:999px; border:3px solid rgba(255,255,255,.04); }
.table-wrap::-webkit-scrollbar-track{ background:rgba(255,255,255,.05); border-radius:999px; }

.table-card,
.table-responsive{
	min-width:0;
}

/* =========================================
   TABLAS HTML CLÁSICAS
========================================= */

.data-table{
	width:100%;
	min-width:720px;
	border-collapse:collapse;
	table-layout:fixed;
}

.data-table thead th{
	padding:16px 14px;
	text-align:left;
	font-size:12px;
	font-weight:800;
	letter-spacing:.05em;
	text-transform:uppercase;
	color:var(--text-muted);
	border-bottom:1px solid rgba(255,255,255,.08);
	vertical-align:top;
	white-space:nowrap;
}

.data-table tbody td{
	padding:16px 14px;
	border-bottom:1px solid rgba(255,255,255,.06);
	font-size:14px;
	line-height:1.45;
	color:var(--text-soft);
	vertical-align:top;
	word-break:break-word;
}

.data-table tbody tr:hover td{
	background:rgba(255,255,255,.03);
}

.data-table tbody tr td:first-child{
	color:var(--text);
	font-weight:600;
}

.table-nowrap th,
.table-nowrap td{
	white-space:nowrap;
}

/* =========================================
   TABLAS CON DIV
========================================= */

.data-table-div{
	width:100%;
	min-width:980px;
}

.data-table-div .data-table-head{
	border-bottom:1px solid rgba(255,255,255,.08);
}

.data-table-div .data-table-body{
	display:flex;
	flex-direction:column;
}

.data-table-div .data-row{
	display:grid;
	grid-template-columns:1fr .8fr 1.4fr 1.4fr .9fr 1.2fr;
	gap:12px;
	align-items:start;
}

.data-table-div .data-table-head .data-row{
	padding:16px 14px;
}

.data-table-div .data-table-body .data-row{
	padding:16px 14px;
	border-bottom:1px solid rgba(255,255,255,.06);
	transition:background var(--transition);
}

.data-table-div .data-table-body .data-row:hover{
	background:rgba(255,255,255,.03);
}

.data-table-div .data-cell{
	min-width:0;
	font-size:14px;
	line-height:1.45;
	color:var(--text-soft);
	word-break:break-word;
}

.data-table-div .data-table-head .data-cell{
	font-size:12px;
	font-weight:800;
	letter-spacing:.05em;
	text-transform:uppercase;
	color:var(--text-muted);
	white-space:nowrap;
}

.data-table-div .data-table-head .data-row .data-cell:last-child{
	text-align: right;
}

.data-table-div .data-table-body .data-row .data-cell:first-child{
	color:var(--text);
	font-weight:600;
}

.data-table-div .data-cell[data-label="Acciones"]{
	display:flex;
	justify-content:flex-end;
	align-items:flex-start;
}

.data-table-div .data-row-empty{
	display:block;
	padding:18px 14px;
}

.data-table-div .data-cell-empty{
	padding:18px;
	border-radius:16px;
	border:1px dashed var(--stroke);
	color:var(--text-soft);
	background:rgba(255,255,255,.02);
}

/* =========================================
   ACCIONES
========================================= */

.table-actions{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	justify-content:flex-end;
}

/* =========================================
   LISTA LEGACY
========================================= */

.table-list{
	padding:18px 20px 20px;
}

.table-head{
	display:grid;
	gap:12px;
	padding-bottom:8px;
	margin-bottom:4px;
	border-bottom:1px solid var(--stroke);
	font-size:11px;
	font-weight:800;
	letter-spacing:.04em;
	text-transform:uppercase;
	color:var(--text-muted);
}

.table-body{
	display:grid;
	gap:0;
	padding-top:12px;
}

.table-row{
	display:grid;
	gap:12px;
	align-items:start;
	padding:12px 6px;
	border-bottom:1px solid var(--stroke);
	transition:background var(--transition);
}

.table-row:hover{
	background:rgba(255,255,255,.04);
}

.table-cell{
	min-width:0;
}

.table-label{
	display:none;
	margin-bottom:4px;
	font-size:11px;
	font-weight:700;
	letter-spacing:.03em;
	text-transform:uppercase;
	color:var(--text-muted);
}

.table-value{
	min-width:0;
	font-size:13px;
	line-height:1.4;
	color:var(--text);
	word-break:break-word;
}

.table-cell-action{
	display:flex;
	justify-content:flex-end;
	align-items:center;
}

.table-empty{
	padding:18px;
	border-radius:16px;
	border:1px dashed var(--stroke);
	color:var(--text-soft);
	background:rgba(255,255,255,.02);
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1280px){
	.table-wrap{
		padding:0 14px 14px;
		overflow-x:auto;
		overflow-y:visible;
	}

	.data-table{
		min-width:720px;
		table-layout:auto;
	}

	.data-table thead{
		display:table-header-group;
	}

	.data-table tbody{
		display:table-row-group;
	}

	.data-table tr{
		display:table-row;
	}

	.data-table th,
	.data-table td{
		display:table-cell;
	}

	.data-table thead th{
		padding:14px 12px;
		font-size:11px;
	}

	.data-table tbody td{
		padding:14px 12px;
		font-size:13px;
	}

	.data-table-div{
		min-width:860px;
	}

	.data-table-div .data-table-head{
		display:block;
	}

	.data-table-div .data-table-body{
		display:flex;
		flex-direction:column;
		gap:0;
	}

	.data-table-div .data-table-head .data-row{
		padding:14px 12px;
	}

	.data-table-div .data-table-body .data-row{
		padding:14px 12px;
		border-radius:0;
		background:transparent;
		border-left:0;
		border-right:0;
		border-top:0;
	}

	.data-table-div .data-table-body .data-cell{
		padding:0;
		font-size:13px;
	}

	.data-table-div .data-table-body .data-cell::before{
		display:none;
	}

	.data-table-div .data-cell[data-label="Acciones"]{
		justify-content:flex-end;
		align-items:flex-start;
	}

	.table-actions{
		justify-content:flex-end;
	}
}

@media (max-width: 940px){
	.table-wrap{
		padding:0 14px 14px;
		overflow:visible;
	}

	/* tablas html */
	.data-table{
		min-width:100%;
		table-layout:auto;
	}

	.data-table,
	.data-table thead,
	.data-table tbody,
	.data-table tr,
	.data-table th,
	.data-table td{
		display:block;
		width:100%;
	}

	.data-table thead{
		display:none;
	}

	.data-table tbody{
		display:flex;
		flex-direction:column;
		gap:12px;
	}

	.data-table tbody tr{
		border:1px solid rgba(255,255,255,.08);
		border-radius:14px;
		background:rgba(255,255,255,.04);
		padding:12px;
		overflow:hidden;
	}

	.data-table tbody td{
		display:flex;
		flex-direction:column;
		gap:4px;
		padding:0;
		border:0;
		background:transparent !important;
		white-space:normal;
	}

	.data-table tbody td + td{
		margin-top:10px;
	}

	.data-table tbody td::before{
		content:attr(data-label);
		display:block;
		font-size:11px;
		font-weight:800;
		letter-spacing:.04em;
		text-transform:uppercase;
		color:var(--text-muted);
	}

	/* tablas div */
	.data-table-div{
		min-width:100%;
	}

	.data-table-div .data-table-head{
		display:none;
	}

	.data-table-div .data-table-body{
		display:flex;
		flex-direction:column;
		gap:12px;
	}

	.data-table-div .data-table-body .data-row{
		display:grid;
		grid-template-columns:repeat(2, minmax(0, 1fr));
		gap:12px 14px;
		padding:12px;
		border:1px solid rgba(255,255,255,.08);
		border-radius:14px;
		background:rgba(255,255,255,.04);
		overflow:hidden;
	}

	.data-table-div .data-table-body .data-cell{
		display:flex;
		flex-direction:column;
		gap:4px;
		min-width:0;
		padding:0;
		white-space:normal;
	}

	.data-table-div .data-table-body .data-cell::before{
		content:attr(data-label);
		display:block;
		font-size:11px;
		font-weight:800;
		letter-spacing:.04em;
		text-transform:uppercase;
		color:var(--text-muted);
	}

	.data-table-div .data-cell[data-label="Acciones"]{
		justify-content:flex-start;
		align-items:flex-start;
	}

	.table-actions{
		justify-content:flex-start;
	}
}

@media (max-width: 520px){
	.table-wrap{
		padding:0 12px 12px;
	}

	.data-table tbody tr,
	.data-table-div .data-table-body .data-row{
		padding:10px;
		border-radius:12px;
	}

	.data-table tbody td,
	.data-table-div .data-table-body .data-cell{
		font-size:13px;
	}
}

/* =========================================================
   Fase 6: criterios oficiales compartidos para tablas
   ========================================================= */
.ui-table-scroll,
.table-wrap{
    border-radius:18px;
}
.ui-div-table .ui-table-actions,
.data-table-div .table-actions,
.table-list .table-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
}
.ui-div-table .btn,
.data-table .btn,
.data-table-div .btn,
.table-list .btn{
    white-space:nowrap;
}
.ui-div-table .ui-div-row-empty,
.data-table-div .data-row-empty,
.table-empty{
    color:var(--text-soft);
}
.ui-div-table .ui-div-cell-empty,
.data-table-div .data-cell-empty,
.table-empty{
    border-radius:16px;
    border:1px dashed var(--stroke);
    background:rgba(255,255,255,.02);
}
@media(max-width:940px){
    .ui-div-table .ui-table-actions,
    .data-table-div .table-actions,
    .table-list .table-actions{
        justify-content:flex-start;
    }
    .ui-div-table .ui-div-cell[data-label="Acciones"],
    .ui-div-table .ui-div-cell[data-label="Editar"],
    .ui-div-table .ui-div-cell[data-label="Guardado"]{
        align-items:flex-start;
    }
}




/* =========================================================
   Tablas UI generales del theme
   Estructura oficial: ui-table-card > ui-module-head/body > ui-table-filters > ui-table-scroll > ui-div-table
   ========================================================= */
.ui-table-card{
    width:100%;
    min-width:0;
    overflow:hidden;
    border:1px solid var(--stroke);
    border-radius:22px;
    background:var(--surface);
    box-shadow:var(--shadow-sm);
}

.ui-table-card .ui-module-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(260px,420px) auto;
    gap:14px;
    align-items:center;
    padding:24px 22px;
    border-bottom:1px solid var(--stroke);
}

.ui-table-card .ui-module-head > div:first-child{
    min-width:0;
}

.ui-table-card .ui-module-actions{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.ui-table-card .ui-module-body{
    padding:16px 22px 22px;
}

.ui-table-filters{
    margin:0 0 16px;
    padding:16px;
    border:1px solid var(--stroke);
    border-radius:18px;
    background:rgba(255,255,255,.035);
}

.ui-table-filter-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    align-items:end;
}

.ui-table-filter-grid.tres-cols{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.ui-table-filter-grid.cuatro-cols{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.ui-table-scroll{
    width:100%;
    overflow-x:auto;
    overflow-y:visible;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:auto;
    scrollbar-color:rgba(13,30,48,.65) rgba(255,255,255,.06);
}

.ui-table-scroll::-webkit-scrollbar{ height:14px; width:14px; }
.ui-table-scroll::-webkit-scrollbar-thumb{ background:rgba(13,30,48,.65); border-radius:999px; border:3px solid rgba(255,255,255,.04); }
.ui-table-scroll::-webkit-scrollbar-track{ background:rgba(255,255,255,.05); border-radius:999px; }

.ui-div-table{
    width:100%;
    min-width:860px;
    background:transparent;
}

.ui-div-table .ui-div-thead{
    border-bottom:1px solid var(--stroke);
    background:transparent;
}

.ui-div-table .ui-div-tbody{
    display:flex;
    flex-direction:column;
    background:transparent;
}

.ui-div-table .ui-div-row{
    display:grid;
    gap:14px;
    align-items:center;
    background:transparent;
}

.ui-div-table .ui-div-thead .ui-div-row{
    padding:16px 18px;
}

.ui-div-table .ui-div-tbody .ui-div-row{
    padding:16px 18px;
    border-bottom:1px solid var(--stroke);
    transition:background var(--transition);
}

.ui-div-table .ui-div-tbody .ui-div-row:hover{
    background:rgba(255,255,255,.035);
}

.ui-div-table .ui-div-cell{
    min-width:0;
    font-size:14px;
    line-height:1.45;
    color:var(--text-soft);
    word-break:break-word;
    background:transparent;
}

.ui-div-table .ui-div-thead .ui-div-cell{
    font-size:12px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--text-muted);
    white-space:nowrap;
}

.ui-div-table .ui-div-tbody .ui-div-row .ui-div-cell:first-child{
    color:var(--text);
    font-weight:600;
}

.ui-div-table .ui-div-thead .ui-div-row .ui-div-cell:last-child,
.ui-div-table .ui-div-cell-actions,
.ui-div-table .ui-div-cell[data-label="Acción"],
.ui-div-table .ui-div-cell[data-label="Acciones"]{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    text-align:right;
}

.ui-div-table .ui-div-row-empty{
    display:block;
    padding:16px 18px;
}

.ui-div-table .ui-div-cell-empty{
    padding:18px;
    border:1px dashed var(--stroke);
    border-radius:16px;
    background:rgba(255,255,255,.02);
    color:var(--text-soft);
    font-weight:500;
}

@media(max-width:1180px){
    .ui-table-card .ui-module-head{
        grid-template-columns:1fr;
        align-items:start;
    }
    .ui-table-card .ui-module-actions{
        justify-content:flex-start;
    }
    .ui-table-filter-grid,
    .ui-table-filter-grid.tres-cols,
    .ui-table-filter-grid.cuatro-cols{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:940px){
    .ui-table-card .ui-module-head,
    .ui-table-card .ui-module-body{
        padding-left:16px;
        padding-right:16px;
    }
    .ui-table-filter-grid,
    .ui-table-filter-grid.tres-cols,
    .ui-table-filter-grid.cuatro-cols{
        grid-template-columns:1fr;
    }
    .ui-table-scroll{
        overflow:visible;
    }
    .ui-div-table{
        min-width:0;
    }
    .ui-div-table .ui-div-thead{
        display:none;
    }
    .ui-div-table .ui-div-tbody{
        gap:12px;
    }
    .ui-div-table .ui-div-tbody .ui-div-row{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px 14px;
        padding:14px;
        border:1px solid var(--stroke);
        border-radius:16px;
        background:rgba(255,255,255,.035);
    }
    .ui-div-table .ui-div-tbody .ui-div-cell{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:4px;
        font-size:13px;
        text-align:left;
    }
    .ui-div-table .ui-div-tbody .ui-div-cell::before{
        content:attr(data-label);
        display:block;
        font-size:11px;
        font-weight:800;
        letter-spacing:.04em;
        text-transform:uppercase;
        color:var(--text-muted);
    }
    .ui-div-table .ui-div-cell-actions,
    .ui-div-table .ui-div-cell[data-label="Acción"],
    .ui-div-table .ui-div-cell[data-label="Acciones"]{
        justify-content:flex-start;
        align-items:flex-start;
        text-align:left;
    }
}

@media(max-width:560px){
    .ui-div-table .ui-div-tbody .ui-div-row{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   Fila pie / totales
   ========================================================= */
.ui-div-table .ui-div-row--foot{
    border-top:1px solid var(--stroke-strong);
    background:rgba(255,255,255,.02);
}
.ui-div-table .ui-div-row--foot .ui-div-cell{
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.07em;
    color:var(--text-muted);
}
body.light .ui-div-table .ui-div-row--foot{
    background:rgba(0,0,0,.025);
}

/* Dot de color — indicador visual en celdas de tabla */
.ui-prio-dot{
    display:inline-block;
    width:9px;
    height:9px;
    border-radius:3px;
    flex-shrink:0;
    vertical-align:middle;
    margin-right:6px;
}

.ui-table-card .ui-module-head h2,
.ui-table-card .ui-module-head .ui-module-title{
    margin:0;
    color:var(--text);
    font-size:clamp(20px,2vw,28px);
    line-height:1.05;
    letter-spacing:-.03em;
}

.ui-table-card .ui-module-head p,
.ui-table-card .ui-module-head .ui-module-subtitle{
    margin:.35rem 0 0;
    color:var(--text-soft);
    font-size:14px;
    line-height:1.35;
}