/* Reset básico */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Tema adaptativo con CSS moderno (sin media queries) */
:root {
  color-scheme: light dark;
  --bg: light-dark(#ffffff, #0f1115);
  --text: light-dark(#333333, #e6e6e6);
  --muted: light-dark(#666666, #9aa0a6);
  --accent: light-dark(#007acc, #4da3ff);
  --accent-hover: light-dark(#005999, #3d8bdb);
  --card-bg: light-dark(#ffffff, #16181d);
  --card-border: light-dark(#eeeeee, #26282e);
  --divider: light-dark(#eeeeee, #26282e);
  --shadow: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
  --field-border: light-dark(#dddddd, #3a3f47);
  --mark-bg: light-dark(rgba(0, 122, 204, 0.08), rgba(77, 163, 255, 0.14));
}

/* Mejoras para etiquetas HTML5 existentes */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  transition: color 0.2s ease, background 0.2s ease;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0.5em;
  font-weight: 600;
}

p {
  margin-bottom: 1em;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  background: var(--accent);
  color: white;
  border: none;
  padding: 0.5em 1em;
  border-radius: 2px;
  cursor: pointer;
  font-size: 1em;
}

button:hover {
  background: var(--accent-hover);
}

input,
textarea,
select {
  border: 1px solid var(--field-border);
  padding: 0.5em;
  border-radius: 4px;
  font-size: 1em;
  color: var(--text);
  background: var(--card-bg);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
}

mark {
  background: var(--mark-bg);
  padding: 0.2em;
  color: var(--accent);
  font-style: italic;
}

img {
  max-width: 100%;
  height: auto;
}

/* Etiquetas personalizadas minimalistas */

/* <center> - Centrar contenido */
center {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* <left> - Alinear a la izquierda */
left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
}

/* <right> - Alinear a la derecha */
right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: right;
}

/* <between> - Espacio entre elementos */
between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* <around> - Espacio alrededor de elementos */
around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

/* <stack> - Apilar elementos verticalmente */
stack {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

/* <row> - Elementos en fila */
row {
  display: flex;
  flex-direction: row;
  gap: 1em;
}

/* <card> - Tarjeta simple */
card {
  display: block;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 2px;
  padding: 1.5em;
  box-shadow: 0 2px 4px var(--shadow);
}

/* Vista previa de proyecto: imagen o tile de inicial */
.preview {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  margin-bottom: 1em;
  border-radius: 2px;
  background: var(--mark-bg);
  color: var(--accent);
  font-size: 2em;
  font-weight: 600;
  overflow: hidden;
}

.preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Proyectos destacados */
card.destacado {
  border-color: var(--accent);
  box-shadow: 0 2px 4px var(--shadow), 0 0 0 1px var(--accent);
}

.badge {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0.05em 0.45em;
  border: 1px solid var(--accent);
  border-radius: 2px;
  color: var(--accent);
  background: var(--mark-bg);
  font-size: 0.7em;
  font-weight: 500;
  vertical-align: middle;
}

card .chips {
  line-height: 2;
}

/* <grid> - Grid simple */
grid {
  display: grid;
  gap: 1em;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* <container> - Contenedor con max-width */
container {
  display: block;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1em;
}

/* <spacer> - Espaciador */
spacer {
  display: block;
  height: 1em;
}

/* <divider> - Línea divisoria */
divider {
  display: block;
  height: 1px;
  background: var(--divider);
  margin: 1em 0;
}

/* Clases utilitarias minimalistas */
.text-sm {
  font-size: 0.875em;
}
.text-lg {
  font-size: 1.25em;
}
.text-xl {
  font-size: 1.5em;
}
.bold {
  font-weight: 600;
}
.muted {
  color: var(--muted);
}
.primary {
  color: var(--accent);
}
.success {
  color: #28a745;
}
.warning {
  color: #ffc107;
}
.danger {
  color: #dc3545;
}
.mb {
  margin-bottom: 1em;
}
.mt {
  margin-top: 1em;
}
.p {
  padding: 1em;
}
.rounded {
  border-radius: 8px;
}

.shadow {
  box-shadow: 0 2px 4px var(--shadow);
}

.hidden {
  display: none;
}

.visible {
  display: block;
}