/**
 * @file
 * DTC Theme - Estilos para la vista de nodos (full node).
 */

/* ==========================================================================
   Variables
   ========================================================================== */

:root {
  --dtc-node-bg: #ffffff;
  --dtc-node-border: #e2e8f0;
  --dtc-node-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --dtc-node-radius: 12px;
  --dtc-field-label-color: #64748b;
  --dtc-field-value-color: #1e293b;
  --dtc-field-border: #f1f5f9;
}

/* ==========================================================================
   Contenedor Principal del Nodo
   ========================================================================== */

.node {
  background: var(--dtc-node-bg);
  border-radius: var(--dtc-node-radius);
  box-shadow: var(--dtc-node-shadow);
  border: 1px solid var(--dtc-node-border);
  overflow: hidden;
}

.node--view-mode-full {
  max-width: 900px;
}

/* ==========================================================================
   Header del Nodo (Título)
   ========================================================================== */

.node__header {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--dtc-field-border);
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.node__title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--dtc-field-value-color);
  margin: 0;
  line-height: 1.3;
}

.node__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--dtc-field-label-color);
}

.node__meta-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.node__meta-item i {
  font-size: 1rem;
}

/* ==========================================================================
   Contenido del Nodo
   ========================================================================== */

.node__content {
  padding: 2rem;
}

/* ==========================================================================
   Campos del Nodo
   ========================================================================== */

.field {
  margin-bottom: 1.5rem;
}

.field:last-child {
  margin-bottom: 0;
}

/* Label del campo */
.field__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--dtc-field-label-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

/* Valor del campo */
.field__item,
.field__items {
  font-size: 1rem;
  color: var(--dtc-field-value-color);
  line-height: 1.6;
}

/* Campo inline (label y valor en la misma línea) */
.field--inline {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--dtc-field-border);
}

.field--inline .field__label {
  flex-shrink: 0;
  min-width: 140px;
  margin-bottom: 0;
}

.field--inline .field__item {
  flex: 1;
}

/* ==========================================================================
   Grupo de Campos (Fieldset/Details)
   ========================================================================== */

.field-group,
.node__section {
  background: #f8fafc;
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--dtc-field-border);
}

.field-group__title,
.node__section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--dtc-field-value-color);
  margin: 0 0 1rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.field-group__title i,
.node__section-title i {
  color: #6366f1;
}

/* ==========================================================================
   Campos específicos por tipo
   ========================================================================== */

/* Campo de texto largo / Body */
.field--name-body .field__item,
.field--type-text-long .field__item,
.field--type-text-with-summary .field__item {
  line-height: 1.75;
}

.field--name-body .field__item p,
.field--type-text-long .field__item p {
  margin-bottom: 1rem;
}

.field--name-body .field__item p:last-child,
.field--type-text-long .field__item p:last-child {
  margin-bottom: 0;
}

/* Campo de imagen */
.field--type-image {
  margin-bottom: 1.5rem;
}

.field--type-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Campo de archivo */
.field--type-file .file {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: #f1f5f9;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}

.field--type-file .file a {
  color: #6366f1;
  font-weight: 500;
  text-decoration: none;
}

.field--type-file .file a:hover {
  text-decoration: underline;
}

/* Campo de referencia (entidad) */
.field--type-entity-reference .field__item {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: #e0e7ff;
  color: #4338ca;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

.field--type-entity-reference .field__item a {
  color: inherit;
  text-decoration: none;
}

.field--type-entity-reference .field__item a:hover {
  text-decoration: underline;
}

/* Campo de fecha */
.field--type-datetime .field__item,
.field--type-daterange .field__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: #fef3c7;
  color: #92400e;
  border-radius: 6px;
  font-weight: 500;
}

/* Campo booleano */
.field--type-boolean .field__item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
}

.field--type-boolean .field__item--true {
  background: #dcfce7;
  color: #166534;
}

.field--type-boolean .field__item--false {
  background: #fee2e2;
  color: #991b1b;
}

