/* ********************************************************** */
/* Desarrollado por Herlin R. Espinosa G. (herlin25@gmail.com) */
/* ********************************************************** */

/* Patrón de diseño (referencia: repositorioinformacion), acotado a .sdh-usr (usuarios y perfil).
   El alto del encabezado y el "Procesando…" de DataTables vienen de main.css. */
.sdh-usr {
  --gd: var(--bs-primary, #492e1f); --gm: var(--custom-tertiary, #7e8d38); --gl: var(--custom-tertiary, #7e8d38);
  --gp: #ecefdf; --gp-hover: #dfe3c6;
  --bg: #f7f5f1; --card: #fff; --text: #2e2a26; --muted: #7a6a5a;
  --border: #e2dccf; --row-line: #f1ede7; --row-hover: #faf8f5; --r: 10px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.6;
  width: 100%;
}
.sdh-usr *, .sdh-usr *::before, .sdh-usr *::after { box-sizing: border-box; }

/* Header */
.sdh-usr .hdr {
  background: linear-gradient(120deg, var(--gd) 0, var(--gd) 30%, var(--gm) 100%);
  color: #fff; padding: 12px 20px; border-radius: var(--r); margin-bottom: 5px;
}
.sdh-usr .hdr-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sdh-usr .hdr h1 { font-size: 24px; font-weight: 700; margin: 0; line-height: 1.3; color: #fff; }
.sdh-usr .hdr-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Botones */
.sdh-usr .btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 600; white-space: nowrap; transition: all .2s ease; }
.sdh-usr .hdr-actions .btn-success { background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.3); color: #fff; }
.sdh-usr .hdr-actions .btn-success:hover, .sdh-usr .hdr-actions .btn-success:focus { background: rgba(255,255,255,.3); border-color: rgba(255,255,255,.5); color: #fff; }
.sdh-usr .btn-secondary { background: var(--gp); border: 1px solid var(--border); color: var(--gd); }
.sdh-usr .btn-secondary:hover, .sdh-usr .btn-secondary:focus { background: var(--gp-hover); border-color: var(--gl); color: var(--gd); }
.sdh-usr .btn-primary { background: var(--gl); border: 1px solid var(--gl); color: #fff; }
.sdh-usr .btn-primary:hover, .sdh-usr .btn-primary:focus { background: var(--gd); border-color: var(--gd); color: #fff; }

/* Avisos */
.sdh-usr .alerts { margin-bottom: 8px; }
.sdh-usr .alert { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 16px; border: none; border-left: 4px solid; border-radius: var(--r); font-size: 14px; }
.sdh-usr .alert-success { background: #f0f7f1; border-left-color: #28a745; color: #1e5631; }
.sdh-usr .alert-danger { background: #fef5f4; border-left-color: #dc3545; color: #8c3b2a; }
.sdh-usr .alert svg { flex-shrink: 0; margin-top: 2px; }

/* Tabla */
.sdh-usr .tbl-wrapper { background: var(--card); border-radius: var(--r); padding: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.07); overflow-x: auto; }
.sdh-usr .tbl-wrapper .data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sdh-usr .tbl-wrapper .data-table th { padding: 12px 30px 12px 16px; text-align: left; color: var(--gd); font-weight: 600; font-size: 14px; background: var(--gp); border-bottom: 2px solid var(--border); white-space: nowrap; }
.sdh-usr .tbl-wrapper .data-table td { padding: 10px 12px; border-bottom: 1px solid var(--row-line); vertical-align: middle; }
.sdh-usr .tbl-wrapper .data-table tbody tr:nth-child(odd) td { background: #fafaf9 !important; }
.sdh-usr .tbl-wrapper .data-table tbody tr:nth-child(even) td { background: #fff !important; }
.sdh-usr .tbl-wrapper .data-table tbody tr:hover td { background: var(--row-hover) !important; }
.sdh-usr .tbl-wrapper .dataTables_wrapper { font-size: 14px; }
.sdh-usr .tbl-wrapper .dataTables_scroll { padding-top: 0 !important; }
.sdh-usr .tbl-wrapper .dataTables_wrapper .dataTables_length,
.sdh-usr .tbl-wrapper .dataTables_wrapper .dataTables_filter { margin-bottom: 10px; }
.sdh-usr .tbl-wrapper .dataTables_wrapper .dataTables_length label,
.sdh-usr .tbl-wrapper .dataTables_wrapper .dataTables_filter label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: normal; }
.sdh-usr .tbl-wrapper .dataTables_wrapper .dataTables_filter input,
.sdh-usr .tbl-wrapper .dataTables_wrapper .dataTables_length select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; outline: none; }
.sdh-usr .tbl-wrapper .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--gl); box-shadow: 0 0 0 3px rgba(126,141,56,.1); }
.sdh-usr .tbl-wrapper .dataTables_wrapper .dataTables_info { padding: 8px 0; font-size: 14px; color: var(--muted); }
.sdh-usr .tbl-wrapper .dataTables_wrapper .dataTables_paginate .paginate_button { padding: 4px 8px; margin: 0; border: 1px solid var(--border); border-radius: 4px; background: #fff; color: var(--text); font-size: 12px; }
.sdh-usr .tbl-wrapper .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--gl); border-color: var(--gl); color: #fff; font-weight: 600; }

/* Estado (Activo / Inactivo) */
.sdh-usr .usr-badge { display: inline-block; padding: 1px 10px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.sdh-usr .usr-badge-on { background: var(--gp); color: #4f5a22; }
.sdh-usr .usr-badge-off { background: #f6e3de; color: #8c3b2a; }

/* Fórmula N-P-K */
.sdh-usr .usr-npk { display: inline-flex; align-items: center; gap: 2px; padding: 2px 12px; border-radius: 6px; background: var(--gp); color: var(--gd); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .5px; }

/* Formulario */
.sdh-usr .frm-wrapper { background: var(--card); border-radius: var(--r); padding: 22px 26px; box-shadow: 0 1px 4px rgba(0,0,0,.07); }
.sdh-usr .frm-section { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.sdh-usr .frm-section h3 { font-size: 13px; font-weight: 700; color: var(--gd); margin: 0 0 12px; }
.sdh-usr .usr-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.sdh-usr .usr-label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--gd); }
.sdh-usr .usr-hint { margin-top: 8px; font-size: 13px; color: var(--muted); }
.sdh-usr .usr-preview { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; color: var(--muted); }

/* Solo background-color: la flecha del select y el check de Bootstrap usan background-image */
.sdh-usr .frm-wrapper .form-control {
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 14px; color: var(--text); background-color: #fff;
}
.sdh-usr .frm-wrapper .form-control:focus { border-color: var(--gl); box-shadow: 0 0 0 3px rgba(126,141,56,.15); outline: none; }
.sdh-usr .form-check-input { cursor: pointer; border: 2px solid var(--border); background-color: #fff; }
.sdh-usr .form-check-input:checked { background-color: var(--gl); border-color: var(--gl); }
.sdh-usr .form-check-input:focus { border-color: var(--gl); box-shadow: 0 0 0 3px rgba(126,141,56,.15); }
.sdh-usr .usr-switch { display: flex; align-items: center; gap: 10px; margin: 0; padding-left: 0; }
.sdh-usr .usr-switch .form-check-input { margin: 0; float: none; }
.sdh-usr .usr-switch .form-check-label { font-size: 14px; font-weight: 600; color: var(--gd); cursor: pointer; }

/* Show */
.sdh-usr .shw-list { display: grid; grid-template-columns: max-content 1fr; column-gap: 16px; row-gap: 6px; margin: 0; font-size: 14px; }
.sdh-usr .shw-list dt { font-weight: 600; color: var(--muted); }
.sdh-usr .shw-list dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }

/* Botones al pie (la última sección ya trae la línea) */
.sdh-usr .frm-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.sdh-usr .frm-actions .btn { padding: 10px 20px; font-size: 13px; }

@media (max-width: 768px) {
  .sdh-usr .usr-grid-3 { grid-template-columns: 1fr; }
  .sdh-usr .frm-wrapper { padding: 16px; }
}

@media (max-width: 576px) {
  .sdh-usr .hdr-actions { width: 100%; }
  .sdh-usr .hdr-actions .btn { flex: 1; justify-content: center; }
  .sdh-usr .shw-list { grid-template-columns: 1fr; row-gap: 0; }
  .sdh-usr .shw-list dd { margin-bottom: 6px; }
}

.sdh-usr .usr-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
@media (max-width: 768px) { .sdh-usr .usr-grid-2 { grid-template-columns: 1fr; } }

/* Permisos de un rol, agrupados por módulo (roles/permissions.blade.php) */
.sdh-usr .rol-perm-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.sdh-usr .rol-perm-bar .form-control { max-width: 320px; }
.sdh-usr .rol-perm-count { font-size: 13px; color: var(--muted); }
.sdh-usr .rol-perm-count strong { color: var(--gd); }
/* Permisos de roles (create, edit y show): 3 columnas; 1 en móvil */
.sdh-usr .rol-perm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: start; }
@media (max-width: 576px) {
  .sdh-usr .rol-perm-grid { grid-template-columns: 1fr; }
}
.sdh-usr .rol-group { border: 1px solid var(--border); border-radius: 8px; background: #fafaf9; overflow: hidden; }
.sdh-usr .rol-group-hdr { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; background: var(--gp); border-bottom: 1px solid var(--border); }
.sdh-usr .rol-group-hdr strong { color: var(--gd); font-size: 14px; overflow-wrap: anywhere; }
.sdh-usr .rol-group-hdr .form-check { margin: 0; font-size: 12px; color: var(--muted); white-space: nowrap; }
.sdh-usr .rol-group-body { padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; }
.sdh-usr .rol-group-body .form-check { margin: 0; }
.sdh-usr .rol-group-body .form-check-label { font-size: 14px; cursor: pointer; }
.sdh-usr .rol-perm-code { color: var(--muted); font-size: 12px; }

/* Roles (casillas en edit, etiquetas en show) */
.sdh-usr .usr-roles { display: flex; flex-wrap: wrap; gap: 8px; }
.sdh-usr .usr-roles .form-check { margin: 0; padding: 6px 12px 6px 34px; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.sdh-usr .usr-roles .form-check:has(input:checked) { border-color: var(--gm); background: var(--gp); }
.sdh-usr .usr-roles .form-check-input { margin-left: -24px; }
.sdh-usr .usr-roles .form-check-label { cursor: pointer; font-size: 14px; }
.sdh-usr .usr-chip { display: inline-block; margin: 0 4px 4px 0; padding: 1px 10px; border-radius: 10px; background: var(--gp); color: var(--gd); font-size: 13px; font-weight: 600; }

/* Estado: radios en línea */
.sdh-usr .usr-radios { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.sdh-usr .usr-radios .form-check { margin: 0; }
.sdh-usr .usr-radios .form-check-label { cursor: pointer; }

/* Enlace de subida por clave */
.sdh-usr .usr-link { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; background: #fafaf9; }
.sdh-usr .usr-link a.usr-link-url { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; color: var(--gm); font-size: 13px; }
.sdh-usr .usr-link .btn { padding: 6px 12px; font-size: 13px; }
/* Registro público (auth/register): mismo ancho que los demás módulos */
.sdh-usr .usr-intro { margin: 0 0 18px; color: var(--muted); }
.sdh-usr .usr-switch { flex-wrap: wrap; }
.sdh-usr .usr-terms-link { color: var(--gm); font-weight: 600; text-decoration: underline; }
.sdh-usr .usr-terms-link:hover { color: var(--gd); }
.sdh-usr .usr-captcha { display: flex; flex-direction: column; align-items: flex-start; }
.sdh-usr .frm-wrapper .form-control.is-invalid { border-color: #dc3545; }
@media (max-width: 400px) {
  /* El widget de reCAPTCHA mide 304px fijos */
  .sdh-usr .usr-captcha .g-recaptcha { transform: scale(.88); transform-origin: 0 0; }
}
/* Texto de la política de privacidad (modal) */
.sdh-usr .usr-terms h2 { margin: 18px 0 8px; font-size: 15px; font-weight: 700; color: var(--gd); }
.sdh-usr .usr-terms h2:first-child { margin-top: 4px; }.sdh-usr .usr-terms p { margin: 0 0 12px; text-align: justify; line-height: 1.6; }
.sdh-usr .usr-terms ul { margin: 0 0 12px; padding-left: 20px; }
.sdh-usr .usr-terms li { margin-bottom: 8px; text-align: justify; line-height: 1.6; }
.sdh-usr .usr-terms li::marker { color: var(--gm); }
.sdh-usr .usr-terms strong { color: var(--gd); }
.sdh-usr .usr-terms a { color: var(--gm); font-weight: 600; }

.sdh-usr .usr-hint-warn { margin-top: 8px; padding: 8px 12px; border-left: 3px solid #c66a3d; border-radius: 4px; background: #fbf1ea; font-size: 13px; color: var(--text); }