:root{ --eiffage-primary: #E51F20; --eiffage-secondary: #24272D; }

/* Card & filters (minimal) */
.eiffage-card{ padding:16px; border-radius:8px; background:#fff; box-shadow:0 2px 8px rgba(36,39,45,0.04); border:1px solid rgba(0,0,0,0.04); }

/* Two-column form layout: main card + side maintenance users card */
.eiffage-form-row {
  display:flex;
  gap:20px;
  align-items:flex-start;
}

.eiffage-side-card .m-user-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px;
  border-radius:6px;
  background:#f7f7f7;
  margin-bottom:8px;
}

@media (max-width:720px){
  .eiffage-form-row{flex-direction:column}
  .eiffage-side-card{width:100%!important}
}
.filters-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.eiffage-card .filters-row{ background:#f6f7f8; padding:12px; border-radius:10px; }
.filters-row .col{ min-width:150px; flex:0 0 auto; }
.filters-row label{ font-weight:600; color:var(--eiffage-secondary); display:block; margin-bottom:6px; font-size:13px; }
.eiffage-select, .form-select{ width:100%; max-width:320px; }

/* Buttons: keep minimal, prefer Bootstrap's button styles */
.eiffage-btn{ padding:6px 10px; border-radius:6px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; font-weight:600; }
.eiffage-btn.ghost{ background:transparent; color:var(--eiffage-secondary); border:1px solid #e6e6e6; }
.eiffage-btn.secondary{ color:#fff; }
.eiffage-actions{ display:flex; gap:8px; align-items:center; }

/* Table: header dark, rows white, single bottom separator in primary */
.eiffage-table{ width:100%; border-collapse:separate; border-radius:10px; overflow:hidden; background:transparent; border-bottom:3px solid var(--eiffage-primary); }
.eiffage-table thead th{ background:#24272D; color:#fff; padding:14px 16px; text-align:left; border-bottom:0; font-weight:700; }
.eiffage-table tbody td{ padding:14px 16px; border-bottom: none; vertical-align:middle; background:#fff; }
/* Make every row plain white and add a subtle red separator between rows */
.eiffage-table tbody tr{ background:#fff; border-bottom: 1px solid rgba(229,31,32,0.10); }
.eiffage-table tbody tr:last-child{ border-bottom: none; }
.eiffage-table a{ color:var(--eiffage-secondary); text-decoration:none; }
.eiffage-table a:hover{ color:var(--eiffage-primary); }

/* DataTables controls modest spacing */
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { margin-bottom: 12px; }
.dataTables_wrapper .dataTables_info { margin-top: 12px; color: rgba(36,39,45,0.7); }
.dataTables_wrapper .dataTables_paginate { margin-top: 8px; }

/* Use Eiffage primary for filter button and small button tweaks */
.eiffage-btn.btn-primary{ background: var(--eiffage-primary) !important; border-color: transparent !important; color: #fff !important; }
.eiffage-btn.btn-primary:hover, .eiffage-btn.btn-primary:focus{ background: color-mix(in srgb, var(--eiffage-primary) 85%, #000 15%) !important; color:#fff !important; }
.eiffage-btn.btn-primary:active{ transform: translateY(1px); }
.eiffage-btn{ border-radius: 8px; }

/* DataTables controls: rounded inputs/selects and subtle borders */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select.form-select,
.dataTables_wrapper .dataTables_filter input.form-control {
  border-radius: 8px; border:1px solid rgba(36,39,45,0.08); padding:6px 10px; background:#fff;
}

/* Pagination buttons rounded and use primary on active/current */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 8px; border:1px solid rgba(36,39,45,0.06); padding:6px 10px; margin:0 4px; background:transparent; color:var(--eiffage-secondary);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.active {
  background: #e6e7ea; color:#111827 !important; border-color: transparent;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{ background: rgba(36,39,45,0.06); color:var(--eiffage-secondary); }

/* Make the length select inline and rounded in labels */
.dataTables_wrapper .dataTables_length label{ display:flex; align-items:center; gap:8px; }
.dataTables_wrapper .dataTables_filter label{ display:flex; align-items:center; gap:8px; }

/* Ensure Select2 inherits rounded corners when applied to DataTables controls */
.select2-container .selection .select2-selection--single { border-radius:8px !important; border:1px solid rgba(36,39,45,0.08) !important; }
/* Make Select2 controls larger */
.select2-container--default .select2-selection--single{ height:44px; padding:6px 12px; font-size:15px; }
.select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:30px; }
.select2-container--default .select2-selection--single .select2-selection__arrow b{ border-color:#6b7280 transparent transparent; }
.select2-container{ max-width:420px; }

/* Icons */
.eiffage-qr-actions .eiffage-btn, .eiffage-table .eiffage-btn{ padding:6px 8px; font-size:14px; }
.eiffage-table .eiffage-btn i{ transition: color 160ms ease, transform 160ms ease; }
/* Table action buttons: dark background and white icons by default */
.eiffage-cuadro-item .eiffage-btn, .eiffage-table .eiffage-btn{ background:#24272D; color:#fff; border:1px solid rgba(0,0,0,0.06); }
.eiffage-cuadro-item .eiffage-btn i, .eiffage-table .eiffage-btn i{ color:#fff; }
.eiffage-cuadro-item .eiffage-btn:hover, .eiffage-table .eiffage-btn:hover{ transform:translateY(-2px); background: #111827; color: #fff; border-color: transparent; }
.eiffage-cuadro-item .eiffage-btn, .eiffage-table .eiffage-btn{ background:#fff; color:var(--eiffage-secondary); border:1px solid rgba(36,39,45,0.06); }
.eiffage-cuadro-item .eiffage-btn i, .eiffage-table .eiffage-btn i{ color:var(--eiffage-secondary); }
.eiffage-cuadro-item .eiffage-btn:hover, .eiffage-table .eiffage-btn:hover{ transform:translateY(-2px); background: var(--eiffage-primary); color: #fff; border-color: transparent; }
.eiffage-cuadro-item .eiffage-btn:hover i, .eiffage-table .eiffage-btn:hover i{ color:#fff; }

/* QR modal */
.eiffage-qr-modal{ display:none; }
.eiffage-qr-modal.visible{ display:block; position:fixed; inset:0; z-index:9999; }
.eiffage-qr-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.4); }
.eiffage-qr-box{ position:relative; margin:60px auto; max-width:420px; padding:18px; border-radius:8px; background:#fff; box-shadow:0 8px 20px rgba(36,39,45,0.08); text-align:center; }
.eiffage-qr-close{ position:absolute; right:10px; top:8px; background:transparent; border:none; font-size:22px; }

/* Responsive tweaks */
@media (max-width:720px){
  .filters-row{ flex-direction:column; }
  .eiffage-select{ max-width:100%; }
  .eiffage-actions{ flex-wrap:wrap; }
}

/* Mis-edificios / accordion & list enhancements */
.eiffage-accordion details { border:1px solid rgba(36,39,45,0.06); border-radius:8px; margin:10px 0; background:#fff; overflow:hidden; }
.eiffage-accordion summary { padding:12px 16px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-weight:700; color:var(--eiffage-secondary); }
.eiffage-badge { background:var(--eiffage-secondary); color:#fff; padding:6px 10px; border-radius:999px; font-size:12px; }
.eiffage-accordion details .content { padding:12px 16px; border-top:1px solid rgba(36,39,45,0.04); }

/* Nested hierarchy visual */
.eiffage-accordion details details { margin:8px 0 0 12px; }
.eiffage-accordion details details summary { font-weight:600; font-size:0.95rem; }

/* Form styles: align with table/card visual language */
.eiffage-form .eiffage-card { padding:18px; border-radius:10px; background:#fff; box-shadow:0 6px 20px rgba(36,39,45,0.06); border-left:1px solid rgba(0,0,0,0.04); border-right:1px solid rgba(0,0,0,0.04); border-top:4px solid #24272D; border-bottom:4px solid #E51F20; }
.eiffage-form p { margin:0 0 12px; }
.eiffage-form label { display:block; font-weight:700; color:var(--eiffage-secondary); margin-bottom:6px; }
.eiffage-form input[type="text"], .eiffage-form input[type="email"], .eiffage-form select, .eiffage-form textarea { width:100%; padding:10px 12px; border:1px solid rgba(36,39,45,0.08); border-radius:8px; background:#fff; color:var(--eiffage-secondary); }
.eiffage-form input:focus, .eiffage-form select:focus, .eiffage-form textarea:focus { outline:none; border-color: var(--eiffage-primary); box-shadow: 0 4px 18px rgba(229,31,32,0.06); }
/* .row{ display:flex; gap:12px; } */
.row .col{ flex:1; }
.eiffage-form .eiffage-actions{ margin-top:14px; display:flex; gap:8px; align-items:center; }
.eiffage-form .eiffage-btn{ padding:8px 12px; }
.eiffage-form .eiffage-btn.ghost{ background:transparent; color:var(--eiffage-secondary); border:1px solid #e6e6e6; }
.eiffage-form .eiffage-btn.secondary{ background:var(--eiffage-secondary); color:#fff; }
.eiffage-form small.eiffage-muted { color: rgba(36,39,45,0.6); }

/* Create-user button: keep icon and text in one line */
.eiffage-btn.eiffage-btn--create{ white-space:nowrap; display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:8px; background:var(--eiffage-primary); color:#fff; text-decoration:none; }
.eiffage-btn.eiffage-btn--create .eiffage-icon{ width:16px; height:16px; flex:0 0 16px; display:inline-block; }
.eiffage-btn.eiffage-btn--create:hover{ background: color-mix(in srgb, var(--eiffage-primary) 85%, #000 15%); color:#fff; }

@media (max-width:720px){
  .row{ flex-direction:column; }
}

/* Make sector summary more distinctive */
.eiffage-accordion > details > details > summary {
  background: var(--eiffage-primary);
  color: #fff;
  padding: 10px 14px;
  border-radius: 6px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.06);
}
.eiffage-accordion > details > details > summary .sector-badge { background: rgba(255,255,255,0.12); color:#fff; }

/* List of cuadros improved */
.eiffage-cuadro-list { list-style:none; padding:0; margin:0; }
.eiffage-cuadro-item { border:1px solid rgba(36,39,45,0.04); border-radius:8px; padding:10px; background:#fff; }
.eiffage-cuadro-item + .eiffage-cuadro-item { margin-top:8px; }
.eiffage-cuadro-item a { font-weight:600; color:var(--eiffage-secondary); text-decoration:none; }
.eiffage-cuadro-item small { color:rgba(36,39,45,0.6); margin-left:6px; }

/* Buttons: hover transform and primary color */
.eiffage-btn { transition: transform 120ms ease, box-shadow 120ms ease, background-color 140ms ease; }
.eiffage-btn:hover { 
  transform: translateY(-3px); 
  box-shadow: 0 6px 18px rgba(229,31,32,0.12);
  color: white;
 }
.eiffage-btn.ghost:hover, .eiffage-btn.secondary:hover { background: var(--eiffage-primary); color:#fff; border-color: transparent; }

/* Mantenimiento user list: compact card grid without table lines */
#mantenimiento_list{ display:flex; flex-wrap:wrap; gap:10px; }
#mantenimiento_list .m-user-row{ background:#fff; padding:10px 12px; border-radius:8px; box-shadow:0 6px 18px rgba(11,20,30,0.04); display:flex; align-items:center; gap:8px; min-width:220px; max-width:360px; }
#mantenimiento_list .m-user-row span{ font-weight:600; color:var(--eiffage-secondary); }
#mantenimiento_list .m-user-row small{ color:rgba(36,39,45,0.6); margin-left:8px; font-weight:400; }
#mantenimiento_list .m-user-row .eiffage-btn.ghost{ padding:6px 8px; }

/* Add button style: white text on secondary gray background */
.eiffage-btn--add{ background:var(--eiffage-secondary); color:#fff; border:0; padding:8px 12px; }
.eiffage-btn--add:hover{ background: color-mix(in srgb, var(--eiffage-secondary) 85%, #000 15%); color:#fff; }

/* Sector badge */
.sector-badge{ display:inline-block; background:rgba(229,31,32,0.08); color:var(--eiffage-primary); padding:4px 8px; border-radius:999px; margin-left:8px; font-size:12px; }

/* Make accordion summary icons align */
.eiffage-accordion summary::-webkit-details-marker{ display:none; }

/* Specific: ensure cuadros table shows red bottom border */
#eiffage-table { border-bottom: 3px solid var(--eiffage-primary) !important; }