/* Campo de email */
.field--type-email .field__item a {
  color: #6366f1;
  text-decoration: none;
  font-weight: 500;
}

.field--type-email .field__item a:hover {
  text-decoration: underline;
}

/* Campo de teléfono */
.field--type-telephone .field__item a {
  color: #6366f1;
  text-decoration: none;
  font-weight: 500;
}

/* Campo de link */
.field--type-link .field__item a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: #6366f1;
  text-decoration: none;
  font-weight: 500;
  padding: 0.5rem 1rem;
  background: #f0f4ff;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.field--type-link .field__item a:hover {
  background: #e0e7ff;
}

/* Campo de lista (select) */
.field--type-list-string .field__item,
.field--type-list-integer .field__item {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  background: #f1f5f9;
  color: #475569;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
}

/* ==========================================================================
   Estados / Badges
   ========================================================================== */

.node__status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8125rem;
  font-weight: 600;
}

.node__status-badge--active,
.node__status-badge--published {
  background: #dcfce7;
  color: #166534;
}

.node__status-badge--inactive,
.node__status-badge--unpublished {
  background: #fee2e2;
  color: #991b1b;
}

.node__status-badge--pending {
  background: #fef3c7;
  color: #92400e;
}

/* ==========================================================================
   Grid de campos (2 columnas)
   ========================================================================== */

.fields-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.fields-grid .field {
  margin-bottom: 0;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid var(--dtc-field-border);
}

@media (max-width: 768px) {
  .fields-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Tabla de campos
   ========================================================================== */

.fields-table {
  width: 100%;
  border-collapse: collapse;
}

.fields-table tr {
  border-bottom: 1px solid var(--dtc-field-border);
}

.fields-table tr:last-child {
  border-bottom: none;
}

.fields-table th {
  text-align: left;
  padding: 0.875rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--dtc-field-label-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: 180px;
  vertical-align: top;
  background: #f8fafc;
}

.fields-table td {
  padding: 0.875rem 1rem;
  font-size: 1rem;
  color: var(--dtc-field-value-color);
}

/* ==========================================================================
   Acciones del nodo
   ========================================================================== */

.node__actions {
  display: flex;
  gap: 0.75rem;
  padding: 1.5rem 2rem;
  border-top: 1px solid var(--dtc-field-border);
  background: #f8fafc;
}

.node__action-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.node__action-link--edit {
  background: #6366f1;
  color: white;
}

.node__action-link--edit:hover {
  background: #4f46e5;
}

.node__action-link--delete {
  background: #fee2e2;
  color: #dc2626;
}

.node__action-link--delete:hover {
  background: #fecaca;
}

.node__action-link--back {
  background: #f1f5f9;
  color: #475569;
}

.node__action-link--back:hover {
  background: #e2e8f0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
  .node__header {
    padding: 1.25rem 1.5rem;
  }

  .node__title {
    font-size: 1.5rem;
  }

  .node__content {
    padding: 1.5rem;
  }

  .field--inline {
    flex-direction: column;
    gap: 0.25rem;
  }

  .field--inline .field__label {
    min-width: auto;
  }

  .field-group,
  .node__section {
    padding: 1rem;
  }

  .fields-table th {
    width: 120px;
    padding: 0.75rem;
  }

  .fields-table td {
    padding: 0.75rem;
  }

  .node__actions {
    padding: 1.25rem 1.5rem;
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   Drupal Admin Tabs en Node
   ========================================================================== */

.tabs {
  margin-bottom: 1.5rem;
}

.tabs__tab {
  display: inline-flex;
  align-items: center;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #64748b;
  text-decoration: none;
  border: 1px solid #e2e8f0;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: #f8fafc;
  margin-right: 0.25rem;
  transition: all 0.2s ease;
}

.tabs__tab:hover {
  background: #f1f5f9;
  color: #1e293b;
}

.tabs__tab.is-active {
  background: white;
  color: #6366f1;
  border-color: #e2e8f0;
  position: relative;
}

.tabs__tab.is-active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: white;
}