/* ========================= */
/* MODO CLARO */
/* ========================= */
:root {
  --font-family: 'Montserrat', sans-serif;

  --layout-width-desktop: 70%;
  --layout-width-mobile: 100%;
  --layout-max-width: 1100px;

  --bg-main: #ffffff;
  --bg-card: #f8f9fa;
  --bg-modal: #ffffff;
  --bg-tabla: #ffffff;
  --bg-cover: #790404;

  --text-main: #070807;
  --text-card: #212529;
  --text-modal: #212529;

  --color-title: #070807;
  --color-info: #0dcaf0;
  --color-warning: #ffc107;
  --color-critical: #dc3545;
  --color-success: #198754;
  --color-users: #20c997;
  --color-enlaces: #0f0f0d;
  --color-enlaces-hover: #1d1a02;
  --color-candado: #070807;

  --input-bg: #ffffff;
  --input-text: #070807;
  --input-border: #000000;
  --input-focus: #616a77;
  --input-placeholder: #704f4f;

  --btn-prim-bg: #0d6efd;
  --btn-prim-text: #000000;
  --btn-prim-border: #000000;
  --btn-prim-hover: #03132c;
  --btn-prim-hover-text: #ffffff;
  --btn-prim-border-hover: #02080e;

  --btn-second-bg: #6c757d;
  --btn-second-text: #000000;
  --btn-second-border: #000000;
  --btn-second-hover: #0d0d0e;
  --btn-second-hover-text: #ffffff;
  --btn-second-border-hover: #270258;

  --btn-success-bg: #198754;
  --btn-success-text: #000000;
  --btn-success-border: #000000;
  --btn-success-hover: #146c43;
  --btn-success-hover-text: #ffffff;
  --btn-success-border-hover: #0d4d2f;

  --btn-warning-bg: #ffc107;
  --btn-warning-text: #000000;
  --btn-warning-border: #000000;
  --btn-warning-hover: #0d0d0e;
  --btn-warning-hover-text: #ffffff;
  --btn-warning-border-hover: #270258;

  --btn-danger-bg: #dc3545;
  --btn-danger-text: #000000;
  --btn-danger-border: #000000;
  --btn-danger-hover: #0d0d0e;
  --btn-danger-hover-text: #ffffff;
  --btn-danger-border-hover: #270258;

  --btn-aux-a-bg: #6c757d;
  --btn-aux-a-text: #000000;
  --btn-aux-a-border: #000000;
  --btn-aux-a-hover: #0d0d0e;
  --btn-aux-a-hover-text: #ffffff;
  --btn-aux-a-border-hover: #270258;

  --btn-aux-b-bg: #dc3545;
  --btn-aux-b-text: #000000;
  --btn-aux-b-border: #000000;
  --btn-aux-b-hover: #bb2d3b;
  --btn-aux-b-hover-text: #ffffff;
  --btn-aux-b-border-hover: #270258;

  --table-bg: #ffffff;
  --table-header-bg: #f1f3f5;
  --table-row-hover: #f8f9fa;
  --table-border: #dee2e6;

  --border-color: #2e2424;
  --border-hover: #070807;
  --border-modal: #070807;
  --shadow-sm: 0 2px 4px rgba(0,0,0,.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,.12);
}

/* ========================= */
/* MODO OSCURO */
/* ========================= */
[data-theme="dark"] {
  --font-family: 'Montserrat', sans-serif;
  
  --bg-main: #070807;
  --bg-card: #111312;
  --bg-modal: #222725;
  --bg-tabla: #0c0b0b;
  --bg-cover: #790404;

  --text-main: #ced4da;
  --text-card: #e9ecef;
  --text-modal: #e9ecef;

  --color-title: #f6fa07;
  --color-info: #4dabf7;
  --color-warning: #ffd43b;
  --color-critical: #ff6b6b;
  --color-success: #51cf66;
  --color-users: #abf5d2;
  --color-enlaces: #ecc814;
  --color-enlaces-hover: #757468;
  --color-candado: #ffffff;

  --input-bg: #070807;
  --input-text: #ffffff;
  --input-border: #24282c;
  --input-focus: #616a77;
  --input-placeholder: #8c7c7c;

  --btn-prim-bg: #0d6efd;
  --btn-prim-text: #000000;
  --btn-prim-border: #000000;
  --btn-prim-hover: #03132c;
  --btn-prim-hover-text: #ffffff;
  --btn-prim-border-hover: #02080e;

  --btn-second-bg: #6c757d;
  --btn-second-text: #000000;
  --btn-second-border: #000000;
  --btn-second-hover: #0d0d0e;
  --btn-second-hover-text: #ffffff;
  --btn-second-border-hover: #270258;

  --btn-success-bg: #198754;
  --btn-success-text: #000000;
  --btn-success-border: #ece0e0;
  --btn-success-hover: #0d0d0e;
  --btn-success-hover-text: #ffffff;
  --btn-success-border-hover: #270258;

  --btn-warning-bg: #ffc107;
  --btn-warning-text: #000000;
  --btn-warning-border: #000000;
  --btn-warning-hover: #0d0d0e;
  --btn-warning-hover-text: #ffffff;
  --btn-warning-border-hover: #270258;

  --btn-danger-bg: #dc3545;
  --btn-danger-text: #000000;
  --btn-danger-border: #000000;
  --btn-danger-hover: #0d0d0e;
  --btn-danger-hover-text: #ffffff;
  --btn-danger-border-hover: #270258;

  --btn-aux-a-bg: #6c757d;
  --btn-aux-a-text: #000000;
  --btn-aux-a-border: #000000;
  --btn-aux-a-hover: #0d0d0e;
  --btn-aux-a-hover-text: #ffffff;
  --btn-aux-a-border-hover: #270258;

  --btn-aux-b-bg: #dc3545;
  --btn-aux-b-text: #000000;
  --btn-aux-b-border: #000000;
  --btn-aux-b-hover: #bb2d3b;
  --btn-aux-b-hover-text: #ffffff;
  --btn-aux-b-border-hover: #270258;

  --table-bg: #0d0f0e;
  --table-header-bg: #161818;
  --table-row-hover: #1a1d1c;
  --table-border: #2a2a2a;

  --border-color: #070807;
  --border-modal: #0a5a0a;
  --border-hover: #dee2e6;
  --shadow-sm: 0 2px 4px rgba(0,0,0,.5);
  --shadow-md: 0 4px 12px rgba(0,0,0,.7);
}